2026-02-24 07:46:05 +00:00
5 changed files with 184 additions and 30 deletions
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -6,6 +6,17 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';

+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
 export default function BlogPage() {
    const { posts, isLoading } = useBlogPosts();

@@ -26,14 +37,8 @@ export default function BlogPage() {
                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        brandName="Nano Mango"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Products", id: "/#products" },
-                            { name: "About", id: "/#about" },
-                            { name: "Testimonials", id: "/#testimonials" },
-                            { name: "FAQs", id: "/#faqs" },
-                        ]}
-                        button={{ text: "Shop Now", href: "/#products" }}
+                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                        button={{ text: "Shop Now", href: "/products" }}
                        buttonClassName="shadow-lg"
                        navItemClassName="text-foreground/80 hover:text-foreground"
                        className="backdrop-blur-sm bg-card/70"
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,27 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import { Handshake, HeartHandshake, MessageSquareText, Sparkles } from "lucide-react";

+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
+// Define navigation items specifically for the homepage (no 'Home' link here)
+const navItemsForHomePage = [
+    { name: "Products", id: "/products" },
+    { name: "About", id: "about" },
+    { name: "Testimonials", id: "testimonials" },
+    { name: "FAQs", id: "faqs" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" }
+];
+
 export default function SitePage() {
  return (
    <ThemeProvider
@@ -27,13 +48,8 @@ export default function SitePage() {
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Nano Mango"
-          navItems={[
-            { name: "Products", id: "products" },
-            { name: "About", id: "about" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "FAQs", id: "faqs" },
-          ]}
-          button={{ text: "Shop Now", href: "#products" }}
+          navItems={navItemsForHomePage}
+          button={{ text: "Shop Now", href: "/products" }}
          buttonClassName="shadow-lg"
          navItemClassName="text-foreground/80 hover:text-foreground"
          className="backdrop-blur-sm bg-card/70"
@@ -51,8 +67,8 @@ export default function SitePage() {
          ]}
          enableKpiAnimation={true}
          buttons={[
-            { text: "Explore Collection", href: "#products" },
-            { text: "Our Story", href: "#about" },
+            { text: "Explore Collection", href: "/products" },
+            { text: "Our Story", href: "/#about" },
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/variety-bowls-cups-modern-household-shop_169016-43469.jpg"
          imageAlt="Assortment of stylish cups and mugs from Nano Mango"
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { Suspense } from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import { useProductCatalog } from "@/hooks/useProductCatalog";
+
+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
+function ProductsPageContent() {
+    const {
+        products,
+        isLoading,
+        search,
+        setSearch,
+        filters,
+    } = useProductCatalog({ basePath: "/products" });
+
+    if (isLoading) {
+        return (
+            <ThemeProvider
+                defaultButtonVariant="hover-bubble"
+                defaultTextAnimation="background-highlight"
+                borderRadius="pill"
+                contentWidth="mediumSmall"
+                sizing="largeSmallSizeMediumTitles"
+                background="circleGradient"
+                cardStyle="solid"
+                primaryButtonStyle="diagonal-gradient"
+                secondaryButtonStyle="solid"
+                headingFontWeight="light"
+            >
+                <ReactLenis root>
+                    <div id="nav" data-section="nav">
+                        <NavbarLayoutFloatingInline
+                            brandName="Nano Mango"
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                            button={{ text: "Shop Now", href: "/products" }}
+                            buttonClassName="shadow-lg"
+                            navItemClassName="text-foreground/80 hover:text-foreground"
+                            className="backdrop-blur-sm bg-card/70"
+                        />
+                    </div>
+                    <div id="loading-section" data-section="loading-section">
+                        <main className="min-h-screen flex items-center justify-center pt-20">
+                            <p className="text-foreground">Loading products...</p>
+                        </main>
+                    </div>
+                </ReactLenis>
+            </ThemeProvider>
+        );
+    }
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="background-highlight"
+            borderRadius="pill"
+            contentWidth="mediumSmall"
+            sizing="largeSmallSizeMediumTitles"
+            background="circleGradient"
+            cardStyle="solid"
+            primaryButtonStyle="diagonal-gradient"
+            secondaryButtonStyle="solid"
+            headingFontWeight="light"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        brandName="Nano Mango"
+                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                        button={{ text: "Shop Now", href: "/products" }}
+                        buttonClassName="shadow-lg"
+                        navItemClassName="text-foreground/80 hover:text-foreground"
+                        className="backdrop-blur-sm bg-card/70"
+                    />
+                </div>
+                <div id="product-catalog" data-section="product-catalog">
+                    <ProductCatalog
+                        layout="page"
+                        products={products}
+                        searchValue={search}
+                        onSearchChange={setSearch}
+                        searchPlaceholder="Search products..."
+                        filters={filters}
+                        emptyMessage="No products found"
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
+
+export default function ProductsPage() {
+    return (
+        <Suspense>
+            <ProductsPageContent />
+        </Suspense>
+    );
+}
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -11,6 +11,17 @@ import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";

+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
 interface ProductPageProps {
    params: Promise<{ id: string }>;
 }
@@ -88,10 +99,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                headingFontWeight="light"
            >
                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                        <NavbarLayoutFloatingInline
                            brandName="Nano Mango"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                            buttonClassName="shadow-lg"
                            navItemClassName="text-foreground/80 hover:text-foreground"
@@ -123,10 +134,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                headingFontWeight="light"
            >
                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                        <NavbarLayoutFloatingInline
                            brandName="Nano Mango"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                            buttonClassName="shadow-lg"
                            navItemClassName="text-foreground/80 hover:text-foreground"
@@ -162,13 +173,13 @@ function ProductPageContent({ params }: ProductPageProps) {
            cardStyle="solid"
            primaryButtonStyle="diagonal-gradient"
            secondaryButtonStyle="solid"
-            headingFontWeight="light"
+                headingFontWeight="light"
        >
            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        brandName="Nano Mango"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                        buttonClassName="shadow-lg"
                        navItemClassName="text-foreground/80 hover:text-foreground"
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -7,6 +7,17 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";

+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
 function ShopPageContent() {
    const {
        products,
@@ -31,11 +42,11 @@ function ShopPageContent() {
                headingFontWeight="light"
            >
                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                        <NavbarLayoutFloatingInline
                            brandName="Nano Mango"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
-                            button={{ text: "Shop Now" }}
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                            button={{ text: "Shop Now", href: "/products" }}
                            buttonClassName="shadow-lg"
                            navItemClassName="text-foreground/80 hover:text-foreground"
                            className="backdrop-blur-sm bg-card/70"
@@ -65,11 +76,11 @@ function ShopPageContent() {
            headingFontWeight="light"
        >
            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        brandName="Nano Mango"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
-                        button={{ text: "Shop Now" }}
+                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                        button={{ text: "Shop Now", href: "/products" }}
                        buttonClassName="shadow-lg"
                        navItemClassName="text-foreground/80 hover:text-foreground"
                        className="backdrop-blur-sm bg-card/70"