Update src/app/products/page.tsx

src/app/products/page.tsx

@@ -1,33 +1,32 @@
 "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 ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
-// Define common navigation items for sub-pages to maintain consistency
+const navItemsForSubPages = [
-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" }
+    { name: "FAQs", id: "/#faqs" },
+    { name: "Contact", id: "/#contact" },
 ];
 
 function ProductsPageContent() {
-    const {
+    const { products, isLoading } = useProductCatalog({ basePath: "/products" });
-        products,
+
-        isLoading,
+    const mappedProducts = products.map(p => ({
-        search,
+      id: p.id,
-        setSearch,
+      name: p.name,
-        filters,
+      price: p.price,
-    } = useProductCatalog({ basePath: "/products" });
+      imageSrc: p.imageSrc,
+      imageAlt: p.imageAlt || p.name,
+      variant: p.category || 'Standard',
+    }));
 
-    if (isLoading) {
     return (
         <ThemeProvider
             defaultButtonVariant="hover-bubble"
@@ -41,63 +40,33 @@ function ProductsPageContent() {
             secondaryButtonStyle="solid"
             headingFontWeight="light"
         >
-                <ReactLenis root>
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingInline
                     brandName="Nano Mango"
-                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
+                    navItems={navItemsForSubPages}
-                            button={{ text: "Shop Now", href: "/products" }}
+                    button={{ text: "Go to Shop", href: "/shop" }}
                     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">
+            {isLoading ? (
-                        <main className="min-h-screen flex items-center justify-center pt-20">
+                <div className="w-full mx-auto py-40 text-center">
                     <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
+                     <ProductCardFour
-                        layout="page"
+                        title="Our Products"
-                        products={products}
+                        description="Browse our hand-picked selection of high-quality cups."
-                        searchValue={search}
+                        products={mappedProducts}
-                        onSearchChange={setSearch}
+                        gridVariant="four-items-2x2-equal-grid"
-                        searchPlaceholder="Search products..."
+                        animationType="slide-up"
-                        filters={filters}
+                        textboxLayout="default"
-                        emptyMessage="No products found"
+                        useInvertedBackground={false}
                     />
                 </div>
-            </ReactLenis>
+            )}
         </ThemeProvider>
     );
 }