From 2c423396c649a0d5370e7d9e62c40939ef8c705b Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 04:07:49 +0000
Subject: [PATCH] Bob AI: Replaced hero section with HeroBillboard layout

---
 src/pages/HomePage.tsx                       | 192 ++-----------------
 src/pages/HomePage/sections/Contact.tsx      |  25 +++
 src/pages/HomePage/sections/Faq.tsx          |  39 ++++
 src/pages/HomePage/sections/Hero.tsx         |  19 ++
 src/pages/HomePage/sections/Services.tsx     |  37 ++++
 src/pages/HomePage/sections/Testimonials.tsx |  56 ++++++
 src/pages/HomePage/sections/WhyUs.tsx        |  32 ++++
 7 files changed, 228 insertions(+), 172 deletions(-)
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Faq.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Services.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx
 create mode 100644 src/pages/HomePage/sections/WhyUs.tsx

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 60ea485..dc812d9 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,186 +1,34 @@
-import { StyleProvider } from "@/components/ui/StyleProvider";
-import HeroBillboardFeatures from "@/components/sections/hero/HeroBillboardFeatures";
-import FeaturesStickyCards from "@/components/sections/features/FeaturesStickyCards";
-import TestimonialMarqueeOverlayCards from "@/components/sections/testimonial/TestimonialMarqueeOverlayCards";
-import FeaturesComparison from "@/components/sections/features/FeaturesComparison";
-import FaqSimple from "@/components/sections/faq/FaqSimple";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+// 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 { StyleProvider } from "@/components/ui/StyleProvider";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import ServicesSection from './HomePage/sections/Services';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import WhyUsSection from './HomePage/sections/WhyUs';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="lightRaysCenter" buttonVariant="expand">
         
 
-        <HeroBillboardFeatures
-          badge="Now Booking"
-          title="Your Car Deserves the Best"
-          description="Professional detailing services that restore your vehicle's showroom finish. We use premium products and proven techniques to protect and enhance every surface."
-          primaryButton={{ text: "Book Now", href: "#contact" }}
-          secondaryButton={{ text: "Our Services", href: "#services" }}
-          videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
-          features={[
-            {
-              icon: "Shield",
-              title: "Paint Protection",
-              description: "Industry-leading sealant with 5-year warranty",
-            },
-            {
-              icon: "Star",
-              title: "5-Star Rated",
-              description: "Trusted by 500+ happy customers",
-            },
-            {
-              icon: "Award",
-              title: "Certified Detailers",
-              description: "IDA certified professionals on every job",
-            },
-          ]}
-        />
+        <HeroSection />
 
-        <div id="services">
-          <FeaturesStickyCards
-            items={[
-              {
-                title: "Interior Detail",
-                description: "Deep cleaning of seats, carpets, dashboard, and all interior surfaces. Leather conditioning and fabric protection included.",
-                primaryButton: { text: "Book Interior", href: "#contact" },
-                leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/feature1.webp",
-                rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-1.webp",
-              },
-              {
-                title: "Exterior Detail",
-                description: "Hand wash, clay bar treatment, and premium wax application for a mirror-like finish that lasts.",
-                primaryButton: { text: "Book Exterior", href: "#contact" },
-                leftImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-2.webp",
-                rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
-              },
-              {
-                title: "Paint Protection",
-                description: "Long-lasting protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
-                primaryButton: { text: "Book Protection", href: "#contact" },
-                leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features3.webp",
-                rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-3.webp",
-              },
-            ]}
-          />
-        </div>
+        <ServicesSection />
 
-        <div id="testimonials">
-          <TestimonialMarqueeOverlayCards
-            tag="Testimonials"
-            title="Hear It From Our Clients"
-            description="Real results from real customers who trust us with their vehicles"
-            primaryButton={{ text: "Book Now", href: "#contact" }}
-            secondaryButton={{ text: "View Gallery", href: "#services" }}
-            testimonials={[
-              {
-                name: "James Wilson",
-                role: "BMW Owner",
-                company: "Miami, FL",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp",
-              },
-              {
-                name: "Maria Santos",
-                role: "Tesla Owner",
-                company: "Coral Gables, FL",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial2.webp",
-              },
-              {
-                name: "David Chen",
-                role: "Porsche Owner",
-                company: "Brickell, FL",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
-              },
-              {
-                name: "Sarah Thompson",
-                role: "Mercedes Owner",
-                company: "South Beach, FL",
-                rating: 4,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
-              },
-              {
-                name: "Michael Johnson",
-                role: "Audi Owner",
-                company: "Coconut Grove, FL",
-                rating: 5,
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial5.webp",
-              },
-            ]}
-          />
-        </div>
+        <TestimonialsSection />
 
