Initial commit with essential code files only

2025-07-18 16:13:09 +02:00
commit 8e9b0ef8a8
33 changed files with 1703 additions and 0 deletions
--- a/components/templates/second.js
+++ b/components/templates/second.js
@@ -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">
+					&nbsp; Ponad 4000 zrealizowanych projektów
+					<br />
+					&nbsp; 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>
+		</>
+	);
+}