Merge version_3_1782070259986 into main

Merge version_3_1782070259986 into main

src/index.css

@@ -5,16 +5,16 @@
 @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700&display=swap");
 
 :root {
-  /* @colorThemes/lightTheme/lightRed */
-  --background: #fffafa;
-  --card: #ffffff;
-  --foreground: #1a0000;
-  --primary-cta: #e63946;
-  --primary-cta-text: #fffafa;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1a0000;
-  --accent: #f5c4c7;
-  --background-accent: #f09ca1;
+  /* @colorThemes/darkTheme/highFashion */
+  --background: #000000;
+  --card: #141414;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #000000;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #8a8a8a;
+  --background-accent: #1f1f1f;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -1,36 +1,46 @@
-import { BarChart3, Film, Megaphone } from "lucide-react";
+// 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.
+
 import NoiseGradientBackground from "@/components/ui/NoiseGradientBackground";
 import { StyleProvider } from "@/components/ui/StyleProvider";
-import HeroBillboardCreator from "@/components/sections/hero/HeroBillboardCreator";
-import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
-import TestimonialColumnMarqueeCards from "@/components/sections/testimonial/TestimonialColumnMarqueeCards";
-import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
-import PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
-import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
-import Galaxy from "@/components/Galaxy";
-import LiquidChrome from "@/components/LiquidChrome";
-import Silk from "@/components/Silk";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import MetricsSection from './HomePage/sections/Metrics';
+import FeaturesSection from './HomePage/sections/Features';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import PricingSection from './HomePage/sections/Pricing';
+import FaqSection from './HomePage/sections/Faq';
 
-export default function HomePage() {
+
+import AntigravityBackgroundSection from './HomePage/sections/AntigravityBackground';const Galaxy = ({ glowIntensity = 0.5 }: any) => (
+  <div className="absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-center bg-background">
+    <div className="absolute w-[80vw] h-[80vw] max-w-[800px] max-h-[800px] bg-foreground rounded-full blur-[120px] animate-spin-slow" style={{ opacity: glowIntensity * 0.2 }} />
+    <div className="absolute w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-accent rounded-full blur-[100px] animate-spin-reverse" style={{ opacity: glowIntensity * 0.3 }} />
+  </div>
+);
+
+const LiquidChrome = ({ speed = 1 }: any) => (
+  <div className="absolute inset-0 overflow-hidden pointer-events-none bg-background">
+    <div className="absolute inset-0 bg-gradient-to-tr from-background via-foreground/10 to-background" style={{ animation: `aurora ${15 / speed}s linear infinite` }} />
+    <div className="absolute inset-0 backdrop-blur-[60px]" />
+  </div>
+);
+
+const Silk = ({ speed = 1, scale = 1, color, rotation = 0 }: any) => (
+  <div className="fixed inset-0 overflow-hidden pointer-events-none z-[-1]" style={{ transform: `scale(${scale}) rotate(${rotation}deg)` }}>
+    <div className="absolute -top-[50%] -left-[50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-current to-transparent blur-[100px] opacity-20" style={{ color: color || 'var(--color-primary-cta)', animation: `floating-move-vertical ${20 / speed}s ease-in-out infinite` }} />
+  </div>
+);
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <StyleProvider heroBackground="none" siteBackground="none" buttonVariant="bounce">
+<StyleProvider heroBackground="none" siteBackground="none" buttonVariant="bounce">
       <NoiseGradientBackground position="fixed" />
 
-      <div id="hero" data-section="hero">
-        <HeroBillboardCreator
-          tag="AI-Driven Style"
-          title="The Future of Fashion"
-          titleHighlight="Curated by AI."
-          description="Elevate your personal style with our AI-powered curation. Immersive experiences for men and women's fashion collections defined by innovation."
-          primaryButton={{ text: "Explore Collections", href: "#" }}
-          note="Personalized for every silhouette"
-          videos={[
-            { videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4", name: "Men's Tech-Wear", followers: "5M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/glowing-red-warning-triangle-with-exclamation-mark-dark-wet-surface_84443-91213.jpg" },
-            { videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4", name: "Women's Luxe-Flow", followers: "8M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/letter-o-made-green-grass-with-flowers-isolated-white_169016-57035.jpg" }
-          ]}
-          badgeText="Trend-setting"
-        />
-      </div>
+      <HeroSection />
+      <AntigravityBackgroundSection />
 
       <div style={{ width: '100%', height: '400px', position: 'relative' }}>
         <Galaxy 
@@ -44,75 +54,21 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
-        <MetricsIconCards
-          tag="Our Impact"
-          title="Precision-Tailored Growth"
-          description="Defining the new era of high-end fashion tech."
-          metrics={[
-            { value: "500K+", title: "Active Users", icon: BarChart3 },
-            { value: "1M+", title: "Styles Curated", icon: Film },
-            { value: "98%", title: "Satisfaction", icon: Megaphone },
-          ]}
-        />
-      </div>
+      <MetricsSection />
 
       <div style={{ width: '100%', height: '400px', position: 'relative' }}>
         <LiquidChrome baseColor={[0.2, 0.2, 0.2]} speed={0.4} amplitude={0.2} interactive />
       </div>
 
-      <div id="features" data-section="features">
-        <FeaturesAlternatingSplit
-          tag="How It Works"
-          title="Seamless Style Evolution"
-          description="From digital discovery to physical arrival, we define your aesthetic."
-          items={[
-            { title: "Smart Discovery", description: "AI scans global runways to bring trends directly to your wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-58706.jpg" },
-            { title: "Fluid Generation", description: "Experience custom virtual fittings for both men's and women's lines.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-letter-w_1187-1117.jpg" },
-            { title: "Instant Dispatch", description: "Worldwide logistics ensure your new look arrives at your doorstep.", imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675182.jpg" },
-            { title: "Adaptive Feedback", description: "Continual refinement based on your unique style journey.", imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=bpgtsy" }
-          ]}
-        />
-      </div>
+      <FeaturesSection />
 
       <Silk speed={3} scale={1.2} color="#8257FF" noiseIntensity={1.2} rotation={15} />
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialColumnMarqueeCards
-          tag="Testimonials"
-          title="Refined by Our Community"
-          description="Hear how we transformed the way the world shops for luxury."
-          testimonials={[
-            { name: "Alex P.", role: "Men's Fashion Enthusiast", quote: "The AI curation is perfect. It understands my aesthetic better than I do.", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-indian-woman-wear-formal-posing-cafe_627829-4625.jpg" },
-            { name: "Sophia L.", role: "Creative Director", quote: "Unmatched precision in trend forecasting. Simply a beautiful experience.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-drinking-coffee-while-short-break_329181-17590.jpg" },
-            { name: "Marcus V.", role: "Tech Investor", quote: "Seamless, intuitive, and high-fashion. This is the new standard.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-blogger-holding-shoe-heel-sneakers-thoughtfully-looking-aside-while-recording-new-fashion-video-vlog-camera_574295-5294.jpg" }
-          ]}
-        />
-      </div>
+      <TestimonialsSection />
 
-      <div id="pricing" data-section="pricing">
-        <PricingHighlightedCards
-          tag="Membership"
-          title="Choose Your Tier"
-          description="Exclusive access to limited collections and AI-personalization."
-          plans={[
-            { tag: "Standard", price: "$29", description: "Essential access to collections.", features: ["Personal feed", "Monthly lookbook", "Basic support"], primaryButton: { text: "Join", href: "#" } },
-            { tag: "Premium", price: "$89", description: "The elite fashion experience.", highlight: "VIP", features: ["Everything in Standard", "AI virtual fitting", "Early access", "Stylist consultation"], primaryButton: { text: "Join Premium", href: "#" } }
-          ]}
-        />
-      </div>
+      <PricingSection />
 
-      <div id="faq" data-section="faq">
-        <FaqTwoColumn
-          tag="FAQ"
-          title="Common Inquiries"
-          description="Answers regarding our fashion tech ecosystem."
-          items={[
-            { question: "How does the AI work?", answer: "We use proprietary algorithms to match your preferences with global high-fashion trends." },
-            { question: "Is it available for all sizes?", answer: "Yes, our virtual models support a comprehensive range of dimensions for both men and women." }
-          ]}
-        />
-      </div>
+      <FaqSection />
     </StyleProvider>
   );
 }

src/pages/HomePage/sections/AntigravityBackground.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import FloatingGradientBackground from '@/components/ui/FloatingGradientBackground';
+
+export default function AntigravityBackgroundSection() {
+  return (
+    <div data-webild-section="antigravity-background" id="antigravity-background" style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', zIndex: -1, pointerEvents: 'none' }}>
+      <FloatingGradientBackground position="absolute" />
+    </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,21 @@
+// 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 FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+            <FaqTwoColumn
+              tag="FAQ"
+              title="Common Inquiries"
+              description="Answers regarding our fashion tech ecosystem."
+              items={[
+                { question: "How does the AI work?", answer: "We use proprietary algorithms to match your preferences with global high-fashion trends." },
+                { question: "Is it available for all sizes?", answer: "Yes, our virtual models support a comprehensive range of dimensions for both men and women." }
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,23 @@
+// 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 FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+            <FeaturesAlternatingSplit
+              tag="How It Works"
+              title="Seamless Style Evolution"
+              description="From digital discovery to physical arrival, we define your aesthetic."
+              items={[
+                { title: "Smart Discovery", description: "AI scans global runways to bring trends directly to your wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-58706.jpg" },
+                { title: "Fluid Generation", description: "Experience custom virtual fittings for both men's and women's lines.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-letter-w_1187-1117.jpg" },
+                { title: "Instant Dispatch", description: "Worldwide logistics ensure your new look arrives at your doorstep.", imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675182.jpg" },
+                { title: "Adaptive Feedback", description: "Continual refinement based on your unique style journey.", imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=bpgtsy" }
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,203 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "motion/react";
+import { Check } from "lucide-react";
+import { cls } from "@/lib/utils";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import AvatarGroup from "@/components/ui/AvatarGroup";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import FloatingGradientBackground from "@/components/ui/FloatingGradientBackground";
+
+const avatarsSrc = [
+  "http://img.b2bpic.net/free-photo/gorgeous-indian-woman-wear-formal-posing-cafe_627829-4625.jpg",
+  "http://img.b2bpic.net/free-photo/businesswoman-drinking-coffee-while-short-break_329181-17590.jpg",
+  "http://img.b2bpic.net/free-photo/young-pretty-blogger-holding-shoe-heel-sneakers-thoughtfully-looking-aside-while-recording-new-fashion-video-vlog-camera_574295-5294.jpg"
+];
+const primaryButton = {
+  href: "#",
+  text: "Explore Collections"
+};
+const secondaryButton = {
+  text: "View Lookbook",
+  href: "#"
+};
+const floatingCardsSrc = [
+  "http://img.b2bpic.net/free-photo/glowing-red-warning-triangle-with-exclamation-mark-dark-wet-surface_84443-91213.jpg",
+  "http://img.b2bpic.net/free-photo/letter-o-made-green-grass-with-flowers-isolated-white_169016-57035.jpg",
+  "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-58706.jpg",
+  "http://img.b2bpic.net/free-photo/woman-holding-letter-w_1187-1117.jpg"
+];
+
+type FloatingCardPosition = "top-left" | "top-right" | "middle-left" | "middle-right";
+
+type HeroBillboardFloatingCardsProps = {
+  avatarsSrc: string[];
+  avatarsLabel: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  note?: string;
+  floatingCardsSrc: [string, string, string, string];
+  logosSrc?: string[];
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const POSITIONS: FloatingCardPosition[] = ["top-left", "top-right", "middle-left", "middle-right"];
+
+const FLOATING_CARD_CONFIG: Record<FloatingCardPosition, {
+  position: string;
+  rotation: string;
+  size: string;
+  animation: { duration: number; delay: number; yOffset: number; entryDelay: number };
+}> = {
+  "top-left": {
+    position: "top-8 left-0",
+    rotation: "-rotate-8",
+    size: "size-20 xl:size-22 2xl:size-24",
+    animation: { duration: 4, delay: 0, yOffset: -8, entryDelay: 0.3 },
+  },
+  "top-right": {
+    position: "top-4 right-4",
+    rotation: "rotate-10",
+    size: "size-18 xl:size-20 2xl:size-22",
+    animation: { duration: 5, delay: 1, yOffset: -10, entryDelay: 0.5 },
+  },
+  "middle-left": {
+    position: "top-1/2 left-2",
+    rotation: "rotate-6",
+    size: "size-18 xl:size-20 2xl:size-22",
+    animation: { duration: 4.5, delay: 0.5, yOffset: -9, entryDelay: 0.7 },
+  },
+  "middle-right": {
+    position: "top-1/2 right-0",
+    rotation: "-rotate-6",
+    size: "size-20 xl:size-22 2xl:size-24",
+    animation: { duration: 3.8, delay: 1.5, yOffset: -8, entryDelay: 0.9 },
+  },
+};
+
+const HeroBillboardFloatingCards = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({ target: containerRef });
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
+
+  return (
+    <section aria-label="Hero section" className="relative">
+      <HeroBackgroundSlot />
+      <div className="absolute inset-0 z-0 pointer-events-none">
+        <FloatingGradientBackground position="absolute" />
+      </div>
+      <div className="absolute inset-0 z-0 pointer-events-none">
+        <FloatingGradientBackground position="absolute" />
+      </div>
+      <div ref={containerRef} className="pt-25 pb-20 md:pt-30 perspective-distant relative z-10">
+        <div className="relative w-content-width mx-auto">
+          {POSITIONS.map((position, index) => {
+            const config = FLOATING_CARD_CONFIG[position];
+            const src = floatingCardsSrc[index];
+            if (!src) return null;
+            return (
+              <motion.div
+                key={index}
+                className={cls("absolute z-10 hidden md:block", config.position)}
+                animate={{ y: [0, config.animation.yOffset, 0] }}
+                transition={{ duration: config.animation.duration, repeat: Infinity, ease: "easeInOut", delay: config.animation.delay }}
+              >
+                <motion.div
+                  className={cls("p-2 card rounded-2xl overflow-hidden", config.size, config.rotation)}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: config.animation.entryDelay }}
+                >
+                  <img src={src} alt="" className="w-full h-full object-contain rounded-xl" />
+                </motion.div>
+              </motion.div>
+            );
+          })}
+
+          <div className="flex flex-col items-center gap-3 md:max-w-8/10 mx-auto text-center">
+            <div className="p-0.5 pr-3 mb-1 card rounded-full">
+              <AvatarGroup avatarsSrc={avatarsSrc} label={"Over 1M+ Styles Curated"} />
+            </div>
+
+            <TextAnimation
+              text={"The Future of Fashion"}
+              variant="slide-up"
+              gradientText={true}
+              tag="h1"
+              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance"
+            />
+
+            <TextAnimation
+              text={"Elevate your personal style with our AI-powered curation. Immersive experiences for men and women's fashion collections defined by innovation."}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="text-lg md:text-xl leading-snug text-balance"
+            />
+
+            <div className="flex flex-wrap 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>
+
+            {"Personalized for every silhouette" && (
+              <motion.div
+                className="flex justify-center mt-2 md:mt-3 text-sm text-foreground/70"
+                initial={{ opacity: 0, y: 10 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+              >
+                <span className="flex items-center gap-2">
+                  <div className="flex items-center justify-center size-4 primary-button rounded-full">
+                    <Check className="size-1/2 text-primary-cta-text" />
+                  </div>
+                  {"Personalized for every silhouette"}
+                </span>
+              </motion.div>
+            )}
+          </div>
+        </div>
+
+        <div className="w-content-width mx-auto mt-8 p-2 card rounded overflow-hidden rotate-x-20 md:hidden">
+          <ImageOrVideo className="aspect-4/5" />
+        </div>
+
+        <motion.div
+          style={{ rotateX: rotate, scale }}
+          className="w-content-width mx-auto mt-5 2xl:mt-2 p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden hidden md:block"
+        >
+          <ImageOrVideo className="aspect-video" />
+        </motion.div>
+
+        {undefined && undefined.length > 0 && (
+          <ScrollReveal variant="slide-up" className="w-content-width mx-auto mt-2 xl:mt-4 2xl:mt-6 overflow-hidden mask-fade-x">
+            <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "45s" }}>
+              {[...undefined, ...undefined, ...undefined, ...undefined, ...undefined, ...undefined, ...undefined, ...undefined].map((logo, index) => (
+                <div key={index} className="shrink-0 mx-1 xl:mx-2 2xl:mx-3 p-3 rounded card">
+                  <img src={logo} alt="" className="h-8 w-auto object-contain rounded" />
+                </div>
+              ))}
+            </div>
+          </ScrollReveal>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboardFloatingCards />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,23 @@
+// 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 { BarChart3, Film, Megaphone } from "lucide-react";
+import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+            <MetricsIconCards
+              tag="Our Impact"
+              title="Precision-Tailored Growth"
+              description="Defining the new era of high-end fashion tech."
+              metrics={[
+                { value: "500K+", title: "Active Users", icon: BarChart3 },
+                { value: "1M+", title: "Styles Curated", icon: Film },
+                { value: "98%", title: "Satisfaction", icon: Megaphone },
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,21 @@
+// 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 PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+            <PricingHighlightedCards
+              tag="Membership"
+              title="Choose Your Tier"
+              description="Exclusive access to limited collections and AI-personalization."
+              plans={[
+                { tag: "Standard", price: "$29", description: "Essential access to collections.", features: ["Personal feed", "Monthly lookbook", "Basic support"], primaryButton: { text: "Join", href: "#" } },
+                { tag: "Premium", price: "$89", description: "The elite fashion experience.", highlight: "VIP", features: ["Everything in Standard", "AI virtual fitting", "Early access", "Stylist consultation"], primaryButton: { text: "Join Premium", href: "#" } }
+              ]}
+            />
+          </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,22 @@
+// 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 TestimonialColumnMarqueeCards from "@/components/sections/testimonial/TestimonialColumnMarqueeCards";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+            <TestimonialColumnMarqueeCards
+              tag="Testimonials"
+              title="Refined by Our Community"
+              description="Hear how we transformed the way the world shops for luxury."
+              testimonials={[
+                { name: "Alex P.", role: "Men's Fashion Enthusiast", quote: "The AI curation is perfect. It understands my aesthetic better than I do.", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-indian-woman-wear-formal-posing-cafe_627829-4625.jpg" },
+                { name: "Sophia L.", role: "Creative Director", quote: "Unmatched precision in trend forecasting. Simply a beautiful experience.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-drinking-coffee-while-short-break_329181-17590.jpg" },
+                { name: "Marcus V.", role: "Tech Investor", quote: "Seamless, intuitive, and high-fashion. This is the new standard.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-blogger-holding-shoe-heel-sneakers-thoughtfully-looking-aside-while-recording-new-fashion-video-vlog-camera_574295-5294.jpg" }
+              ]}
+            />
+          </div>
+  );
+}