-        <div id="why-us">
-          <FeaturesComparison
-            tag="Why Us"
-            title="The Detailing Difference"
-            description="See why professional detailing is worth the investment"
-            primaryButton={{ text: "Get Started", href: "#contact" }}
-            negativeItems={[
-              "Automatic car washes scratch paint",
-              "DIY products leave swirl marks",
-              "No protection against UV damage",
-              "Interior stains and odors linger",
-              "Resale value drops over time",
-            ]}
-            positiveItems={[
-              "Hand wash and paint correction",
-              "Flawless, swirl-free finish",
-              "Ceramic coating blocks UV rays",
-              "Deep interior sanitization",
-              "Maintains and boosts resale value",
-            ]}
-          />
-        </div>
+        <WhyUsSection />
 
 
-        <div id="faq">
-          <FaqSimple
-            tag="FAQ"
-            title="Frequently Asked Questions"
-            description="Everything you need to know about our detailing services"
-            items={[
-              {
-                question: "How long does a full detail take?",
-                answer: "A full interior and exterior detail typically takes 4-6 hours depending on the size and condition of your vehicle. Ceramic coating applications may require an additional day for proper curing.",
-              },
-              {
-                question: "How often should I get my car detailed?",
-                answer: "We recommend a full detail every 3-4 months to maintain your vehicle's appearance and protect its surfaces. Ceramic coated vehicles can go longer between details.",
-              },
-              {
-                question: "What is ceramic coating and how long does it last?",
-                answer: "Ceramic coating is a liquid polymer applied to your vehicle's exterior that creates a permanent bond with the paint. It provides superior protection against UV rays, chemicals, and minor scratches, lasting 2-5 years depending on the package.",
-              },
-              {
-                question: "Do you offer mobile detailing services?",
-                answer: "Yes, we offer mobile detailing for your convenience. Our fully equipped team can come to your home or office. Mobile service availability depends on your location and the package selected.",
-              },
-              {
-                question: "What products do you use?",
-                answer: "We exclusively use premium, professional-grade products that are safe for all vehicle surfaces. Our ceramic coatings are sourced from industry-leading manufacturers with proven durability and performance.",
-              },
-            ]}
-          />
-        </div>
+        <FaqSection />
 
