Add src/app/products/page.tsx

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>
+    );
+}