Bob AI: you used the same component, use any other compone...

src/app/page.tsx

@@ -11,6 +11,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import CardStack from '@/components/cardStack/CardStack';
 
 export default function LandingPage() {
   return (
@@ -26,6 +27,10 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="light"
     >
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll title="Explore the Latest iPhone Models" description="Discover the latest features and designs in our iPhone collection. From photography to performance, we've got you covered." background={{ variant: "downward-rays-animated" }} tag="New Arrivals" tagIcon="Calendar" buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
+      </div>
+
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           brandName="iPhone Store"
@@ -39,21 +44,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="iPhone"
-          description="Experience cutting-edge technology, stunning design, and seamless performance. Discover the latest iPhone models with revolutionary features that transform how you connect and create."
-          buttons={[
-            { text: "Shop Now", href: "#products" },
-            { text: "Learn More", href: "#features" }
-          ]}
-          background={{ variant: "sparkles-gradient" }}
-          imageSrc="https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg"
-          imageAlt="Latest iPhone models showcase"
-          frameStyle="card"
-        />
-      </div>
-
       <div id="products" data-section="products">
         <ProductCardThree
           title="Shop Our Latest Collection"
@@ -214,8 +204,30 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroBillboardScroll title="Explore the Latest iPhone Models" description="Discover the latest features and designs in our iPhone collection. From photography to performance, we've got you covered." background={{ variant: "downward-rays-animated" }} tag="New Arrivals" tagIcon="Calendar" buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
+      <div id="layout" data-section="layout">
+        <CardStack mode="buttons" gridVariant="timeline" title="Bestsellers" description="Check out our top-selling iPhone accessories." buttons={[{ text: "Shop Now", href: "#" }]} className="mb-8">
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Wireless Charger" />
+                <div className="card-content">
+                    <h3>Wireless Charger</h3>
+                    <p>Charge your iPhone wirelessly with ease.</p>
+                </div>
+            </div>
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Phone Case" />
+                <div className="card-content">
+                    <h3>Phone Case</h3>
+                    <p>Protect your iPhone with our stylish case.</p>
+                </div>
+            </div>
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Screen Protector" />
+                <div className="card-content">
+                    <h3>Screen Protector</h3>
+                    <p>Keep your iPhone screen scratch-free.</p>
+                </div>
+            </div>
+        </CardStack>
       </div>
 
       <div id="footer" data-section="footer">