88:I[903690,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/3d5spne6o359m.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1urmgqflbxgxw.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"ExplicitChatIdProvider"] 89:I[838238,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/3d5spne6o359m.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1urmgqflbxgxw.js","/chat-static/_next/static/immutable/chunks/0udaurr3r3784.js","/chat-static/_next/static/immutable/chunks/3m12kzoseic0s.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/3io-u6yty6rrx.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/2jj-dsskzkkea.js","/chat-static/_next/static/immutable/chunks/1j5oudbzt39os.js","/chat-static/_next/static/immutable/chunks/3bi-_argycpwi.js","/chat-static/_next/static/immutable/chunks/3hu0_8f7tf9w8.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0kuscvrfktvnt.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/2l3og29it_ib5.js","/chat-static/_next/static/immutable/chunks/1m5fp3kw0roaj.js","/chat-static/_next/static/immutable/chunks/0bxymcj1of6fi.js","/chat-static/_next/static/immutable/chunks/2svky_5tna12v.js","/chat-static/_next/static/immutable/chunks/0bli-y2vwpvug.js"],"SWRDataProvider"] 8c:[] 8d:[["6KUgyhxVPoD","b_Vs6EDplmFTA"]] 8e:[["6KUgyhxVPoD",{"templateVersionId":null,"templateCanonId":null}]] 8f:[["6KUgyhxVPoD","$D2026-07-04T06:22:23.024Z"]] 90:[["6KUgyhxVPoD",false]] 91:[["6KUgyhxVPoD","$undefined"]] 92:[["6KUgyhxVPoD",null]] 93:[["6KUgyhxVPoD",true]] 94:[["6KUgyhxVPoD",true]] 95:[] 96:T243b9,[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import { CartProvider } from "@/lib/cart-context" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair", display: "swap", }) export const metadata: Metadata = { title: "MARHAM - Designed for the man she'll never forget", description: "Luxury perfumes, watches, leather goods, and shoes. Where desire meets dignity.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/brand-story.tsx" export function BrandStory() { return (

Where Legacy Meets Luxury

In a world where trends fade and styles change, Marham stands as a legacy. We are not just creating products — we are crafting memories, moments, and marks of prestige. Every detail, from the bold scent of our perfumes to the refined finish of our leather, is designed for the man who leaves an unforgettable impression.

Marham is where desire meets dignity.

For him, it is confidence and elegance.

For her, it is admiration and desire.

Together, it is the story of a man she'll never forget.

) } [V0_FILE]typescriptreact:file="components/featured-categories.tsx" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" const categories = [ { id: "perfumes", title: "Perfumes", description: "Scents that define presence", image: "/luxury-mens-perfume-bottles-elegant-display.jpg", }, { id: "watches", title: "Watches", description: "Precision in time, prestige in style", image: "/luxury-mens-watch-timepiece-elegant.jpg", }, { id: "leather", title: "Leather", description: "Belts & wallets that last beyond trends", image: "/luxury-leather-goods-wallet-belt-mens.jpg", }, { id: "shoes", title: "Shoes", description: "Walk with confidence", image: "/luxury-mens-dress-shoes-leather-elegant.jpg", }, ] export function FeaturedCategories() { return (

Crafted for Excellence

Each category represents our commitment to creating pieces that transcend time and trends.

{categories.map((category) => (

{category.title}

{category.description}

))}

) } [V0_FILE]typescriptreact:file="components/closing-section.tsx" import { Button } from "@/components/ui/button" export function ClosingSection() { return (

Marham is not just worn.

Marham is remembered.

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Navigation } from "@/components/navigation" import { HeroSection } from "@/components/hero-section" import { BrandStory } from "@/components/brand-story" import { FeaturedCategories } from "@/components/featured-categories" import { ClosingSection } from "@/components/closing-section" import { Footer } from "@/components/footer" export default function HomePage() { return (

) } [V0_FILE]jpg:file="public/luxury-masculine-perfume-bottle-dark-moody-lightin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-masculine-perfume-bottle-dark-moody-lightin-YDdJyR7be6WjrloebozJWs83a2kLm3.jpg" [V0_FILE]jpg:file="public/luxury-mens-perfume-bottles-elegant-display.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-perfume-bottles-elegant-display-afZGBWYIyaFgziU5sM1KXuCeNrvjTe.jpg" [V0_FILE]jpg:file="public/luxury-mens-watch-timepiece-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-watch-timepiece-elegant-WY0xIW2FcDM5ZsympuzO82EOuMMLGH.jpg" [V0_FILE]jpg:file="public/luxury-leather-goods-wallet-belt-mens.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-goods-wallet-belt-mens-Od1a9z4crXv2VU337yplqn5pnZ4lqF.jpg" [V0_FILE]jpg:file="public/luxury-mens-dress-shoes-leather-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-dress-shoes-leather-elegant-A8Os7JsOd1MswggOszFFkQ0insADT9.jpg" [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/product-hero.tsx" import { Button } from "@/components/ui/button" import Link from "next/link" interface ProductHeroProps { title: string subtitle: string description: string image: string imageAlt: string } export function ProductHero({ title, subtitle, description, image, imageAlt }: ProductHeroProps) { return (

{title}

{subtitle}

{description}

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" 'use client' import { Button } from "@/components/ui/button" import { useCart } from "@/lib/cart-context" import { useState } from "react" import Link from "next/link" interface Product { id: string name: string price: string image: string description: string category?: string } interface ProductGridProps { products: Product[] category?: string categoryPath?: string } export function ProductGrid({ products, category = "Product", categoryPath = "product" }: ProductGridProps) { const { addToCart } = useCart() const [addedItems, setAddedItems] = useState>(new Set()) const handleAddToCart = (e: React.MouseEvent, product: Product) => { e.preventDefault() const price = parseFloat(product.price.replace('$', '')) addToCart({ id: product.id, name: product.name, price, image: product.image, quantity: 1, category: product.category || category, }) // Show feedback setAddedItems(prev => new Set(prev).add(product.id)) setTimeout(() => { setAddedItems(prev => { const newSet = new Set(prev) newSet.delete(product.id) return newSet }) }, 2000) } return (

{products.map((product) => (

{product.name}

{product.description}

{product.price}

))}

) } [V0_FILE]typescriptreact:file="app/perfumes/page.tsx" import { Navigation } from "@/components/navigation" import { ProductHero } from "@/components/product-hero" import { ProductGrid } from "@/components/product-grid" import { Footer } from "@/components/footer" const perfumes = [ { id: "1", name: "Midnight Essence", price: "$180", image: "/luxury-perfume-bottle-dark-elegant.jpg", description: "A sophisticated blend of bergamot, cedar, and amber", }, { id: "2", name: "Royal Oud", price: "$250", image: "/premium-oud-perfume-bottle-gold-accents.jpg", description: "Rich oud with notes of rose and saffron", }, { id: "3", name: "Urban Legend", price: "$160", image: "/modern-perfume-bottle-minimalist-design.jpg", description: "Fresh citrus with woody undertones", }, { id: "4", name: "Velvet Night", price: "$200", image: "/luxury-perfume-bottle-velvet-texture.jpg", description: "Sensual vanilla and musk composition", }, { id: "5", name: "Heritage", price: "$220", image: "/classic-perfume-bottle-vintage-inspired.jpg", description: "Timeless blend of leather and tobacco", }, { id: "6", name: "Platinum Edge", price: "$190", image: "/platinum-perfume-bottle-modern-sleek.jpg", description: "Cool mint and eucalyptus with warm base", }, ] export default function PerfumesPage() { return (

) } [V0_FILE]typescriptreact:file="app/shop/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import Link from "next/link" const categories = [ { name: "Perfumes", description: "Scents that define presence", image: "/placeholder.svg?height=400&width=600", href: "/perfumes", count: "12 Products", }, { name: "Watches", description: "Precision in time, prestige in style", image: "/placeholder.svg?height=400&width=600", href: "/watches", count: "8 Products", }, { name: "Leather Goods", description: "Belts & wallets that last beyond trends", image: "/placeholder.svg?height=400&width=600", href: "/leather", count: "15 Products", }, { name: "Shoes", description: "Walk with confidence", image: "/placeholder.svg?height=400&width=600", href: "/shoes", count: "10 Products", }, ] export default function ShopPage() { return (

{/* Hero Section */}

Shop Collection

Discover the complete Marham experience

{/* Categories Grid */}

Our Collections

Each collection is carefully curated to embody the essence of modern luxury and timeless sophistication.

{categories.map((category) => (

{category.name}

{category.description}

{category.count}

))}

{/* Featured Section */}

The Marham Experience

More than just products, Marham offers an experience of luxury that extends beyond the purchase. From our carefully curated collections to our personalized service, every interaction is designed to reflect our commitment to excellence.

