Update src/app/shop/page.tsx
This commit is contained in:
@@ -1,135 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Instagram, Phone, Mail } from 'lucide-react';
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||
import { useState } from "react";
|
||||
|
||||
function ShopPageContent() {
|
||||
const {
|
||||
products,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
filters,
|
||||
} = useProductCatalog({ basePath: "/shop" });
|
||||
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Sell With Us", id: "sell" },
|
||||
{ name: "Visit", id: "visit" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="La Loupe Vintage"
|
||||
bottomLeftText="San Diego, CA 92116"
|
||||
bottomRightText="619-578-2944"
|
||||
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">
|
||||
<FooterCard
|
||||
logoText="La Loupe Vintage"
|
||||
copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
|
||||
{ icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
|
||||
{ icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Sell With Us", id: "sell" },
|
||||
{ name: "Visit", id: "visit" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="La Loupe Vintage"
|
||||
bottomLeftText="San Diego, CA 92116"
|
||||
bottomRightText="619-578-2944"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="La Loupe Vintage"
|
||||
copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
|
||||
{ icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
|
||||
{ icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
import { Instagram, Phone, Mail, Package, Zap, Filter } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<ShopPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Sell With Us", id: "/sell-with-us" },
|
||||
{ name: "Visit", id: "/visit" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
brandName="La Loupe Vintage"
|
||||
bottomLeftText="San Diego, CA 92116"
|
||||
bottomRightText="619-578-2944"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-intro" data-section="shop-intro">
|
||||
<TextAbout
|
||||
tag="Shop Vintage"
|
||||
title="Discover curated vintage pieces from the 60s through 90s. Each item is handpicked for quality, style, and that perfect vintage vibe you've been searching for."
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Filter & Search", href: "#" },
|
||||
{ text: "View All Categories", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureBento
|
||||
title="Shop by Category"
|
||||
description="Browse our carefully organized collections and find exactly what you're looking for."
|
||||
tag="All Categories"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
carouselMode="buttons"
|
||||
features={[
|
||||
{
|
||||
title: "Vintage Clothing", description: "Authentic pieces from every era", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Denim Collection", description: "Classic jeans, jackets, and denim pieces", bentoComponent: "orbiting-icons", centerIcon: Package,
|
||||
items: [
|
||||
{ icon: Zap, ring: 1 },
|
||||
{ icon: Filter, ring: 2 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Tops & Tees", description: "Band tees, vintage blouses, and unique tops", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Dresses & Skirts", description: "From mini to maxi, 60s mod to 90s slip", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Accessories", description: "Bags, belts, scarves, and jewelry", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Gift Cards", description: "Perfect for the vintage lover in your life", bentoComponent: "globe"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="greeting-cards" data-section="greeting-cards">
|
||||
<FeatureBento
|
||||
title="Greeting Cards"
|
||||
description="Unique, quirky greeting cards perfect for any occasion. Each card is $6.00 with special box sets available."
|
||||
tag="Cards & Gifts"
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
features={[
|
||||
{
|
||||
title: "Sweetest Weirdo", description: "Perfect for that special someone who's wonderfully unique", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Dragon Love", description: "For those who love fantasy and whimsical creatures", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Radical Gnome Box Set", description: "Complete collection of gnome cards for $22.00", bentoComponent: "globe"
|
||||
},
|
||||
{
|
||||
title: "Dancing Queen", description: "Celebrate the disco lover in your life", bentoComponent: "globe"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="La Loupe Vintage"
|
||||
copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
|
||||
{ icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
|
||||
{ icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user