diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 66f886e..541bee2 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -8,71 +8,56 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
 
 export default function Layout() {
   const navItems = [
-  {
-    "name": "Services",
-    "href": "#services"
-  },
-  {
-    "name": "Gallery",
-    "href": "#gallery"
-  },
-  {
-    "name": "Testimonials",
-    "href": "#testimonials"
-  },
-  {
-    "name": "FAQ",
-    "href": "#faq"
-  },
-  {
-    "name": "Hero",
-    "href": "#hero"
-  },
-  {
-    "name": "Metrics",
-    "href": "#metrics"
-  },
-  {
-    "name": "Contact",
-    "href": "#contact"
-  }
-];
+    {
+      "name": "Gallery",
+      "href": "#gallery"
+    },
+    {
+      "name": "Testimonials",
+      "href": "#testimonials"
+    },
+    {
+      "name": "Contact",
+      "href": "#contact"
+    }
+  ];
 
   return (
     <StyleProvider buttonVariant="default" siteBackground="noise" heroBackground="lightRaysCenter">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarInline
-      logo="BCZ Motors"
-      ctaButton={{
-        text: "Get A Quote",
-        href: "#contact",
-      }}
-     navItems={navItems} />
+          logo="BCZ Motors"
+          ctaButton={{
+            text: "Get A Quote",
+            href: "#contact",
+          }}
+          navItems={navItems}
+        />
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
       </main>
       <SectionErrorBoundary name="footer">
         <FooterMinimal
-      brand="BCZ Motors"
-      copyright="© 2024 BCZ Motors. All rights reserved."
-      socialLinks={[
-        {
-          icon: Instagram,
-          href: "#",
-        },
-        {
-          icon: Twitter,
-          href: "#",
-        },
-        {
-          icon: Facebook,
-          href: "#",
-        },
-      ]}
-    />
+          brand="BCZ Motors"
+          copyright="© 2024 BCZ Motors. All rights reserved."
+          socialLinks={[
+            {
+              icon: Instagram,
+              href: "#",
+            },
+            {
+              icon: Twitter,
+              href: "#",
+            },
+            {
+              icon: Facebook,
+              href: "#",
+            },
+          ]}
+        />
       </SectionErrorBoundary>
     </StyleProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 76cba7e..a70884c 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,33 +1,174 @@
-// 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 HeroSection from './HomePage/sections/Hero';
-import ServicesSection from './HomePage/sections/Services';
-import GallerySection from './HomePage/sections/Gallery';
-import MetricsSection from './HomePage/sections/Metrics';
-import TestimonialsSection from './HomePage/sections/Testimonials';
-import FaqSection from './HomePage/sections/Faq';
-import ContactSection from './HomePage/sections/Contact';
+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';
 
 export default function HomePage(): React.JSX.Element {
   return (
-<>
-  <HeroSection />
+    <>
+      {/* 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>
 
-  <ServicesSection />
+      {/* 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="" 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="" 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="" 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="" alt="High performance sports car front view" className="absolute inset-0 w-full h-full object-cover" />
+                </div>
+              </GridOrCarousel>
+            </ScrollReveal>
+          </div>
+        </section>
+      </div>
 
-  <GallerySection />
+      {/* 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="" />
+                </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="" />
+                </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="" />
+                </Card>
+              </GridOrCarousel>
+            </ScrollReveal>
+          </div>
+        </section>
+      </div>
 
-  <MetricsSection />
-
-  <TestimonialsSection />
-
-  <FaqSection />
-
-  <ContactSection />
+      {/* 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>
     </>
   );
-}
+}
\ No newline at end of file