Bob AI: [Block: hero-billboard-scroll|Hero Billboard Scrol...

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
@@ -43,23 +43,21 @@ export default function iPhoneSalesPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          background={{ variant: "plain" }}
+        <HeroBillboardScroll
           title="Experience Innovation in Your Hands"
           description="Discover the latest iPhone with breakthrough camera technology, lightning-fast performance, and all-day battery life. Designed for those who demand excellence."
+          background={{ variant: "animated-grid" }}
           tag="Latest Technology"
           tagIcon={Smartphone}
-          imageSrc="https://img.b2bpic.net/free-photo/smartphone-minimal-display-marble_23-2149554980.jpg"
-          imageAlt="Latest iPhone showcasing premium design"
-          imagePosition="right"
-          fixedMediaHeight={true}
           buttons={[
             { text: "Shop Now", href: "#products" },
-            { text: "Learn More", href: "#features" }
+            { text: "Learn More", href: "#features" },
+            { text: "Watch Demo", href: "#demo" }
           ]}
+          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+          imageAlt="Latest iPhone showcasing premium design"
         />
       </div>
-
       <div id="products" data-section="products">
         <ProductCardOne
           products={[
@@ -249,6 +247,50 @@ export default function iPhoneSalesPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardOne
+          products={[
+            {
+              id: "1",
+              name: "iPhone 15 Pro",
+              price: "$999",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro with premium titanium design"
+            },
+            {
+              id: "2",
+              name: "iPhone 15 Pro Max",
+              price: "$1,099",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro Max in multiple colors"
+            },
+            {
+              id: "3",
+              name: "iPhone 15",
+              price: "$799",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 with stunning display"
+            },
+            {
+              id: "4",
+              name: "iPhone 15 Plus",
+              price: "$899",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Plus with powerful performance"
+            }
+          ]}
+          title="Our Best Selling Products"
+          description="Discover the top picks from our iPhone lineup, designed to meet your every need."
+          tag="Best Sellers"
+          tagIcon={Star}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="iPhone"