94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import hero1 from "@/public/hero1.png";
|
|
import hero2 from "@/public/hero2.png";
|
|
import hero3 from "@/public/hero3.png";
|
|
|
|
const heroImages = [
|
|
hero1,
|
|
hero2,
|
|
hero3
|
|
];
|
|
|
|
function Hero() {
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
const nextSlide = useCallback(() => {
|
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % heroImages.length);
|
|
}, []);
|
|
|
|
const prevSlide = () => {
|
|
setCurrentIndex((prevIndex) => (prevIndex - 1 + heroImages.length) % 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>
|
|
|
|
<div className="absolute inset-0 z-10">
|
|
<button
|
|
onClick={prevSlide}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white transition hover:bg-black/50"
|
|
aria-label="Előző dia"
|
|
>
|
|
<ChevronLeft size={32} />
|
|
</button>
|
|
<button
|
|
onClick={nextSlide}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white transition hover:bg-black/50"
|
|
aria-label="Következő dia"
|
|
>
|
|
<ChevronRight size={32} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="absolute bottom-8 left-1/2 z-10 flex -translate-x-1/2 space-x-3">
|
|
{heroImages.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrentIndex(index)}
|
|
className={`h-3 w-3 rounded-full transition-colors ${currentIndex === index ? 'bg-amber-400' : 'bg-white/50 hover:bg-white/75'
|
|
}`}
|
|
aria-label={`Ugrás a(z) ${index + 1}. diára`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Hero;
|