Bob AI: add section with our bestsellers after hero

src/app/page.tsx

@@ -11,6 +11,7 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Sparkles, TrendingUp, Star, Crown, Users, Award, Zap, Mail } from "lucide-react";
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 
 export default function LandingPage() {
   return (
@@ -210,6 +211,25 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Discover Our Bestsellers"
+          description="Explore the top-selling iPhone models that everyone is talking about."
+          background={{ variant: "downward-rays-animated" }}
+          buttons={[
+            {
+              label: "Shop Now",
+              href: "/products",
+              variant: "primary",
+            },
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+          imageAlt="iPhone Bestsellers"
+          imagePosition="right"
+          className="py-16"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[

src/app/styles/variables.css

@@ -10,13 +10,13 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #2a303c;
+  --background: #ffff00;
-  --card: #333a4a;
+  --card: #ffff88;
-  --foreground: #ffffff;
+  --foreground: #000000;
-  --primary-cta: #ffffff;
+  --primary-cta: #000000;
-  --secondary-cta: #2a303c;
+  --secondary-cta: #ffff00;
-  --accent: #5e81ac;
+  --accent: #ffff00;
-  --background-accent: #5e81ac;
+  --background-accent: #ffff00;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);