132 lines
3.4 KiB
JavaScript
132 lines
3.4 KiB
JavaScript
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">
|
|
Ponad 4000 zrealizowanych projektów
|
|
<br />
|
|
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>
|
|
</>
|
|
);
|
|
}
|