bender/8a955bbb-3a50-4904-930a-211dcf4777b9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/shop/page.tsx

Browse Source
This commit is contained in:
bender
2026-02-19 12:44:13 +00:00
parent 4803eabe33
commit e48b1d6b0f
1 changed files with 14 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/app/shop/page.tsx
View File

@@ -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" }
]
},
{