From 72d96e4bc8d7c632e201a5f34c154569e1cba415 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 22 Jun 2026 18:01:45 +0000
Subject: [PATCH] Bob AI: Update gallery section with images from Google Maps
 links

---
 src/pages/HomePage.tsx                        | 179 ++---------------
 src/pages/HomePage/sections/Contact.tsx       |  69 +++++--
 .../HomePage/sections/ContactSection.tsx      |  62 ++++++
 src/pages/HomePage/sections/Gallery.tsx       | 188 ++++--------------
 .../HomePage/sections/GallerySection.tsx      |  46 +++++
 src/pages/HomePage/sections/HeroSection.tsx   |  39 ++++
 src/pages/HomePage/sections/Testimonials.tsx  |  87 ++++----
 .../HomePage/sections/TestimonialsSection.tsx |  55 +++++
 8 files changed, 352 insertions(+), 373 deletions(-)
 create mode 100644 src/pages/HomePage/sections/ContactSection.tsx
 create mode 100644 src/pages/HomePage/sections/GallerySection.tsx
 create mode 100644 src/pages/HomePage/sections/HeroSection.tsx
 create mode 100644 src/pages/HomePage/sections/TestimonialsSection.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 7075f5d..26bcc11 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,174 +1,31 @@
+// 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 React from '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 Card from '@/components/ui/Card';
-import Input from '@/components/ui/Input';
-import Textarea from '@/components/ui/Textarea';
-import Label from '@/components/ui/Label';
-import AvatarAuthor from '@/components/ui/AvatarAuthor';
-import RatingStars from '@/components/ui/RatingStars';
+import HeroSectionSection from './HomePage/sections/HeroSection';
+import GallerySectionSection from './HomePage/sections/GallerySection';
+import GallerySection from './HomePage/sections/Gallery';
+import TestimonialsSectionSection from './HomePage/sections/TestimonialsSection';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import ContactSectionSection from './HomePage/sections/ContactSection';
+import ContactSection from './HomePage/sections/Contact';
 
 export default function HomePage(): React.JSX.Element {
   return (
-    <>
+<>
       {/* Hero Section */}
-      <div data-webild-section="HeroSection">
-        <section className="bg-background relative overflow-hidden">
-          <div className="w-content-width mx-auto flex flex-col items-center text-center gap-6 relative z-10">
-            <div className="px-3 py-1 text-sm card rounded w-fit">
-              <p>Welcome to BCZ Motors</p>
-            </div>
-            <TextAnimation
-              text="Premium Vehicles, Exceptional Service"
-              variant="slide-up"
-              gradientText={true}
-              tag="h1"
-              className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-balance"
-            />
-            <TextAnimation
-              text="Discover our curated selection of high-quality vehicles. At BCZ Motors, we deliver excellence, reliability, and a seamless buying experience."
-              variant="slide-up"
-              gradientText={false}
-              tag="p"
-              className="text-lg md:text-xl text-accent max-w-content-width text-balance"
-            />
-            <div className="flex flex-wrap justify-center gap-4 mt-4">
-              <Button text="View Inventory" href="#gallery" variant="primary" />
-              <Button text="Contact Us" href="#contact" variant="secondary" />
-            </div>
-          </div>
-          <div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
-        </section>
-      </div>
+      <HeroSectionSection />
 
       {/* Gallery Section */}
-      <div data-webild-section="GallerySection">
-        <section id="gallery" className="bg-background">
-          <div className="w-content-width mx-auto flex flex-col">
-            <div className="flex flex-col items-center text-center gap-4">
-              <TextAnimation
-                text="Our Showroom"
-                variant="fade-blur"
-                gradientText={true}
-                tag="h2"
-                className="text-4xl md:text-5xl font-bold"
-              />
-              <p className="text-lg text-accent max-w-content-width">
-                Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
-              </p>
-            </div>
-            <ScrollReveal variant="slide-up">
-              <GridOrCarousel>
-                <div className="card rounded overflow-hidden aspect-video relative">
-                  <img src="https://images.unsplash.com/photo-1503376713246-73ad4f0d4e04?auto=format&fit=crop&w=800&q=80" alt="Luxury sports car in modern showroom" className="absolute inset-0 w-full h-full object-cover" />
-                </div>
-                <div className="card rounded overflow-hidden aspect-video relative">
-                  <img src="https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=800&q=80" alt="Premium SUV parked outside dealership" className="absolute inset-0 w-full h-full object-cover" />
-                </div>
-                <div className="card rounded overflow-hidden aspect-video relative">
-                  <img src="https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?auto=format&fit=crop&w=800&q=80" alt="Sleek black sedan interior with leather seats" className="absolute inset-0 w-full h-full object-cover" />
-                </div>
-                <div className="card rounded overflow-hidden aspect-video relative">
-                  <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
-                </div>
-              </GridOrCarousel>
-            </ScrollReveal>
-          </div>
-        </section>
-      </div>
+      <GallerySectionSection />
 
       {/* Testimonials Section */}
-      <div data-webild-section="TestimonialsSection">
-        <section id="testimonials" className="bg-background">
-          <div className="w-content-width mx-auto flex flex-col">
-            <div className="flex flex-col items-center text-center gap-4">
-              <TextAnimation
-                text="What Our Customers Say"
-                variant="fade-blur"
-                gradientText={true}
-                tag="h2"
-                className="text-4xl md:text-5xl font-bold"
-              />
-            </div>
-            <ScrollReveal variant="slide-up">
-              <GridOrCarousel>
-                <Card className="p-6 flex flex-col gap-4">
-                  <RatingStars rating={5} />
-                  <p className="text-base text-foreground flex-grow">
-                    "BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
-                  </p>
-                  <AvatarAuthor name="Michael T." role="Customer" imageSrc="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&q=80" />
-                </Card>
-                <Card className="p-6 flex flex-col gap-4">
-                  <RatingStars rating={5} />
-                  <p className="text-base text-foreground flex-grow">
-                    "I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
-                  </p>
-                  <AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&q=80" />
-                </Card>
-                <Card className="p-6 flex flex-col gap-4">
-                  <RatingStars rating={5} />
-                  <p className="text-base text-foreground flex-grow">
-                    "Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
-                  </p>
-                  <AvatarAuthor name="David R." role="Customer" imageSrc="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80" />
-                </Card>
-              </GridOrCarousel>
-            </ScrollReveal>
-          </div>
-        </section>
-      </div>
+      <TestimonialsSectionSection />
 
       {/* Contact Section */}
-      <div data-webild-section="ContactSection">
-        <section id="contact" className="bg-background">
-          <div className="w-content-width mx-auto flex flex-col md:flex-row">
-            <div className="flex-1 flex flex-col gap-6">
-              <TextAnimation
-                text="Get in Touch"
-                variant="slide-up"
-                gradientText={true}
-                tag="h2"
-                className="text-4xl md:text-5xl font-bold"
-              />
-              <p className="text-lg text-accent">
-                Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
-              </p>
-              <div className="flex flex-col gap-4 mt-4">
-                <div className="card p-4 rounded flex flex-col gap-1">
-                  <span className="font-semibold text-foreground">Address</span>
-                  <span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
-                </div>
-                <div className="card p-4 rounded flex flex-col gap-1">
-                  <span className="font-semibold text-foreground">Phone</span>
-                  <span className="text-accent">(555) 123-4567</span>
-                </div>
-                <div className="card p-4 rounded flex flex-col gap-1">
-                  <span className="font-semibold text-foreground">Email</span>
-                  <span className="text-accent">sales@bczmotors.com</span>
-                </div>
-              </div>
-            </div>
-            <div className="flex-1">
-              <Card className="p-6 md:p-8 flex flex-col gap-4">
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" placeholder="Your name" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input id="email" type="email" placeholder="Your email address" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="message">Message</Label>
-                  <Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
-              </Card>
-            </div>
-          </div>
-        </section>
-      </div>
+      <ContactSectionSection />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
index 2c049b6..befb43e 100644
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -2,26 +2,59 @@
 // 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";
+import Button from '@/components/ui/Button';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Card from '@/components/ui/Card';
+import Input from '@/components/ui/Input';
+import Textarea from '@/components/ui/Textarea';
+import Label from '@/components/ui/Label';
 
 export default function ContactSection(): React.JSX.Element {
   return (
-    <div id="contact" data-section="contact">
-        <SectionErrorBoundary name="contact">
-              <ContactCta
-          tag="READY TO TRANSFORM?"
-          text="Get a professional consultation and quote for your vehicle project today."
-          primaryButton={{
-            text: "Get Quote",
-            href: "#",
-          }}
-          secondaryButton={{
-            text: "Contact Us",
-            href: "#",
-          }}
-        />
-        </SectionErrorBoundary>
-      </div>
+    <section id="contact" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col md:flex-row">
+                <div className="flex-1 flex flex-col gap-6">
+                  <TextAnimation
+                    text="Get in Touch"
+                    variant="slide-up"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                  <p className="text-lg text-accent">
+                    Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
+                  </p>
+                  <div className="flex flex-col gap-4 mt-4">
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Address</span>
+                      <span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
+                    </div>
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Phone</span>
+                      <span className="text-accent">(555) 123-4567</span>
+                    </div>
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Email</span>
+                      <span className="text-accent">sales@bczmotors.com</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <Card className="p-6 md:p-8 flex flex-col gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="name">Name</Label>
+                      <Input id="name" placeholder="Your name" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="email">Email</Label>
+                      <Input id="email" type="email" placeholder="Your email address" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="message">Message</Label>
+                      <Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
+                  </Card>
+                </div>
+              </div>
+            </section>
   );
 }
diff --git a/src/pages/HomePage/sections/ContactSection.tsx b/src/pages/HomePage/sections/ContactSection.tsx
new file mode 100644
index 0000000..0b2add9
--- /dev/null
+++ b/src/pages/HomePage/sections/ContactSection.tsx
@@ -0,0 +1,62 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "ContactSection" section.
+
+import React from 'react';
+import Button from '@/components/ui/Button';
+import TextAnimation from '@/components/ui/TextAnimation';
+import Card from '@/components/ui/Card';
+import Input from '@/components/ui/Input';
+import Textarea from '@/components/ui/Textarea';
+import Label from '@/components/ui/Label';
+
+export default function ContactSectionSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="ContactSection">
+            <section id="contact" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col md:flex-row">
+                <div className="flex-1 flex flex-col gap-6">
+                  <TextAnimation
+                    text="Get in Touch"
+                    variant="slide-up"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                  <p className="text-lg text-accent">
+                    Have questions about a vehicle or want to schedule a test drive? Fill out the form and our team will get back to you shortly.
+                  </p>
+                  <div className="flex flex-col gap-4 mt-4">
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Address</span>
+                      <span className="text-accent">123 Auto Plaza, Motor City, MC 90210</span>
+                    </div>
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Phone</span>
+                      <span className="text-accent">(555) 123-4567</span>
+                    </div>
+                    <div className="card p-4 rounded flex flex-col gap-1">
+                      <span className="font-semibold text-foreground">Email</span>
+                      <span className="text-accent">sales@bczmotors.com</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <Card className="p-6 md:p-8 flex flex-col gap-4">
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="name">Name</Label>
+                      <Input id="name" placeholder="Your name" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="email">Email</Label>
+                      <Input id="email" type="email" placeholder="Your email address" />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <Label htmlFor="message">Message</Label>
+                      <Textarea id="message" placeholder="How can we help you?"rows={4} /> </div> <Button text="Send Message" variant="primary" className="w-full mt-2" />
+                  </Card>
+                </div>
+              </div>
+            </section>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Gallery.tsx b/src/pages/HomePage/sections/Gallery.tsx
index 0b320f9..caa6116 100644
--- a/src/pages/HomePage/sections/Gallery.tsx
+++ b/src/pages/HomePage/sections/Gallery.tsx
@@ -1,158 +1,44 @@
-/* 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";
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "gallery" section.
 
-const items = [
-  {
-    title: "Metallic Crimson",
-    description: "High-end luxury finish.",
-    imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3043.jpg"
-  },
-  {
-    title: "Satin Black Stealth",
-    description: "Aggressive, textured aesthetics.",
-    imageSrc: "http://img.b2bpic.net/free-vector/abstract-background-with-x-top_125964-4135.jpg"
-  },
-  {
-    title: "Custom Racing Livery",
-    description: "Precision performance design.",
-    imageSrc: "http://img.b2bpic.net/free-vector/abstract-geometric-background_779267-2914.jpg"
-  },
-  {
-    title: "Interior Carbon Wrap",
-    description: "Refined cockpit details.",
-    imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746623.jpg"
-  },
-  {
-    title: "Chrome Night Finish",
-    description: "Reflective urban artistry.",
-    imageSrc: "http://img.b2bpic.net/free-photo/curved-blue-sports-car-hood-showing-abstract-reflection_8353-8393.jpg"
-  },
-  {
-    title: "Chameleon Iridescent",
-    description: "Dynamic, color-shifting finish.",
-    imageSrc: "http://img.b2bpic.net/free-photo/close-up-iguana-nature_23-2151718784.jpg"
-  },
-  {
-    title: "Modern Matte White",
-    description: "Clean, minimalist excellence.",
-    imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=v8le8s"
-  }
-];
-
-type FeatureItem = {
-  title: string;
-  description: string;
-  href?: string;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-interface FeaturesImageBentoProps {
-  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 GalleryInline = () => {
-  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,
-  ];
+import React from 'react';
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
+import ScrollReveal from '@/components/ui/ScrollReveal';
 
+export default function GallerySection(): React.JSX.Element {
   return (
-    <section aria-label="Features image bento section" className="py-20 bg-background">
-      <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>{"SHOWCASE"}</p>
-          </div>
-
-          <TextAnimation
-            text={"Featured Transformations"}
-            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={"Discover a selection of our most iconic custom car wraps and high-performance vehicle transformations."}
-            variant="slide-up"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance text-accent"
-          />
-
-          {(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) => {
-            const content = (
-              <div className="relative 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 className="absolute inset-x-5 bottom-5 xl:inset-x-6 xl:bottom-6 2xl:inset-x-7 2xl:bottom-7 flex flex-col text-foreground">
-                  <span className="text-2xl font-semibold leading-snug truncate">{item.title}</span>
-                  <span className="text-base leading-snug truncate text-accent">{item.description}</span>
+    <section id="gallery" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col">
+                <div className="flex flex-col items-center text-center gap-4">
+                  <TextAnimation
+                    text="Our Showroom"
+                    variant="fade-blur"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                  <p className="text-lg text-accent max-w-content-width">
+                    Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
+                  </p>
                 </div>
+                <ScrollReveal variant="slide-up">
+                  <GridOrCarousel>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAGHpfGGCaEsptnAuWXZsXjw1Y64FVTdWKtvdgrZtuVaKtsHwXnKjBWciPeDhbFadQXfxITBEjK0FxpZZMF22AoBK56pJanM-pAjYKJARa3FVbbLK4CtvGCeIDNgiHHCat4xO18i=s800" alt="BCZ Motors Garage" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAHfrsWvfS_ZbKpJGNJRMc8eRYV1yeMC63ugDmXZs8yexSQb_N3ELpFAM8fVqriKalhxrtG2R96FYSAQhqaNpZd9cDLfknJks4zLBx0-KyOJs-7IVnqdWME9H9wRptp-uaHFJUHt_A=s800" alt="BCZ Motors Service" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://lh3.googleusercontent.com/gps-cs-s/APNQkAGjDTlPoLSTc-1h34SMrd8PdSlVoGFgUCNw78W_fPu0lANIvj7qsYkNU-Csw6_nfg06iDo6UPowDq5qkiEconXDd-8Y9hLEi5lCjGK5MogCLNSDryPam8qQpujqckhDJsU9sBuk=s800" alt="BCZ Motors Workshop" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                  </GridOrCarousel>
+                </ScrollReveal>
               </div>
-            );
-
-            return (
-              <ScrollReveal key={index} variant="fade-blur" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
-                {item.href ? (
-                  <a href={item.href} className="block overflow-hidden rounded">
-                    {content}
-                  </a>
-                ) : (
-                  <div className="overflow-hidden rounded">
-                    {content}
-                  </div>
-                )}
-              </ScrollReveal>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default function GallerySection() {
-  return (
-    <div data-webild-section="gallery" id="gallery">
-      <GalleryInline />
-    </div>
+            </section>
   );
 }
diff --git a/src/pages/HomePage/sections/GallerySection.tsx b/src/pages/HomePage/sections/GallerySection.tsx
new file mode 100644
index 0000000..b44c213
--- /dev/null
+++ b/src/pages/HomePage/sections/GallerySection.tsx
@@ -0,0 +1,46 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "GallerySection" section.
+
+import React from 'react';
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+
+export default function GallerySectionSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="GallerySection">
+            <section id="gallery" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col">
+                <div className="flex flex-col items-center text-center gap-4">
+                  <TextAnimation
+                    text="Our Showroom"
+                    variant="fade-blur"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                  <p className="text-lg text-accent max-w-content-width">
+                    Take a look at our state-of-the-art facility and some of the premium vehicles we have to offer.
+                  </p>
+                </div>
+                <ScrollReveal variant="slide-up">
+                  <GridOrCarousel>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://images.unsplash.com/photo-1503376713246-73ad4f0d4e04?auto=format&fit=crop&w=800&q=80" alt="Luxury sports car in modern showroom" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://images.unsplash.com/photo-1519641471654-76ce0107ad1b?auto=format&fit=crop&w=800&q=80" alt="Premium SUV parked outside dealership" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?auto=format&fit=crop&w=800&q=80" alt="Sleek black sedan interior with leather seats" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                    <div className="card rounded overflow-hidden aspect-video relative">
+                      <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=800&q=80" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
+                    </div>
+                  </GridOrCarousel>
+                </ScrollReveal>
+              </div>
+            </section>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/HeroSection.tsx b/src/pages/HomePage/sections/HeroSection.tsx
new file mode 100644
index 0000000..0821dc4
--- /dev/null
+++ b/src/pages/HomePage/sections/HeroSection.tsx
@@ -0,0 +1,39 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "HeroSection" section.
+
+import React from 'react';
+import Button from '@/components/ui/Button';
+import TextAnimation from '@/components/ui/TextAnimation';
+
+export default function HeroSectionSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="HeroSection">
+            <section className="bg-background relative overflow-hidden">
+              <div className="w-content-width mx-auto flex flex-col items-center text-center gap-6 relative z-10">
+                <div className="px-3 py-1 text-sm card rounded w-fit">
+                  <p>Welcome to BCZ Motors</p>
+                </div>
+                <TextAnimation
+                  text="Premium Vehicles, Exceptional Service"
+                  variant="slide-up"
+                  gradientText={true}
+                  tag="h1"
+                  className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-balance"
+                />
+                <TextAnimation
+                  text="Discover our curated selection of high-quality vehicles. At BCZ Motors, we deliver excellence, reliability, and a seamless buying experience."
+                  variant="slide-up"
+                  gradientText={false}
+                  tag="p"
+                  className="text-lg md:text-xl text-accent max-w-content-width text-balance"
+                />
+                <div className="flex flex-wrap justify-center gap-4 mt-4">
+                  <Button text="View Inventory" href="#gallery" variant="primary" />
+                  <Button text="Contact Us" href="#contact" variant="secondary" />
+                </div>
+              </div>
+              <div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+            </section>
+          </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
index 30ad4f6..50bc4fc 100644
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -2,51 +2,52 @@
 // file as the canonical source for the "testimonials" section.
 
 import React from 'react';
-import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import Card from '@/components/ui/Card';
+import AvatarAuthor from '@/components/ui/AvatarAuthor';
+import RatingStars from '@/components/ui/RatingStars';
 
 export default function TestimonialsSection(): React.JSX.Element {
   return (
-    <div id="testimonials" data-section="testimonials">
-        <SectionErrorBoundary name="testimonials">
-              <TestimonialColumnMarqueeCards
-          tag="TESTIMONIALS"
-          title="Trusted by Enthusiasts"
-          description="Hear from drivers who entrusted their vehicles to the experts at BCZ Motors."
-          testimonials={[
-            {
-              name: "Alex R.",
-              role: "Sports Car Owner",
-              quote: "The precision is unbelievable. My car looks factory-new but better. Worth every penny.",
-              imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg",
-            },
-            {
-              name: "Sarah T.",
-              role: "Luxury Sedan Enthusiast",
-              quote: "BCZ transformed my ride entirely. The service, the professionalism, and the finish are top tier.",
-              imageSrc: "http://img.b2bpic.net/free-photo/stylish-businessman-working-cafe_1157-28464.jpg",
-            },
-            {
-              name: "Michael L.",
-              role: "Supercar Collector",
-              quote: "I won't trust anyone else with my fleet. Their attention to detail on edge-wrapping is unmatched.",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-leaning-car_1170-1438.jpg",
-            },
-            {
-              name: "Elena V.",
-              role: "Custom Design Client",
-              quote: "Absolutely thrilled with the custom livery. They captured exactly what I envisioned.",
-              imageSrc: "http://img.b2bpic.net/free-photo/family-with-little-son-car-salon_1157-21748.jpg",
-            },
-            {
-              name: "David H.",
-              role: "Professional Racer",
-              quote: "Durable, high-quality, and fast turnaround. BCZ is the gold standard for vinyl work.",
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
-            },
-          ]}
-        />
-        </SectionErrorBoundary>
-      </div>
+    <section id="testimonials" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col">
+                <div className="flex flex-col items-center text-center gap-4">
+                  <TextAnimation
+                    text="What Our Customers Say"
+                    variant="fade-blur"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                </div>
+                <ScrollReveal variant="slide-up">
+                  <GridOrCarousel>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
+                      </p>
+                      <AvatarAuthor name="Michael T." role="Customer" imageSrc="https://picsum.photos/seed/1108550957/1200/800" />
+                    </Card>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
+                      </p>
+                      <AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://picsum.photos/seed/1804608412/1200/800" />
+                    </Card>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
+                      </p>
+                      <AvatarAuthor name="David R." role="Customer" imageSrc="https://picsum.photos/seed/662571592/1200/800" />
+                    </Card>
+                  </GridOrCarousel>
+                </ScrollReveal>
+              </div>
+            </section>
   );
 }
diff --git a/src/pages/HomePage/sections/TestimonialsSection.tsx b/src/pages/HomePage/sections/TestimonialsSection.tsx
new file mode 100644
index 0000000..be42958
--- /dev/null
+++ b/src/pages/HomePage/sections/TestimonialsSection.tsx
@@ -0,0 +1,55 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "TestimonialsSection" section.
+
+import React from 'react';
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import Card from '@/components/ui/Card';
+import AvatarAuthor from '@/components/ui/AvatarAuthor';
+import RatingStars from '@/components/ui/RatingStars';
+
+export default function TestimonialsSectionSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="TestimonialsSection">
+            <section id="testimonials" className="bg-background">
+              <div className="w-content-width mx-auto flex flex-col">
+                <div className="flex flex-col items-center text-center gap-4">
+                  <TextAnimation
+                    text="What Our Customers Say"
+                    variant="fade-blur"
+                    gradientText={true}
+                    tag="h2"
+                    className="text-4xl md:text-5xl font-bold"
+                  />
+                </div>
+                <ScrollReveal variant="slide-up">
+                  <GridOrCarousel>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "BCZ Motors provided an outstanding experience. The staff was knowledgeable and helped me find the perfect car without any pressure."
+                      </p>
+                      <AvatarAuthor name="Michael T." role="Customer" imageSrc="https://picsum.photos/seed/1108550957/1200/800" />
+                    </Card>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "I was impressed by the quality of their inventory and the transparency of the buying process. Highly recommend BCZ Motors!"
+                      </p>
+                      <AvatarAuthor name="Sarah L." role="Customer" imageSrc="https://picsum.photos/seed/1804608412/1200/800" />
+                    </Card>
+                    <Card className="p-6 flex flex-col gap-4">
+                      <RatingStars rating={5} />
+                      <p className="text-base text-foreground flex-grow">
+                        "Exceptional service from start to finish. They went above and beyond to ensure I was satisfied with my purchase."
+                      </p>
+                      <AvatarAuthor name="David R." role="Customer" imageSrc="https://picsum.photos/seed/662571592/1200/800" />
+                    </Card>
+                  </GridOrCarousel>
+                </ScrollReveal>
+              </div>
+            </section>
+          </div>
+  );
+}
-- 
2.49.1