src/app/blog/page.tsx

@@ -5,10 +5,17 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import Link from 'next/link';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Shop", id: "/shop" },
+        { name: "Blog", id: "/blog" },
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="text-shift"
@@ -23,21 +30,15 @@ export default function BlogPage() {
             headingFontWeight="bold"
         >
             <ReactLenis root>
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                    navItems={[
+                        navItems={navItems}
-                        { name: "Home", id: "/" },
-                        { name: "Hero", id: "hero-section" },
-                        { name: "About", id: "about-section" },
-                        { name: "Feature", id: "features-section" },
-                        { name: "Product", id: "product-section" },
-                        { name: "Testimonial", id: "testimonial-section" },
-                        { name: "Contact", id: "contact-section" },
-                    ]}
                         brandName="Bamboleya"
                         bottomLeftText="Global Community"
                         bottomRightText="hello@example.com"
                         topBarClassName=""
                     />
+                </div>
 
                 {isLoading ? (
                     <div className="w-content-width mx-auto py-20 text-center">

src/app/page.tsx

@@ -27,7 +27,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
-          navItems={[{ "name": "Hero", "id": "hero-section" }, { "name": "About", "id": "about-section" }, { "name": "Feature", "id": "features-section" }, { "name": "Product", "id": "product-section" }, { "name": "Testimonial", "id": "testimonial-section" }, { "name": "Contact", "id": "contact-section" }]}
+          navItems={[{ "name": "Hero", "id": "hero-section" }, { "name": "About", "id": "about-section" }, { "name": "Features", "id": "features-section" }, { "name": "Products", "id": "product-section" }, { "name": "Testimonials", "id": "testimonial-section" }, { "name": "Contact", "id": "contact-section" }, { "name": "Blog", "id": "/blog" }, { "name": "Shop", "id": "/shop" }]}
           brandName="Bamboleya"
           bottomLeftText="Global Community"
           bottomRightText="hello@example.com"
@@ -49,7 +49,7 @@ export default function LandingPage() {
           imageSrc="http://img.b2bpic.net/free-photo/cocoa-mugs-with-marshmallows-near-fireplace_1321-1587.jpg"
           imageAlt="Cozy interior of Bamboleya Coffee Shop with warm lighting and coffee setup"
           mediaAnimation="slide-up"
-          marqueeItems={[{ text: 'Locally Sourced Beans', icon: CheckCircle }, { text: 'Daily Fresh Pastries', icon: CheckCircle }, { text: 'Free WiFi & Power Outlets', icon: CheckCircle }]}
+          marqueeItems={[{ type: 'text-icon', text: 'Locally Sourced Beans', icon: CheckCircle }, { type: 'text-icon', text: 'Daily Fresh Pastries', icon: CheckCircle }, { type: 'text-icon', text: 'Free WiFi & Power Outlets', icon: CheckCircle }]}
           marqueeSpeed={30}
           showMarqueeCard={true}
           ariaLabel="Hero section featuring Bamboleya Coffee Shop's welcoming atmosphere"
@@ -58,7 +58,7 @@ export default function LandingPage() {
       <div id="about-section" data-section="about-section">
         <InlineImageSplitTextAbout
           heading={[{ "type": "text", "content": "Our Story" }, { "type": "image", "src": "http://img.b2bpic.net/free-photo/top-view-pine-seeds-with-wooden-spoon_23-2148519147.jpg", "alt": "Organic coffee beans in a rustic wooden bowl" }, { "type": "text", "content": "Bamboleya was born from a passion for exceptional coffee and a desire to create a welcoming space where every cup tells a story. Founded in 2018, we've been dedicated to sourcing ethically grown beans and crafting the perfect brew for our community." }, { "type": "image", "src": "http://img.b2bpic.net/free-photo/black-man-chief-is-preparing-cake-molds-before-fill-them-with-batter-his-professional-artisan-confectionery_346278-681.jpg", "alt": "Barista pouring espresso with a smile" }, { "type": "text", "content": "Every morning, our skilled baristas begin their day by selecting the finest beans from sustainable farms around the world. We believe that great coffee starts with great relationships—between farmers, roasters, and you." }]}
-          buttons={[{ "text": "Visit Us", "href": "#contact-section", "props": { "variant": "primary" } }, { "text": "Explore Our Beans", "href": "#product-section", "props": { "variant": "secondary" } }]}
+          buttons={[{ "text": "Visit Us", "href": "#contact-section" }, { "text": "Explore Our Beans", "href": "#product-section" }]}
           buttonAnimation="slide-up"
           useInvertedBackground={true}
         />

src/app/shop/[id]/page.tsx

@@ -10,6 +10,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -76,18 +77,21 @@ function ProductPageContent({ params }: ProductPageProps) {
     const navItems = [
         { name: "Home", id: "/" },
         { name: "Shop", id: "/shop" },
+        { name: "Blog", id: "/blog" },
     ];
 
     const navbarComponent = (
-        <div id="navbar" data-section="navbar">
+        <div id="nav" data-section="nav">
             <NavbarStyleFullscreen
                 navItems={navItems}
                 brandName="Bamboleya"
                 bottomLeftText="Global Community"
                 bottomRightText="hello@example.com"
                 topBarClassName=""
-                button={{ text: "Cart", onClick: () => setCartOpen(true) }}
             />
+            <button onClick={() => setCartOpen(true)} className="fixed top-6 right-6 z-[101] px-4 py-2 bg-primary text-primary-foreground rounded-md transition-transform hover:scale-105">
+                Cart ({cartItems.length})
+            </button>
         </div>
     );
 

src/app/shop/page.tsx

@@ -9,6 +9,7 @@ import { useProductCatalog } from "@/hooks/useProductCatalog";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
+import Link from 'next/link';
 
 function ShopPageContent() {
     const {
@@ -43,6 +44,7 @@ function ShopPageContent() {
     const navItems = [
         { name: "Home", id: "/" },
         { name: "Shop", id: "/shop" },
+        { name: "Blog", id: "/blog" },
     ];
 
     if (isLoading) {
@@ -60,15 +62,17 @@ function ShopPageContent() {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
                             navItems={navItems}
                             brandName="Bamboleya"
                             bottomLeftText="Global Community"
                             bottomRightText="hello@example.com"
                             topBarClassName=""
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
+                        <button onClick={() => setCartOpen(true)} className="fixed top-6 right-6 z-[101] px-4 py-2 bg-primary text-primary-foreground rounded-md transition-transform hover:scale-105">
+                            Cart ({cartItems.length})
+                        </button>
                     </div>
                     <div id="loading-section" data-section="loading-section">
                         <main className="min-h-screen flex items-center justify-center pt-20">
@@ -109,15 +113,17 @@ function ShopPageContent() {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={navItems}
                         brandName="Bamboleya"
                         bottomLeftText="Global Community"
                         bottomRightText="hello@example.com"
                         topBarClassName=""
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
+                    <button onClick={() => setCartOpen(true)} className="fixed top-6 right-6 z-[101] px-4 py-2 bg-primary text-primary-foreground rounded-md transition-transform hover:scale-105">
+                        Cart ({cartItems.length})
+                    </button>
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
                     <ProductCatalog