Admin/static-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with essential code files only

Browse Source
This commit is contained in:
RKWojs
2025-07-18 16:13:09 +02:00
commit 8e9b0ef8a8
33 changed files with 1703 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
components/templates/about.js Normal file
View File

@@ -0,0 +1,135 @@
export default function About() {
return (
<section id="onas" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center">
{/* Content */}
<div>
<h2 className="text-4xl font-bold text-gray-900 mb-6">
O firmie Wastpol
</h2>
<div className="space-y-6 text-gray-600">
<p className="text-lg leading-relaxed">
Jesteśmy firmą oferującą kompleksowe usługi elektryczne z ponad 20-letnim
doświadczeniem. Realizujemy pełen zakres prac - od projektowania przez
wykonawstwo po nadzory i pomiary instalacji elektrycznych.
</p>
<p className="text-lg leading-relaxed">
Przez lata naszej działalności zaprojektowaliśmy i zrealizowaliśmy ponad 4000
projektów dla klientów w całej Polsce. Nasze doświadczenie obejmuje zarówno
instalacje domowe, jak i złożone projekty przemysłowe i infrastrukturalne.
</p>
</div>
{/* Key Features */}
<div className="mt-10 grid md:grid-cols-2 gap-6">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900">Doświadczenie</h4>
<p className="text-gray-600">Ponad 20 lat na rynku</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900">Kompleksowość</h4>
<p className="text-gray-600">Od projektu do realizacji</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900">Terminowość</h4>
<p className="text-gray-600">Dotrzymujemy ustalonych terminów</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900">Zespół</h4>
<p className="text-gray-600">Wykwalifikowani specjaliści</p>
</div>
</div>
</div>
{/* CTA */}
<div className="mt-10">
<button
onClick={() => {
const element = document.getElementById("kontakt");
if (element) element.scrollIntoView({ behavior: "smooth" });
}}
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
>
Skontaktuj się z nami
</button>
</div>
</div>
{/* Stats & Image */}
<div className="space-y-8">
{/* Main Image */}
<div className="relative rounded-2xl overflow-hidden shadow-xl">
<img
src="/images/0.jpg"
alt="Wastpol - realizacje projektów"
className="w-full h-96 object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
<div className="absolute bottom-6 left-6 text-white">
<h3 className="text-xl font-semibold">Kompleksowe realizacje</h3>
<p className="text-blue-200">Projektowanie i wykonawstwo od 2002 roku</p>
</div>
</div>
{/* Achievement Stats */}
<div className="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 text-white">
<h3 className="text-2xl font-bold mb-6 text-center">Nasze osiągnięcia</h3>
<div className="grid grid-cols-2 gap-6">
<div className="text-center">
<div className="text-3xl font-bold text-blue-200 mb-2">4000+</div>
<div className="text-sm text-blue-100">Zrealizowanych projektów</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-blue-200 mb-2">20+</div>
<div className="text-sm text-blue-100">Lat doświadczenia</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-blue-200 mb-2">500+</div>
<div className="text-sm text-blue-100">Zadowolonych klientów</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-blue-200 mb-2">100%</div>
<div className="text-sm text-blue-100">Terminowych realizacji</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

217
components/templates/contact.js Normal file
View File

@@ -0,0 +1,217 @@
import { useState } from "react";
export default function Contact() {
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
message: ""
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
// Here you would typically send the form data to your backend
console.log("Form submitted:", formData);
alert("Dziękujemy za wiadomość! Skontaktujemy się z Państwem wkrótce.");
setFormData({ name: "", email: "", phone: "", message: "" });
};
return (
<section id="kontakt" className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">
Skontaktuj się z nami
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Masz pytania o nasze usługi? Potrzebujesz wyceny?
Skontaktuj się z nami - chętnie pomożemy!
</p>
</div>
<div className="grid lg:grid-cols-2 gap-16">
{/* Contact Information */}
<div>
<div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
<h3 className="text-2xl font-bold text-gray-900 mb-6">
Nasze Biuro
</h3>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-1">Adres</h4>
<p className="text-gray-600">
Aleje Wolności 6<br />
II piętro<br />
33-300 Nowy Sącz
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-1">Telefon</h4>
<p className="text-gray-600 space-y-1">
<a href="tel:504066513" className="block hover:text-blue-600 transition-colors">
504 066 513
</a>
<a href="tel:18442022044" className="block hover:text-blue-600 transition-colors">
18 442 02 44
</a>
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-1">Email</h4>
<a
href="mailto:biuro@wastpol.pl"
className="text-gray-600 hover:text-blue-600 transition-colors"
>
biuro@wastpol.pl
</a>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-1">Godziny pracy</h4>
<p className="text-gray-600">
Pon - Pt: 8:00 - 16:00<br />
Sob - Nd: Zamknięte
</p>
</div>
</div>
</div>
</div>
{/* Map */}
<div className="bg-white rounded-2xl shadow-xl overflow-hidden">
<img
src="/map.png"
alt="Mapa lokalizacji Wastpol"
className="w-full h-64 object-cover"
/>
</div>
</div>
{/* Contact Form */}
<div className="bg-white rounded-2xl shadow-xl p-8">
<h3 className="text-2xl font-bold text-gray-900 mb-6">
Wyślij wiadomość
</h3>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
Imię i nazwisko *
</label>
<input
type="text"
id="name"
name="name"
required
value={formData.name}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Wpisz swoje imię i nazwisko"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
Email *
</label>
<input
type="email"
id="email"
name="email"
required
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="twoj@email.com"
/>
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
Telefon
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="123 456 789"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
Wiadomość *
</label>
<textarea
id="message"
name="message"
required
rows={6}
value={formData.message}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
placeholder="Opisz swoje potrzeby lub zadaj pytanie..."
></textarea>
</div>
<button
type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
>
Wyślij wiadomość
</button>
</form>
<div className="mt-6 pt-6 border-t border-gray-200">
<p className="text-sm text-gray-500 text-center">
* Pola wymagane. Twoje dane są bezpieczne i nie będą przekazywane osobom trzecim.
</p>
</div>
</div>
</div>
</div>
</section>
);
}

112
components/templates/footer.js Normal file
View File

@@ -0,0 +1,112 @@
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-gray-900 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="grid md:grid-cols-4 gap-8">
{/* Company Info */}
<div className="md:col-span-2">
<img
src="./logo.png"
alt="Wastpol Logo"
className="h-12 mb-6 brightness-0 invert"
/>
<p className="text-gray-300 mb-6 leading-relaxed">
Wastpol to kompleksowa firma elektryczna z ponad 20-letnim doświadczeniem
w projektowaniu i realizacji instalacji elektrycznych. Zaufało nam już ponad 4000 klientów.
</p>
<div className="flex space-x-4">
<a
href="tel:18442022044"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition-colors"
>
Zadzwoń teraz
</a>
<a
href="mailto:biuro@wastpol.pl"
className="border border-gray-600 hover:border-gray-500 text-gray-300 hover:text-white px-6 py-2 rounded-lg font-semibold transition-colors"
>
Napisz email
</a>
</div>
</div>
{/* Services */}
<div>
<h4 className="text-lg font-semibold mb-6">Nasze Usługi</h4>
<ul className="space-y-3 text-gray-300">
<li>
<a href="#uslugi" className="hover:text-white transition-colors">
Projektowanie i Realizacja Sieci
</a>
</li>
<li>
<a href="#uslugi" className="hover:text-white transition-colors">
Instalacje Elektryczne
</a>
</li>
<li>
<a href="#uslugi" className="hover:text-white transition-colors">
Nadzory Inwestorskie
</a>
</li>
<li>
<a href="#uslugi" className="hover:text-white transition-colors">
Pomiary i Ekspertyzy
</a>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h4 className="text-lg font-semibold mb-6">Kontakt</h4>
<div className="space-y-3 text-gray-300">
<div>
<p className="font-medium text-white">Adres:</p>
<p>Aleje Wolności 6, II piętro</p>
<p>33-300 Nowy Sącz</p>
</div>
<div>
<p className="font-medium text-white">Telefon:</p>
<a href="tel:504066513" className="block hover:text-white transition-colors">
504 066 513
</a>
<a href="tel:18442022044" className="block hover:text-white transition-colors">
18 442 02 44
</a>
</div>
<div>
<p className="font-medium text-white">Email:</p>
<a href="mailto:biuro@wastpol.pl" className="hover:text-white transition-colors">
biuro@wastpol.pl
</a>
</div>
</div>
</div>
</div>
{/* Bottom Bar */}
<div className="border-t border-gray-800 mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-400 text-sm">
© {currentYear} Wastpol. Wszystkie prawa zastrzeżone.
</p>
<div className="flex space-x-6 mt-4 md:mt-0">
<a href="/rodo" className="text-gray-400 hover:text-white text-sm transition-colors">
Polityka Prywatności
</a>
<a href="/rodo" className="text-gray-400 hover:text-white text-sm transition-colors">
RODO
</a>
<a href="#kontakt" className="text-gray-400 hover:text-white text-sm transition-colors">
Kontakt
</a>
</div>
</div>
</div>
</div>
</footer>
);
}

