82 lines
3.2 KiB
JavaScript
82 lines
3.2 KiB
JavaScript
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>
|
|
);
|
|
}
|