From 6dac07a3a57089805d6f1cbeaa32fc993a78b21b Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 9 Jun 2026 22:47:49 +0000 Subject: [PATCH] Switch to version 2: added src/app/shop/page.tsx --- src/app/shop/page.tsx | 225 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 src/app/shop/page.tsx diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx new file mode 100644 index 0000000..62ab332 --- /dev/null +++ b/src/app/shop/page.tsx @@ -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 ( + + + + +
+
+

Our Shop

+

Browse our curated collection of luxury items.

+ +
+ {['All', 'Watches', 'Handbags', 'Jewelry', 'Accessories'].map(category => ( + + ))} +
+ + +
+
+ + + + + ); +}