From e48b1d6b0f797281e85e67093bdff3fceabc8a48 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 19 Feb 2026 12:44:13 +0000
Subject: [PATCH] Update src/app/shop/page.tsx

---
 src/app/shop/page.tsx | 102 ++++++------------------------------------
 1 file changed, 14 insertions(+), 88 deletions(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index b660b20..0014d83 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -3,90 +3,14 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import AboutMetric from '@/components/sections/about/AboutMetric';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { useProductCatalog } from "@/hooks/useProductCatalog";
+import { ShoppingBag, Star, Truck, Heart } from 'lucide-react';
 import { useState } from "react";
 
 export default function ShopPage() {
-    const {
-        products,
-        isLoading,
-        search,
-        setSearch,
-        filters,
-    } = useProductCatalog({ basePath: "/shop" });
-
     const [cartOpen, setCartOpen] = useState(false);
 
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="icon-arrow"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
-                contentWidth="smallMedium"
-                sizing="largeSmallSizeMediumTitles"
-                background="aurora"
-                cardStyle="gradient-mesh"
-                primaryButtonStyle="radial-glow"
-                secondaryButtonStyle="glass"
-                headingFontWeight="normal"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarLayoutFloatingOverlay
-                            brandName="Family Lovers"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <p className="text-foreground">Loading products...</p>
-                    </main>
-                    <div id="footer" data-section="footer">
-                        <FooterLogoEmphasis
-                            logoText="Family Lovers"
-                            columns={[
-                                {
-                                    items: [
-                                        { label: "Home", href: "/" },
-                                        { label: "Shop", href: "/shop" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "Merchandise", href: "#" },
-                                        { label: "Sponsorships", href: "#" },
-                                        { label: "Youth Programs", href: "#" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "Privacy Policy", href: "#" },
-                                        { label: "Terms of Service", href: "#" },
-                                        { label: "FAQ", href: "#" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "Facebook", href: "https://facebook.com" },
-                                        { label: "Twitter", href: "https://twitter.com" },
-                                        { label: "Instagram", href: "https://instagram.com" },
-                                        { label: "YouTube", href: "https://youtube.com" }
-                                    ]
-                                }
-                            ]}
-                        />
-                    </div>
-                </ReactLenis>
-            </ThemeProvider>
-        );
-    }
-
     return (
         <ThemeProvider
             defaultButtonVariant="icon-arrow"
@@ -112,14 +36,16 @@ export default function ShopPage() {
                     />
                 </div>
                 <div id="productCatalog" data-section="productCatalog">
-                    <ProductCatalog
-                        layout="page"
-                        products={products}
-                        searchValue={search}
-                        onSearchChange={setSearch}
-                        searchPlaceholder="Search products..."
-                        filters={filters}
-                        emptyMessage="No products found"
+                    <AboutMetric
+                        title="Family Lovers Shop - Show your team pride with official Family Lovers merchandise including jerseys, t-shirts, accessories, and collectibles."
+                        metrics={[
+                            { icon: ShoppingBag, label: "Products Available", value: "50+" },
+                            { icon: Star, label: "Customer Rating", value: "4.9/5" },
+                            { icon: Truck, label: "Free Shipping", value: "$50+" },
+                            { icon: Heart, label: "Fan Favorites", value: "20+" }
+                        ]}
+                        useInvertedBackground={false}
+                        metricsAnimation="slide-up"
                     />
                 </div>
                 <div id="footer" data-section="footer">
@@ -135,7 +61,7 @@ export default function ShopPage() {
                             {
                                 items: [
                                     { label: "Merchandise", href: "#" },
-                                    { label: "Sponsorships", href: "#" },
+                                    { label: "Sponsorships", href: "/contact" },
                                     { label: "Youth Programs", href: "#" }
                                 ]
                             },
@@ -143,7 +69,7 @@ export default function ShopPage() {
                                 items: [
                                     { label: "Privacy Policy", href: "#" },
                                     { label: "Terms of Service", href: "#" },
-                                    { label: "FAQ", href: "#" }
+                                    { label: "FAQ", href: "/about#faq" }
                                 ]
                             },
                             {