136 lines
6.1 KiB
JavaScript
136 lines
6.1 KiB
JavaScript
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>
|
|
);
|
|
}
|