81
components/templates/hero.js Normal file
View File

@@ -0,0 +1,81 @@
export default function Hero() {
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
return (
<div className="relative h-screen flex items-center justify-center overflow-hidden">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: "url('./main.jpg')" }}
>
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
</div>
{/* Content */}
<div className="relative z-10 text-center text-white max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
Projektowanie
<span className="block text-blue-400">i Realizacja</span>
<span className="block text-2xl md:text-4xl font-medium mt-2">Instalacji Elektrycznych</span>
</h1>
<p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-3xl mx-auto">
Kompleksowe usługi elektryczne - od projektu po pełną realizację.
Ponad 20 lat doświadczenia, zaufało nam już ponad 4000 klientów.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<button
onClick={() => scrollToSection("uslugi")}
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"
>
Nasze Usługi
</button>
<button
onClick={() => scrollToSection("kontakt")}
className="border-2 border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300"
>
Skontaktuj się
</button>
</div>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
<div className="text-3xl font-bold text-blue-400">20+</div>
<div className="text-sm text-gray-300">Lat doświadczenia</div>
</div>
<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
<div className="text-3xl font-bold text-blue-400">4000+</div>
<div className="text-sm text-gray-300">Projektów</div>
</div>
<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
<div className="text-3xl font-bold text-blue-400">100%</div>
<div className="text-sm text-gray-300">Zadowolenia</div>
</div>
<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
<div className="text-3xl font-bold text-blue-400">24/7</div>
<div className="text-sm text-gray-300">Wsparcie</div>
</div>
</div>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
<button
onClick={() => scrollToSection("uslugi")}
className="text-white hover:text-blue-400 transition-colors duration-300"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</button>
</div>
</div>
);
}