Discover pieces that don't just complement your style — they define it.

) } [V0_FILE]jpg:file="public/luxury-perfume-bottle-dark-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-bottle-dark-elegant-rRyDay1dqeO4tpVOO5zdzrcjXm3z5E.jpg" [V0_FILE]jpg:file="public/premium-oud-perfume-bottle-gold-accents.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-oud-perfume-bottle-gold-accents-C8tj9nlnKfMcCTzq1sKAg47OMvbQtS.jpg" [V0_FILE]jpg:file="public/modern-perfume-bottle-minimalist-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-perfume-bottle-minimalist-design-IopW1id3G9NBGBdy4VkFS1jsLylNsy.jpg" [V0_FILE]jpg:file="public/luxury-perfume-bottle-velvet-texture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-bottle-velvet-texture-ex84AlsHKqfCAXRM7iGlfv4sKCDres.jpg" [V0_FILE]jpg:file="public/classic-perfume-bottle-vintage-inspired.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-perfume-bottle-vintage-inspired-4qdldb5eogKZGYR2OohzhOhIpMBJmC.jpg" [V0_FILE]jpg:file="public/platinum-perfume-bottle-modern-sleek.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/platinum-perfume-bottle-modern-sleek-sg6BzBontCxVisCQKYd9MgnQxMkQbc.jpg" [V0_FILE]jpg:file="public/luxury-perfume-collection-dark-moody-lighting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-collection-dark-moody-lighting-gR6fNmBpkGYUvhlXDDDnVu2iFCDFAt.jpg" [V0_FILE]jpg:file="public/luxury-chronograph-watch-black-leather-strap.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-chronograph-watch-black-leather-strap-npSwedYGKE3Bn9pDTotqIf4GN63YbF.jpg" [V0_FILE]jpg:file="public/classic-dress-watch-gold-case-white-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-dress-watch-gold-case-white-dial-EgferM72cfoQGyZjUZIn1P0jZ6rB2L.jpg" [V0_FILE]jpg:file="public/sport-watch-steel-bracelet-blue-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sport-watch-steel-bracelet-blue-dial-wVTKd5zdInAbIN3BGuWLTbWJNXqhwH.jpg" [V0_FILE]jpg:file="public/gmt-watch-black-dial-steel-case.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gmt-watch-black-dial-steel-case-r0IfIYrUPSmPTL2KIPgMxlK4Hq2g3W.jpg" [V0_FILE]jpg:file="public/skeleton-watch-exposed-movement-luxury.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skeleton-watch-exposed-movement-luxury-Vdt105Jl3uVz5hPXMizfnk4qsegjKO.jpg" [V0_FILE]jpg:file="public/titanium-watch-modern-design-gray-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/titanium-watch-modern-design-gray-dial-GaHXYMCGG2Q1Y228s1pe0gr9dyZdAZ.jpg" [V0_FILE]jpg:file="public/luxury-watches-collection-dark-background-dramatic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-watches-collection-dark-background-dramatic-tc7PYupDziwe7aIuiBgtcEQOweObj8.jpg" [V0_FILE]jpg:file="public/luxury-leather-belt-black-premium-buckle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-belt-black-premium-buckle-DUNUUVDpePC7SFORHSRDQ9MVk33Vaq.jpg" [V0_FILE]typescriptreact:file="components/hero-section.tsx" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import Link from "next/link" export function HeroSection() { return (

{/* Background Image */}

{/* Content */}

Designed for the man she'll never forget

Luxury is not what you wear, it is what you leave behind.

) } [V0_FILE]typescriptreact:file="app/shoes/page.tsx" import { Navigation } from "@/components/navigation" import { ProductHero } from "@/components/product-hero" import { ProductGrid } from "@/components/product-grid" import { Footer } from "@/components/footer" const shoes = [ { id: "1", name: "Oxford Classic", price: "$420", image: "/luxury-oxford-shoes-black-leather-classic.jpg", description: "Traditional oxford in premium black leather", }, { id: "2", name: "Derby Elegance", price: "$380", image: "/derby-shoes-brown-leather-business-casual.jpg", description: "Versatile derby shoes for business casual", }, { id: "3", name: "Loafer Luxury", price: "$360", image: "/luxury-loafers-tassel-detail-premium-leather.jpg", description: "Handcrafted loafers with tassel detail", }, { id: "4", name: "Chelsea Boots", price: "$480", image: "/chelsea-boots-black-leather-elastic-sides-luxury.jpg", description: "Sleek ankle boots with elastic side panels", }, { id: "5", name: "Brogue Masterpiece", price: "$450", image: "/wingtip-brogue-shoes-perforations-luxury-leather.jpg", description: "Wingtip brogues with intricate perforations", }, { id: "6", name: "Monk Strap", price: "$400", image: "/double-monk-strap-shoes-premium-buckles-leather.jpg", description: "Double monk strap with premium buckles", }, ] export default function ShoesPage() { return (

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { MapPin, Phone, Mail, Clock } from "lucide-react" export default function ContactPage() { return (

{/* Hero Section */}

Contact Us

Experience luxury service that matches our products

{/* Contact Content */}

{/* Contact Form */}

Get in Touch

Whether you're seeking personalized recommendations or have questions about our collections, our team is here to provide the exceptional service you deserve.

First Name

Last Name

Phone (Optional)

Subject

Message

</div>

<Button size="lg" className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
                  Send Message
                </Button>
              </form>
            </div>

{/* Contact Information */}
            <div>
              <h2 className="text-3xl font-bold mb-8 text-foreground font-[family-name:var(--font-playfair)]">
                Visit Our Flagship Store
              </h2>

<div className="space-y-8">
                <div className="flex items-start space-x-4">
                  <MapPin className="h-6 w-6 text-primary mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">Address</h3>
                    <p className="text-muted-foreground">
                      123 Luxury Avenue
                      <br />
                      Manhattan, NY 10001
                      <br />
                      United States
                    </p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Phone className="h-6 w-6 text-primary mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">Phone</h3>
                    <p className="text-muted-foreground">+1 (555) 123-MARHAM</p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Mail className="h-6 w-6 text-primary mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">Email</h3>
                    <p className="text-muted-foreground">concierge@marham.com</p>
                  </div>
                </div>

<div className="flex items-start space-x-4">
                  <Clock className="h-6 w-6 text-primary mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-foreground mb-2">Hours</h3>
                    <div className="text-muted-foreground space-y-1">
                      <p>Monday - Friday: 10:00 AM - 8:00 PM</p>
                      <p>Saturday: 10:00 AM - 6:00 PM</p>
                      <p>Sunday: 12:00 PM - 5:00 PM</p>
                    </div>
                  </div>
                </div>
              </div>

{/* Personal Shopping */}
              <div className="mt-12 p-6 bg-muted/30 rounded-lg">
                <h3 className="text-xl font-semibold mb-4 text-foreground">Personal Shopping Service</h3>
                <p className="text-muted-foreground mb-4">
                  Book a private consultation with our style experts for a personalized shopping experience tailored to
                  your preferences and lifestyle.
                </p>
                <Button variant="outline" className="w-full bg-transparent">
                  Schedule Consultation
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/luxury-leather-wallet-brown-handcrafted.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-wallet-brown-handcrafted-GVpOGOiJ4oBKiJThYyGsGuH4B8sh4X.jpg"
[V0_FILE]jpg:file="public/minimalist-leather-card-holder-black-premium.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-leather-card-holder-black-premium-FdQt515359AzfHnUUxWlAh35h4wGLa.jpg"
[V0_FILE]jpg:file="public/luxury-leather-briefcase-professional-brown.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-briefcase-professional-brown-iJXgTptFYlUXuqu9OnoLnYYZXR2NXM.jpg"
[V0_FILE]jpg:file="public/leather-travel-wallet-passport-holder-luxury.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leather-travel-wallet-passport-holder-luxury-kZbcmzodKJUFNSnvbqBVRbxUqBKg6D.jpg"
[V0_FILE]jpg:file="public/reversible-leather-belt-luxury-black-brown.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/reversible-leather-belt-luxury-black-brown-xO8AucI6xOoN2X6nsBDSFWDgYHB62m.jpg"
[V0_FILE]jpg:file="public/luxury-leather-goods-collection-dark-moody-lightin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-goods-collection-dark-moody-lightin-fJZy7KvHHpMiySxTXLhESrGf4HZaPa.jpg"
[V0_FILE]jpg:file="public/luxury-oxford-shoes-black-leather-classic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-oxford-shoes-black-leather-classic-JlkfZvnXxPV1uJfWNGj8h29vFfVkpJ.jpg"
[V0_FILE]jpg:file="public/derby-shoes-brown-leather-business-casual.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/derby-shoes-brown-leather-business-casual-Z1xG0BWBEluJS6IJXvio2lhL9L6FdP.jpg"
[V0_FILE]jpg:file="public/luxury-loafers-tassel-detail-premium-leather.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-loafers-tassel-detail-premium-leather-0AQbHg3CKFgFnMBn4TzI8wcSX1k6r7.jpg"
[V0_FILE]jpg:file="public/chelsea-boots-black-leather-elastic-sides-luxury.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chelsea-boots-black-leather-elastic-sides-luxury-as4U5WQZN16z26SYQ1vsJ6hZt9eNNb.jpg"
[V0_FILE]jpg:file="public/wingtip-brogue-shoes-perforations-luxury-leather.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wingtip-brogue-shoes-perforations-luxury-leather-DsWQ439F6hkedmlbKNTnlediwzgtLW.jpg"
[V0_FILE]jpg:file="public/double-monk-strap-shoes-premium-buckles-leather.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/double-monk-strap-shoes-premium-buckles-leather-ErpZmIQhpapNOw8lmPBP4ZJnI7rvoC.jpg"
[V0_FILE]jpg:file="public/luxury-men-shoes-collection-dark-elegant-lighting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-men-shoes-collection-dark-elegant-lighting-OMqk8lGMNHb1rmWML1DNdmKe87Ywo3.jpg"
[V0_FILE]jpg:file="public/luxury-store-interior-dark-elegant-lighting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-store-interior-dark-elegant-lighting-ADP6mEGxN1age8RYFsmbRUeoXUKZin.jpg"
[V0_FILE]jpg:file="public/luxury-perfume-bottle-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-bottle-collection-tgncRTMFXF4iAmbpeJYqwGTEUJJ7s4.jpg"
[V0_FILE]jpg:file="public/luxury-watch-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-watch-collection-sG1YJDDpL2nU2xhxVfWjWGqB48XsZM.jpg"
[V0_FILE]jpg:file="public/luxury-leather-goods-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-goods-collection-NQ4iM017LNiX8XzMSsIoyWpeMz6F9y.jpg"
[V0_FILE]png:file="public/luxury-shoes-collection.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-shoes-collection-lxwBKGno3dRMhAOEEM4k7a6jOzCR7E.png"
[V0_FILE]typescriptreact:file="app/about/page.tsx"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function AboutPage() {
  return (
    <main className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img
            src="/luxury-masculine-perfume-bottle-dark-moody-lightin.jpg"
            alt="Mahram luxury craftsmanship"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/60" />
        </div>

<div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
          <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold mb-6 font-[family-name:var(--font-playfair)] text-balance leading-tight">
            Mahram
          </h1>
          <p className="text-2xl md:text-3xl font-light text-balance mb-8">Where His Legacy Begins</p>
          <p className="text-lg md:text-xl font-light text-balance max-w-2xl mx-auto opacity-90">
            More than a brand. A statement of strength, elegance, and remembrance.
          </p>
        </div>
      </section>

{/* Brand Manifesto - Core Section */}
      <section className="py-24 bg-background">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-12">
            {/* Introduction */}
            <div className="text-center mb-16">
              <p className="text-2xl leading-relaxed font-light text-foreground text-balance mb-8">
                Mahram is more than a brand. It is a statement of strength, elegance, and remembrance.
              </p>
              <p className="text-lg leading-relaxed text-muted-foreground">
                Every product we create — from the deep notes of our perfumes, to the precision of our watches, to the
                craftsmanship of our leather — carries a story.
              </p>
            </div>

{/* The Man with Image */}
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl font-bold mb-6 text-foreground font-[family-name:var(--font-playfair)]">
                  The Man She'll Never Forget
                </h2>
                <p className="text-lg leading-relaxed text-foreground mb-4">
                  A story of a man who is bold yet refined. A man who does not need to speak loudly, for his presence is
                  already unforgettable.
                </p>
                <p className="text-lg leading-relaxed text-muted-foreground">
                  He moves through the world with quiet confidence, leaving impressions that linger long after he's
                  gone.
                </p>
              </div>
              <div className="aspect-square overflow-hidden rounded-lg">
                <img
                  src="/luxury-perfume-bottle-collection.jpg"
                  alt="Mahram perfume essence"
                  className="w-full h-full object-cover"
                />
              </div>
            </div>

{/* For Him / For Her Grid - REMOVED DUPLICATE */}
            <div className="grid md:grid-cols-2 gap-8">
              <div className="p-10 bg-accent/5 rounded-lg border border-accent/20">
                <h3 className="text-2xl font-bold mb-6 text-foreground font-[family-name:var(--font-playfair)]">
                  For Him
                </h3>
                <p className="text-lg leading-relaxed text-foreground mb-4">
                  Mahram is confidence, power, and timeless luxury.
                </p>
                <p className="text-base leading-relaxed text-muted-foreground">
                  Every piece speaks to his discerning taste and unwavering standards—a reflection of a man who demands
                  excellence in all things.
                </p>
              </div>
              <div className="p-10 bg-accent/5 rounded-lg border border-accent/20">
                <h3 className="text-2xl font-bold mb-6 text-foreground font-[family-name:var(--font-playfair)]">
                  For Her
                </h3>
                <p className="text-lg leading-relaxed text-foreground mb-4">
                  Mahram is desire, admiration, and memory.
                </p>
                <p className="text-base leading-relaxed text-muted-foreground">
                  It is the scent that lingers in her heart, the mark of a man whose presence transforms into legacy.
                </p>
              </div>
            </div>

{/* Philosophy */}
            <div className="text-center py-12 border-t border-b border-border">
              <p className="text-2xl leading-relaxed font-light text-foreground text-balance mb-6">
                We believe true luxury is not temporary.
              </p>
              <p className="text-xl leading-relaxed text-muted-foreground text-balance">
                It lives on — in her memory, in his legacy, and in the world he leaves behind.
              </p>
            </div>

{/* Final Manifesto */}
            <div className="text-center">
              <p className="text-3xl font-bold text-foreground text-balance font-[family-name:var(--font-playfair)]">
                Mahram — Designed for the man she'll never forget.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* Craftsmanship Section with Image */}
      <section className="py-20 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="aspect-square overflow-hidden rounded-lg">
              <img
                src="/luxury-watch-collection.jpg"
                alt="Mahram watches craftsmanship"
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <h2 className="text-4xl font-bold mb-8 text-foreground font-[family-name:var(--font-playfair)]">
                Crafted with Precision
              </h2>
              <p className="text-lg leading-relaxed mb-6 text-muted-foreground">
                Each product in the Mahram collection represents an uncompromising commitment to quality and excellence.
                From our master perfumers sourcing the finest essences to our artisans hand-finishing every leather
                piece, we leave nothing to chance.
              </p>
              <p className="text-lg leading-relaxed mb-8 text-muted-foreground">
                Every detail matters because every moment matters. Your legacy deserves nothing less than perfection.
              </p>
              <Link href="/shop">
                <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
                  Explore Our Collections
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Collections Preview */}
      <section className="py-20 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16 text-foreground font-[family-name:var(--font-playfair)]">
            Our Collections
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Link href="/perfumes">
              <div className="group cursor-pointer">
                <div className="aspect-square overflow-hidden rounded-lg mb-4 bg-muted">
                  <img
                    src="/luxury-perfume-bottle-collection.jpg"
                    alt="Perfumes"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3 className="text-xl font-semibold text-foreground font-[family-name:var(--font-playfair)]">
                  Perfumes
                </h3>
                <p className="text-muted-foreground">Scents that define presence</p>
              </div>
            </Link>

<Link href="/watches">
              <div className="group cursor-pointer">
                <div className="aspect-square overflow-hidden rounded-lg mb-4 bg-muted">
                  <img
                    src="/luxury-watch-collection.jpg"
                    alt="Watches"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3 className="text-xl font-semibold text-foreground font-[family-name:var(--font-playfair)]">
                  Watches
                </h3>
                <p className="text-muted-foreground">Precision in time, prestige in style</p>
              </div>
            </Link>

<Link href="/leather">
              <div className="group cursor-pointer">
                <div className="aspect-square overflow-hidden rounded-lg mb-4 bg-muted">
                  <img
                    src="/luxury-leather-goods-collection.jpg"
                    alt="Leather"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3 className="text-xl font-semibold text-foreground font-[family-name:var(--font-playfair)]">
                  Leather
                </h3>
                <p className="text-muted-foreground">Craftsmanship that transcends time</p>
              </div>
            </Link>

<Link href="/shoes">
              <div className="group cursor-pointer">
                <div className="aspect-square overflow-hidden rounded-lg mb-4 bg-muted">
                  <img
                    src="/luxury-shoes-collection.png"
                    alt="Shoes"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3 className="text-xl font-semibold text-foreground font-[family-name:var(--font-playfair)]">Shoes</h3>
                <p className="text-muted-foreground">Walk with confidence</p>
              </div>
            </Link>
          </div>
        </div>
      </section>

{/* Values Section with Images */}
      <section className="py-20 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold text-center mb-16 text-foreground font-[family-name:var(--font-playfair)]">
            Our Values
          </h2>
          <div className="grid md:grid-cols-3 gap-12">
            <div className="text-center">
              <div className="aspect-square overflow-hidden rounded-lg mb-6 bg-muted">
                <img
                  src="/luxury-leather-briefcase-professional-brown.jpg"
                  alt="Quality craftsmanship"
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold mb-4 text-foreground">Quality</h3>
              <p className="text-muted-foreground">
                Every product is crafted with meticulous attention to detail and the finest materials.
              </p>
            </div>
            <div className="text-center">
              <div className="aspect-square overflow-hidden rounded-lg mb-6 bg-muted">
                <img
                  src="/luxury-leather-wallet-brown-handcrafted.jpg"
                  alt="Timeless design"
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold mb-4 text-foreground">Timelessness</h3>
              <p className="text-muted-foreground">
                Our designs transcend trends, creating pieces that remain relevant for generations.
              </p>
            </div>
            <div className="text-center">
              <div className="aspect-square overflow-hidden rounded-lg mb-6 bg-muted">
                <img src="/luxury-shoes-collection.png" alt="Prestige" className="w-full h-full object-cover" />
              </div>
              <h3 className="text-xl font-semibold mb-4 text-foreground">Prestige</h3>
              <p className="text-muted-foreground">
                Each piece carries the mark of excellence that defines the modern gentleman.
              </p>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated luxury color palette to black and beige */
  --background: oklch(0.96 0.008 70); /* Soft beige */
  --foreground: oklch(0.08 0.02 60); /* Deep black */
  --card: oklch(0.97 0.006 70);
  --card-foreground: oklch(0.08 0.02 60);
  --popover: oklch(0.96 0.008 70);
  --popover-foreground: oklch(0.08 0.02 60);
  --primary: oklch(0.05 0.01 0); /* Pure black */
  --primary-foreground: oklch(0.96 0.008 70);
  --secondary: oklch(0.88 0.01 70); /* Warm light beige */
  --secondary-foreground: oklch(0.08 0.02 60);
  --muted: oklch(0.92 0.008 70);
  --muted-foreground: oklch(0.45 0.02 70);
  --accent: oklch(0.35 0.08 60); /* Warm bronze accent */
  --accent-foreground: oklch(0.96 0.008 70);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.96 0.008 70);
  --border: oklch(0.90 0.008 70);
  --input: oklch(0.94 0.006 70);
  --ring: oklch(0.35 0.08 60);
  --chart-1: oklch(0.35 0.08 60);
  --chart-2: oklch(0.45 0.05 70);
  --chart-3: oklch(0.25 0.03 60);
  --chart-4: oklch(0.55 0.06 50);
  --chart-5: oklch(0.65 0.08 70);
  --radius: 0.375rem;
  --sidebar: oklch(0.96 0.008 70);
  --sidebar-foreground: oklch(0.08 0.02 60);
  --sidebar-primary: oklch(0.05 0.01 0);
  --sidebar-primary-foreground: oklch(0.96 0.008 70);
  --sidebar-accent: oklch(0.88 0.01 70);
  --sidebar-accent-foreground: oklch(0.08 0.02 60);
  --sidebar-border: oklch(0.90 0.008 70);
  --sidebar-ring: oklch(0.35 0.08 60);
}

.dark {
  --background: oklch(0.12 0.01 60); /* Deep beige-black */
  --foreground: oklch(0.92 0.008 70); /* Light beige text */
  --card: oklch(0.15 0.01 60);
  --card-foreground: oklch(0.92 0.008 70);
  --popover: oklch(0.12 0.01 60);
  --popover-foreground: oklch(0.92 0.008 70);
  --primary: oklch(0.92 0.008 70);
  --primary-foreground: oklch(0.08 0.02 60);
  --secondary: oklch(0.22 0.01 60);
  --secondary-foreground: oklch(0.92 0.008 70);
  --muted: oklch(0.18 0.01 60);
  --muted-foreground: oklch(0.65 0.02 70);
  --accent: oklch(0.50 0.12 60);
  --accent-foreground: oklch(0.92 0.008 70);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.92 0.008 70);
  --border: oklch(0.22 0.01 60);
  --input: oklch(0.18 0.01 60);
  --ring: oklch(0.50 0.12 60);
  --sidebar: oklch(0.12 0.01 60);
  --sidebar-foreground: oklch(0.92 0.008 70);
  --sidebar-primary: oklch(0.50 0.12 60);
  --sidebar-primary-foreground: oklch(0.92 0.008 70);
  --sidebar-accent: oklch(0.22 0.01 60);
  --sidebar-accent-foreground: oklch(0.92 0.008 70);
  --sidebar-border: oklch(0.22 0.01 60);
  --sidebar-ring: oklch(0.50 0.12 60);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom luxury typography */
.luxury-serif {
  font-family: "Playfair Display", "Times New Roman", serif;
}

.luxury-sans {
  font-family: "Inter", "Helvetica Neue", sans-serif;
}
[V0_FILE]typescriptreact:file="components/gift-category-selector.tsx"
"use client"
import { Button } from "@/components/ui/button"

interface GiftCategory {
  id: string
  name: string
  description: string
  icon: string
}

interface GiftCategorySelectorProps {
  categories: GiftCategory[]
  onSelect: (categoryId: string) => void
  selected: string
}

export function GiftCategorySelector({ categories, onSelect, selected }: GiftCategorySelectorProps) {
  return (
    <section className="py-12 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-foreground mb-4 font-[family-name:var(--font-playfair)]">
            Choose Your Gift Box
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Select the perfect size to curate your personalized gift selection
          </p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {categories.map((category) => (
            <Button
              key={category.id}
              onClick={() => onSelect(category.id)}
              variant={selected === category.id ? "default" : "outline"}
              className="h-auto py-8 px-6 flex flex-col items-center justify-center gap-4 transition-all"
            >
              <span className="text-4xl">{category.icon}</span>
              <div className="text-center">
                <h3 className="text-lg font-semibold mb-2">{category.name}</h3>
                <p className="text-sm opacity-80">{category.description}</p>
              </div>
            </Button>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/luxury-cologne-vial-small.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-cologne-vial-small-qhnSvOHet6ZQhyFn5JGolWHO5C0W0d.jpg"
[V0_FILE]jpg:file="public/black-leather-card-holder-minimal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/black-leather-card-holder-minimal-HzC648LH3HlGVsxG0bDeFCp75xi1Yx.jpg"
[V0_FILE]jpg:file="public/luxury-scented-candle-black-label.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-scented-candle-black-label-Xtfc57XxSRP9Po0Lk9ciz6xn157kff.jpg"
[V0_FILE]jpg:file="public/elegant-gold-cufflinks-luxury.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-gold-cufflinks-luxury-oxd4QTZOrwMqK77gtzTR8M9dzlB6zY.jpg"
[V0_FILE]jpg:file="public/luxury-perfume-and-watch-gift-set.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-and-watch-gift-set-lQUIbWrwjY9RrBpIqsEs3yXOmp3Bvw.jpg"
[V0_FILE]jpg:file="public/black-leather-belt-and-wallet-set.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/black-leather-belt-and-wallet-set-iOqRTaC2tPti84Pxf9lEKYjGrFmSj1.jpg"
[V0_FILE]jpg:file="public/three-luxury-perfume-bottles-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/three-luxury-perfume-bottles-collection-Nx2ALmc20JQLenRYBHwQme7dy8Mlqa.jpg"
[V0_FILE]jpg:file="public/luxury-watch-and-cologne-gift-box.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-watch-and-cologne-gift-box-qCiDc6OuuJkRIPxM8NFH2ixTaBPZGS.jpg"
[V0_FILE]jpg:file="public/complete-luxury-gift-collection-perfume-watch-leat.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/complete-luxury-gift-collection-perfume-watch-leat-UVxdjWC3jIhC7jmVXSXaQ6zgqRI101.jpg"
[V0_FILE]jpg:file="public/executive-business-gift-set-luxury-accessories.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/executive-business-gift-set-luxury-accessories-oreo2xygZ8QR71Wzd6150X9EXyuT3l.jpg"
[V0_FILE]jpg:file="public/luxury-shoes-leather-jacket-watch-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-shoes-leather-jacket-watch-collection-TGDPFuvIDulyXbUjUh73E62kbUNOXW.jpg"
[V0_FILE]jpg:file="public/premium-heritage-collection-all-marham-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-heritage-collection-all-marham-products-B5snJA5ZYLoz5ihxBwphz7bCeB1hkb.jpg"
[V0_FILE]typescriptreact:file="components/gifting-hero.tsx"
export function GiftingHero() {
  return (
    <section className="relative min-h-[500px] flex items-center justify-center bg-background overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <img
          src="/luxury-perfume-and-watch-gift-set.jpg"
          alt="Luxury gift collection"
          className="w-full h-full object-cover opacity-15"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/60 to-background" />
      </div>

{/* Content */}
      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-20">
        <p className="text-sm uppercase tracking-widest text-accent mb-4">Gift with Purpose</p>

<h1 className="text-5xl md:text-6xl font-bold text-balance mb-6 font-[family-name:var(--font-playfair)] text-foreground">
          The Art of Unforgettable Gifting
        </h1>

<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 text-pretty leading-relaxed">
          Every gift tells a story. Choose from our curated collections designed to leave a lasting impression on
          someone who matters.
        </p>

<p className="text-sm text-muted-foreground italic">
          Scroll down to select your gift box size and explore handpicked MARHAM collections.
        </p>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/gifting/page.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Navigation } from "@/components/navigation"
import { GiftCategorySelector } from "@/components/gift-category-selector"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"
import { GiftingHero } from "@/components/gifting-hero"

const giftCategories = [
  {
    id: "small",
    name: "Small",
    description: "Intimate gestures & accessories",
    icon: "📦",
  },
  {
    id: "medium",
    name: "Medium",
    description: "Perfect combination of products",
    icon: "📫",
  },
  {
    id: "large",
    name: "Large",
    description: "The ultimate luxury experience",
    icon: "🎁",
  },
]

const giftItems = {
  small: [
    {
      id: "s1",
      name: "Signature Cologne Vial",
      price: "$45",
      image: "/luxury-cologne-vial-small.jpg",
      description: "Premium fragrance sample for travel",
    },
    {
      id: "s2",
      name: "Leather Card Holder",
      price: "$65",
      image: "/black-leather-card-holder-minimal.jpg",
      description: "Sleek wallet for essential cards",
    },
    {
      id: "s3",
      name: "Luxury Candle",
      price: "$55",
      image: "/luxury-scented-candle-black-label.jpg",
      description: "Hand-poured premium wax candle",
    },
    {
      id: "s4",
      name: "Designer Cufflinks",
      price: "$75",
      image: "/elegant-gold-cufflinks-luxury.jpg",
      description: "Timeless formal accessories",
    },
  ],
  medium: [
    {
      id: "m1",
      name: "Perfume & Watch Bundle",
      price: "$350",
      image: "/luxury-perfume-and-watch-gift-set.jpg",
      description: "Signature fragrance with premium timepiece",
    },
    {
      id: "m2",
      name: "Leather Belt & Wallet Set",
      price: "$280",
      image: "/black-leather-belt-and-wallet-set.jpg",
      description: "Complete leather accessories duo",
    },
    {
      id: "m3",
      name: "Fragrance Collection Trio",
      price: "$420",
      image: "/three-luxury-perfume-bottles-collection.jpg",
      description: "Three signature scents in one set",
    },
    {
      id: "m4",
      name: "Premium Watch & Cologne",
      price: "$380",
      image: "/luxury-watch-and-cologne-gift-box.jpg",
      description: "Precision timepiece with signature scent",
    },
  ],
  large: [
    {
      id: "l1",
      name: "Ultimate Luxury Collection",
      price: "$1200",
      image: "/complete-luxury-gift-collection-perfume-watch-leat.jpg",
      description: "Perfume, watch, leather goods & shoes - the complete MARHAM experience",
    },
    {
      id: "l2",
      name: "Executive Gentleman Set",
      price: "$950",
      image: "/executive-business-gift-set-luxury-accessories.jpg",
      description: "Premium timepiece, wallet, belt, cologne and cufflinks",
    },
    {
      id: "l3",
      name: "Signature Wardrobe Upgrade",
      price: "$1100",
      image: "/luxury-shoes-leather-jacket-watch-collection.jpg",
      description: "Shoes, leather accessories, watch and fragrance collection",
    },
    {
      id: "l4",
      name: "Legacy Collection",
      price: "$1350",
      image: "/premium-heritage-collection-all-marham-products.jpg",
      description: "Complete MARHAM collection - an unforgettable legacy gift",
    },
  ],
}

export default function GiftingPage() {
  const [selectedCategory, setSelectedCategory] = useState("medium")

return (
    <main className="min-h-screen">
      <Navigation />

<Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/refund-policy/page.tsx"
"use client"

import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"

export default function RefundPolicyPage() {
  return (
    <main className="min-h-screen bg-background">
      <Navigation />

{/* Hero Section */}
      <section className="bg-secondary/40 py-16 md:py-24">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl md:text-5xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
            Refund Policy
          </h1>
          <p className="text-lg text-muted-foreground">
            Your satisfaction is our priority. Here's how our refund and return process works.
          </p>
        </div>
      </section>

{/* Policy Content */}
      <section className="py-12 md:py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* 30-Day Guarantee */}
          <div className="mb-12">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              30-Day Satisfaction Guarantee
            </h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              At MARHAM, we stand behind the quality and excellence of our products. If you are not completely satisfied
              with your purchase, you may return it within 30 days of delivery for a full refund or exchange.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              This guarantee applies to all products in their original, unused condition with all packaging and
              documentation intact.
            </p>
          </div>

{/* Eligibility Requirements */}
          <div className="mb-12 border-l-4 border-accent pl-6">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              Eligibility Requirements
            </h3>
            <ul className="space-y-3 text-muted-foreground">
              <li className="flex gap-3">
                <span className="text-accent font-semibold">•</span>
                <span>Product must be unused and in original condition</span>
              </li>
              <li className="flex gap-3">
                <span className="text-accent font-semibold">•</span>
                <span>All original packaging and boxes must be included</span>
              </li>
              <li className="flex gap-3">
                <span className="text-accent font-semibold">•</span>
                <span>Return request must be initiated within 30 days of delivery</span>
              </li>
              <li className="flex gap-3">
                <span className="text-accent font-semibold">•</span>
                <span>Product must not show signs of wear or damage</span>
              </li>
              <li className="flex gap-3">
                <span className="text-accent font-semibold">•</span>
                <span>All documentation and certificates of authenticity must be included</span>
              </li>
            </ul>
          </div>

{/* Return Process */}
          <div className="mb-12">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              How to Initiate a Return
            </h3>
            <div className="space-y-4">
              <div className="bg-secondary/20 p-6 rounded-lg">
                <h4 className="font-semibold text-foreground mb-2">Step 1: Contact Us</h4>
                <p className="text-muted-foreground text-sm">
                  Email us at support@marham.com with your order number and reason for return. Please include photos if
                  applicable.
                </p>
              </div>
              <div className="bg-secondary/20 p-6 rounded-lg">
                <h4 className="font-semibold text-foreground mb-2">Step 2: Receive Return Authorization</h4>
                <p className="text-muted-foreground text-sm">
                  Once approved, we'll provide a prepaid return shipping label and return instructions.
                </p>
              </div>
              <div className="bg-secondary/20 p-6 rounded-lg">
                <h4 className="font-semibold text-foreground mb-2">Step 3: Ship Your Return</h4>
                <p className="text-muted-foreground text-sm">
                  Package your item securely and ship it back using the provided label. Please include your order number
                  inside the package.
                </p>
              </div>
              <div className="bg-secondary/20 p-6 rounded-lg">
                <h4 className="font-semibold text-foreground mb-2">Step 4: Inspection & Refund</h4>
                <p className="text-muted-foreground text-sm">
                  Once received, we'll inspect your return. If approved, your refund will be processed within 5-7
                  business days.
                </p>
              </div>
            </div>
          </div>

{/* Refund Timelines */}
          <div className="mb-12">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              Refund Timelines
            </h3>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="border border-border p-6">
                <h4 className="font-semibold text-foreground mb-2">Processing Time</h4>
                <p className="text-muted-foreground text-sm">
                  After receipt and inspection, refunds are processed within 5-7 business days.
                </p>
              </div>
              <div className="border border-border p-6">
                <h4 className="font-semibold text-foreground mb-2">Credit Timeline</h4>
                <p className="text-muted-foreground text-sm">
                  Depending on your bank, the credit may take 5-10 additional business days to appear.
                </p>
              </div>
            </div>
          </div>

{/* Exchanges */}
          <div className="mb-12">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              Exchanges
            </h3>
            <p className="text-muted-foreground leading-relaxed mb-4">
              Prefer an exchange? We offer full exchanges for different sizes, colors, or products within the 30-day
              window. Exchanges are typically processed faster than refunds.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              Contact our support team at support@marham.com to arrange an exchange. Shipping costs for exchanges may
              apply in certain circumstances.
            </p>
          </div>

{/* Non-Returnable Items */}
          <div className="mb-12 border-l-4 border-secondary pl-6">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              Non-Returnable Items
            </h3>
            <p className="text-muted-foreground leading-relaxed mb-4">
              The following items cannot be returned or refunded:
            </p>
            <ul className="space-y-2 text-muted-foreground text-sm">
              <li className="flex gap-3">
                <span className="text-secondary font-semibold">•</span>
                <span>Personalized or custom-made products</span>
              </li>
              <li className="flex gap-3">
                <span className="text-secondary font-semibold">•</span>
                <span>Items purchased at a final sale discount</span>
              </li>
              <li className="flex gap-3">
                <span className="text-secondary font-semibold">•</span>
                <span>Gift cards and digital products</span>
              </li>
              <li className="flex gap-3">
                <span className="text-secondary font-semibold">•</span>
                <span>Items showing signs of use or wear</span>
              </li>
            </ul>
          </div>

{/* Damaged Items */}
          <div className="mb-12">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              Damaged or Defective Items
            </h3>
            <p className="text-muted-foreground leading-relaxed mb-4">
              If you receive a damaged or defective product, please contact us immediately with photos. We will either
              send a replacement or issue a full refund at no cost to you.
            </p>
            <p className="text-muted-foreground leading-relaxed">
              Report damaged items within 48 hours of delivery for the fastest resolution.
            </p>
          </div>

{/* International Orders */}
          <div className="mb-12">
            <h3 className="text-xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">
              International Orders
            </h3>
            <p className="text-muted-foreground leading-relaxed">
              International customers are eligible for returns within the same 30-day window. However, return shipping
              costs are the responsibility of the customer. Once your return is received and inspected, we will issue a
              refund for the product value.
            </p>
          </div>

{/* Contact Support */}
          <div className="bg-accent/10 border border-accent p-8 rounded-lg">
            <h3 className="text-xl font-bold mb-3 font-[family-name:var(--font-playfair)] text-foreground">
              Need Help?
            </h3>
            <p className="text-muted-foreground mb-4">
              If you have any questions about our refund policy or need assistance with a return, our customer support
              team is here to help.
            </p>
            <div className="space-y-2 text-muted-foreground text-sm">
              <p>
                <span className="font-semibold text-foreground">Email:</span> support@marham.com
              </p>
              <p>
                <span className="font-semibold text-foreground">Hours:</span> Monday - Friday, 9 AM - 6 PM (EST)
              </p>
              <p>
                <span className="font-semibold text-foreground">Response Time:</span> Within 24 hours
              </p>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
export function Footer() {
  return (
    <footer className="bg-secondary/20 border-t border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
            <h3 className="text-2xl font-bold mb-4 font-[family-name:var(--font-playfair)] text-foreground">MARHAM</h3>
            <p className="text-muted-foreground max-w-md">
              Crafting memories, moments, and marks of prestige for the discerning gentleman.
            </p>
          </div>

<div>
            <h4 className="font-semibold text-foreground mb-4">Collections</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <a href="/perfumes" className="hover:text-foreground transition-colors">
                  Perfumes
                </a>
              </li>
              <li>
                <a href="/watches" className="hover:text-foreground transition-colors">
                  Watches
                </a>
              </li>
              <li>
                <a href="/leather" className="hover:text-foreground transition-colors">
                  Leather Goods
                </a>
              </li>
              <li>
                <a href="/shoes" className="hover:text-foreground transition-colors">
                  Shoes
                </a>
              </li>
            </ul>
          </div>

<div>
            <h4 className="font-semibold text-foreground mb-4">Company</h4>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>
                <a href="/about" className="hover:text-foreground transition-colors">
                  Our Story
                </a>
              </li>
              <li>
                <a href="/contact" className="hover:text-foreground transition-colors">
                  Contact
                </a>
              </li>
              <li>
                <a href="/refund-policy" className="hover:text-foreground transition-colors">
                  Refund Policy
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-foreground transition-colors">
                  Terms
                </a>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-border mt-8 pt-8 text-center text-sm text-muted-foreground">
          <p>© 2025 MARHAM. All rights reserved. Designed for the man she'll never forget.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="lib/cart-context.tsx"
'use client'

import React, { createContext, useContext, useState, useCallback } from 'react'

export interface CartItem {
  id: string
  name: string
  price: number
  image: string
  quantity: number
  category: string
}

interface CartContextType {
  items: CartItem[]
  addToCart: (item: CartItem) => void
  removeFromCart: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  clearCart: () => void
  total: number
  itemCount: number
}

const CartContext = createContext<CartContextType | undefined>(undefined)

export function CartProvider({ children }: { children: React.ReactNode }) {
  const [items, setItems] = useState<CartItem[]>([])

const addToCart = useCallback((item: CartItem) => {
    setItems((prevItems) => {
      const existingItem = prevItems.find((i) => i.id === item.id)
      if (existingItem) {
        return prevItems.map((i) =>
          i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i
        )
      }
      return [...prevItems, item]
    })
  }, [])

const removeFromCart = useCallback((id: string) => {
    setItems((prevItems) => prevItems.filter((i) => i.id !== id))
  }, [])

const updateQuantity = useCallback((id: string, quantity: number) => {
    if (quantity <= 0) {
      removeFromCart(id)
    } else {
      setItems((prevItems) =>
        prevItems.map((i) => (i.id === id ? { ...i, quantity } : i))
      )
    }
  }, [removeFromCart])

const clearCart = useCallback(() => {
    setItems([])
  }, [])

const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)

return (
    <CartContext.Provider
      value={{
        items,
        addToCart,
        removeFromCart,
        updateQuantity,
        clearCart,
        total,
        itemCount,
      }}
    >
      {children}
    </CartContext.Provider>
  )
}

export function useCart() {
  const context = useContext(CartContext)
  if (context === undefined) {
    throw new Error('useCart must be used within a CartProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="components/cart-summary.tsx"
import { useCart } from '@/lib/cart-context'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

export function CartSummary() {
  const { items, total } = useCart()

return (
    <div className="bg-secondary rounded-lg p-8">
      <h2 className="text-2xl font-bold mb-6 text-foreground luxury-serif">Order Summary</h2>
      
      <div className="space-y-4 mb-6">
        {items.map((item) => (
          <div key={item.id} className="flex justify-between text-sm">
            <span className="text-muted-foreground">
              {item.name} x {item.quantity}
            </span>
            <span className="text-foreground font-semibold">
              ${(item.price * item.quantity).toFixed(2)}
            </span>
          </div>
        ))}
      </div>

<div className="border-t border-border pt-4 mb-6">
        <div className="flex justify-between mb-2">
          <span className="text-muted-foreground">Subtotal</span>
          <span className="text-foreground">${total.toFixed(2)}</span>
        </div>
        <div className="flex justify-between mb-2">
          <span className="text-muted-foreground">Shipping</span>
          <span className="text-foreground">Calculated at checkout</span>
        </div>
        <div className="flex justify-between text-lg font-bold mt-4">
          <span>Total</span>
          <span className="text-accent">${total.toFixed(2)}</span>
        </div>
      </div>

<Link href="/checkout" className="w-full">
        <Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
          Proceed to Checkout
        </Button>
      </Link>
      
      <Link href="/shop" className="w-full mt-2">
        <Button variant="outline" className="w-full">
          Continue Shopping
        </Button>
      </Link>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/cart-items.tsx"
'use client'

import { useCart } from '@/lib/cart-context'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Image from 'next/image'

export function CartItems() {
  const { items, removeFromCart, updateQuantity } = useCart()

if (items.length === 0) {
    return (
      <div className="bg-card rounded-lg p-12 text-center">
        <p className="text-muted-foreground text-lg mb-4">Your cart is empty</p>
        <p className="text-sm text-muted-foreground">
          Explore our luxury collections to find the perfect gift or for yourself.
        </p>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {items.map((item) => (
        <div
          key={item.id}
          className="bg-card rounded-lg p-6 flex gap-6 items-center border border-border"
        >
          <div className="w-24 h-24 relative rounded-lg overflow-hidden bg-muted flex-shrink-0">
            <img
              src={item.image || '/placeholder.svg'}
              alt={item.name}
              className="w-full h-full object-cover"
            />
          </div>

<div className="flex-1">
            <h3 className="text-lg font-semibold text-foreground mb-1">{item.name}</h3>
            <p className="text-sm text-muted-foreground mb-3">{item.category}</p>
            <p className="text-lg font-bold text-accent">${item.price.toFixed(2)}</p>
          </div>

<div className="flex items-center gap-3">
            <button
              onClick={() => updateQuantity(item.id, item.quantity - 1)}
              className="w-8 h-8 rounded border border-border hover:bg-muted text-foreground"
            >
              −
            </button>
            <input
              type="number"
              min="1"
              max="99"
              value={item.quantity}
              onChange={(e) => updateQuantity(item.id, parseInt(e.target.value) || 1)}
              className="w-12 h-8 text-center border border-border rounded bg-background text-foreground"
            />
            <button
              onClick={() => updateQuantity(item.id, item.quantity + 1)}
              className="w-8 h-8 rounded border border-border hover:bg-muted text-foreground"
            >
              +
            </button>
          </div>

<div className="text-right min-w-24">
            <p className="text-lg font-bold text-foreground mb-3">
              ${(item.price * item.quantity).toFixed(2)}
            </p>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => removeFromCart(item.id)}
              className="text-destructive hover:text-destructive hover:bg-destructive/10"
            >
              Remove
            </Button>
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cart/page.tsx"
'use client'

import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { CartItems } from '@/components/cart-items'
import { CartSummary } from '@/components/cart-summary'
import { useCart } from '@/lib/cart-context'

export default function CartPage() {
  const { items } = useCart()

return (
    <main className="min-h-screen bg-background">
      <Navigation />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <div className="mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2 luxury-serif">
            Shopping Cart
          </h1>
          <p className="text-muted-foreground">
            {items.length} {items.length === 1 ? 'item' : 'items'} in your cart
          </p>
        </div>

{/* Cart Content */}
        {items.length > 0 ? (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2">
              <CartItems />
            </div>
            <div className="lg:col-span-1">
              <CartSummary />
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-center min-h-96">
            <CartItems />
          </div>
        )}
      </div>

<Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/checkout/page.tsx"
'use client'

import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { Button } from '@/components/ui/button'
import { useCart } from '@/lib/cart-context'
import { useState } from 'react'
import Link from 'next/link'

export default function CheckoutPage() {
  const { items, total, clearCart } = useCart()
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    address: '',
    city: '',
    state: '',
    zipCode: '',
    country: '',
    cardNumber: '',
    expiryDate: '',
    cvv: '',
  })
  const [orderPlaced, setOrderPlaced] = useState(false)

if (items.length === 0 && !orderPlaced) {
    return (
      <main className="min-h-screen bg-background">
        <Navigation />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
          <h1 className="text-3xl font-bold mb-4 text-foreground luxury-serif">Your Cart is Empty</h1>
          <p className="text-muted-foreground mb-8">Please add items to proceed with checkout.</p>
          <Link href="/shop">
            <Button className="bg-primary text-primary-foreground">
              Continue Shopping
            </Button>
          </Link>
        </div>
        <Footer />
      </main>
    )
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setOrderPlaced(true)
  }

if (orderPlaced) {
    return (
      <main className="min-h-screen bg-background">
        <Navigation />
        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="bg-card rounded-lg p-12 text-center border-2 border-accent">
            <div className="mb-6">
              <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mx-auto mb-4">
                <svg className="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            </div>
            <h1 className="text-4xl font-bold mb-2 text-foreground luxury-serif">
              Order Confirmed
            </h1>
            <p className="text-muted-foreground mb-8 text-lg">
              Thank you for your purchase. Your order has been placed successfully.
            </p>
            
            <div className="bg-secondary rounded-lg p-8 mb-8 text-left">
              <h2 className="text-xl font-semibold mb-4 text-foreground">Order Details</h2>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Order Number</span>
                  <span className="text-foreground font-semibold">#MAR-{Date.now().toString().slice(-6)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Total Amount</span>
                  <span className="text-foreground font-semibold">${total.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Email</span>
                  <span className="text-foreground font-semibold">{formData.email}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Items</span>
                  <span className="text-foreground font-semibold">{items.length}</span>
                </div>
              </div>
            </div>

<p className="text-sm text-muted-foreground mb-8">
              A confirmation email has been sent to <span className="font-semibold">{formData.email}</span>
            </p>

<Link href="/">
              <Button className="bg-primary text-primary-foreground">
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
        <Footer />
      </main>
    )
  }

return (
    <main className="min-h-screen bg-background">
      <Navigation />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-12 luxury-serif">Checkout</h1>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Checkout Form */}
          <div className="lg:col-span-2">
            <form onSubmit={handleSubmit} className="space-y-8">
              {/* Billing Information */}
              <div className="bg-card rounded-lg p-8 border border-border">
                <h2 className="text-2xl font-bold text-foreground mb-6 luxury-serif">Billing Information</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">First Name</label>
                    <input
                      type="text"
                      name="firstName"
                      value={formData.firstName}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Last Name</label>
                    <input
                      type="text"
                      name="lastName"
                      value={formData.lastName}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Email</label>
                    <input
                      type="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Phone</label>
                    <input
                      type="tel"
                      name="phone"
                      value={formData.phone}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                </div>

<div className="mb-4">
                  <label className="block text-sm font-medium text-foreground mb-2">Address</label>
                  <input
                    type="text"
                    name="address"
                    value={formData.address}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">City</label>
                    <input
                      type="text"
                      name="city"
                      value={formData.city}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">State/Province</label>
                    <input
                      type="text"
                      name="state"
                      value={formData.state}
                      onChange={handleInputChange}
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Zip Code</label>
                    <input
                      type="text"
                      name="zipCode"
                      value={formData.zipCode}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                </div>

<div className="mt-4">
                  <label className="block text-sm font-medium text-foreground mb-2">Country</label>
                  <input
                    type="text"
                    name="country"
                    value={formData.country}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>
              </div>

{/* Payment Information */}
              <div className="bg-card rounded-lg p-8 border border-border">
                <h2 className="text-2xl font-bold text-foreground mb-6 luxury-serif">Payment Information</h2>
                
                <div className="mb-4">
                  <label className="block text-sm font-medium text-foreground mb-2">Card Number</label>
                  <input
                    type="text"
                    name="cardNumber"
                    value={formData.cardNumber}
                    onChange={handleInputChange}
                    placeholder="1234 5678 9012 3456"
                    required
                    className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">Expiry Date</label>
                    <input
                      type="text"
                      name="expiryDate"
                      value={formData.expiryDate}
                      onChange={handleInputChange}
                      placeholder="MM/YY"
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-foreground mb-2">CVV</label>
                    <input
                      type="text"
                      name="cvv"
                      value={formData.cvv}
                      onChange={handleInputChange}
                      placeholder="123"
                      required
                      className="w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                    />
                  </div>
                </div>
              </div>

<Button
                type="submit"
                className="w-full bg-primary text-primary-foreground hover:bg-primary/90 py-6 text-lg font-semibold"
              >
                Place Order
              </Button>
            </form>
          </div>

{/* Order Summary */}
          <div className="lg:col-span-1">
            <div className="bg-secondary rounded-lg p-8 sticky top-8">
              <h2 className="text-2xl font-bold mb-6 text-foreground luxury-serif">Order Summary</h2>
              
              <div className="space-y-4 mb-6 max-h-64 overflow-y-auto">
                {items.map((item) => (
                  <div key={item.id} className="flex justify-between text-sm pb-4 border-b border-border">
                    <div>
                      <p className="text-foreground font-medium">{item.name}</p>
                      <p className="text-muted-foreground text-xs">Qty: {item.quantity}</p>
                    </div>
                    <span className="text-foreground font-semibold">
                      ${(item.price * item.quantity).toFixed(2)}
                    </span>
                  </div>
                ))}
              </div>

<div className="border-t border-border pt-4 space-y-3">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Subtotal</span>
                  <span className="text-foreground">${total.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Shipping</span>
                  <span className="text-foreground">FREE</span>
                </div>
                <div className="flex justify-between text-lg font-bold mt-4 pt-4 border-t border-border">
                  <span>Total</span>
                  <span className="text-accent">${total.toFixed(2)}</span>
                </div>
              </div>

<Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, ShoppingBag } from "lucide-react"
import { useCart } from "@/lib/cart-context"

export function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { itemCount } = useCart()

return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex-shrink-0">
            <Link href="/">
              <h1 className="text-2xl font-bold tracking-tight text-foreground font-[family-name:var(--font-playfair)]">
                MARHAM
              </h1>
            </Link>
          </div>

{/* Desktop Navigation */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-8">
              <Link
                href="/perfumes"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Perfumes
              </Link>
              <Link
                href="/watches"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Watches
              </Link>
              <Link
                href="/leather"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Leather
              </Link>
              <Link
                href="/shoes"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Shoes
              </Link>
              <Link
                href="/gifting"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Gifting
              </Link>
              <Link
                href="/about"
                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
              >
                Our Story
              </Link>
            </div>
          </div>

{/* Desktop Actions */}
          <div className="hidden md:flex items-center space-x-4">
            <Link href="/cart" className="relative">
              <Button variant="ghost" size="sm">
                <ShoppingBag className="h-4 w-4" />
                {itemCount > 0 && (
                  <span className="absolute -top-2 -right-2 bg-accent text-accent-foreground text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {itemCount}
                  </span>
                )}
              </Button>
            </Link>
            <Link href="/shop">
              <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90">
                Shop Now
              </Button>
            </Link>
          </div>

{/* Mobile menu button */}
          <div className="md:hidden">
            <Button variant="ghost" size="sm" onClick={() => setIsMenuOpen(!isMenuOpen)}>
              {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </Button>
          </div>
        </div>

{/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-background border-t border-border">
              <Link
                href="/perfumes"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Perfumes
              </Link>
              <Link
                href="/watches"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Watches
              </Link>
              <Link
                href="/leather"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Leather
              </Link>
              <Link
                href="/shoes"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Shoes
              </Link>
              <Link
                href="/gifting"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Gifting
              </Link>
              <Link
                href="/about"
                className="block px-3 py-2 text-muted-foreground hover:text-foreground transition-colors"
              >
                Our Story
              </Link>
              <div className="px-3 py-2">
                <Link href="/cart">
                  <Button size="sm" className="w-full bg-primary text-primary-foreground hover:bg-primary/90 relative">
                    <ShoppingBag className="h-4 w-4 mr-2" />
                    Cart {itemCount > 0 && `(${itemCount})`}
                  </Button>
                </Link>
              </div>
              <div className="px-3 py-2">
                <Link href="/shop">
                  <Button size="sm" className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
                    Shop Now
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/product-detail.tsx"
'use client'

import { Button } from "@/components/ui/button"
import { useCart } from "@/lib/cart-context"
import { useState } from "react"
import { ChevronLeft, Heart } from "lucide-react"
import Link from "next/link"

interface ProductAttribute {
  label: string
  value: string | string[]
  type?: 'select' | 'text'
  options?: string[]
}

interface ProductDetailProps {
  id: string
  name: string
  price: string
  category: string
  image: string
  description: string
  longDescription: string
  attributes: ProductAttribute[]
  backLink: string
  backLinkLabel: string
}

export function ProductDetail({
  id,
  name,
  price,
  category,
  image,
  description,
  longDescription,
  attributes,
  backLink,
  backLinkLabel,
}: ProductDetailProps) {
  const { addToCart } = useCart()
  const [selectedAttributes, setSelectedAttributes] = useState<Record<string, string>>({})
  const [quantity, setQuantity] = useState(1)
  const [addedToCart, setAddedToCart] = useState(false)
  const [wishlist, setWishlist] = useState(false)

const handleAttributeChange = (label: string, value: string) => {
    setSelectedAttributes(prev => ({
      ...prev,
      [label]: value,
    }))
  }

const handleAddToCart = () => {
    const numPrice = parseFloat(price.replace('$', ''))
    addToCart({
      id: `${id}-${Object.values(selectedAttributes).join('-')}`,
      name: name,
      price: numPrice,
      image: image,
      quantity: quantity,
      category: category,
      attributes: selectedAttributes,
    })
    
    setAddedToCart(true)
    setTimeout(() => setAddedToCart(false), 2000)
  }

return (
    <div className="min-h-screen bg-background">
      {/* Back Button */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <Link href={backLink} className="flex items-center text-foreground hover:text-muted-foreground transition-colors">
          <ChevronLeft className="h-5 w-5 mr-2" />
          {backLinkLabel}
        </Link>
      </div>

{/* Product Detail */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Product Image */}
          <div className="flex items-center justify-center">
            <div className="aspect-square w-full max-w-md overflow-hidden rounded-lg bg-muted">
              <img
                src={image}
                alt={name}
                className="w-full h-full object-cover"
              />
            </div>
          </div>

{/* Product Info */}
          <div className="flex flex-col justify-center space-y-6">
            {/* Category */}
            <div className="text-sm text-muted-foreground uppercase tracking-wide">{category}</div>

{/* Title and Price */}
            <div>
              <h1 className="text-4xl md:text-5xl font-playfair font-bold text-foreground mb-2">{name}</h1>
              <p className="text-lg text-muted-foreground">{description}</p>
            </div>

{/* Price */}
            <div className="text-3xl font-bold text-foreground">{price}</div>

{/* Long Description */}
            <p className="text-base text-muted-foreground leading-relaxed">{longDescription}</p>

{/* Attributes */}
            <div className="space-y-4">
              {attributes.map((attr) => (
                <div key={attr.label}>
                  <label className="block text-sm font-semibold text-foreground mb-2">
                    {attr.label}
                  </label>
                  {attr.type === 'select' && attr.options ? (
                    <select
                      value={selectedAttributes[attr.label] || ''}
                      onChange={(e) => handleAttributeChange(attr.label, e.target.value)}
                      className="w-full px-4 py-2 border border-muted rounded-lg bg-background text-foreground focus:outline-none focus:border-accent"
                    >
                      <option value="">Select {attr.label.toLowerCase()}</option>
                      {attr.options.map((option) => (
                        <option key={option} value={option}>
                          {option}
                        </option>
                      ))}
                    </select>
                  ) : Array.isArray(attr.value) ? (
                    <div className="flex flex-wrap gap-2">
                      {attr.value.map((val) => (
                        <button
                          key={val}
                          onClick={() => handleAttributeChange(attr.label, val)}
                          className={`px-4 py-2 border rounded-lg transition-all ${
                            selectedAttributes[attr.label] === val
                              ? 'border-accent bg-accent text-accent-foreground'
                              : 'border-muted hover:border-accent text-foreground'
                          }`}
                        >
                          {val}
                        </button>
                      ))}
                    </div>
                  ) : (
                    <div className="text-foreground">{attr.value}</div>
                  )}
                </div>
              ))}
            </div>

{/* Quantity */}
            <div className="flex items-center space-x-4">
              <label className="text-sm font-semibold text-foreground">Quantity:</label>
              <div className="flex items-center border border-muted rounded-lg">
                <button
                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
                  className="px-3 py-2 text-foreground hover:bg-muted transition-colors"
                >
                  −
                </button>
                <input
                  type="number"
                  value={quantity}
                  onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
                  className="w-12 text-center bg-background text-foreground border-l border-r border-muted outline-none"
                  min="1"
                />
                <button
                  onClick={() => setQuantity(quantity + 1)}
                  className="px-3 py-2 text-foreground hover:bg-muted transition-colors"
                >
                  +
                </button>
              </div>
            </div>

{/* Actions */}
            <div className="flex gap-4">
              <Button
                size="lg"
                onClick={handleAddToCart}
                className={`flex-1 ${
                  addedToCart
                    ? 'bg-accent text-accent-foreground'
                    : 'bg-primary text-primary-foreground hover:bg-primary/90'
                }`}
              >
                {addedToCart ? '✓ Added to Cart' : 'Add to Cart'}
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => setWishlist(!wishlist)}
                className="px-6"
              >
                <Heart className={`h-5 w-5 ${wishlist ? 'fill-current text-accent' : ''}`} />
              </Button>
            </div>

{/* Product Info */}
            <div className="pt-6 border-t border-muted space-y-3 text-sm text-muted-foreground">
              <div className="flex justify-between">
                <span>Shipping</span>
                <span>Calculated at checkout</span>
              </div>
              <div className="flex justify-between">
                <span>Returns</span>
                <span>30-day money-back guarantee</span>
              </div>
              <div className="flex justify-between">
                <span>Support</span>
                <span>24/7 customer service</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/perfumes/[id]/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductDetail } from "@/components/product-detail"
import { Footer } from "@/components/footer"

const perfumeProducts: Record<string, any> = {
  "1": {
    name: "Midnight Essence",
    price: "$180",
    description: "A sophisticated blend of bergamot, cedar, and amber",
    longDescription: "Midnight Essence is a masterfully crafted fragrance that opens with fresh bergamot notes, transitions into a warm cedar heart, and settles into a luxurious amber base. Perfect for the evening, this scent embodies sophistication and timeless elegance.",
    category: "Perfumes",
    image: "/luxury-perfume-bottle-dark-elegant.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Bergamot, Lemon, Black Pepper",
      },
      {
        label: "Heart Notes",
        value: "Cedar, Iris, Jasmine",
      },
      {
        label: "Base Notes",
        value: "Amber, Musk, Sandalwood",
      },
      {
        label: "Longevity",
        value: "6-8 hours",
      },
    ],
  },
  "2": {
    name: "Royal Oud",
    price: "$250",
    description: "Rich oud with notes of rose and saffron",
    longDescription: "Royal Oud is an opulent fragrance that celebrates the rarest ingredients. The luxurious oud is complemented by delicate rose and precious saffron, creating a scent that commands attention and respect. A true statement of luxury and power.",
    category: "Perfumes",
    image: "/premium-oud-perfume-bottle-gold-accents.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Saffron, Cardamom, Pink Pepper",
      },
      {
        label: "Heart Notes",
        value: "Rose, Oud, Incense",
      },
      {
        label: "Base Notes",
        value: "Oud, Agarwood, Leather",
      },
      {
        label: "Longevity",
        value: "8-10 hours",
      },
    ],
  },
  "3": {
    name: "Urban Legend",
    price: "$160",
    description: "Fresh citrus with woody undertones",
    longDescription: "Urban Legend captures the essence of modern masculinity with its crisp citrus opening and sophisticated woody base. Ideal for day wear, this fragrance projects confidence and contemporary style.",
    category: "Perfumes",
    image: "/modern-perfume-bottle-minimalist-design.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Grapefruit, Bergamot, Lime",
      },
      {
        label: "Heart Notes",
        value: "Lavender, Geranium, Clary Sage",
      },
      {
        label: "Base Notes",
        value: "Cedarwood, Vetiver, Patchouli",
      },
      {
        label: "Longevity",
        value: "5-7 hours",
      },
    ],
  },
  "4": {
    name: "Velvet Night",
    price: "$200",
    description: "Sensual vanilla and musk composition",
    longDescription: "Velvet Night is a sensory experience that wraps you in warmth and sophistication. The creamy vanilla base is elevated by exotic spices and warm musk, creating an intoxicating scent that lingers elegantly.",
    category: "Perfumes",
    image: "/luxury-perfume-bottle-velvet-texture.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Cinnamon, Clove, Nutmeg",
      },
      {
        label: "Heart Notes",
        value: "Vanilla, Tonka Bean, Heliotrope",
      },
      {
        label: "Base Notes",
        value: "Musk, Amber, Sandalwood",
      },
      {
        label: "Longevity",
        value: "7-9 hours",
      },
    ],
  },
  "5": {
    name: "Heritage",
    price: "$220",
    description: "Timeless blend of leather and tobacco",
    longDescription: "Heritage is a tribute to classic masculine fragrances. The rich leather opening is complemented by warm tobacco and subtle spices, creating a scent that tells a story of tradition and refined taste.",
    category: "Perfumes",
    image: "/classic-perfume-bottle-vintage-inspired.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Bergamot, Juniper, Black Pepper",
      },
      {
        label: "Heart Notes",
        value: "Leather, Tobacco, Oak Moss",
      },
      {
        label: "Base Notes",
        value: "Leather, Cedar, Vetiver",
      },
      {
        label: "Longevity",
        value: "7-10 hours",
      },
    ],
  },
  "6": {
    name: "Platinum Edge",
    price: "$190",
    description: "Cool mint and eucalyptus with warm base",
    longDescription: "Platinum Edge delivers a refreshing burst of cool mint and crisp eucalyptus, balanced with a warm, woody base. Perfect for those who appreciate a modern, energizing fragrance.",
    category: "Perfumes",
    image: "/platinum-perfume-bottle-modern-sleek.jpg",
    attributes: [
      {
        label: "Volume",
        type: "select",
        options: ["50ml", "100ml", "200ml"],
      },
      {
        label: "Top Notes",
        value: "Mint, Eucalyptus, Ginger",
      },
      {
        label: "Heart Notes",
        value: "Lavender, Geranium, Basil",
      },
      {
        label: "Base Notes",
        value: "Cedarwood, Amber, Musk",
      },
      {
        label: "Longevity",
        value: "6-8 hours",
      },
    ],
  },
}

export default function PerfumeDetailPage({ params }: { params: { id: string } }) {
  const product = perfumeProducts[params.id]

if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div>Product not found</div>
      </div>
    )
  }

return (
    <main>
      <Navigation />
      <ProductDetail
        {...product}
        id={params.id}
        backLink="/perfumes"
        backLinkLabel="Back to Perfumes"
      />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/shoes/[id]/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductDetail } from "@/components/product-detail"
import { Footer } from "@/components/footer"

const shoeProducts: Record<string, any> = {
  "1": {
    name: "Oxford Classic",
    price: "$420",
    description: "Traditional oxford in premium black leather",
    longDescription: "The Oxford Classic is the epitome of timeless footwear. Crafted from the finest premium black leather, these shoes feature meticulous handcrafted stitching and a comfortable fit that works for both boardroom and special occasions.",
    category: "Shoes",
    image: "/luxury-oxford-shoes-black-leather-classic.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Calf Leather",
      },
      {
        label: "Sole",
        value: "Leather with Rubber Heel",
      },
      {
        label: "Style",
        value: "Formal",
      },
    ],
  },
  "2": {
    name: "Derby Elegance",
    price: "$380",
    description: "Versatile derby shoes for business casual",
    longDescription: "Derby Elegance combines comfort with sophistication. These brown leather derbies transition seamlessly from office to social settings, featuring quality construction and a versatile color that complements any professional wardrobe.",
    category: "Shoes",
    image: "/derby-shoes-brown-leather-business-casual.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Brown",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Sole",
        value: "Leather with Rubber Heel",
      },
      {
        label: "Style",
        value: "Business Casual",
      },
    ],
  },
  "3": {
    name: "Loafer Luxury",
    price: "$360",
    description: "Handcrafted loafers with tassel detail",
    longDescription: "Loafer Luxury represents the perfect blend of comfort and style. Handcrafted with premium leather and featuring elegant tassel detailing, these loafers are ideal for sophisticated casual wear.",
    category: "Shoes",
    image: "/luxury-loafers-tassel-detail-premium-leather.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Handcrafted Premium Leather",
      },
      {
        label: "Sole",
        value: "Flexible Leather",
      },
      {
        label: "Style",
        value: "Casual",
      },
    ],
  },
  "4": {
    name: "Chelsea Boots",
    price: "$480",
    description: "Sleek ankle boots with elastic side panels",
    longDescription: "Chelsea Boots showcase sophisticated design with their sleek silhouette and elastic side panels for easy on-and-off functionality. Perfect for both formal and casual occasions, these boots are a wardrobe essential.",
    category: "Shoes",
    image: "/chelsea-boots-black-leather-elastic-sides-luxury.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Sole",
        value: "Leather with Rubber Heel",
      },
      {
        label: "Style",
        value: "Formal/Casual",
      },
    ],
  },
  "5": {
    name: "Brogue Masterpiece",
    price: "$450",
    description: "Wingtip brogues with intricate perforations",
    longDescription: "Brogue Masterpiece features exquisite craftsmanship with intricate wingtip perforations that showcase attention to detail. These brogues make a statement while maintaining timeless elegance.",
    category: "Shoes",
    image: "/wingtip-brogue-shoes-perforations-luxury-leather.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Tan/Brown",
      },
      {
        label: "Material",
        value: "Premium Suede and Leather",
      },
      {
        label: "Sole",
        value: "Leather with Rubber Heel",
      },
      {
        label: "Style",
        value: "Formal",
      },
    ],
  },
  "6": {
    name: "Monk Strap",
    price: "$400",
    description: "Double monk strap with premium buckles",
    longDescription: "Monk Strap features double monk straps with premium buckles, offering a sophisticated alternative to traditional laced shoes. These distinctive shoes showcase luxury detail and refined craftsmanship.",
    category: "Shoes",
    image: "/double-monk-strap-shoes-premium-buckles-leather.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["6", "7", "8", "9", "10", "11", "12", "13"],
      },
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Sole",
        value: "Leather with Rubber Heel",
      },
      {
        label: "Style",
        value: "Formal",
      },
    ],
  },
}

export default function ShoeDetailPage({ params }: { params: { id: string } }) {
  const product = shoeProducts[params.id]

if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div>Product not found</div>
      </div>
    )
  }

return (
    <main>
      <Navigation />
      <ProductDetail
        {...product}
        id={params.id}
        backLink="/shoes"
        backLinkLabel="Back to Shoes"
      />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/watches/[id]/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductDetail } from "@/components/product-detail"
import { Footer } from "@/components/footer"

const watchProducts: Record<string, any> = {
  "1": {
    name: "Luxury Chronograph",
    price: "$2,500",
    description: "Swiss movement chronograph with black leather strap",
    longDescription: "The Luxury Chronograph features authentic Swiss movement with precision timing, a sophisticated chronograph function, and premium stainless steel case. The black leather strap is handcrafted and adjustable for ultimate comfort.",
    category: "Watches",
    image: "/luxury-chronograph-watch-black-leather-strap.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "Stainless Steel",
      },
      {
        label: "Movement",
        value: "Swiss Automatic",
      },
      {
        label: "Dial Color",
        value: "Black",
      },
      {
        label: "Strap",
        value: "Premium Black Leather",
      },
      {
        label: "Water Resistance",
        value: "100m",
      },
      {
        label: "Functions",
        value: "Chronograph, Date Window",
      },
    ],
  },
  "2": {
    name: "Classic Dress Watch",
    price: "$1,800",
    description: "Gold case with white dial and leather strap",
    longDescription: "The Classic Dress Watch epitomizes understated elegance. With a 18K gold case, white dial, and refined styling, this timepiece is perfect for formal occasions and adds sophistication to any ensemble.",
    category: "Watches",
    image: "/classic-dress-watch-gold-case-white-dial.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "18K Gold",
      },
      {
        label: "Movement",
        value: "Quartz",
      },
      {
        label: "Dial Color",
        value: "White",
      },
      {
        label: "Strap",
        value: "Gold Bracelet",
      },
      {
        label: "Water Resistance",
        value: "50m",
      },
      {
        label: "Functions",
        value: "Date Window",
      },
    ],
  },
  "3": {
    name: "Sport Watch",
    price: "$1,200",
    description: "Steel bracelet with blue dial and chronograph",
    longDescription: "The Sport Watch combines durability with style. Featuring a stainless steel bracelet, striking blue dial, and chronograph function, this watch is built for active gentlemen who refuse to compromise on elegance.",
    category: "Watches",
    image: "/sport-watch-steel-bracelet-blue-dial.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "Stainless Steel",
      },
      {
        label: "Movement",
        value: "Automatic",
      },
      {
        label: "Dial Color",
        value: "Blue",
      },
      {
        label: "Strap",
        value: "Steel Bracelet",
      },
      {
        label: "Water Resistance",
        value: "200m",
      },
      {
        label: "Functions",
        value: "Chronograph, Date",
      },
    ],
  },
  "4": {
    name: "GMT Master",
    price: "$2,200",
    description: "Black dial with steel case and GMT function",
    longDescription: "The GMT Master is designed for the modern traveler. With its GMT function, black dial, and robust stainless steel case, this watch allows you to track multiple time zones with elegance.",
    category: "Watches",
    image: "/gmt-watch-black-dial-steel-case.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "Stainless Steel",
      },
      {
        label: "Movement",
        value: "Swiss Automatic",
      },
      {
        label: "Dial Color",
        value: "Black",
      },
      {
        label: "Strap",
        value: "Steel Bracelet",
      },
      {
        label: "Water Resistance",
        value: "300m",
      },
      {
        label: "Functions",
        value: "GMT, Chronograph, Date",
      },
    ],
  },
  "5": {
    name: "Skeleton Watch",
    price: "$3,500",
    description: "Exposed movement with luxury craftsmanship",
    longDescription: "The Skeleton Watch showcases exceptional horological craftsmanship with its exposed movement visible through both front and back. A true masterpiece for watch enthusiasts who appreciate mechanical excellence.",
    category: "Watches",
    image: "/skeleton-watch-exposed-movement-luxury.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "18K White Gold",
      },
      {
        label: "Movement",
        value: "Manual Wind",
      },
      {
        label: "Dial Type",
        value: "Skeleton",
      },
      {
        label: "Strap",
        value: "Leather",
      },
      {
        label: "Water Resistance",
        value: "30m",
      },
      {
        label: "Functions",
        value: "Power Reserve Display",
      },
    ],
  },
  "6": {
    name: "Titanium Modern",
    price: "$1,950",
    description: "Modern titanium case with gray dial",
    longDescription: "The Titanium Modern combines contemporary design with lightweight durability. The titanium case and gray dial create a sophisticated look that works from boardroom to weekend adventures.",
    category: "Watches",
    image: "/titanium-watch-modern-design-gray-dial.jpg",
    attributes: [
      {
        label: "Case Material",
        value: "Titanium",
      },
      {
        label: "Movement",
        value: "Automatic",
      },
      {
        label: "Dial Color",
        value: "Gray",
      },
      {
        label: "Strap",
        value: "Titanium Bracelet",
      },
      {
        label: "Water Resistance",
        value: "150m",
      },
      {
        label: "Functions",
        value: "Date, Second Time Zone",
      },
    ],
  },
}

