Switch to version 2: added src/app/shop/page.tsx
This commit is contained in:
225
src/app/shop/page.tsx
Normal file
225
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
|
import ReactLenis from "lenis/react";
|
||||||
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||||
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||||
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const productsData = [
|
||||||
|
{
|
||||||
|
id: "watch-1", name: "Chronos Elegance Watch", brand: "Elegance Atelier", price: "$5,200", rating: 4.5,
|
||||||
|
reviewCount: "120 reviews", variant: "Rose Gold", description: "A timeless masterpiece combining classic design with modern precision. Featuring a rose gold casing, automatic movement, and a genuine leather strap. Water-resistant up to 50 meters.", imageSrc: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg?_wi=1", imageAlt: "Luxury rose gold watch", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/groom-fastens-buttons-his-wedding-suit_8353-10664.jpg", alt: "Luxury rose gold watch" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/wedding-watch-rings-flowers-shoes-pink-background_140725-63863.jpg", alt: "Watch on display" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/men-s-accessories-set-gentleman-wearing-classic-rose-gold-watch-dark-leather-strap-wrist-close-up-view-with-cufflinks-sunglasses-table_23-2148095697.jpg", alt: "Watch detail" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Color", options: ["Rose Gold", "Silver", "Black"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "handbag-1", name: "Empress Alligator Handbag", brand: "Elegance Atelier", price: "$8,900", rating: 4.8,
|
||||||
|
reviewCount: "85 reviews", variant: "Midnight Black", description: "Exquisitely crafted from genuine alligator leather, this handbag embodies sophistication. Featuring a spacious interior, gold-tone hardware, and a detachable shoulder strap. Perfect for grand occasions.", imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg?_wi=1", imageAlt: "Designer alligator handbag", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109773.jpg", alt: "Designer alligator handbag" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/leather-handbag_23-2147743936.jpg", alt: "Handbag detail" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/luxury-handbag-white-background_23-2147743922.jpg", alt: "Handbag opened" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Color", options: ["Midnight Black", "Emerald Green", "Ruby Red"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "scarf-1", name: "Versailles Silk Scarf", brand: "Elegance Atelier", price: "$450", rating: 4.2,
|
||||||
|
reviewCount: "60 reviews", variant: "Emerald Green", description: "A luxurious silk scarf inspired by the gardens of Versailles. Made from 100% pure Mulberry silk, featuring a vibrant emerald green pattern. Adds a touch of refined elegance to any outfit.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg?_wi=1", imageAlt: "Elegant silk scarf", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/top-view-pinecone-beige-shawl-dark-surface_140725-63513.jpg", alt: "Elegant silk scarf" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/flat-lay-elegant-silk-scarf_23-2148671691.jpg", alt: "Scarf pattern" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/elegant-silk-scarf-display_23-2148719941.jpg", alt: "Scarf on mannequin" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Color", options: ["Emerald Green", "Royal Blue", "Crimson Red"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "earrings-1", name: "Celestial Diamond Earrings", brand: "Elegance Atelier", price: "$3,800", rating: 4.9,
|
||||||
|
reviewCount: "95 reviews", variant: "Platinum", description: "Dazzling diamond earrings crafted in platinum, featuring brilliant-cut diamonds. Each stone is ethically sourced and meticulously set to maximize sparkle. A perfect gift for special occasions.", imageSrc: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg?_wi=1", imageAlt: "Sparkling diamond earrings", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/moment-before-kiss-young-beautiful-caucasian-couple-sunny-day-outdoors_8353-10690.jpg", alt: "Sparkling diamond earrings" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/close-up-diamond-earrings-jewelry_23-2148680798.jpg", alt: "Earrings close-up" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/woman-wearing-diamond-earrings_23-2148720000.jpg", alt: "Earrings worn" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Metal", options: ["Platinum", "White Gold", "Yellow Gold"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "pen-1", name: "Sovereign Fountain Pen", brand: "Elegance Atelier", price: "$1,100", rating: 4.7,
|
||||||
|
reviewCount: "70 reviews", variant: "Obsidian Black", description: "Experience the art of writing with our Sovereign Fountain Pen. Crafted with a polished obsidian black finish and 18k gold nib, it offers a smooth, luxurious writing experience.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg?_wi=1", imageAlt: "Luxury fountain pen", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/3d-rendering-pen-ai-generated_23-2150695517.jpg", alt: "Luxury fountain pen" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/fountain-pen-writing-pad_23-2147743950.jpg", alt: "Pen with ink" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/elegant-writing-utensil_23-2147743945.jpg", alt: "Pen on desk" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Finish", options: ["Obsidian Black", "Deep Blue", "Emerald Green"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cufflinks-1", name: "Aristocrat Cufflinks", brand: "Elegance Atelier", price: "$680", rating: 4.6,
|
||||||
|
reviewCount: "55 reviews", variant: "Sterling Silver", description: "Elevate your formal wear with these meticulously crafted sterling silver cufflinks. Featuring a unique geometric design and a polished finish. A statement of refined taste.", imageSrc: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg?_wi=1", imageAlt: "Sterling silver cufflinks", images: [
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/grooms-morning-preparation_1328-1774.jpg", alt: "Sterling silver cufflinks" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/cufflinks-on-white-shirt_23-2147743960.jpg", alt: "Cufflinks close-up" },
|
||||||
|
{ src: "http://img.b2bpic.net/free-photo/elegant-cufflinks-on-shirt_23-2147743965.jpg", alt: "Cufflinks on shirt" }
|
||||||
|
],
|
||||||
|
variants: [
|
||||||
|
{ label: "Material", options: ["Sterling Silver", "Rose Gold Plated", "Gold Plated"] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ShopPage() {
|
||||||
|
const [filter, setFilter] = useState('All');
|
||||||
|
|
||||||
|
const filteredProducts = productsData.filter(product => {
|
||||||
|
if (filter === 'All') return true;
|
||||||
|
if (filter === 'Watches' && product.id.includes('watch')) return true;
|
||||||
|
if (filter === 'Handbags' && product.id.includes('handbag')) return true;
|
||||||
|
if (filter === 'Jewelry' && (product.id.includes('earrings') || product.id.includes('cufflinks'))) return true;
|
||||||
|
if (filter === 'Accessories' && (product.id.includes('scarf') || product.id.includes('pen'))) return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFilterChange = (newFilter: string) => {
|
||||||
|
setFilter(newFilter);
|
||||||
|
};
|
||||||
|
|
||||||
|
const shopProducts = filteredProducts.map(product => ({
|
||||||
|
id: product.id,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
variant: product.variant,
|
||||||
|
imageSrc: product.imageSrc,
|
||||||
|
imageAlt: product.imageAlt,
|
||||||
|
onProductClick: () => window.location.href = `/products/${product.id}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
defaultButtonVariant="text-shift"
|
||||||
|
defaultTextAnimation="entrance-slide"
|
||||||
|
borderRadius="pill"
|
||||||
|
contentWidth="compact"
|
||||||
|
sizing="largeSmall"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="glass-depth"
|
||||||
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="light"
|
||||||
|
>
|
||||||
|
<ReactLenis root>
|
||||||
|
<div id="nav" data-section="nav">
|
||||||
|
<NavbarLayoutFloatingInline
|
||||||
|
navItems={[
|
||||||
|
{
|
||||||
|
name: "Home", id: "#hero"},
|
||||||
|
{
|
||||||
|
name: "About", id: "#about"},
|
||||||
|
{
|
||||||
|
name: "Shop", id: "/shop"},
|
||||||
|
{
|
||||||
|
name: "Products", id: "/products"},
|
||||||
|
{
|
||||||
|
name: "Features", id: "#features"},
|
||||||
|
{
|
||||||
|
name: "Testimonials", id: "#testimonials"},
|
||||||
|
{
|
||||||
|
name: "Contact", id: "#contact"},
|
||||||
|
]}
|
||||||
|
logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
|
||||||
|
logoAlt="Elegance Atelier Logo"
|
||||||
|
brandName="Elegance Atelier"
|
||||||
|
button={{
|
||||||
|
text: "Shop Now", href: "/shop"}}
|
||||||
|
animateOnLoad={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="shop-products" data-section="shop-products">
|
||||||
|
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
|
||||||
|
<h1 className="text-center text-4xl font-light tracking-tight text-foreground sm:text-5xl lg:text-6xl">Our Shop</h1>
|
||||||
|
<p className="mt-4 text-center text-lg text-foreground/70">Browse our curated collection of luxury items.</p>
|
||||||
|
|
||||||
|
<div className="mt-8 flex justify-center space-x-4 mb-8">
|
||||||
|
{['All', 'Watches', 'Handbags', 'Jewelry', 'Accessories'].map(category => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
onClick={() => handleFilterChange(category)}
|
||||||
|
className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200
|
||||||
|
${filter === category ? 'bg-primary-cta text-white' : 'bg-card text-foreground hover:bg-card/80'}`}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ProductCardFour
|
||||||
|
animationType="slide-up"
|
||||||
|
textboxLayout="default"
|
||||||
|
gridVariant="three-columns-all-equal-width"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
products={shopProducts}
|
||||||
|
title=""
|
||||||
|
description=""
|
||||||
|
buttons={[]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterLogoEmphasis
|
||||||
|
logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
|
||||||
|
logoAlt="Elegance Atelier Logo"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "Home", href: "#hero"},
|
||||||
|
{
|
||||||
|
label: "About Us", href: "#about"},
|
||||||
|
{
|
||||||
|
label: "Shop", href: "/shop"},
|
||||||
|
{
|
||||||
|
label: "Products", href: "/products"},
|
||||||
|
{
|
||||||
|
label: "Membership", href: "#pricing"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "Contact", href: "#contact"},
|
||||||
|
{
|
||||||
|
label: "FAQ", href: "#faq"},
|
||||||
|
{
|
||||||
|
label: "Careers", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Press", href: "#"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: "Privacy Policy", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Terms of Service", href: "#"},
|
||||||
|
{
|
||||||
|
label: "Shipping & Returns", href: "#"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
logoText="Elegance Atelier"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ReactLenis>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user