init

2025-10-16 10:45:58 +02:00
commit d3b4bb0c3a
33 changed files with 1954 additions and 0 deletions
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -0,0 +1,90 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const heroImages = [
+  'https://images.unsplash.com/photo-1556742393-d75f468bfcb0?q=80&w=2070&auto=format&fit=crop',
+  'https://images.unsplash.com/photo-1552566626-52f8b828add9?q=80&w=2070&auto=format&fit=crop',
+  'https://plus.unsplash.com/premium_photo-1674106347866-8282d8c19f84?q=80&w=2070&auto=format&fit=crop'
+];
+
+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-10 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;