Merge version_4_1782101246563 into main

Merge version_4_1782101246563 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #050505;
+  --card: #111111;
+  --foreground: #f8fafc;
+  --primary-cta: #22c55e;
+  --primary-cta-text: #050505;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f8fafc;
+  --accent: #94a3b8;
+  --background-accent: #0f172a;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -1,298 +1,41 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
-import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import ProductsSection from './HomePage/sections/Products';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import MetricsSection from './HomePage/sections/Metrics';
+import PricingSection from './HomePage/sections/Pricing';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import HeroCinematicSection from './HomePage/sections/HeroCinematic';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardBrand
-      brand="GARDAS North Cyprus"
-      description="Discover the hidden pulse of North Cyprus. Our platform brings together local secrets, trending events, and AI-powered recommendations in a real-time, immersive digital experience."
-      primaryButton={{
-        text: "Explore Live",
-        href: "#explore",
-      }}
-      secondaryButton={{
-        text: "Ask GARDAS AI",
-        href: "#ai",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/wireframe-terrain_1048-11813.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
+      <HeroCinematicSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTestimonial
-      tag="Our Mission"
-      quote="GARDAS is built to bridge the gap between visitors and the authentic spirit of North Cyprus, simplifying discovery while empowering local businesses."
-      author="Mehmet Yilmaz"
-      role="Founder, GARDAS"
-      imageSrc="http://img.b2bpic.net/free-photo/young-man-model-posing-street_1303-14485.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesDetailedCards
-      tag="How it works"
-      title="Smart Discovery"
-      description="Powerful tools to navigate your island life seamlessly."
-      items={[
-        {
-          title: "Live Pulse",
-          description: "Real-time updates on what's happening across every district.",
-          tags: [
-            "Real-time",
-            "Social",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/black-manager-assesses-reports-tablet_482257-120298.jpg",
-        },
-        {
-          title: "AI Guide",
-          description: "Personalized travel paths generated just for your tastes.",
-          tags: [
-            "AI",
-            "Custom",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg",
-        },
-        {
-          title: "Save & Share",
-          description: "Curate your own lists and share with your social circle.",
-          tags: [
-            "Social",
-            "Personal",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-buttons_23-2149917547.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesRevealCardsBento
-      tag="Discover"
-      title="What we cover"
-      description="Explore the diverse offerings of North Cyprus."
-      items={[
-        {
-          title: "Dining",
-          description: "Best local eats.",
-          href: "#eat",
-          imageSrc: "http://img.b2bpic.net/free-photo/black-pasta-with-parmesan-cheese_23-2148469866.jpg",
-        },
-        {
-          title: "History",
-          description: "Ancient wonders.",
-          href: "#history",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-old-map-with-terrain-locations_23-2151445163.jpg",
-        },
-        {
-          title: "Beaches",
-          description: "Crystal clear waters.",
-          href: "#beach",
-          imageSrc: "http://img.b2bpic.net/free-photo/beach-concept-with-camera_23-2147796174.jpg",
-        },
-        {
-          title: "Events",
-          description: "Nightlife and shows.",
-          href: "#event",
-          imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg",
-        },
-        {
-          title: "Stay",
-          description: "Boutique hotels.",
-          href: "#stay",
-          imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-businessman-relaxes-with-netflix-office_482257-123031.jpg",
-        },
-        {
-          title: "Excursions",
-          description: "Island adventure.",
-          href: "#excursion",
-          imageSrc: "http://img.b2bpic.net/free-photo/summer-composition-with-frame-light-bulbs-seashells_23-2147628384.jpg",
-        },
-        {
-          title: "Yachts",
-          description: "Sea luxury.",
-          href: "#yacht",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-airplane-with-wings-engine_23-2151022269.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeOverlayCards
-      tag="Community"
-      title="Island stories"
-      description="Hear from our happy explorers."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Travel Blogger",
-          company: "GlobalRoam",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-with-backpack-hiking-alone-bakota-area_7502-7810.jpg",
-        },
-        {
-          name: "Michael C.",
-          role: "Local Guide",
-          company: "GirneTours",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-park_1303-28942.jpg",
-        },
-        {
-          name: "Emily R.",
-          role: "Visitor",
-          company: "Self",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg",
-        },
-        {
-          name: "David K.",
-          role: "Business Owner",
-          company: "CafeOlive",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-gray-background_613910-18613.jpg",
-        },
-        {
-          name: "Elena V.",
-          role: "Visitor",
-          company: "TravelCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-shouting-after-failing-win-videogame-while-playing-gaming-pc-close-up-shot_482257-105005.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="Impact"
-      title="Growing Community"
-      description="Numbers behind the island experience."
-      metrics={[
-        {
-          value: "1.2k+",
-          title: "Businesses",
-          description: "Partnering to showcase local quality.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-bokeh-background-with-star-shaped-lights_23-2147815123.jpg",
-        },
-        {
-          value: "27k",
-          title: "Monthly Users",
-          description: "Exploring Cyprus with GARDAS.",
-          imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg",
-        },
-        {
-          value: "89%",
-          title: "Discovery Rate",
-          description: "User satisfaction on recommendations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-design-shallow-depth-field-modern-communication_1048-12682.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingMediaCards
-      tag="Business"
-      title="Partner with GARDAS"
-      description="Showcase your business to the island's most active explorers."
-      plans={[
-        {
-          tag: "Starter",
-          price: "Free",
-          period: "/mo",
-          features: [
-            "Basic listing",
-            "Customer reviews",
-          ],
-          primaryButton: {
-            text: "Start Now",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/device-with-copy-space-table-with-food_23-2150917827.jpg",
-        },
-        {
-          tag: "Pro",
-          price: "€49",
-          period: "/mo",
-          features: [
-            "Featured placement",
-            "Detailed analytics",
-            "Priority support",
-          ],
-          primaryButton: {
-            text: "Go Pro",
-            href: "#",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/entrepreneurs-exchange-ideas-work_482257-90714.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="Help"
-      title="Common Questions"
-      description="Find answers to help you get the most out of our platform."
-      items={[
-        {
-          question: "How does GARDAS AI work?",
-          answer: "Our AI analyzes your preferences and real-time island data to suggest the best spots.",
-        },
-        {
-          question: "Is it free to join?",
-          answer: "Yes, our basic explorer features are free for all visitors.",
-        },
-        {
-          question: "How can I feature my business?",
-          answer: "You can sign up for our Pro plans to get featured placement.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Support"
-      text="Ready to explore? Need help with our platform? Our team is always here for you."
-      primaryButton={{
-        text: "Contact Us",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,22 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTestimonial
+          tag="Our Mission"
+          quote="GARDAS is built to bridge the gap between visitors and the authentic spirit of North Cyprus, simplifying discovery while empowering local businesses."
+          author="Mehmet Yilmaz"
+          role="Founder, GARDAS"
+          imageSrc="http://img.b2bpic.net/free-photo/young-man-model-posing-street_1303-14485.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Support"
+          text="Ready to explore? Need help with our platform? Our team is always here for you."
+          primaryButton={{
+            text: "Contact Us",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Learn More",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="Help"
+          title="Common Questions"
+          description="Find answers to help you get the most out of our platform."
+          items={[
+            {
+              question: "How does GARDAS AI work?",
+              answer: "Our AI analyzes your preferences and real-time island data to suggest the best spots.",
+            },
+            {
+              question: "Is it free to join?",
+              answer: "Yes, our basic explorer features are free for all visitors.",
+            },
+            {
+              question: "How can I feature my business?",
+              answer: "You can sign up for our Pro plans to get featured placement.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,49 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesDetailedCards
+          tag="How it works"
+          title="Smart Discovery"
+          description="Powerful tools to navigate your island life seamlessly."
+          items={[
+            {
+              title: "Live Pulse",
+              description: "Real-time updates on what's happening across every district.",
+              tags: [
+                "Real-time",
+                "Social",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/black-manager-assesses-reports-tablet_482257-120298.jpg",
+            },
+            {
+              title: "AI Guide",
+              description: "Personalized travel paths generated just for your tastes.",
+              tags: [
+                "AI",
+                "Custom",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/technology-network-background-connection-cyber-space-ai-generative_123827-24187.jpg",
+            },
+            {
+              title: "Save & Share",
+              description: "Curate your own lists and share with your social circle.",
+              tags: [
+                "Social",
+                "Personal",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/view-3d-buttons_23-2149917547.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AutoFillText from "@/components/ui/AutoFillText";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+
+const primaryButton = {
+  text: "Explore Live",
+  href: "#explore"
+};
+const secondaryButton = {
+  text: "Ask GARDAS AI",
+  href: "#ai"
+};
+
+type HeroBillboardBrandProps = {
+  brand: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const HeroInline = () => {
+  return (
+    <section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col gap-10 md:gap-12 w-content-width mx-auto">
+        <div className="flex flex-col items-end gap-5">
+          <AutoFillText className="w-full font-semibold" paddingY="">{"GARDAS North Cyprus"}</AutoFillText>
+
+          <TextAnimation
+            text={"Discover the hidden pulse of North Cyprus. Our platform brings together local secrets, trending events, and AI-powered recommendations in a real-time, immersive digital experience."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="w-full md:w-1/2 text-lg md:text-2xl leading-snug text-balance text-right"
+          />
+
+          <div className="flex flex-wrap justify-end gap-3 mt-1 md:mt-2">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+          </div>
+        </div>
+
+        <ScrollReveal variant="slide-up" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
+          <ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/wireframe-terrain_1048-11813.jpg"} className="aspect-4/5 md:aspect-video" />
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/HeroCinematic.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import Button from "@/components/ui/Button";
+
+export default function HeroCinematicSection() {
+  const [scene, setScene] = useState(1);
+
+  useEffect(() => {
+    // Scene 1 -> 2: Logo splits after 2.5 seconds
+    const timer1 = setTimeout(() => setScene(2), 2500);
+    // Scene 2 -> 3: Expressions fade out, Get Access Now appears after 8 seconds
+    const timer2 = setTimeout(() => setScene(3), 8000);
+    
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
+  }, []);
+
+  return (
+    <div data-webild-section="hero-cinematic" id="hero-cinematic" className="relative w-full h-screen min-h-[600px] bg-background flex items-center justify-center overflow-hidden">
+      <AnimatePresence>
+        {scene < 3 && (
+          <motion.div 
+            key="logo-container"
+            exit={{ opacity: 0, scale: 1.1, filter: "blur(20px)" }}
+            transition={{ duration: 1.5, ease: "easeInOut" }}
+            className="absolute inset-0 flex flex-col items-center justify-center"
+          >
+            <div className="relative flex items-center justify-center w-full h-full">
+              <motion.div
+                initial={{ x: 0, opacity: 0, scale: 0.9, filter: "blur(10px)" }}
+                animate={{ 
+                  x: scene === 2 ? "-20vw" : 0, 
+                  opacity: scene === 2 ? 0.03 : 1,
+                  scale: scene === 2 ? 1.2 : 1,
+                  filter: "blur(0px)"
+                }}
+                transition={{ duration: scene === 1 ? 1.5 : 2, ease: [0.25, 1, 0.5, 1] }}
+                className="absolute text-7xl md:text-9xl lg:text-[12rem] font-bold text-primary-cta tracking-tighter leading-none"
+                style={{ clipPath: "polygon(0 0, 50% 0, 50% 100%, 0 100%)" }}
+              >
+                GARDAŞ
+              </motion.div>
+              
+              <motion.div
+                initial={{ x: 0, opacity: 0, scale: 0.9, filter: "blur(10px)" }}
+                animate={{ 
+                  x: scene === 2 ? "20vw" : 0, 
+                  opacity: scene === 2 ? 0.03 : 1,
+                  scale: scene === 2 ? 1.2 : 1,
+                  filter: "blur(0px)"
+                }}
+                transition={{ duration: scene === 1 ? 1.5 : 2, ease: [0.25, 1, 0.5, 1] }}
+                className="absolute text-7xl md:text-9xl lg:text-[12rem] font-bold text-primary-cta tracking-tighter leading-none"
+                style={{ clipPath: "polygon(50% 0, 100% 0, 100% 100%, 50% 100%)" }}
+              >
+                GARDAŞ
+              </motion.div>
+
+              <AnimatePresence>
+                {scene === 2 && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 1 }}
+                    className="absolute flex flex-col items-center justify-center gap-6 md:gap-10 z-10"
+                  >
+                    <motion.span 
+                      initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
+                      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                      transition={{ delay: 0.5, duration: 1.2, ease: "easeOut" }}
+                      className="text-5xl md:text-7xl lg:text-8xl font-medium text-foreground tracking-tight"
+                    >
+                      Napan?
+                    </motion.span>
+                    <motion.span 
+                      initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
+                      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                      transition={{ delay: 1.8, duration: 1.2, ease: "easeOut" }}
+                      className="text-5xl md:text-7xl lg:text-8xl font-medium text-accent tracking-tight"
+                    >
+                      Sağol
+                    </motion.span>
+                    <motion.span 
+                      initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
+                      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                      transition={{ delay: 3.1, duration: 1.2, ease: "easeOut" }}
+                      className="text-5xl md:text-7xl lg:text-8xl font-medium text-foreground tracking-tight"
+                    >
+                      İyisin?
+                    </motion.span>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {scene === 3 && (
+          <motion.div
+            key="scene3"
+            initial={{ opacity: 0, scale: 0.95, filter: "blur(20px)" }}
+            animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+            transition={{ duration: 1.5, delay: 0.5, ease: "easeOut" }}
+            className="absolute flex flex-col items-center justify-center gap-8 text-center px-6 w-content-width mx-auto z-20"
+          >
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ duration: 1, delay: 1.5 }}
+              className="text-3xl md:text-4xl font-bold text-primary-cta tracking-tighter mb-2"
+            >
+              GARDAŞ
+            </motion.div>
+            <h2 className="text-5xl md:text-7xl lg:text-8xl font-bold text-foreground max-w-5xl text-balance leading-tight tracking-tight">
+              Get access now
+            </h2>
+            <p className="text-xl md:text-3xl text-accent max-w-3xl mt-4">
+              Join the community and discover the hidden pulse of the island.
+            </p>
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 1, delay: 2.2 }}
+              className="flex flex-wrap justify-center gap-4 mt-8"
+            >
+              <Button text="Download App" href="#download" variant="primary" className="text-xl px-10 py-5" />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="Impact"
+          title="Growing Community"
+          description="Numbers behind the island experience."
+          metrics={[
+            {
+              value: "1.2k+",
+              title: "Businesses",
+              description: "Partnering to showcase local quality.",
+              imageSrc: "http://img.b2bpic.net/free-photo/abstract-bokeh-background-with-star-shaped-lights_23-2147815123.jpg",
+            },
+            {
+              value: "27k",
+              title: "Monthly Users",
+              description: "Exploring Cyprus with GARDAS.",
+              imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg",
+            },
+            {
+              value: "89%",
+              title: "Discovery Rate",
+              description: "User satisfaction on recommendations.",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-plexus-design-shallow-depth-field-modern-communication_1048-12682.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,51 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingMediaCards
+          tag="Business"
+          title="Partner with GARDAS"
+          description="Showcase your business to the island's most active explorers."
+          plans={[
+            {
+              tag: "Starter",
+              price: "Free",
+              period: "/mo",
+              features: [
+                "Basic listing",
+                "Customer reviews",
+              ],
+              primaryButton: {
+                text: "Start Now",
+                href: "#",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/device-with-copy-space-table-with-food_23-2150917827.jpg",
+            },
+            {
+              tag: "Pro",
+              price: "€49",
+              period: "/mo",
+              features: [
+                "Featured placement",
+                "Detailed analytics",
+                "Priority support",
+              ],
+              primaryButton: {
+                text: "Go Pro",
+                href: "#",
+              },
+              imageSrc: "http://img.b2bpic.net/free-photo/entrepreneurs-exchange-ideas-work_482257-90714.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesRevealCardsBento
+          tag="Discover"
+          title="What we cover"
+          description="Explore the diverse offerings of North Cyprus."
+          items={[
+            {
+              title: "Dining",
+              description: "Best local eats.",
+              href: "#eat",
+              imageSrc: "http://img.b2bpic.net/free-photo/black-pasta-with-parmesan-cheese_23-2148469866.jpg",
+            },
+            {
+              title: "History",
+              description: "Ancient wonders.",
+              href: "#history",
+              imageSrc: "http://img.b2bpic.net/free-photo/digital-art-old-map-with-terrain-locations_23-2151445163.jpg",
+            },
+            {
+              title: "Beaches",
+              description: "Crystal clear waters.",
+              href: "#beach",
+              imageSrc: "http://img.b2bpic.net/free-photo/beach-concept-with-camera_23-2147796174.jpg",
+            },
+            {
+              title: "Events",
+              description: "Nightlife and shows.",
+              href: "#event",
+              imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098546.jpg",
+            },
+            {
+              title: "Stay",
+              description: "Boutique hotels.",
+              href: "#stay",
+              imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-businessman-relaxes-with-netflix-office_482257-123031.jpg",
+            },
+            {
+              title: "Excursions",
+              description: "Island adventure.",
+              href: "#excursion",
+              imageSrc: "http://img.b2bpic.net/free-photo/summer-composition-with-frame-light-bulbs-seashells_23-2147628384.jpg",
+            },
+            {
+              title: "Yachts",
+              description: "Sea luxury.",
+              href: "#yacht",
+              imageSrc: "http://img.b2bpic.net/free-photo/view-3d-airplane-with-wings-engine_23-2151022269.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialMarqueeOverlayCards
+          tag="Community"
+          title="Island stories"
+          description="Hear from our happy explorers."
+          testimonials={[
+            {
+              name: "Sarah J.",
+              role: "Travel Blogger",
+              company: "GlobalRoam",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-with-backpack-hiking-alone-bakota-area_7502-7810.jpg",
+            },
+            {
+              name: "Michael C.",
+              role: "Local Guide",
+              company: "GirneTours",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-park_1303-28942.jpg",
+            },
+            {
+              name: "Emily R.",
+              role: "Visitor",
+              company: "Self",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/adult-enjoying-cocktail_52683-107593.jpg",
+            },
+            {
+              name: "David K.",
+              role: "Business Owner",
+              company: "CafeOlive",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/smart-blonde-female-photographer-trendy-clothes-posing-while-leaning-professional-camera-with-tripod-studio-looks-camera-isolated-gray-background_613910-18613.jpg",
+            },
+            {
+              name: "Elena V.",
+              role: "Visitor",
+              company: "TravelCo",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/man-shouting-after-failing-win-videogame-while-playing-gaming-pc-close-up-shot_482257-105005.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}