export default function WatchDetailPage({ params }: { params: { id: string } }) {
  const product = watchProducts[params.id]

if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div>Product not found</div>
      </div>
    )
  }

return (
    <main>
      <Navigation />
      <ProductDetail
        {...product}
        id={params.id}
        backLink="/watches"
        backLinkLabel="Back to Watches"
      />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/leather/[id]/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductDetail } from "@/components/product-detail"
import { Footer } from "@/components/footer"

const leatherProducts: Record<string, any> = {
  "1": {
    name: "Premium Leather Belt",
    price: "$280",
    description: "Black premium leather belt with luxury buckle",
    longDescription: "Crafted from the finest premium leather, this belt features a handcrafted luxury buckle and adjustable sizing. Perfect for complementing both formal and casual attire with understated elegance.",
    category: "Leather Goods",
    image: "/luxury-leather-belt-black-premium-buckle.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["30", "32", "34", "36", "38", "40", "42"],
      },
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Buckle",
        value: "Luxury Metal",
      },
      {
        label: "Width",
        value: "1.5 inches",
      },
    ],
  },
  "2": {
    name: "Leather Wallet",
    price: "$220",
    description: "Handcrafted brown leather bifold wallet",
    longDescription: "This handcrafted brown leather wallet combines functionality with luxury. Featuring multiple card slots, a bill compartment, and refined stitching, it's the perfect accessory for the discerning gentleman.",
    category: "Leather Goods",
    image: "/luxury-leather-wallet-brown-handcrafted.jpg",
    attributes: [
      {
        label: "Color",
        value: "Brown",
      },
      {
        label: "Material",
        value: "Handcrafted Leather",
      },
      {
        label: "Type",
        value: "Bifold",
      },
      {
        label: "Card Slots",
        value: "8",
      },
      {
        label: "Compartments",
        value: "Bill Slot + Coin Pocket",
      },
    ],
  },
  "3": {
    name: "Card Holder",
    price: "$150",
    description: "Minimalist black premium card holder",
    longDescription: "Sleek and sophisticated, this minimalist card holder is crafted from premium black leather. Perfect for holding business cards or credit cards with style and discretion.",
    category: "Leather Goods",
    image: "/minimalist-leather-card-holder-black-premium.jpg",
    attributes: [
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Type",
        value: "Card Holder",
      },
      {
        label: "Capacity",
        value: "10-12 cards",
      },
      {
        label: "Finish",
        value: "Polished",
      },
    ],
  },
  "4": {
    name: "Briefcase",
    price: "$850",
    description: "Professional brown leather briefcase",
    longDescription: "The ultimate professional accessory, this briefcase is crafted from premium brown leather with reinforced handles and organized compartments. Perfect for the modern executive.",
    category: "Leather Goods",
    image: "/luxury-leather-briefcase-professional-brown.jpg",
    attributes: [
      {
        label: "Color",
        value: "Brown",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Capacity",
        value: "Large (fits laptop)",
      },
      {
        label: "Compartments",
        value: "Multiple organized sections",
      },
      {
        label: "Handles",
        value: "Reinforced Leather",
      },
    ],
  },
  "5": {
    name: "Travel Wallet",
    price: "$320",
    description: "Luxury passport holder and travel wallet",
    longDescription: "This luxury travel wallet is designed for the well-traveled gentleman. With dedicated slots for passport, cards, and travel documents, it keeps your essentials organized and protected.",
    category: "Leather Goods",
    image: "/leather-travel-wallet-passport-holder-luxury.jpg",
    attributes: [
      {
        label: "Color",
        value: "Black",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Capacity",
        value: "Passport + 12 cards",
      },
      {
        label: "Compartments",
        value: "Document slots + Bill compartment",
      },
      {
        label: "Security",
        value: "RFID Protection",
      },
    ],
  },
  "6": {
    name: "Reversible Belt",
    price: "$300",
    description: "Premium reversible black and brown leather belt",
    longDescription: "The ultimate versatile accessory. This reversible belt features premium leather on both sides—black and brown—allowing you to switch colors based on your outfit without carrying multiple belts.",
    category: "Leather Goods",
    image: "/reversible-leather-belt-luxury-black-brown.jpg",
    attributes: [
      {
        label: "Size",
        type: "select",
        options: ["30", "32", "34", "36", "38", "40", "42"],
      },
      {
        label: "Colors",
        value: "Black & Brown",
      },
      {
        label: "Material",
        value: "Premium Leather",
      },
      {
        label: "Buckle",
        value: "Luxury Metal (works both sides)",
      },
      {
        label: "Width",
        value: "1.5 inches",
      },
    ],
  },
}

