Update gallery to bento grid, add real reviews, update phone numbers and locations

2026-07-15 13:51:22 +03:00
parent d4bcbb0cc3
commit 7a874ab11d
43 changed files with 1234 additions and 790 deletions
@@ -0,0 +1,61 @@
+import Link from "next/link";
+import HeroVideo from "@/components/HeroVideo";
+
+interface HeroSectionProps {
+  heroData: {
+    location: string;
+    welcome: string;
+    title: string;
+    subtitle: string;
+    exploreActivities: string;
+    scroll: string;
+  };
+  lang: string;
+}
+
+export default function HeroSection({ heroData, lang }: HeroSectionProps) {
+  return (
+    <section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
+      <HeroVideo />
+
+      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
+        <div className="animate-fade-up delay-100">
+          <span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
+            {heroData.location}
+          </span>
+        </div>
+
+        <div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
+          <span
+            className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
+            style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
+          >
+            {heroData.welcome}
+          </span>
+          <h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
+            {heroData.title}
+          </h1>
+        </div>
+
+        <p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
+          {heroData.subtitle}
+        </p>
+
+        <div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Link
+            href={`/${lang}/aktiviteler`}
+            className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
+          >
+            {heroData.exploreActivities}
+          </Link>
+        </div>
+      </div>
+
+      {/* Scroll indicator */}
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
+        <span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">{heroData.scroll}</span>
+        <div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
+      </div>
+    </section>
+  );
+}