Initial commit with essential code files only
This commit is contained in:
135
components/templates/about.js
Normal file
135
components/templates/about.js
Normal 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
217
components/templates/contact.js
Normal 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
112
components/templates/footer.js
Normal 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
81
components/templates/hero.js
Normal 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
37
components/templates/location.js
Normal 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
26
components/templates/main.js
Normal 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
130
components/templates/navigation.js
Normal 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
131
components/templates/second.js
Normal 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">
|
||||
Ponad 4000 zrealizowanych projektów
|
||||
<br />
|
||||
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
166
components/templates/services.js
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user