Update src/app/shop/page.tsx

src/app/shop/page.tsx

@@ -10,6 +10,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
 function ShopPageContent() {
     const {
@@ -41,6 +42,12 @@ function ShopPageContent() {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Blog", id: "/blog" },
+        { name: "Shop", id: "/shop" },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -58,7 +65,7 @@ function ShopPageContent() {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleApple
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={navItems.map(item => ({...item, component: Link}))}
                             brandName="bb.q chicken"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -76,7 +83,6 @@ function ShopPageContent() {
                                 { title: "Follow Us", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "TikTok", href: "#" }] }
                             ]}
                             copyrightText="© 2024 bb.q chicken — Columbus. All rights reserved."
-                            useInvertedBackground={false}
                             ariaLabel="Site footer with navigation and social links."
                         />
                     </div>
@@ -101,9 +107,9 @@ function ShopPageContent() {
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                     <NavbarStyleApple
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={navItems.map(item => ({...item, component: Link}))}
                         brandName="bb.q chicken"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        button={{ text: `Cart (${cartItems.length})`, onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
@@ -140,7 +146,6 @@ function ShopPageContent() {
                             { title: "Follow Us", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "TikTok", href: "#" }] }
                         ]}
                         copyrightText="© 2024 bb.q chicken — Columbus. All rights reserved."
-                        useInvertedBackground={false}
                         ariaLabel="Site footer with navigation and social links."
                     />
                 </div>