From 752db9928d6f4bcc67a384d46232d88dc11ab3d7 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 00:51:07 +0000
Subject: [PATCH] Bob AI: Apply dark blue/gold theme and update hero/navbar for
 China

---
 src/components/Layout.tsx                    |  15 +-
 src/index.css                                |  12 +-
 src/pages/HomePage.tsx                       | 219 ++-----------------
 src/pages/HomePage/sections/Contact.tsx      |  25 +++
 src/pages/HomePage/sections/Faq.tsx          |  39 ++++
 src/pages/HomePage/sections/Hero.tsx         |  21 ++
 src/pages/HomePage/sections/Services.tsx     |  37 ++++
 src/pages/HomePage/sections/Team.tsx         |  34 +++
 src/pages/HomePage/sections/Testimonials.tsx |  56 +++++
 src/pages/HomePage/sections/WhyUs.tsx        |  32 +++
 10 files changed, 279 insertions(+), 211 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/Team.tsx
 create mode 100644 src/pages/HomePage/sections/Testimonials.tsx
 create mode 100644 src/pages/HomePage/sections/WhyUs.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 4660c85..14e0925 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -10,16 +10,15 @@ export default function Layout() {
     <StyleProvider buttonVariant="default" siteBackground="none" heroBackground="none">
       <SiteBackgroundSlot />
       <NavbarCentered
-                logo="Elite Detail"
+                logo="China Importados Brasil"
                 navItems={[
-                  { name: "Services", href: "#services" },
-                  { name: "Testimonials", href: "#testimonials" },
-                  { name: "Why Us", href: "#why-us" },
-                  { name: "Team", href: "#team" },
-                  { name: "FAQ", href: "#faq" },
-                  { name: "Contact", href: "#contact" },
+                  { name: "Início", href: "#" },
+                  { name: "Categorias", href: "#categorias" },
+                  { name: "Ofertas", href: "#ofertas" },
+                  { name: "Sobre Nós", href: "#sobre" },
+                  { name: "Contato", href: "#contato" },
                 ]}
-                ctaButton={{ text: "Book Now", href: "#contact" }}
+                ctaButton={{ text: "Ver Ofertas", href: "#ofertas" }}
               />
       <main className="flex-grow">
         <Outlet />
diff --git a/src/index.css b/src/index.css
index 58cec5c..c018d71 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/darkTheme/premiumOrange */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
+  --background: #0a192f;
+  --card: #112240;
   --foreground: #f5f5f5;
-  --primary-cta: #ff7a1a;
+  --primary-cta: #d4af37;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #112240;
   --secondary-cta-text: #f5f5f5;
-  --accent: #ff7a1a;
-  --background-accent: #e8651a;
+  --accent: #d4af37;
+  --background-accent: #b5952f;
 
   /* @layout/border-radius/soft */
   --radius: 1.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 8f8ba9f..f971619 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,211 +1,36 @@
-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 TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
-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 TeamSection from './HomePage/sections/Team';
+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: "Ceramic Protection",
-              description: "Industry-leading coating 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/templates/detailing/team/team1.webp",
-              },
-              {
-                title: "Exterior Detail",
-                description: "Hand wash, clay bar treatment, polish, and premium wax application for a mirror-like finish that lasts.",
-                primaryButton: { text: "Book Exterior", href: "#contact" },
-                leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team2.webp",
-                rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
-              },
-              {
-                title: "Ceramic Coating",
-                description: "Long-lasting ceramic protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
-                primaryButton: { text: "Book Ceramic", href: "#contact" },
-                leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
-                rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team3.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="team">
-          <TeamOverlayCards
-            tag="Our Experts"
-            title="Meet the Team"
-            description="Passionate detailers dedicated to perfection"
-            members={[
-              {
-                name: "Marcus Rivera",
-                role: "Lead Detailer",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
-              },
-              {
-                name: "Jake Thompson",
-                role: "Ceramic Specialist",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
-              },
-              {
-                name: "Daniel Cruz",
-                role: "Interior Expert",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.webp",
-              },
-            ]}
-          />
-        </div>
+        <TeamSection />
 
-        <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..0a635fd
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardFeatures from "@/components/sections/hero/HeroBillboardFeatures";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+      <HeroBillboardFeatures
+        badge="Frete Grátis para todo o Brasil"
+        title="Os Melhores Produtos Importados a um Clique de Você"
+        description="Produtos importados diretamente da China com qualidade premium, preços competitivos e entrega garantida. Descubra as melhores ofertas em eletrônicos, moda e muito mais."
+        primaryButton={{"text":"Comprar Agora","href":"#ofertas"}}
+        secondaryButton={{"href":"#categorias","text":"Ver Categorias"}}
+        videoSrc="https://storage.googleapis.com/webild/default/templates/detailing/hero/hero.mp4"
+        features={[{"title":"Pagamento Seguro","icon":"ShieldCheck","description":"Pagamentos via Pix, Cartão e Boleto"},{"icon":"Truck","description":"Acompanhe seu pedido até a entrega","title":"Rastreamento"},{"title":"Suporte Dedicado","icon":"MessageCircle","description":"Atendimento rápido via WhatsApp"}]}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..365fff9
--- /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/templates/detailing/team/team1.webp",
+                  },
+                  {
+                    title: "Exterior Detail",
+                    description: "Hand wash, clay bar treatment, polish, and premium wax application for a mirror-like finish that lasts.",
+                    primaryButton: { text: "Book Exterior", href: "#contact" },
+                    leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team2.webp",
+                    rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
+                  },
+                  {
+                    title: "Ceramic Coating",
+                    description: "Long-lasting ceramic protection that shields your paint from UV rays, chemicals, and minor scratches for years.",
+                    primaryButton: { text: "Book Ceramic", href: "#contact" },
+                    leftImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/features/features2.webp",
+                    rightImageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/team/team3.webp",
+                  },
+                ]}
+              />
+            </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Team.tsx b/src/pages/HomePage/sections/Team.tsx
new file mode 100644
index 0000000..e71488c
--- /dev/null
+++ b/src/pages/HomePage/sections/Team.tsx
@@ -0,0 +1,34 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team">
+              <TeamOverlayCards
+                tag="Our Experts"
+                title="Meet the Team"
+                description="Passionate detailers dedicated to perfection"
+                members={[
+                  {
+                    name: "Marcus Rivera",
+                    role: "Lead Detailer",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial3.webp",
+                  },
+                  {
+                    name: "Jake Thompson",
+                    role: "Ceramic Specialist",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial4.webp",
+                  },
+                  {
+                    name: "Daniel Cruz",
+                    role: "Interior Expert",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/detailing/testimonials/testimonial1.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>
+  );
+}