Update src/app/shop/page.tsx
This commit is contained in:
@@ -1,135 +1,127 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Suspense } from "react";
|
|
||||||
import ReactLenis from "lenis/react";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
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 FooterCard from '@/components/sections/footer/FooterCard';
|
||||||
import { Instagram, Phone, Mail } from 'lucide-react';
|
import { Instagram, Phone, Mail, Package, Zap, Filter } 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ShopPage() {
|
export default function ShopPage() {
|
||||||
return (
|
return (
|
||||||
<Suspense>
|
<ThemeProvider
|
||||||
<ShopPageContent />
|
defaultButtonVariant="directional-hover"
|
||||||
</Suspense>
|
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