Initial commit with essential code files only

components/templates/services.js

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