From e0280ebcd8e99b3028be874e3168637a949fc931 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 16 Jun 2026 07:59:51 +0000
Subject: [PATCH] Bob AI: Updated global styles to a dark aesthetic.

---
 src/index.css                               |  18 +--
 src/pages/HomePage.tsx                      | 159 +++-----------------
 src/pages/HomePage/sections/About.tsx       |  26 ++++
 src/pages/HomePage/sections/Faq.tsx         |  42 ++++++
 src/pages/HomePage/sections/Hero.tsx        |  36 +++++
 src/pages/HomePage/sections/Products.tsx    |  57 +++++++
 src/pages/HomePage/sections/SocialProof.tsx |  27 ++++
 7 files changed, 215 insertions(+), 150 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.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/Products.tsx
 create mode 100644 src/pages/HomePage/sections/SocialProof.tsx

diff --git a/src/index.css b/src/index.css
index 64fe075..25d8ada 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #050505;
+  --card: #0f0f0f;
+  --foreground: #f0f0f0;
+  --primary-cta: #8b5cf6;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #1f1f1f;
+  --secondary-cta-text: #f0f0f0;
+  --accent: #4c1d95;
+  --background-accent: #1a1a1a;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index f4dae46..53b2be8 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,150 +1,27 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import ProductsSection from './HomePage/sections/Products';
+import FaqSection from './HomePage/sections/Faq';
+import AboutSection from './HomePage/sections/About';
+import SocialProofSection from './HomePage/sections/SocialProof';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitMediaGrid
-      tag="PRECISION. PERFORMANCE. PERSONALIZED."
-      title="FROM OEM TO EXOTIX"
-      description="Premium custom steering wheels built for control, comfort, and style."
-      primaryButton={{
-        text: "Build My Wheel",
-        href: "/wheels",
-      }}
-      secondaryButton={{
-        text: "Shop Now",
-        href: "/wheels",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092005.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/black-sport-car-front-side-salon-view-black-wheel-with-metallic-silver-color-direction-door-open_114579-1166.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="products" data-section="products">
-    <SectionErrorBoundary name="products">
-          <FeaturesImageBento
-      tag="Collection"
-      title="Precision Crafted Wheels"
-      description="Upgrade your interior with our signature carbon and leather builds."
-      items={[
-        {
-          title: "German Series",
-          description: "Precision performance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736801.jpg",
-        },
-        {
-          title: "Luxury Collection",
-          description: "Absolute comfort.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163677.jpg",
-        },
-        {
-          title: "Track Edition",
-          description: "Built for speed.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cushion-modern-car_1339-5504.jpg",
-        },
-        {
-          title: "Limited Edition",
-          description: "Exclusive finishes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913773.jpg",
-        },
-        {
-          title: "Alcantara Series",
-          description: "Pro-grip texture.",
-          imageSrc: "http://img.b2bpic.net/free-photo/different-car-accessories-assortment_23-2149030429.jpg",
-        },
-        {
-          title: "Forged Carbon",
-          description: "High-durability build.",
-          imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636227.jpg",
-        },
-        {
-          title: "Performance Plus",
-          description: "Custom engineering.",
-          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-288.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ProductsSection />
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Support"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about your order."
-      items={[
-        {
-          question: "What materials are your steering wheels made from?",
-          answer: "Our steering wheels are crafted from premium materials including genuine leather, Alcantara, carbon fiber, and forged aluminum.",
-        },
-        {
-          question: "Will this fit my vehicle?",
-          answer: "Check the fitment section on each product page or contact us with your vehicle's year, make, and model.",
-        },
-        {
-          question: "What are your shipping times?",
-          answer: "Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout.",
-        },
-        {
-          question: "What is your return policy?",
-          answer: "We offer a 30-day return policy on unused items in original packaging.",
-        },
-        {
-          question: "Do I need professional installation?",
-          answer: "We recommend professional installation for proper fitment and safety.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="The Exotix Ethos"
-      descriptions={[
-        "Exotix Steering was born from a passion for precision and the belief that the connection between driver and machine starts at the wheel.",
-        "We leverage aerospace-grade materials and artisan-level craftsmanship to build interiors that don't just function—they inspire.",
-      ]}
-      primaryButton={{
-        text: "Our Story",
-        href: "/about",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="social-proof" data-section="social-proof">
-    <SectionErrorBoundary name="social-proof">
-          <SocialProofMarquee
-      tag="Trusted By"
-      title="Industry Experts"
-      description="We are proud to be the interior choice for top-tier automotive builders and enthusiasts worldwide."
-      names={[
-        "Performance Garage",
-        "EuroTech Tuning",
-        "Carbon Dynamics",
-        "Drift King Society",
-        "Auto Aesthetics Pro",
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <SocialProofSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..f051653
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="The Exotix Ethos"
+          descriptions={[
+            "Exotix Steering was born from a passion for precision and the belief that the connection between driver and machine starts at the wheel.",
+            "We leverage aerospace-grade materials and artisan-level craftsmanship to build interiors that don't just function—they inspire.",
+          ]}
+          primaryButton={{
+            text: "Our Story",
+            href: "/about",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Faq.tsx b/src/pages/HomePage/sections/Faq.tsx
new file mode 100644
index 0000000..7ecef35
--- /dev/null
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="Support"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about your order."
+          items={[
+            {
+              question: "What materials are your steering wheels made from?",
+              answer: "Our steering wheels are crafted from premium materials including genuine leather, Alcantara, carbon fiber, and forged aluminum.",
+            },
+            {
+              question: "Will this fit my vehicle?",
+              answer: "Check the fitment section on each product page or contact us with your vehicle's year, make, and model.",
+            },
+            {
+              question: "What are your shipping times?",
+              answer: "Standard shipping takes 5-7 business days. Express shipping (2-3 days) is available at checkout.",
+            },
+            {
+              question: "What is your return policy?",
+              answer: "We offer a 30-day return policy on unused items in original packaging.",
+            },
+            {
+              question: "Do I need professional installation?",
+              answer: "We recommend professional installation for proper fitment and safety.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..a19087d
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,36 @@
+// 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 HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitMediaGrid
+          tag="PRECISION. PERFORMANCE. PERSONALIZED."
+          title="FROM OEM TO EXOTIX"
+          description="Premium custom steering wheels built for control, comfort, and style."
+          primaryButton={{
+            text: "Build My Wheel",
+            href: "/wheels",
+          }}
+          secondaryButton={{
+            text: "Shop Now",
+            href: "/wheels",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/modern-urban-car-street_23-2149092005.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/black-sport-car-front-side-salon-view-black-wheel-with-metallic-silver-color-direction-door-open_114579-1166.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Products.tsx b/src/pages/HomePage/sections/Products.tsx
new file mode 100644
index 0000000..d8ab18b
--- /dev/null
+++ b/src/pages/HomePage/sections/Products.tsx
@@ -0,0 +1,57 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "products" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ProductsSection(): React.JSX.Element {
+  return (
+    <div id="products" data-section="products">
+        <SectionErrorBoundary name="products">
+              <FeaturesImageBento
+          tag="Collection"
+          title="Precision Crafted Wheels"
+          description="Upgrade your interior with our signature carbon and leather builds."
+          items={[
+            {
+              title: "German Series",
+              description: "Precision performance.",
+              imageSrc: "http://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736801.jpg",
+            },
+            {
+              title: "Luxury Collection",
+              description: "Absolute comfort.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163677.jpg",
+            },
+            {
+              title: "Track Edition",
+              description: "Built for speed.",
+              imageSrc: "http://img.b2bpic.net/free-photo/cushion-modern-car_1339-5504.jpg",
+            },
+            {
+              title: "Limited Edition",
+              description: "Exclusive finishes.",
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-abstract-black-white-background_23-2150913773.jpg",
+            },
+            {
+              title: "Alcantara Series",
+              description: "Pro-grip texture.",
+              imageSrc: "http://img.b2bpic.net/free-photo/different-car-accessories-assortment_23-2149030429.jpg",
+            },
+            {
+              title: "Forged Carbon",
+              description: "High-durability build.",
+              imageSrc: "http://img.b2bpic.net/free-photo/superhero-car-vintage-style_23-2151636227.jpg",
+            },
+            {
+              title: "Performance Plus",
+              description: "Custom engineering.",
+              imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-288.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/SocialProof.tsx b/src/pages/HomePage/sections/SocialProof.tsx
new file mode 100644
index 0000000..0001a61
--- /dev/null
+++ b/src/pages/HomePage/sections/SocialProof.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social-proof" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialProofSection(): React.JSX.Element {
+  return (
+    <div id="social-proof" data-section="social-proof">
+        <SectionErrorBoundary name="social-proof">
+              <SocialProofMarquee
+          tag="Trusted By"
+          title="Industry Experts"
+          description="We are proud to be the interior choice for top-tier automotive builders and enthusiasts worldwide."
+          names={[
+            "Performance Garage",
+            "EuroTech Tuning",
+            "Carbon Dynamics",
+            "Drift King Society",
+            "Auto Aesthetics Pro",
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1