Merge version_3_1781459147558 into main

Merge version_3_1781459147558 into main

src/pages/HomePage.tsx

@@ -1,286 +1,33 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import { ShieldCheck, Star, Zap } 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 GamesSection from './HomePage/sections/Games';
+import CategoriesSection from './HomePage/sections/Categories';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitVerticalMarquee
-      tag="Next-Gen Gaming Platform"
-      title="300+ Games. Zero Install."
-      description="Experience high-performance browser gaming built on WebGL. Instant play, no downloads required."
-      primaryButton={{
-        text: "Browse Games",
-        href: "#games",
-      }}
-      secondaryButton={{
-        text: "Join Community",
-        href: "#contact",
-      }}
-      leftItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-techno-communications-background-with-plexus-design_1048-12648.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-tunnel-with-neon-lights-geometric-patterns_23-2151966347.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599395.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-finance-digital-market-graph-user-interface-with-diagram-technology-hud-graphic-concept_90220-1365.jpg",
-        },
-      ]}
-      rightItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-low-poly-plexus-design_1048-13548.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-neon-futuristic-tunnel_23-2151966345.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes_181624-23687.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/iguana-with-neon-lights_23-2151695303.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-cityscape-with-neon-lights_23-2151966351.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/team-looking-futuristic-digital-interface-office_23-2151966687.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-      tag="Our Philosophy"
-      title="Built for Speed & Quality"
-      description="Every game on Arcade-OS is crafted with pure WebGL. We prioritize optimized performance, modular code, and high-quality gameplay mechanics that bring classic fun back to your browser."
-      items={[
-        {
-          icon: Zap,
-          title: "Ultra-Fast",
-          description: "Optimized to run seamlessly on any device.",
-        },
-        {
-          icon: ShieldCheck,
-          title: "Secure",
-          description: "Safe, sandbox environment for all your games.",
-        },
-        {
-          icon: Star,
-          title: "Classic Fun",
-          description: "Hand-crafted mechanics inspired by the classics.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/light-equipment-grey-technology-serious_1134-1423.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="games" data-section="games">
-    <SectionErrorBoundary name="games">
-          <FeaturesRevealCardsBento
-      tag="Instant Play"
-      title="Top Picks Today"
-      description="Our curated library of top-performing titles across multiple genres."
-      items={[
-        {
-          title: "Cyber Run",
-          description: "Endless runner with neon obstacles.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120973.jpg",
-        },
-        {
-          title: "Turbo Drift",
-          description: "High-speed arcade racing.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649924.jpg",
-        },
-        {
-          title: "Hex Puzzle",
-          description: "Space-themed geometric puzzle.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499253.jpg",
-        },
-        {
-          title: "Star Hunter",
-          description: "Arcade space shooter.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/coloured-nebula-background_1048-1944.jpg",
-        },
-        {
-          title: "Dark Dungeon",
-          description: "Classic fantasy crawler.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/mystical-samurai-glowing-forest_23-2151995181.jpg",
-        },
-        {
-          title: "City Tactics",
-          description: "Real-time strategy challenge.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg",
-        },
-        {
-          title: "Beat Stream",
-          description: "Rhythm-based music challenge.",
-          href: "#",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688571.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <GamesSection />
 
-  <div id="categories" data-section="categories">
-    <SectionErrorBoundary name="categories">
-          <FeaturesDetailedCards
-      tag="Genres"
-      title="Explore by Genre"
-      description="Find your favorites, from casual puzzles to hardcore arcade action."
-      items={[
-        {
-          title: "Action",
-          description: "Fast-paced games for adrenaline.",
-          tags: [
-            "arcane",
-            "speed",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120933.jpg",
-        },
-        {
-          title: "Logic",
-          description: "Brain-teasing puzzles.",
-          tags: [
-            "puzzles",
-            "logic",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
-        },
-        {
-          title: "Fantasy",
-          description: "Explore magic worlds.",
-          tags: [
-            "rpg",
-            "magic",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-werewolf-illustration_23-2149634690.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <CategoriesSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Player Feedback"
-      title="Loved by Gamers"
-      description="See why thousands choose us for their daily game session."
-      testimonials={[
-        {
-          name: "Sarah J.",
-          role: "Pro Gamer",
-          quote: "Arcade-OS is lightning fast. Best browser platform.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-keeps-hands-stereo-wireless-headphones-smiles-broadly-being-good-mood-dressed-formal-jacket-enjoys-spare-time_273609-51375.jpg",
-        },
-        {
-          name: "Mark L.",
-          role: "Casual",
-          quote: "So many games to choose from, I never get bored.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg",
-        },
-        {
-          name: "Elena R.",
-          role: "Developer",
-          quote: "Clean UI and great performance in every single title.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/excited-casual-young-woman-playing-video-games-having-fun-red_158595-4736.jpg",
-        },
-        {
-          name: "Kyle T.",
-          role: "Gamer",
-          quote: "No downloads, just click and play. Perfect.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-streamer-stressed-using-computer-gaming-room_839833-34766.jpg",
-        },
-        {
-          name: "Anna P.",
-          role: "Fan",
-          quote: "The rhythm games are my favorite, very smooth.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-playing-videogame_23-2149350006.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about Arcade-OS."
-      items={[
-        {
-          question: "Are games free?",
-          answer: "Yes, all games are free to play.",
-        },
-        {
-          question: "Do I need to install anything?",
-          answer: "No, everything runs in your browser.",
-        },
-        {
-          question: "Is it mobile friendly?",
-          answer: "Most of our games support touch input.",
-        },
-        {
-          question: "How do I save progress?",
-          answer: "Use your browser local storage.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Get in touch"
-      text="Ready to showcase your own game on our platform?"
-      primaryButton={{
-        text: "Contact Support",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Developers Hub",
-        href: "#",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,39 @@
+// 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 AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
+import { ShieldCheck, Star, Zap } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutFeaturesSplit
+          tag="Our Philosophy"
+          title="Built for Speed & Quality"
+          description="Every game on Arcade-OS is crafted with pure WebGL. We prioritize optimized performance, modular code, and high-quality gameplay mechanics that bring classic fun back to your browser."
+          items={[
+            {
+              icon: Zap,
+              title: "Ultra-Fast",
+              description: "Optimized to run seamlessly on any device.",
+            },
+            {
+              icon: ShieldCheck,
+              title: "Secure",
+              description: "Safe, sandbox environment for all your games.",
+            },
+            {
+              icon: Star,
+              title: "Classic Fun",
+              description: "Hand-crafted mechanics inspired by the classics.",
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/light-equipment-grey-technology-serious_1134-1423.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Categories.tsx

@@ -0,0 +1,49 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "categories" section.
+
+import React from 'react';
+import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function CategoriesSection(): React.JSX.Element {
+  return (
+    <div id="categories" data-section="categories">
+        <SectionErrorBoundary name="categories">
+              <FeaturesDetailedCards
+          tag="Genres"
+          title="Explore by Genre"
+          description="Find your favorites, from casual puzzles to hardcore arcade action."
+          items={[
+            {
+              title: "Action",
+              description: "Fast-paced games for adrenaline.",
+              tags: [
+                "arcane",
+                "speed",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120933.jpg",
+            },
+            {
+              title: "Logic",
+              description: "Brain-teasing puzzles.",
+              tags: [
+                "puzzles",
+                "logic",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-puzzle-background_23-2149289241.jpg",
+            },
+            {
+              title: "Fantasy",
+              description: "Explore magic worlds.",
+              tags: [
+                "rpg",
+                "magic",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-werewolf-illustration_23-2149634690.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="Get in touch"
+          text="Ready to showcase your own game on our platform?"
+          primaryButton={{
+            text: "Contact Support",
+            href: "#",
+          }}
+          secondaryButton={{
+            text: "Developers Hub",
+            href: "#",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,38 @@
+// 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';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="Support"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about Arcade-OS."
+          items={[
+            {
+              question: "Are games free?",
+              answer: "Yes, all games are free to play.",
+            },
+            {
+              question: "Do I need to install anything?",
+              answer: "No, everything runs in your browser.",
+            },
+            {
+              question: "Is it mobile friendly?",
+              answer: "Most of our games support touch input.",
+            },
+            {
+              question: "How do I save progress?",
+              answer: "Use your browser local storage.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Games.tsx

@@ -0,0 +1,167 @@
+/* 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 TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    title: "Cyber Run",
+    description: "Endless runner with neon obstacles.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/8-bit-graphics-pixels-scene-with-person-walking-dog-park_23-2151120973.jpg"
+  },
+  {
+    title: "Turbo Drift",
+    description: "High-speed arcade racing.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/batmobile-car-with-neon-lights_23-2151649924.jpg"
+  },
+  {
+    title: "Hex Puzzle",
+    description: "Space-themed geometric puzzle.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499253.jpg"
+  },
+  {
+    title: "Star Hunter",
+    description: "Arcade space shooter.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/coloured-nebula-background_1048-1944.jpg"
+  },
+  {
+    title: "Dark Dungeon",
+    description: "Classic fantasy crawler.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/mystical-samurai-glowing-forest_23-2151995181.jpg"
+  },
+  {
+    title: "City Tactics",
+    description: "Real-time strategy challenge.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg"
+  },
+  {
+    title: "Beat Stream",
+    description: "Rhythm-based music challenge.",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688571.jpg"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+}
+
+const GamesInline = () => {
+  const gridClasses = [
+    "md:col-span-2",
+    "md:col-span-4",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-2",
+    "md:col-span-2",
+    "md:col-span-2",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0,
+    0.1,
+    0,
+    0.1,
+    0.2,
+  ];
+
+  return (
+    <section aria-label="Features reveal cards bento section" className="py-20">
+      <div className="flex flex-col 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>{"Instant Play"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Top Picks Today"}
+            variant="slide-up"
+            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={"Our curated library of top-performing titles across multiple genres."}
+            variant="slide-up"
+            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>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+          {items.map((item, index) => (
+            <ScrollReveal key={item.title} variant="fade-blur" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
+              <a href={item.href} className="block relative overflow-hidden rounded">
+                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
+                  <ImageOrVideo
+                    imageSrc={item.imageSrc}
+                    videoSrc={item.videoSrc}
+                    className="rounded group-hover:scale-105 transition-transform duration-500"
+                  />
+                </div>
+                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
+                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
+                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
+                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
+                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
+                      {item.title}
+                    </h3>
+                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
+                      <div className="overflow-hidden opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
+                        <p className="text-base leading-snug text-foreground">
+                          {item.description}
+                        </p>
+                        <p className="mt-2 text-sm font-semibold text-[var(--primary-cta)] flex items-center gap-1">
+                          Play Now <span aria-hidden="true">&rarr;</span>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function GamesSection() {
+  return (
+    <div data-webild-section="games" id="games">
+      <GamesInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,68 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitVerticalMarquee
+          tag="Next-Gen Gaming Platform"
+          title="300+ Games. Zero Install."
+          description="Experience high-performance browser gaming built on WebGL. Instant play, no downloads required."
+          primaryButton={{
+            text: "Start Playing Now",
+            href: "#games",
+          }}
+          secondaryButton={{
+            text: "Join Community",
+            href: "#contact",
+          }}
+          leftItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-techno-communications-background-with-plexus-design_1048-12648.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172434.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-tunnel-with-neon-lights-geometric-patterns_23-2151966347.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-science-fiction-tunnel-corridor-with-lines-neon-blue-red-lights_181624-26525.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599395.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-finance-digital-market-graph-user-interface-with-diagram-technology-hud-graphic-concept_90220-1365.jpg",
+            },
+          ]}
+          rightItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-low-poly-plexus-design_1048-13548.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-neon-futuristic-tunnel_23-2151966345.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes_181624-23687.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/iguana-with-neon-lights_23-2151695303.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-cityscape-with-neon-lights_23-2151966351.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/team-looking-futuristic-digital-interface-office_23-2151966687.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 TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialRatingCards
+          tag="Player Feedback"
+          title="Loved by Gamers"
+          description="See why thousands choose us for their daily game session."
+          testimonials={[
+            {
+              name: "Sarah J.",
+              role: "Pro Gamer",
+              quote: "Arcade-OS is lightning fast. Best browser platform.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/woman-keeps-hands-stereo-wireless-headphones-smiles-broadly-being-good-mood-dressed-formal-jacket-enjoys-spare-time_273609-51375.jpg",
+            },
+            {
+              name: "Mark L.",
+              role: "Casual",
+              quote: "So many games to choose from, I never get bored.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg",
+            },
+            {
+              name: "Elena R.",
+              role: "Developer",
+              quote: "Clean UI and great performance in every single title.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/excited-casual-young-woman-playing-video-games-having-fun-red_158595-4736.jpg",
+            },
+            {
+              name: "Kyle T.",
+              role: "Gamer",
+              quote: "No downloads, just click and play. Perfect.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-streamer-stressed-using-computer-gaming-room_839833-34766.jpg",
+            },
+            {
+              name: "Anna P.",
+              role: "Fan",
+              quote: "The rhythm games are my favorite, very smooth.",
+              rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-playing-videogame_23-2149350006.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}