Bob AI: i dont like it, replace it with something differen...

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 (
@@ -203,6 +204,26 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="layout" data-section="layout">
+        <CardStack mode="buttons" gridVariant="uniform-all-items-equal" title="Featured Accessories" description="Discover our latest iPhone accessories and gadgets." buttons={[{ text: "Explore", href: "#" }]} className="mb-8">
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Wireless Charger" />
+                <h3>Wireless Charging Pad</h3>
+                <p>Fast charging for your iPhone</p>
+            </div>
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="iPhone Case" />
+                <h3>Impact-Resistant Case</h3>
+                <p>Protect your iPhone with style</p>
+            </div>
+            <div className="card">
+                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Headphones" />
+                <h3>True Wireless Earbuds</h3>
+                <p>Enjoy your music on the go</p>
+            </div>
+        </CardStack>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseReveal
           columns={[