export default function LeatherDetailPage({ params }: { params: { id: string } }) {
  const product = leatherProducts[params.id]

if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div>Product not found</div>
      </div>
    )
  }

return (
    <main>
      <Navigation />
      <ProductDetail
        {...product}
        id={params.id}
        backLink="/leather"
        backLinkLabel="Back to Leather Goods"
      />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/watches/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductHero } from "@/components/product-hero"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"

const watches = [
  {
    id: "1",
    name: "Chronos Elite",
    price: "$2,800",
    image: "/luxury-chronograph-watch-black-leather-strap.jpg",
    description: "Swiss movement chronograph with leather strap",
  },
  {
    id: "2",
    name: "Heritage Classic",
    price: "$3,200",
    image: "/classic-dress-watch-gold-case-white-dial.jpg",
    description: "Timeless dress watch with gold case",
  },
  {
    id: "3",
    name: "Sport Master",
    price: "$2,400",
    image: "/sport-watch-steel-bracelet-blue-dial.jpg",
    description: "Professional diving watch with steel bracelet",
  },
  {
    id: "4",
    name: "Midnight GMT",
    price: "$3,600",
    image: "/gmt-watch-black-dial-steel-case.jpg",
    description: "Dual time zone with ceramic bezel",
  },
  {
    id: "5",
    name: "Royal Skeleton",
    price: "$4,200",
    image: "/skeleton-watch-exposed-movement-luxury.jpg",
    description: "Open heart automatic with visible movement",
  },
  {
    id: "6",
    name: "Urban Titanium",
    price: "$2,600",
    image: "/titanium-watch-modern-design-gray-dial.jpg",
    description: "Lightweight titanium case with modern design",
  },
]

