Initial commit with essential code files only

components/templates/hero.js

@@ -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>
+	);
+}