Merge version_2_1781349411084 into main

Merge version_2_1781349411084 into main

src/pages/HomePage.tsx

@@ -1,155 +1,26 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
-import HeroBrand from '@/components/sections/hero/HeroBrand';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-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; this shell only fixes render order.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import FeaturesSection from './HomePage/sections/Features';
+import MetricsSection from './HomePage/sections/Metrics';
+import ProductsSection from './HomePage/sections/Products';
+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">
-          <HeroBrand
-      brand="SHARK APEX 3D"
-      description="The future of marine predators, digitized. Experience hyper-realistic shark assets rendered for the next generation of creative media."
-      primaryButton={{
-        text: "Explore Assets",        href: "#products"}}
-      secondaryButton={{
-        text: "View Specs",        href: "#features"}}
-      imageSrc="https://images.pexels.com/photos/18545019/pexels-photo-18545019.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesTaggedCards
-      tag="Capabilities"
-      title="Built for Hyper-Realism"
-      description="Our 3D models are engineered with anatomical precision and cybernetic artistic flair."
-      items={[
-        {
-          tag: "Anatomy",          title: "Dynamic Skeletal Structure",          description: "Anatomically accurate bone rigging with real-time response to environment.",          primaryButton: {
-            text: "Details",            href: "#"},
-          imageSrc: "https://images.pexels.com/photos/3137078/pexels-photo-3137078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-        {
-          tag: "Motion",          title: "Fluid Kinetic Physics",          description: "Advanced physics engine simulations for seamless, lifelike predator motion.",          primaryButton: {
-            text: "Details",            href: "#"},
-          imageSrc: "https://images.pexels.com/photos/7825841/pexels-photo-7825841.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-        {
-          tag: "Texture",          title: "Carbon Fiber Dermal Mapping",          description: "High-fidelity shader maps that react to light, texture, and depth of field.",          primaryButton: {
-            text: "Details",            href: "#"},
-          imageSrc: "https://images.pexels.com/photos/37924991/pexels-photo-37924991.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-      tag="Performance"
-      title="Unmatched Precision"
-      description="Leading the market in 3D creature design complexity."
-      metrics={[
-        {
-          value: "1.2M",          title: "Polygons per Model",          description: "High-density mesh for cinematic rendering.",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=0k5y3v"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesImageBento
-      tag="Gallery"
-      title="Elite Shark Assets"
-      description="Browse our complete collection of 3D cyber-predators."
-      items={[
-        {
-          title: "Chrome Predator",          description: "High detail chrome shark head",          imageSrc: "https://images.pexels.com/photos/31402721/pexels-photo-31402721.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-        {
-          title: "Exo-Suit",          description: "Wearable marine exoskeleton",          imageSrc: "https://images.pexels.com/photos/9242927/pexels-photo-9242927.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-        {
-          title: "Deep Water",          description: "Zero gravity swimming beast",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=uhesnr"},
-        {
-          title: "Triangle Data",          description: "Geometric low-poly form",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=0v17l3"},
-        {
-          title: "Apex Display",          description: "Isometric tech sculpture",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=7tv7mn"},
-        {
-          title: "Camera Eye",          description: "Digital macro shark vision",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=spzbov"},
-        {
-          title: "Neon Swimmer",          description: "Particle swimming apex",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=oah1jz"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialMarqueeOverlayCards
-      tag="Reviews"
-      title="Industry Leaders trust Apex 3D"
-      description="Our clients are at the forefront of digital innovation."
-      testimonials={[
-        {
-          name: "Alex Rivers",          role: "VFX Artist",          company: "StudioOne",          rating: 5,
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=r9f5cb"},
-        {
-          name: "Maya Chen",          role: "Lead Animator",          company: "TechMotion",          rating: 5,
-          imageSrc: "https://images.pexels.com/photos/7971557/pexels-photo-7971557.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
-        {
-          name: "Sam Thorne",          role: "Data Scientist",          company: "VividVision",          rating: 5,
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=hfghb7"},
-        {
-          name: "Elena Voss",          role: "Creative Director",          company: "DigitalFrontier",          rating: 5,
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=4d93ym"},
-        {
-          name: "Markus K.",          role: "Programmer",          company: "CoreSoft",          rating: 5,
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=nrdatz"},
-        {
-          name: "Nina Rose",          role: "Product Lead",          company: "PixelPerfect",          rating: 5,
-          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=ld6562"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Have questions about our digital assets? Find the answers here."
-      items={[
-        {
-          question: "What formats do you support?",          answer: "We support all industry-standard formats including OBJ, FBX, and BLEND."},
-        {
-          question: "Is there commercial licensing?",          answer: "Yes, every asset comes with a commercial-use license for professional projects."},
-        {
-          question: "Can I request custom work?",          answer: "Custom creature modeling is available for enterprise clients upon request."},
-        {
-          question: "Is support provided?",          answer: "Lifetime support and version updates are included with every purchase."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
-
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Contact"
-      text="Ready to dive deep into high-fidelity creature assets?"
-      primaryButton={{
-        text: "Consultation",        href: "#"}}
-      secondaryButton={{
-        text: "Contact Support",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+      <HeroSection />
+      <FeaturesSection />
+      <MetricsSection />
+      <ProductsSection />
+      <TestimonialsSection />
+      <FaqSection />
+      <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,23 @@
+// 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="Contact"
+          text="Ready to dive deep into high-fidelity creature assets?"
+          primaryButton={{
+            text: "Consultation",        href: "#"}}
+          secondaryButton={{
+            text: "Contact Support",        href: "#"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,30 @@
+// 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="Have questions about our digital assets? Find the answers here."
+          items={[
+            {
+              question: "What formats do you support?",          answer: "We support all industry-standard formats including OBJ, FBX, and BLEND."},
+            {
+              question: "Is there commercial licensing?",          answer: "Yes, every asset comes with a commercial-use license for professional projects."},
+            {
+              question: "Can I request custom work?",          answer: "Custom creature modeling is available for enterprise clients upon request."},
+            {
+              question: "Is support provided?",          answer: "Lifetime support and version updates are included with every purchase."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Features.tsx

@@ -0,0 +1,34 @@
+// 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 FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesTaggedCards
+          tag="Capabilities"
+          title="Built for Hyper-Realism"
+          description="Our 3D models are engineered with anatomical precision and cybernetic artistic flair."
+          items={[
+            {
+              tag: "Anatomy",          title: "Dynamic Skeletal Structure",          description: "Anatomically accurate bone rigging with real-time response to environment.",          primaryButton: {
+                text: "Details",            href: "#"},
+              imageSrc: "https://images.pexels.com/photos/3137078/pexels-photo-3137078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+            {
+              tag: "Motion",          title: "Fluid Kinetic Physics",          description: "Advanced physics engine simulations for seamless, lifelike predator motion.",          primaryButton: {
+                text: "Details",            href: "#"},
+              imageSrc: "https://images.pexels.com/photos/7825841/pexels-photo-7825841.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+            {
+              tag: "Texture",          title: "Carbon Fiber Dermal Mapping",          description: "High-fidelity shader maps that react to light, texture, and depth of field.",          primaryButton: {
+                text: "Details",            href: "#"},
+              imageSrc: "https://images.pexels.com/photos/37924991/pexels-photo-37924991.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+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";
+
+const primaryButton = {
+  text: "Explore Assets",
+  href: "#products"
+};
+const secondaryButton = {
+  text: "View Specs",
+  href: "#features"
+};
+
+type HeroBrandProps = {
+  brand: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+const JawsIntro = ({ onComplete }: { onComplete: () => void }) => {
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const t1 = setTimeout(() => setPhase(1), 1500);
+    const t2 = setTimeout(() => setPhase(2), 2000);
+    const t3 = setTimeout(() => setPhase(3), 2300);
+    const t4 = setTimeout(() => onComplete(), 3500);
+
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+      clearTimeout(t4);
+    };
+  }, [onComplete]);
+
+  return (
+    <motion.div 
+      className="fixed inset-0 z-[100] bg-black overflow-hidden flex items-center justify-center pointer-events-none"
+      animate={phase === 3 ? { opacity: 0, scale: 1.2 } : { opacity: 1, scale: 1 }}
+      transition={{ duration: 1.2, ease: "easeInOut" }}
+    >
+      <motion.div 
+        className="absolute inset-0"
+        animate={phase >= 1 ? { scale: 1.1, filter: "blur(8px)" } : { scale: 1, filter: "blur(0px)" }}
+        transition={{ duration: 0.5 }}
+      >
+        <video 
+          src="https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4" 
+          autoPlay 
+          muted 
+          loop 
+          playsInline
+          className="w-full h-full object-cover opacity-80"
+        />
+      </motion.div>
+
+      <motion.div 
+        className="absolute top-0 left-0 w-full h-[55vh] bg-zinc-950"
+        initial={{ y: "-100%" }}
+        animate={{ 
+          y: phase === 0 ? "-100%" : phase === 1 ? "-30%" : phase === 2 ? "0%" : "-100%" 
+        }}
+        transition={{ duration: 0.2, type: "spring", damping: 12, stiffness: 100 }}
+        style={{ clipPath: "polygon(0% 0%, 100% 0%, 100% 80%, 95% 100%, 90% 80%, 85% 100%, 80% 80%, 75% 100%, 70% 80%, 65% 100%, 60% 80%, 55% 100%, 50% 80%, 45% 100%, 40% 80%, 35% 100%, 30% 80%, 25% 100%, 20% 80%, 15% 100%, 10% 80%, 5% 100%, 0% 80%)" }}
+      />
+
+      <motion.div 
+        className="absolute bottom-0 left-0 w-full h-[55vh] bg-zinc-950"
+        initial={{ y: "100%" }}
+        animate={{ 
+          y: phase === 0 ? "100%" : phase === 1 ? "30%" : phase === 2 ? "0%" : "100%" 
+        }}
+        transition={{ duration: 0.2, type: "spring", damping: 12, stiffness: 100 }}
+        style={{ clipPath: "polygon(0% 100%, 100% 100%, 100% 20%, 95% 0%, 90% 20%, 85% 0%, 80% 20%, 75% 0%, 70% 20%, 65% 0%, 60% 20%, 55% 0%, 50% 20%, 45% 0%, 40% 20%, 35% 0%, 30% 20%, 25% 0%, 20% 20%, 15% 0%, 10% 20%, 5% 0%, 0% 20%)" }}
+      />
+
+      {phase === 2 && (
+        <motion.div 
+          className="absolute inset-0 bg-red-600 mix-blend-overlay"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: [0, 0.8, 0] }}
+          transition={{ duration: 0.3 }}
+        />
+      )}
+    </motion.div>
+  );
+};
+
+const HeroInline = () => {
+  const [introDone, setIntroDone] = useState(false);
+
+  return (
+    <section
+      aria-label="Hero section"
+      className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
+    >
+      <AnimatePresence>
+        {!introDone && <JawsIntro onComplete={() => setIntroDone(true)}></JawsIntro>}
+      </AnimatePresence>
+
+      <HeroBackgroundSlot />
+      
+      <motion.div 
+        className="absolute inset-0 w-full h-full"
+        initial={{ scale: 1.2, filter: "blur(10px)" }}
+        animate={{ scale: introDone ? 1 : 1.2, filter: introDone ? "blur(0px)" : "blur(10px)" }}
+        transition={{ duration: 1.5, ease: "easeOut" }}
+      >
+        <ImageOrVideo
+          imageSrc={"https://images.pexels.com/photos/18545019/pexels-photo-18545019.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"}
+          className="absolute inset-0 w-full h-full object-cover rounded-none"
+        />
+      </motion.div>
+
+      <div
+        className="absolute z-10 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 backdrop-blur-xl mask-[linear-gradient(to_bottom,transparent,black_60%)]"
+        aria-hidden="true"
+      />
+
+      <div className="relative z-10 w-content-width mx-auto pb-5">
+        <motion.div 
+          className="flex flex-col"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: introDone ? 1 : 0, y: introDone ? 0 : 50 }}
+          transition={{ duration: 1, delay: 0.5 }}
+        >
+          <div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5">
+            <TextAnimation
+              text={"The future of marine predators, digitized. Experience hyper-realistic shark assets rendered for the next generation of creative media."}
+              variant="fade"
+              gradientText={false}
+              tag="p"
+              className="w-full md:w-1/2 text-lg md:text-2xl text-balance font-normal text-white leading-snug"
+            />
+
+            <div className="w-full md:w-1/2 flex justify-start md:justify-end">
+              <div className="flex flex-wrap gap-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>
+
+          <AutoFillText className="font-semibold text-white">{"SHARK APEX 3D"}</AutoFillText>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,24 @@
+// 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="Performance"
+          title="Unmatched Precision"
+          description="Leading the market in 3D creature design complexity."
+          metrics={[
+            {
+              value: "1.2M",          title: "Polygons per Model",          description: "High-density mesh for cinematic rendering.",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=0k5y3v"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Products.tsx

@@ -0,0 +1,36 @@
+// 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 FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesImageBento
+          tag="Gallery"
+          title="Elite Shark Assets"
+          description="Browse our complete collection of 3D cyber-predators."
+          items={[
+            {
+              title: "Chrome Predator",          description: "High detail chrome shark head",          imageSrc: "https://images.pexels.com/photos/31402721/pexels-photo-31402721.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+            {
+              title: "Exo-Suit",          description: "Wearable marine exoskeleton",          imageSrc: "https://images.pexels.com/photos/9242927/pexels-photo-9242927.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+            {
+              title: "Deep Water",          description: "Zero gravity swimming beast",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=uhesnr"},
+            {
+              title: "Triangle Data",          description: "Geometric low-poly form",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=0v17l3"},
+            {
+              title: "Apex Display",          description: "Isometric tech sculpture",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=7tv7mn"},
+            {
+              title: "Camera Eye",          description: "Digital macro shark vision",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=spzbov"},
+            {
+              title: "Neon Swimmer",          description: "Particle swimming apex",          imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=oah1jz"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Testimonials.tsx

@@ -0,0 +1,40 @@
+// 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="Reviews"
+          title="Industry Leaders trust Apex 3D"
+          description="Our clients are at the forefront of digital innovation."
+          testimonials={[
+            {
+              name: "Alex Rivers",          role: "VFX Artist",          company: "StudioOne",          rating: 5,
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=r9f5cb"},
+            {
+              name: "Maya Chen",          role: "Lead Animator",          company: "TechMotion",          rating: 5,
+              imageSrc: "https://images.pexels.com/photos/7971557/pexels-photo-7971557.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"},
+            {
+              name: "Sam Thorne",          role: "Data Scientist",          company: "VividVision",          rating: 5,
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=hfghb7"},
+            {
+              name: "Elena Voss",          role: "Creative Director",          company: "DigitalFrontier",          rating: 5,
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=4d93ym"},
+            {
+              name: "Markus K.",          role: "Programmer",          company: "CoreSoft",          rating: 5,
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=nrdatz"},
+            {
+              name: "Nina Rose",          role: "Product Lead",          company: "PixelPerfect",          rating: 5,
+              imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=ld6562"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}