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={[