export default function WatchesPage() {
  return (
    <main className="min-h-screen">
      <Navigation />
      <ProductHero
        title="Watches"
        subtitle="Precision in time, prestige in style"
        description="Master craftsmanship meets timeless design. Our watch collection represents the pinnacle of horological excellence, where every second counts and every detail matters."
        image="/luxury-watches-collection-dark-background-dramatic.jpg"
        imageAlt="Luxury watch collection"
      />
      <ProductGrid products={watches} category="Watches" categoryPath="watches" />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/leather/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductHero } from "@/components/product-hero"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"

const leatherGoods = [
  {
    id: "1",
    name: "Executive Belt",
    price: "$180",
    image: "/luxury-leather-belt-black-premium-buckle.jpg",
    description: "Full-grain leather belt with premium buckle",
  },
  {
    id: "2",
    name: "Heritage Wallet",
    price: "$220",
    image: "/luxury-leather-wallet-brown-handcrafted.jpg",
    description: "Handcrafted bifold wallet with RFID protection",
  },
  {
    id: "3",
    name: "Signature Card Holder",
    price: "$120",
    image: "/minimalist-leather-card-holder-black-premium.jpg",
    description: "Minimalist design with premium leather",
  },
  {
    id: "4",
    name: "Classic Briefcase",
    price: "$680",
    image: "/luxury-leather-briefcase-professional-brown.jpg",
    description: "Professional briefcase with laptop compartment",
  },
  {
    id: "5",
    name: "Travel Wallet",
    price: "$160",
    image: "/leather-travel-wallet-passport-holder-luxury.jpg",
    description: "Passport holder with multiple card slots",
  },
  {
    id: "6",
    name: "Reversible Belt",
    price: "$200",
    image: "/reversible-leather-belt-luxury-black-brown.jpg",
    description: "Two belts in one with reversible design",
  },
]

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

const playfair = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-playfair",
  display: "swap",
})