37
components/templates/location.js Normal file
View File

@@ -0,0 +1,37 @@
export default function Contact() {
return (
<div className="flex py-12" id="kontakt">
<div className="w-3/5">
<img src="/map.png" className="w-fit"></img>
</div>
<div className="w-3/5 px-8 my-auto text-right">
<h2 className="text-4xl py-4">Nasze Biuro</h2>
<ul className="list-none">
<p className="text-2xl py-2">Aleje Wolności 6</p>
<p className="text-2xl py-2">II piętro</p>
<p className="text-2xl py-2">33-300 Nowy Sącz</p>
</ul>
<br></br>
<h3 className="text-4xl py-4">Kontakt</h3>
<ul className="list-none">
<li className="text-2xl py-2">
<a href="tel:504066513" >
504 066 513
</a>
</li>
<li className="text-2xl py-2">
<a href="tel:18 442 02 44">
18 442 02 44
</a>
</li>
<li className="text-2xl py-2">
<a href="mailto:biuro@wastpol.pl">
biuro@wastpol.pl
</a>
</li>
</ul>
</div>
<div className="grow bg-slate-600 w-48 opacity-40"></div>
</div>
);
}

26
components/templates/main.js Normal file
View File

@@ -0,0 +1,26 @@
export default function Main() {
return (
<div className="h-screen w-full bg-main bg-cover bg-center text-white mb-12">
<div className="flex justify-between px-36 py-8 items-center">
<img src="./logo.png" alt="logo" className="h-16"></img>
<div className="flex items-center">
<a href="#onas">
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
O nas
</h2>
</a>
<a href="#kontakt">
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
Kontakt
</h2>
</a>
<a href="tel:184420244">
<h2 className="text-2xl ml-8 bg-gray-900 bg-opacity-20 px-3 py-2 hover:bg-opacity-10 border-white border-opacity-0 border-b-2 hover:border-opacity-100 transition-all">
18 442 02 44
</h2>
</a>
</div>
</div>
</div>
);
}

