58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import hero1 from "@/public/hero1.png";
|
|
import hero2 from "@/public/hero2.png";
|
|
import hero3 from "@/public/hero3.png";
|
|
|
|
const heroImages = [
|
|
hero1,
|
|
hero2,
|
|
hero3
|
|
];
|
|
|
|
export default function Hero() {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
const nextSlide = useCallback(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % heroImages.length);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
nextSlide();
|
|
}, 5000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [nextSlide]);
|
|
|
|
return (
|
|
<section className="relative h-screen w-full overflow-hidden">
|
|
{heroImages.map((src, index) => (
|
|
<div
|
|
key={index}
|
|
className={`absolute inset-0 h-full w-full bg-cover bg-center transition-opacity duration-1000 ease-in-out ${index === currentIndex ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
style={{ backgroundImage: `url('${src}')` }}
|
|
>
|
|
{index === currentIndex && (
|
|
<div className="h-full w-full animate-zoom" />
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
|
|
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center text-white">
|
|
<h1 className="mb-4 text-6xl font-bold tracking-tight">
|
|
Magyarország szíve, tálalva egy tányéron
|
|
</h1>
|
|
<p className="mb-8 max-w-2xl text-xl text-slate-300">
|
|
Éld át a hagyományos magyar konyha gazdag, autentikus ízeit egy modern, elegáns környezetben.
|
|
</p>
|
|
<a href="#foglalas" className="rounded-md bg-amber-500 px-8 py-3 text-lg font-semibold text-slate-900 transition hover:bg-amber-400">
|
|
Asztalfoglalás
|
|
</a>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|