-        <div id="contact">
-          <ContactSplitForm
-            tag="Contact"
-            title="Get Your Free Estimate"
-            description="Tell us about your project and we'll get back to you within 24 hours."
-            inputs={[
-              { name: "name", type: "text", placeholder: "Full Name", required: true },
-              { name: "email", type: "email", placeholder: "Email Address", required: true },
-              { name: "phone", type: "tel", placeholder: "Phone Number" },
-            ]}
-            textarea={{ name: "message", placeholder: "Tell us about your vehicle...", rows: 4, required: true }}
-            buttonText="Send Message"
-            videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/contact/cta-video.mp4"
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..bbc52e2
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,25 @@
+// 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 ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact">
+              <ContactSplitForm
+                tag="Contact"
+                title="Get Your Free Estimate"
+                description="Tell us about your project and we'll get back to you within 24 hours."
+                inputs={[
+                  { name: "name", type: "text", placeholder: "Full Name", required: true },
+                  { name: "email", type: "email", placeholder: "Email Address", required: true },
+                  { name: "phone", type: "tel", placeholder: "Phone Number" },
+                ]}
+                textarea={{ name: "message", placeholder: "Tell us about your vehicle...", rows: 4, required: true }}
+                buttonText="Send Message"
+                videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/contact/cta-video.mp4"
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..72632ba
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,39 @@
+// 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 FaqSimple from "@/components/sections/faq/FaqSimple";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq">
+              <FaqSimple
+                tag="FAQ"
+                title="Frequently Asked Questions"
+                description="Everything you need to know about our detailing services"
+                items={[
+                  {
+                    question: "How long does a full detail take?",
+                    answer: "A full interior and exterior detail typically takes 4-6 hours depending on the size and condition of your vehicle. Ceramic coating applications may require an additional day for proper curing.",
+                  },
+                  {
+                    question: "How often should I get my car detailed?",
+                    answer: "We recommend a full detail every 3-4 months to maintain your vehicle's appearance and protect its surfaces. Ceramic coated vehicles can go longer between details.",
+                  },
+                  {
+                    question: "What is ceramic coating and how long does it last?",
+                    answer: "Ceramic coating is a liquid polymer applied to your vehicle's exterior that creates a permanent bond with the paint. It provides superior protection against UV rays, chemicals, and minor scratches, lasting 2-5 years depending on the package.",
+                  },
+                  {
+                    question: "Do you offer mobile detailing services?",
+                    answer: "Yes, we offer mobile detailing for your convenience. Our fully equipped team can come to your home or office. Mobile service availability depends on your location and the package selected.",
+                  },
+                  {
+                    question: "What products do you use?",
+                    answer: "We exclusively use premium, professional-grade products that are safe for all vehicle surfaces. Our ceramic coatings are sourced from industry-leading manufacturers with proven durability and performance.",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..a92d9c5
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,19 @@
+// Created by add_section_from_catalog (HeroBillboard).
+
+import React from 'react';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboard
+        tag="Now Booking"
+        description="Professional detailing services that restore your vehicle's showroom finish. We use premium products and proven techniques to protect and enhance every surface."
+        videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
+        title="Your Car Deserves the Best"
+        primaryButton={{"href":"#contact","text":"Book Now"}}
+        secondaryButton={{"text":"Our Services","href":"#services"}}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..895d9c9
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesStickyCards from "@/components/sections/features/FeaturesStickyCards";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services">
+              <FeaturesStickyCards
+                items={[
+                  {
+                    title: "Interior Detail",
+                    description: "Deep cleaning of seats, carpets, dashboard, and all interior surfaces. Leather conditioning and fabric protection included.",
+                    primaryButton: { text: "Book Interior", href: "#contact" },
+                    leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/feature1.webp",
+                    rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-1.webp",
+                  },
+                  {
+                    title: "Exterior Detail",
+                    description: "Hand wash, clay bar treatment, and premium wax application for a mirror-like finish that lasts.",
+                    primaryButton: { text: "Book Exterior", href: "#contact" },
+                    leftImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-2.webp",
+                    rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
+                  },
+                  {
+                    title: "Paint Protection",
+                    description: "Long-lasting protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
+                    primaryButton: { text: "Book Protection", href: "#contact" },
+                    leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features3.webp",
+                    rightImageSrc: "https://storage.googleapis.com/webild/default/placeholders/placeholder-3.webp",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..5dbaa78
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,56 @@
+// 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";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials">
+              <TestimonialMarqueeOverlayCards
+                tag="Testimonials"
+                title="Hear It From Our Clients"
+                description="Real results from real customers who trust us with their vehicles"
+                primaryButton={{ text: "Book Now", href: "#contact" }}
+                secondaryButton={{ text: "View Gallery", href: "#services" }}
+                testimonials={[
+                  {
+                    name: "James Wilson",
+                    role: "BMW Owner",
+                    company: "Miami, FL",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp",
+                  },
+                  {
+                    name: "Maria Santos",
+                    role: "Tesla Owner",
+                    company: "Coral Gables, FL",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial2.webp",
+                  },
+                  {
+                    name: "David Chen",
+                    role: "Porsche Owner",
+                    company: "Brickell, FL",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
+                  },
+                  {
+                    name: "Sarah Thompson",
+                    role: "Mercedes Owner",
+                    company: "South Beach, FL",
+                    rating: 4,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
+                  },
+                  {
+                    name: "Michael Johnson",
+                    role: "Audi Owner",
+                    company: "Coconut Grove, FL",
+                    rating: 5,
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial5.webp",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/WhyUs.tsx b/src/pages/HomePage/sections/WhyUs.tsx
new file mode 100644
index 0000000..6cee3e0
--- /dev/null
+++ b/src/pages/HomePage/sections/WhyUs.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "why-us" section.
+
+import React from 'react';
+import FeaturesComparison from "@/components/sections/features/FeaturesComparison";
+
+export default function WhyUsSection(): React.JSX.Element {
+  return (
+    <div id="why-us">
+              <FeaturesComparison
+                tag="Why Us"
+                title="The Detailing Difference"
+                description="See why professional detailing is worth the investment"
+                primaryButton={{ text: "Get Started", href: "#contact" }}
+                negativeItems={[
+                  "Automatic car washes scratch paint",
+                  "DIY products leave swirl marks",
+                  "No protection against UV damage",
+                  "Interior stains and odors linger",
+                  "Resale value drops over time",
+                ]}
+                positiveItems={[
+                  "Hand wash and paint correction",
+                  "Flawless, swirl-free finish",
+                  "Ceramic coating blocks UV rays",
+                  "Deep interior sanitization",
+                  "Maintains and boosts resale value",
+                ]}
+              />
+            </div>
+  );
+}
-- 
2.49.1