130
components/templates/navigation.js Normal file
View File

@@ -0,0 +1,130 @@
import { useState, useEffect } from "react";
export default function Navigation() {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 10);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
setIsMobileMenuOpen(false);
};
return (
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
isScrolled ? "bg-white shadow-lg" : "bg-transparent"
}`}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
{/* Logo */}
<div className="flex-shrink-0">
<img
src="./logo.png"
alt="Wastpol Logo"
className={`h-12 transition-all duration-300 ${
isScrolled ? "filter-none" : "brightness-0 invert"
}`}
/>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-8">
<button
onClick={() => scrollToSection("uslugi")}
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
isScrolled ? "text-gray-700" : "text-white"
}`}
>
Usługi
</button>
<button
onClick={() => scrollToSection("onas")}
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
isScrolled ? "text-gray-700" : "text-white"
}`}
>
O nas
</button>
<button
onClick={() => scrollToSection("kontakt")}
className={`font-medium transition-colors duration-300 hover:text-blue-600 ${
isScrolled ? "text-gray-700" : "text-white"
}`}
>
Kontakt
</button>
<a
href="tel:18442022044"
className={`font-semibold px-4 py-2 rounded-md transition-all duration-300 ${
isScrolled
? "bg-blue-600 text-white hover:bg-blue-700"
: "bg-white text-blue-600 hover:bg-gray-100"
}`}
>
18 442 02 44
</a>
</div>
{/* Mobile menu button */}
<div className="md:hidden">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className={`inline-flex items-center justify-center p-2 rounded-md transition-colors duration-300 ${
isScrolled ? "text-gray-700 hover:bg-gray-100" : "text-white hover:bg-white hover:bg-opacity-10"
}`}
>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
{isMobileMenuOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div>
</div>
{/* Mobile menu */}
{isMobileMenuOpen && (
<div className="md:hidden bg-white shadow-lg rounded-lg mt-2 py-2">
<button
onClick={() => scrollToSection("uslugi")}
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
>
Usługi
</button>
<button
onClick={() => scrollToSection("onas")}
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
>
O nas
</button>
<button
onClick={() => scrollToSection("kontakt")}
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
>
Kontakt
</button>
<a
href="tel:18442022044"
className="block px-4 py-2 text-blue-600 font-semibold hover:bg-gray-100"
>
18 442 02 44
</a>
</div>
)}
</div>
</nav>
);
}

131
components/templates/second.js Normal file
View File

@@ -0,0 +1,131 @@
import { useState, useEffect } from "react";
export default function Second() {
const [photo, setPhoto] = useState(0);
useEffect(() => {
document.getElementById("jobPhoto");
jobPhoto.style.opacity = 0;
setTimeout(() => {
jobPhoto.src = `/images/${photo}.jpg`;
setTimeout(() => {
jobPhoto.style.opacity = 1;
}, 100);
}, 150);
console.log(jobPhoto);
}, [photo]);
return (
<>
<div className="reative px-8 py-12 h-[26rem]" id="onas">
<img
src={`/images/0.jpg`}
alt="Prąd"
className="absolute right-0 object-cover h-80 w-2/3 transition-all duration-700 opacity-25"
id="jobPhoto"
></img>
<h2 className="absolute text-6xl border-l-4 border-red-500">
&nbsp; Ponad 4000 zrealizowanych projektów
<br />
&nbsp; 20 lat doświadczenia
</h2>
</div>
<div className="list-none flex px-8 py-12 justify-around text-3xl">
<li
onMouseEnter={() => {
setPhoto(1);
}}
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
>
<svg
className="w-16 h-16 m-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
<h3 className="">Sieci</h3>
</li>
<li
onMouseEnter={() => {
setPhoto(2);
}}
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
>
<svg
className="w-16 h-16 m-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
/>
</svg>
<h3>Instalacje</h3>
</li>
<li
onMouseEnter={() => {
setPhoto(3);
}}
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
>
<svg
className="w-16 h-16 m-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
<h3>Nadzory</h3>
</li>
<li
onMouseEnter={() => {
setPhoto(4);
}}
className="p-8 transition-all duration-700 hover:text-slate-500 border-b-2 border-white hover:border-red-500"
>
<svg
className="w-16 h-16 m-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
<h3>Pomiary</h3>
</li>
</div>
</>
);
}

166
components/templates/services.js Normal file
View File

@@ -0,0 +1,166 @@
import { useState } from "react";
export default function Services() {
const [activeService, setActiveService] = useState(0);
const services = [
{
id: 0,
title: "Projektowanie i Realizacja Sieci",
description: "Kompleksowe usługi od projektu po wykonanie sieci elektroenergetycznych niskiego i średniego napięcia",
icon: (
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
),
image: "/images/1.jpg",
features: [
"Projektowanie sieci napowietrznych i kablowych",
"Wykonawstwo sieci elektrycznych",
"Budowa stacji transformatorowych",
"Realizacja przyłączy elektroenergetycznych"
]
},
{
id: 1,
title: "Instalacje Elektryczne",
description: "Pełen zakres usług - projektowanie i montaż instalacji elektrycznych w obiektach mieszkalnych i przemysłowych",
icon: (
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
),
image: "/images/2.jpg",
features: [
"Projektowanie i montaż oświetlenia",
"Instalacje gniazd wtykowych",
"Wykonanie systemów alarmowych",
"Realizacja automatyki budynkowej"
]
},
{
id: 2,
title: "Nadzory Inwestorskie",
description: "Profesjonalny nadzór nad realizacją inwestycji elektrycznych na każdym etapie wykonania",
icon: (
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
),
image: "/images/3.jpg",
features: [
"Nadzór autorski projektów",
"Nadzór inwestorski realizacji",
"Kontrola jakości wykonania",
"Odbiory techniczne i rozruch"
]
},
{
id: 3,
title: "Pomiary i Ekspertyzy",
description: "Kompleksowe pomiary elektryczne, ekspertyzy techniczne i certyfikacja instalacji",
icon: (
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
),
image: "/images/4.jpg",
features: [
"Pomiary rezystancji uziemień",
"Pomiary ochronne instalacji",
"Ekspertyzy i audyty techniczne",
"Protokoły pomiarowe i certyfikaty"
]
}
];
return (
<section id="uslugi" className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">
Nasze Usługi
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Oferujemy kompleksowe usługi elektryczne - od projektowania przez realizację
po nadzory i pomiary. Każdy projekt wykonujemy z najwyższą starannością od A do Z.
</p>
</div>
<div className="grid lg:grid-cols-2 gap-12 items-center">
{/* Services List */}
<div className="space-y-6">
{services.map((service, index) => (
<div
key={service.id}
className={`p-6 rounded-xl cursor-pointer transition-all duration-300 ${
activeService === index
? "bg-blue-600 text-white shadow-xl transform scale-105"
: "bg-white text-gray-700 hover:bg-gray-100"
}`}
onClick={() => setActiveService(index)}
>
<div className="flex items-start space-x-4">
<div className={`flex-shrink-0 ${
activeService === index ? "text-blue-200" : "text-blue-600"
}`}>
{service.icon}
</div>
<div className="flex-1">
<h3 className="text-xl font-semibold mb-2">
{service.title}
</h3>
<p className={`text-sm ${
activeService === index ? "text-blue-100" : "text-gray-600"
}`}>
{service.description}
</p>
</div>
</div>
</div>
))}
</div>
{/* Service Details */}
<div className="bg-white rounded-2xl shadow-xl overflow-hidden">
<div className="relative h-64">
<img
src={services[activeService].image}
alt={services[activeService].title}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
<div className="absolute bottom-6 left-6 text-white">
<h3 className="text-2xl font-bold mb-2">
{services[activeService].title}
</h3>
</div>
</div>
<div className="p-8">
<p className="text-gray-600 mb-6">
{services[activeService].description}
</p>
<h4 className="font-semibold text-gray-900 mb-4">
Zakres usług:
</h4>
<ul className="space-y-2">
{services[activeService].features.map((feature, index) => (
<li key={index} className="flex items-center text-gray-600">
<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
{feature}
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</section>
);
}