export const metadata: Metadata = {
  title: "MARHAM - Designed for the man she'll never forget",
  description: "Luxury perfumes, watches, leather goods, and shoes. Where desire meets dignity.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
      <body className="font-sans antialiased">
        <CartProvider>
          <Suspense fallback={null}>{children}</Suspense>
          <Analytics />
        </CartProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/brand-story.tsx"
export function BrandStory() {
  return (
    <section id="story" className="py-20 lg:py-32 bg-secondary/30">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-8 font-[family-name:var(--font-playfair)] text-foreground">
            Where Legacy Meets Luxury
          </h2>
        </div>

<div className="prose prose-lg max-w-none text-center">
          <p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
            In a world where trends fade and styles change, Marham stands as a legacy. We are not just creating products
            — we are crafting memories, moments, and marks of prestige. Every detail, from the bold scent of our
            perfumes to the refined finish of our leather, is designed for the man who leaves an unforgettable
            impression.
          </p>

<div className="grid md:grid-cols-2 gap-8 mt-12 text-left">
            <div>
              <p className="text-foreground font-medium mb-2">Marham is where desire meets dignity.</p>
              <p className="text-foreground font-medium mb-2">For him, it is confidence and elegance.</p>
            </div>
            <div>
              <p className="text-foreground font-medium mb-2">For her, it is admiration and desire.</p>
              <p className="text-foreground font-medium">Together, it is the story of a man she'll never forget.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/featured-categories.tsx"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

const categories = [
  {
    id: "perfumes",
    title: "Perfumes",
    description: "Scents that define presence",
    image: "/luxury-mens-perfume-bottles-elegant-display.jpg",
  },
  {
    id: "watches",
    title: "Watches",
    description: "Precision in time, prestige in style",
    image: "/luxury-mens-watch-timepiece-elegant.jpg",
  },
  {
    id: "leather",
    title: "Leather",
    description: "Belts & wallets that last beyond trends",
    image: "/luxury-leather-goods-wallet-belt-mens.jpg",
  },
  {
    id: "shoes",
    title: "Shoes",
    description: "Walk with confidence",
    image: "/luxury-mens-dress-shoes-leather-elegant.jpg",
  },
]

export function FeaturedCategories() {
  return (
    <section className="py-20 lg:py-32 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-4 font-[family-name:var(--font-playfair)] text-foreground">
            Crafted for Excellence
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Each category represents our commitment to creating pieces that transcend time and trends.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {categories.map((category) => (
            <div key={category.id} className="group cursor-pointer">
              <div className="relative overflow-hidden rounded-lg bg-muted mb-4 aspect-[3/4]">
                <img
                  src={category.image || "/placeholder.svg"}
                  alt={category.title}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <div className="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <Button variant="secondary" size="sm" className="w-full">
                    Explore {category.title}
                    <ArrowRight className="ml-2 h-3 w-3" />
                  </Button>
                </div>
              </div>
              <h3 className="text-xl font-semibold text-foreground mb-2 font-[family-name:var(--font-playfair)]">
                {category.title}
              </h3>
              <p className="text-muted-foreground text-sm">{category.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/closing-section.tsx"
import { Button } from "@/components/ui/button"

export function ClosingSection() {
  return (
    <section className="py-20 lg:py-32 bg-primary text-primary-foreground">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-8 font-[family-name:var(--font-playfair)]">
          Marham is not just worn.
        </h2>
        <h3 className="text-2xl md:text-3xl font-light text-balance mb-12 opacity-90">Marham is remembered.</h3>

<Button
          size="lg"
          variant="secondary"
          className="bg-primary-foreground text-primary hover:bg-primary-foreground/90 px-8 py-3"
        >
          Begin Your Legacy
        </Button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import { Navigation } from "@/components/navigation"
import { HeroSection } from "@/components/hero-section"
import { BrandStory } from "@/components/brand-story"
import { FeaturedCategories } from "@/components/featured-categories"
import { ClosingSection } from "@/components/closing-section"
import { Footer } from "@/components/footer"

export default function HomePage() {
  return (
    <main className="min-h-screen">
      <Navigation />
      <HeroSection />
      <BrandStory />
      <FeaturedCategories />
      <ClosingSection />
      <Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/luxury-masculine-perfume-bottle-dark-moody-lightin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-masculine-perfume-bottle-dark-moody-lightin-YDdJyR7be6WjrloebozJWs83a2kLm3.jpg"
[V0_FILE]jpg:file="public/luxury-mens-perfume-bottles-elegant-display.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-perfume-bottles-elegant-display-afZGBWYIyaFgziU5sM1KXuCeNrvjTe.jpg"
[V0_FILE]jpg:file="public/luxury-mens-watch-timepiece-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-watch-timepiece-elegant-WY0xIW2FcDM5ZsympuzO82EOuMMLGH.jpg"
[V0_FILE]jpg:file="public/luxury-leather-goods-wallet-belt-mens.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-goods-wallet-belt-mens-Od1a9z4crXv2VU337yplqn5pnZ4lqF.jpg"
[V0_FILE]jpg:file="public/luxury-mens-dress-shoes-leather-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-mens-dress-shoes-leather-elegant-A8Os7JsOd1MswggOszFFkQ0insADT9.jpg"
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/product-hero.tsx"
import { Button } from "@/components/ui/button"
import Link from "next/link"

interface ProductHeroProps {
  title: string
  subtitle: string
  description: string
  image: string
  imageAlt: string
}

export function ProductHero({ title, subtitle, description, image, imageAlt }: ProductHeroProps) {
  return (
    <section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img src={image || "/placeholder.svg"} alt={imageAlt} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-black/40" />
      </div>

<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
        <h1 className="text-5xl md:text-7xl font-bold mb-6 font-[family-name:var(--font-playfair)] text-balance">
          {title}
        </h1>
        <p className="text-xl md:text-2xl mb-4 font-light text-balance">{subtitle}</p>
        <p className="text-lg mb-8 max-w-2xl mx-auto text-pretty opacity-90">{description}</p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button size="lg" className="bg-white text-black hover:bg-white/90">
            Explore Collection
          </Button>
          <Link href="/shop">
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-black bg-transparent"
            >
              Shop All
            </Button>
          </Link>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/product-grid.tsx"
'use client'

import { Button } from "@/components/ui/button"
import { useCart } from "@/lib/cart-context"
import { useState } from "react"
import Link from "next/link"

interface Product {
  id: string
  name: string
  price: string
  image: string
  description: string
  category?: string
}

interface ProductGridProps {
  products: Product[]
  category?: string
  categoryPath?: string
}

export function ProductGrid({ products, category = "Product", categoryPath = "product" }: ProductGridProps) {
  const { addToCart } = useCart()
  const [addedItems, setAddedItems] = useState<Set<string>>(new Set())

const handleAddToCart = (e: React.MouseEvent, product: Product) => {
    e.preventDefault()
    const price = parseFloat(product.price.replace('$', ''))
    addToCart({
      id: product.id,
      name: product.name,
      price,
      image: product.image,
      quantity: 1,
      category: product.category || category,
    })
    
    // Show feedback
    setAddedItems(prev => new Set(prev).add(product.id))
    setTimeout(() => {
      setAddedItems(prev => {
        const newSet = new Set(prev)
        newSet.delete(product.id)
        return newSet
      })
    }, 2000)
  }

return (
    <section className="py-16 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {products.map((product) => (
            <Link key={product.id} href={`/${categoryPath}/${product.id}`}>
              <div className="group cursor-pointer h-full flex flex-col">
                <div className="aspect-square overflow-hidden rounded-lg bg-muted mb-4">
                  <img
                    src={product.image || "/placeholder.svg"}
                    alt={product.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <h3 className="text-lg font-semibold mb-2 text-foreground group-hover:text-accent transition-colors">{product.name}</h3>
                <p className="text-muted-foreground mb-3 text-sm flex-grow">{product.description}</p>
                <div className="flex items-center justify-between">
                  <span className="text-xl font-bold text-foreground">{product.price}</span>
                  <Button 
                    size="sm" 
                    variant={addedItems.has(product.id) ? "default" : "outline"}
                    onClick={(e) => handleAddToCart(e, product)}
                    className={addedItems.has(product.id) ? "bg-accent text-accent-foreground" : ""}
                  >
                    {addedItems.has(product.id) ? "✓ Added" : "Add to Cart"}
                  </Button>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/perfumes/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductHero } from "@/components/product-hero"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"

const perfumes = [
  {
    id: "1",
    name: "Midnight Essence",
    price: "$180",
    image: "/luxury-perfume-bottle-dark-elegant.jpg",
    description: "A sophisticated blend of bergamot, cedar, and amber",
  },
  {
    id: "2",
    name: "Royal Oud",
    price: "$250",
    image: "/premium-oud-perfume-bottle-gold-accents.jpg",
    description: "Rich oud with notes of rose and saffron",
  },
  {
    id: "3",
    name: "Urban Legend",
    price: "$160",
    image: "/modern-perfume-bottle-minimalist-design.jpg",
    description: "Fresh citrus with woody undertones",
  },
  {
    id: "4",
    name: "Velvet Night",
    price: "$200",
    image: "/luxury-perfume-bottle-velvet-texture.jpg",
    description: "Sensual vanilla and musk composition",
  },
  {
    id: "5",
    name: "Heritage",
    price: "$220",
    image: "/classic-perfume-bottle-vintage-inspired.jpg",
    description: "Timeless blend of leather and tobacco",
  },
  {
    id: "6",
    name: "Platinum Edge",
    price: "$190",
    image: "/platinum-perfume-bottle-modern-sleek.jpg",
    description: "Cool mint and eucalyptus with warm base",
  },
]

export default function PerfumesPage() {
  return (
    <main className="min-h-screen">
      <Navigation />
      <ProductHero
        title="Perfumes"
        subtitle="Scents that define presence"
        description="Each fragrance is meticulously crafted to leave an unforgettable impression. From bold and commanding to subtle and sophisticated, our perfume collection embodies the essence of the modern gentleman."
        image="/luxury-perfume-collection-dark-moody-lighting.jpg"
        imageAlt="Luxury perfume collection"
      />
      <ProductGrid products={perfumes} category="Perfumes" categoryPath="perfumes" />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/shop/page.tsx"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import Link from "next/link"

const categories = [
  {
    name: "Perfumes",
    description: "Scents that define presence",
    image: "/placeholder.svg?height=400&width=600",
    href: "/perfumes",
    count: "12 Products",
  },
  {
    name: "Watches",
    description: "Precision in time, prestige in style",
    image: "/placeholder.svg?height=400&width=600",
    href: "/watches",
    count: "8 Products",
  },
  {
    name: "Leather Goods",
    description: "Belts & wallets that last beyond trends",
    image: "/placeholder.svg?height=400&width=600",
    href: "/leather",
    count: "15 Products",
  },
  {
    name: "Shoes",
    description: "Walk with confidence",
    image: "/placeholder.svg?height=400&width=600",
    href: "/shoes",
    count: "10 Products",
  },
]

export default function ShopPage() {
  return (
    <main className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img
            src="/placeholder.svg?height=600&width=1200"
            alt="Marham collection"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/40" />
        </div>

{/* Categories Grid */}
      <section className="py-20 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4 text-foreground font-[family-name:var(--font-playfair)]">
              Our Collections
            </h2>
            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
              Each collection is carefully curated to embody the essence of modern luxury and timeless sophistication.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            {categories.map((category) => (
              <Link key={category.name} href={category.href} className="group">
                <div className="relative overflow-hidden rounded-lg bg-muted aspect-[3/2]">
                  <img
                    src={category.image || "/placeholder.svg"}
                    alt={category.name}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition-colors" />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center text-white">
                      <h3 className="text-3xl font-bold mb-2 font-[family-name:var(--font-playfair)]">
                        {category.name}
                      </h3>
                      <p className="text-lg mb-4 opacity-90">{category.description}</p>
                      <p className="text-sm opacity-75">{category.count}</p>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Featured Section */}
      <section className="py-20 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <h2 className="text-4xl font-bold mb-8 text-foreground font-[family-name:var(--font-playfair)]">
                The Marham Experience
              </h2>
              <p className="text-lg leading-relaxed mb-6 text-muted-foreground">
                More than just products, Marham offers an experience of luxury that extends beyond the purchase. From
                our carefully curated collections to our personalized service, every interaction is designed to reflect
                our commitment to excellence.
              </p>
              <p className="text-lg leading-relaxed mb-8 text-muted-foreground">
                Discover pieces that don't just complement your style — they define it.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
                  Personal Consultation
                </Button>
                <Link href="/about">
                  <Button size="lg" variant="outline">
                    Learn Our Story
                  </Button>
                </Link>
              </div>
            </div>
            <div className="aspect-square overflow-hidden rounded-lg">
              <img
                src="/placeholder.svg?height=600&width=600"
                alt="Marham experience"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

<Footer />
    </main>
  )
}
[V0_FILE]jpg:file="public/luxury-perfume-bottle-dark-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-bottle-dark-elegant-rRyDay1dqeO4tpVOO5zdzrcjXm3z5E.jpg"
[V0_FILE]jpg:file="public/premium-oud-perfume-bottle-gold-accents.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-oud-perfume-bottle-gold-accents-C8tj9nlnKfMcCTzq1sKAg47OMvbQtS.jpg"
[V0_FILE]jpg:file="public/modern-perfume-bottle-minimalist-design.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-perfume-bottle-minimalist-design-IopW1id3G9NBGBdy4VkFS1jsLylNsy.jpg"
[V0_FILE]jpg:file="public/luxury-perfume-bottle-velvet-texture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-bottle-velvet-texture-ex84AlsHKqfCAXRM7iGlfv4sKCDres.jpg"
[V0_FILE]jpg:file="public/classic-perfume-bottle-vintage-inspired.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-perfume-bottle-vintage-inspired-4qdldb5eogKZGYR2OohzhOhIpMBJmC.jpg"
[V0_FILE]jpg:file="public/platinum-perfume-bottle-modern-sleek.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/platinum-perfume-bottle-modern-sleek-sg6BzBontCxVisCQKYd9MgnQxMkQbc.jpg"
[V0_FILE]jpg:file="public/luxury-perfume-collection-dark-moody-lighting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-perfume-collection-dark-moody-lighting-gR6fNmBpkGYUvhlXDDDnVu2iFCDFAt.jpg"
[V0_FILE]jpg:file="public/luxury-chronograph-watch-black-leather-strap.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-chronograph-watch-black-leather-strap-npSwedYGKE3Bn9pDTotqIf4GN63YbF.jpg"
[V0_FILE]jpg:file="public/classic-dress-watch-gold-case-white-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-dress-watch-gold-case-white-dial-EgferM72cfoQGyZjUZIn1P0jZ6rB2L.jpg"
[V0_FILE]jpg:file="public/sport-watch-steel-bracelet-blue-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sport-watch-steel-bracelet-blue-dial-wVTKd5zdInAbIN3BGuWLTbWJNXqhwH.jpg"
[V0_FILE]jpg:file="public/gmt-watch-black-dial-steel-case.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gmt-watch-black-dial-steel-case-r0IfIYrUPSmPTL2KIPgMxlK4Hq2g3W.jpg"
[V0_FILE]jpg:file="public/skeleton-watch-exposed-movement-luxury.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skeleton-watch-exposed-movement-luxury-Vdt105Jl3uVz5hPXMizfnk4qsegjKO.jpg"
[V0_FILE]jpg:file="public/titanium-watch-modern-design-gray-dial.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/titanium-watch-modern-design-gray-dial-GaHXYMCGG2Q1Y228s1pe0gr9dyZdAZ.jpg"
[V0_FILE]jpg:file="public/luxury-watches-collection-dark-background-dramatic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-watches-collection-dark-background-dramatic-tc7PYupDziwe7aIuiBgtcEQOweObj8.jpg"
[V0_FILE]jpg:file="public/luxury-leather-belt-black-premium-buckle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-leather-belt-black-premium-buckle-DUNUUVDpePC7SFORHSRDQ9MVk33Vaq.jpg"
[V0_FILE]typescriptreact:file="components/hero-section.tsx"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"
import Link from "next/link"

export function HeroSection() {
  return (
    <section className="relative min-h-screen flex items-center justify-center bg-background">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <img
          src="/luxury-masculine-perfume-bottle-dark-moody-lightin.jpg"
          alt="Luxury perfume bottle"
          className="w-full h-full object-cover opacity-20"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/30 to-background/80" />
      </div>

{/* Content */}
      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-balance mb-6 font-[family-name:var(--font-playfair)] text-foreground">
          Designed for the man <span className="italic text-accent">she'll never forget</span>
        </h1>

<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 text-pretty leading-relaxed">
          Luxury is not what you wear, it is what you leave behind.
        </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <Link href="/shop">
            <Button size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-3">
              Explore Collection
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
          <Link href="/shop">
            <Button variant="outline" size="lg" className="px-8 py-3 bg-transparent">
              Shop Now
            </Button>
          </Link>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/shoes/page.tsx"
import { Navigation } from "@/components/navigation"
import { ProductHero } from "@/components/product-hero"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"

const shoes = [
  {
    id: "1",
    name: "Oxford Classic",
    price: "$420",
    image: "/luxury-oxford-shoes-black-leather-classic.jpg",
    description: "Traditional oxford in premium black leather",
  },
  {
    id: "2",
    name: "Derby Elegance",
    price: "$380",
    image: "/derby-shoes-brown-leather-business-casual.jpg",
    description: "Versatile derby shoes for business casual",
  },
  {
    id: "3",
    name: "Loafer Luxury",
    price: "$360",
    image: "/luxury-loafers-tassel-detail-premium-leather.jpg",
    description: "Handcrafted loafers with tassel detail",
  },
  {
    id: "4",
    name: "Chelsea Boots",
    price: "$480",
    image: "/chelsea-boots-black-leather-elastic-sides-luxury.jpg",
    description: "Sleek ankle boots with elastic side panels",
  },
  {
    id: "5",
    name: "Brogue Masterpiece",
    price: "$450",
    image: "/wingtip-brogue-shoes-perforations-luxury-leather.jpg",
    description: "Wingtip brogues with intricate perforations",
  },
  {
    id: "6",
    name: "Monk Strap",
    price: "$400",
    image: "/double-monk-strap-shoes-premium-buckles-leather.jpg",
    description: "Double monk strap with premium buckles",
  },
]

export default function ShoesPage() {
  return (
    <main className="min-h-screen">
      <Navigation />
      <ProductHero
        title="Shoes"
        subtitle="Walk with confidence"
        description="Step into excellence with our curated collection of premium footwear. From boardroom to evening events, each pair is designed to make a statement of sophistication and style."
        image="/luxury-men-shoes-collection-dark-elegant-lighting.jpg"
        imageAlt="Luxury shoe collection"
      />
      <ProductGrid products={shoes} category="Shoes" categoryPath="shoes" />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { MapPin, Phone, Mail, Clock } from "lucide-react"

export default function ContactPage() {
  return (
    <main className="min-h-screen">
      <Navigation />

{/* Hero Section */}
      <section className="relative min-h-[40vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img src="/luxury-store-interior-dark-elegant-lighting.jpg" alt="Marham store interior" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-black/50" />
        </div>

{/* Contact Content */}
      <section className="py-20 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16">
            {/* Contact Form */}
            <div>
              <h2 className="text-3xl font-bold mb-8 text-foreground font-[family-name:var(--font-playfair)]">
                Get in Touch
              </h2>
              <p className="text-muted-foreground mb-8 text-lg">
                Whether you're seeking personalized recommendations or have questions about our collections, our team is
                here to provide the exceptional service you deserve.
              </p>

<form className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="firstName" className="block text-sm font-medium text-foreground mb-2">
                      First Name
                    </label>
                    <Input id="firstName" placeholder="Your first name" />
                  </div>
                  <div>
                    <label htmlFor="lastName" className="block text-sm font-medium text-foreground mb-2">
                      Last Name
                    </label>
                    <Input id="lastName" placeholder="Your last name" />
                  </div>
                </div>

<div>
                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                    Email
                  </label>
                  <Input id="email" type="email" placeholder="your.email@example.com" />
                </div>

<div>
                  <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">
                    Phone (Optional)
                  </label>
                  <Input id="phone" type="tel" placeholder="+1 (555) 123-4567" />
                </div>

<div>
                  <label htmlFor="subject" className="block text-sm font-medium text-foreground mb-2">
                    Subject
                  </label>
                  <Input id="subject" placeholder="How can we help you?" />
                </div>

<div>
                  <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
                    Message
                  </label>
                  <Textarea id="message" rows={6} placeholder="Tell us about your needs or questions..." />
                </div>