Update src/pages/HomePage/sections/Menu.tsx

Merge version_2_1781476790907 into main

src/pages/HomePage.tsx

@@ -1,202 +1,33 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
-import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
-import { Clock, MapPin, Star } from "lucide-react";
-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 ExperienceSection from './HomePage/sections/Experience';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import MenuSection from './HomePage/sections/Menu';
+import AtmosphereSection from './HomePage/sections/Atmosphere';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="Ödüllü Kremalı Pizza"
-      title="Bakırköy’ün En Viral Pizza Deneyimi"
-      description="El yapımı hamur, özel krema sos ve çıtır dokunuşlarla hazırlanan, Bakırköy'ün en konuşulan lezzeti."
-      primaryButton={{
-        text: "Menüyü Keşfet",
-        href: "#menu",
-      }}
-      secondaryButton={{
-        text: "Rezervasyon",
-        href: "#contact",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/tasty-pizza-with-leaves-flat-lay_23-2149298098.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-graphic-3d-pizza_23-2150849017.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="Sıradan Bir Pizza Değil, Bir Sanat Eseri."
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="experience" data-section="experience">
-    <SectionErrorBoundary name="experience">
-          <FeaturesImageBento
-      tag="Signature"
-      title="Signature Pizza Experience"
-      description="Ultra-realistic close-ups of our award-winning creamy creations."
-      items={[
-        {
-          title: "Kremalı Özel",
-          description: "İmza lezzetimiz",
-          imageSrc: "http://img.b2bpic.net/free-photo/slice-pizza-wooden-board-top-view_114579-13280.jpg",
-        },
-        {
-          title: "Etli Krema",
-          description: "Zengin içerik",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-melted-cheese-pizza_23-2149286883.jpg",
-        },
-        {
-          title: "Çıtır Kenar",
-          description: "Mükemmel kıvam",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-toast-with-pizza-ingredients_23-2148194529.jpg",
-        },
-        {
-          title: "El Yapımı Hamur",
-          description: "Geleneksel teknik",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-chef-showing-rolled-pizza-dough_23-2148753735.jpg",
-        },
-        {
-          title: "Taze Malzeme",
-          description: "Günlük seçimler",
-          imageSrc: "http://img.b2bpic.net/free-photo/freshly-baked-pizza-surrounded-with-it-s-ingredients-textured-desk_23-2148195027.jpg",
-        },
-        {
-          title: "Özel Soslar",
-          description: "Gizli tarifler",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-spreading-tomato-sauce-dough-parchment-paper_23-2148120170.jpg",
-        },
-        {
-          title: "Odun Ateşi",
-          description: "Eşsiz aroma",
-          imageSrc: "http://img.b2bpic.net/free-photo/chef-white-uniform-prepare-pizzaa_1157-27021.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ExperienceSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialTrustCard
-      quote="Bugün gitme imkanı buldum, harika kokular eşliğinde bizi kendine çekti adeta, mükemmel bir deneyimdi. Özellikle pizza krema olan muhteşemdi."
-      rating={5}
-      author="Gülsüm Yurtsever"
-      avatars={[
-        {
-          name: "User 1",
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517423.jpg",
-        },
-        {
-          name: "User 2",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-couple-with-pina-colada_23-2150184034.jpg",
-        },
-        {
-          name: "User 3",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-1400.jpg",
-        },
-        {
-          name: "User 4",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-her-boyfriend-reading-text-message-mobile-phone-while-sitting-dining-table_637285-10328.jpg",
-        },
-        {
-          name: "User 5",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-feeding-her-groom-with-croissant-cafe_176420-2274.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="menu" data-section="menu">
-    <SectionErrorBoundary name="menu">
-          <FeaturesMediaCarousel
-      tag="Menü"
-      title="Lezzet Koleksiyonu"
-      description="Premium malzemelerle hazırlanan seçkin pizza menümüz."
-      items={[
-        {
-          title: "Kremalı Pizza",
-          description: "En popüler lezzetimiz",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/chef-white-uniform-prepare-pizzaa_1157-27031.jpg",
-        },
-        {
-          title: "Etli Pizza",
-          description: "Gurme tercihler",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-pizza-arrangement-high-angle_23-2149325319.jpg",
-        },
-        {
-          title: "Vegetaryen",
-          description: "Taze sebzeler",
-          buttonIcon: "ArrowRight",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-pizza-wooden-table-with-ingredients_23-2147926041.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MenuSection />
 
-  <div id="atmosphere" data-section="atmosphere">
-    <SectionErrorBoundary name="atmosphere">
-          <MetricsIconCards
-      tag="Atmosfer"
-      title="Bakırköy'ün Kalbinde"
-      description="Lüks ve samimi bir deneyim."
-      metrics={[
-        {
-          icon: MapPin,
-          title: "Lokasyon",
-          value: "Bakırköy",
-        },
-        {
-          icon: Clock,
-          title: "Hizmet",
-          value: "12:15 - 23:00",
-        },
-        {
-          icon: Star,
-          title: "Puan",
-          value: "4.3 / 5",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AtmosphereSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Rezervasyon"
-      text="Eşsiz pizza deneyimi için hemen yerinizi ayırtın."
-      primaryButton={{
-        text: "WhatsApp Sipariş",
-        href: "https://wa.me/905550000000",
-      }}
-      secondaryButton={{
-        text: "Yol Tarifi",
-        href: "https://maps.google.com",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,18 @@
+// 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 AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutText
+          title="Sıradan Bir Pizza Değil, Bir Sanat Eseri."
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Atmosphere.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { MapPin, Clock, Star } from 'lucide-react';
+import type { LucideIcon } from "lucide-react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+const metrics = [
+  {
+    icon: MapPin,
+    title: "Lokasyon",
+    value: "Bakırköy"
+  },
+  {
+    icon: Clock,
+    title: "Hizmet",
+    value: "12:15 - 23:00"
+  },
+  {
+    icon: Star,
+    title: "Puan",
+    value: "4.3 / 5"
+  }
+];
+
+type Metric = {
+  icon: string | LucideIcon;
+  title: string;
+  value: string;
+};
+
+const AtmosphereInline = () => (
+  <section aria-label="Metrics section" className="py-20">
+    <div className="flex flex-col gap-8 md:gap-10">
+      <div className="flex flex-col items-center gap-2 w-content-width mx-auto">
+        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+          <p>{"Atmosfer"}</p>
+        </div>
+
+        <TextAnimation
+          text={"Cinematic Experience"}
+          variant="fade-blur"
+          gradientText={true}
+          tag="h2"
+          className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+        />
+
+        <TextAnimation
+          text={"Trendy Istanbul street-food luxury vibe"}
+          variant="fade-blur"
+          gradientText={false}
+          tag="p"
+          className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+        />
+
+        {(undefined || undefined) && (
+          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
+          </div>
+        )}
+      </div>
+
+      <ScrollReveal variant="fade-blur">
+        <GridOrCarousel>
+          {metrics.map((metric) => {
+            const IconComponent = resolveIcon(metric.icon);
+            return (
+              <div key={metric.value} className="flex flex-col items-center justify-center gap-3 xl:gap-3.5 2xl:gap-4 p-6 xl:p-7 2xl:p-8 min-h-70 xl:min-h-80 2xl:min-h-90 h-full card rounded">
+                <div className="flex items-center justify-center gap-2 min-w-0">
+                  <div className="flex items-center justify-center shrink-0 size-8 primary-button rounded">
+                    <IconComponent className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
+                  </div>
+                  <span className="text-xl truncate min-w-0">{metric.title}</span>
+                </div>
+                <span className="text-9xl md:text-8xl font-semibold leading-none truncate">{metric.value}</span>
+              </div>
+            );
+          })}
+        </GridOrCarousel>
+      </ScrollReveal>
+    </div>
+  </section>
+);
+
+export default function AtmosphereSection() {
+  return (
+    <div data-webild-section="atmosphere" id="atmosphere">
+      <AtmosphereInline />
+    </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="Rezervasyon"
+          text="Eşsiz pizza deneyimi için hemen yerinizi ayırtın."
+          primaryButton={{
+            text: "WhatsApp Sipariş",
+            href: "https://wa.me/905550000000",
+          }}
+          secondaryButton={{
+            text: "Yol Tarifi",
+            href: "https://maps.google.com",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Experience.tsx

@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "experience" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ExperienceSection(): React.JSX.Element {
+  return (
+    <div id="experience" data-section="experience">
+        <SectionErrorBoundary name="experience">
+              <FeaturesImageBento
+          tag="Signature"
+          title="Signature Pizza Experience"
+          description="Ultra-realistic close-ups of our award-winning creamy creations."
+          items={[
+            {
+              title: "Kremalı Özel",
+              description: "İmza lezzetimiz",
+              imageSrc: "http://img.b2bpic.net/free-photo/slice-pizza-wooden-board-top-view_114579-13280.jpg",
+            },
+            {
+              title: "Etli Krema",
+              description: "Zengin içerik",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-melted-cheese-pizza_23-2149286883.jpg",
+            },
+            {
+              title: "Çıtır Kenar",
+              description: "Mükemmel kıvam",
+              imageSrc: "http://img.b2bpic.net/free-photo/top-view-toast-with-pizza-ingredients_23-2148194529.jpg",
+            },
+            {
+              title: "El Yapımı Hamur",
+              description: "Geleneksel teknik",
+              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-chef-showing-rolled-pizza-dough_23-2148753735.jpg",
+            },
+            {
+              title: "Taze Malzeme",
+              description: "Günlük seçimler",
+              imageSrc: "http://img.b2bpic.net/free-photo/freshly-baked-pizza-surrounded-with-it-s-ingredients-textured-desk_23-2148195027.jpg",
+            },
+            {
+              title: "Özel Soslar",
+              description: "Gizli tarifler",
+              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-spreading-tomato-sauce-dough-parchment-paper_23-2148120170.jpg",
+            },
+            {
+              title: "Odun Ateşi",
+              description: "Eşsiz aroma",
+              imageSrc: "http://img.b2bpic.net/free-photo/chef-white-uniform-prepare-pizzaa_1157-27021.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,90 @@
+/* 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 ScrollReveal from "@/components/ui/ScrollReveal";
+
+const primaryButton = {
+  text: "Menüyü Keşfet",
+  href: "#menu"
+};
+const secondaryButton = {
+  text: "Rezervasyon",
+  href: "#contact"
+};
+const items = [
+  {
+    imageSrc: "https://storage.googleapis.com/webild/users/user_3DzLJM9oAKQRjgJNceDCWiKwcdg/uploaded-1781476789123-z3qgihsa.png"
+  },
+  {
+    imageSrc: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=800&q=80&_wi=1"
+  }
+];
+
+type HeroSplitMediaGridProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  items: [
+    { imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never },
+    { imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }
+  ];
+};
+
+const HeroInline = () => {
+  return (
+    <section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
+      <HeroBackgroundSlot />
+      <div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
+        <div className="w-full md:w-1/2">
+          <div className="flex flex-col items-center md:items-start gap-3">
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>{"Ödüllü Kremalı Pizza"}</p>
+            </div>
+
+            <TextAnimation
+              text={"İstanbul’un En Viral Pizza Deneyimi"}
+              variant="slide-up"
+              gradientText={true}
+              tag="h1"
+              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
+            />
+
+            <TextAnimation
+              text={"Kremanın Sanata Dönüştüğü Yer"}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
+            />
+
+            <div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
+              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
+              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+            </div>
+          </div>
+        </div>
+
+        <ScrollReveal variant="fade" delay={0.2} className="w-full md:w-1/2 grid grid-cols-2 gap-2 xl:gap-3 2xl:gap-4">
+          {items.map((item, index) => (
+            <div key={index} className="h-80 md:h-[55vh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
+              <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
+            </div>
+          ))}
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Menu.tsx

@@ -0,0 +1,123 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import type { LucideIcon } from "lucide-react";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import LoopCarousel from "@/components/ui/LoopCarousel";
+import Button from "@/components/ui/Button";
+import { useButtonClick } from "@/hooks/useButtonClick";
+import { resolveIcon } from "@/utils/resolve-icon";
+
+const items = [
+  {
+    title: "Pizza Krema Etli",
+    description: "Özel krema sos, dana eti, mozzarella",
+    buttonIcon: "ArrowRight",
+    imageSrc: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=800&q=80&_wi=2"
+  },
+  {
+    title: "Kremalı Pizza",
+    description: "İmza krema sos, taze fesleğen, parmesan",
+    buttonIcon: "ArrowRight",
+    imageSrc: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    title: "Truffle Krema",
+    description: "Trüf mantarı, krema, mozzarella",
+    buttonIcon: "ArrowRight",
+    imageSrc: "https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=800&q=80"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  buttonIcon: string | LucideIcon;
+  buttonHref?: string;
+  buttonOnClick?: () => void;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesMediaCarouselProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: FeatureItem[];
+}
+
+const FeatureMediaCarouselCard = ({ item }: { item: FeatureItem }) => {
+  const handleClick = useButtonClick(item.buttonHref, item.buttonOnClick);
+  const Icon = resolveIcon(item.buttonIcon);
+
+  return (
+    <div className="relative overflow-hidden aspect-square md:aspect-3/2 rounded">
+      <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="absolute inset-0" />
+      <div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-5 p-4 xl:p-5 2xl:p-6 card rounded backdrop-blur-sm">
+        <div className="flex flex-col gap-1 min-w-0">
+          <h3 className="text-2xl font-semibold leading-snug truncate">{item.title}</h3>
+          <p className="text-base leading-snug truncate">{item.description}</p>
+        </div>
+        <a
+          href={item.buttonHref}
+          onClick={handleClick}
+          aria-label="View more"
+          className="flex items-center justify-center shrink-0 size-9 cursor-pointer primary-button rounded-full"
+        >
+          <Icon className="size-4 text-primary-cta-text" strokeWidth={2} />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+const MenuInline = () => {
+  return (
+    <section aria-label="Features section" className="w-full py-20">
+      <div className="flex flex-col w-full gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Menü"}</p>
+          </div>
+
+          <TextAnimation
+            text={"İmza Lezzetler"}
+            variant="fade-blur"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"El yapımı hamur, özel krema sos ve çıtır dokunuşlarla hazırlanan menümüzü keşfedin."}
+            variant="fade-blur"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <LoopCarousel>
+          {items.map((item) => (
+            <FeatureMediaCarouselCard key={item.title} item={item} />
+          ))}
+        </LoopCarousel>
+      </div>
+    </section>
+  );
+};
+
+export default function MenuSection() {
+  return (
+    <div data-webild-section="menu" id="menu">
+      <MenuInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { Star } from "lucide-react";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const avatars = [
+  {
+    name: "Yağmur Alara Aydın",
+    imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    name: "Gülsüm Yurtsever",
+    imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=800&q=80"
+  },
+  {
+    name: "Barış Ünal",
+    imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80"
+  }
+];
+
+type Avatar = {
+  name: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const TestimonialsInline = () => {
+  const visibleAvatars = avatars.slice(0, 6);
+  const remainingCount = avatars.length - visibleAvatars.length;
+
+  return (
+    <section aria-label="Testimonials section" className="py-20">
+      <div className="flex flex-col items-center gap-5 w-content-width mx-auto">
+        <ScrollReveal variant="slide-up" className="flex gap-1.5">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Star
+              key={index}
+              className={cls("size-6 text-accent", index < 5 ? "fill-accent" : "fill-transparent")}
+              strokeWidth={1.5}
+            />
+          ))}
+        </ScrollReveal>
+
+        <TextAnimation
+          text={"Mükemmel bir deneyimdi. Özellikle pizza krema olan muhteşemdi."}
+          variant="fade"
+          gradientText={false}
+          tag="p"
+          className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance"
+        />
+
+        <ScrollReveal variant="slide-up" delay={0.1} className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance">
+          <p>{"Yağmur Alara Aydın"}</p>
+        </ScrollReveal>
+
+        <ScrollReveal variant="slide-up" delay={0.2} className="flex items-center justify-center mt-1">
+          {visibleAvatars.map((avatar, index) => (
+            <div
+              key={avatar.name}
+              className={cls("relative size-12 md:size-16 overflow-hidden rounded-full border-2 border-background", index > 0 && "-ml-5")}
+              style={{ zIndex: visibleAvatars.length - index }}
+            >
+              <ImageOrVideo imageSrc={avatar.imageSrc} videoSrc={avatar.videoSrc} />
+            </div>
+          ))}
+          {remainingCount > 0 && (
+            <div
+              className="flex items-center justify-center size-12 md:size-16 -ml-5 rounded-full border-2 border-background card"
+              style={{ zIndex: 0 }}
+            >
+              <span className="text-sm md:text-base font-semibold">+{remainingCount}</span>
+            </div>
+          )}
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function TestimonialsSection() {
+  return (
+    <div data-webild-section="testimonials" id="testimonials">
+      <TestimonialsInline />
+    </div>
+  );
+}