[V0_FILE]jpg:file="public/images/product.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/gemini-2.5-flash-image_A_digital_cartoon_design_handbag_with_the_person_from_the_reference_image_as_a_l-0-6izATpgwyj62QAg2DyLS3R3tI3QM2K.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "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": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.15 0.01 30); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.01 30); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.01 30); --primary: oklch(0.72 0.19 55); --primary-foreground: oklch(0.15 0.01 30); --secondary: oklch(0.23 0.03 220); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.95 0 0); --muted-foreground: oklch(0.45 0.01 30); --accent: oklch(0.72 0.19 55); --accent-foreground: oklch(0.15 0.01 30); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.88 0.01 60); --input: oklch(0.922 0 0); --ring: oklch(0.72 0.19 55); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --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; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'BagMart - Premium Designer Bags', description: 'Shop the exclusive Portrait Tote Collection - Premium designer handbags with unique artistic designs', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/cart-sidebar.tsx" isMerged="true" "use client"; import Image from "next/image"; import { X, Minus, Plus, Trash2 } from "lucide-react"; import { Button } from "@/components/ui/button"; interface CartItem { id: number; name: string; price: number; quantity: number; image: string; } interface CartSidebarProps { isOpen: boolean; onClose: () => void; items: CartItem[]; onUpdateQuantity: (id: number, quantity: number) => void; onRemoveItem: (id: number) => void; } export function CartSidebar({ isOpen, onClose, items, onUpdateQuantity, onRemoveItem, }: CartSidebarProps) { const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0); const itemCount = items.reduce((sum, item) => sum + item.quantity, 0); return ( <> {/* Backdrop */} {isOpen && (

)} {/* Sidebar */}

{/* Header */}

Shopping Cart ({itemCount})

{/* Cart Items */}

{items.length === 0 ? (

Your cart is empty

) : (

{items.map((item) => (

{item.name}

${item.price.toFixed(2)}

{item.quantity}

))}

)}

{/* Footer */} {items.length > 0 && (

Subtotal: ${total.toFixed(2)}

Shipping and taxes calculated at checkout

)}

); } [V0_FILE]typescriptreact:file="components/reviews-section.tsx" isMerged="true" "use client"; import { Star, ThumbsUp } from "lucide-react"; import { Button } from "@/components/ui/button"; const reviews = [ { id: 1, author: "Sarah M.", rating: 5, title: "Absolutely love this bag!", content: "This bag is a conversation starter everywhere I go. The quality is amazing and the portrait design is so unique. Gets tons of compliments!", date: "January 28, 2026", verified: true, helpful: 142, }, { id: 2, author: "Michael R.", rating: 5, title: "Perfect gift for my wife", content: "Bought this as a gift and she absolutely loves it. The orange color is vibrant and the build quality is exceptional for the price.", date: "January 25, 2026", verified: true, helpful: 89, }, { id: 3, author: "Jessica L.", rating: 4, title: "Great quality, unique design", content: "Very happy with this purchase. The bag is spacious and well-made. Only giving 4 stars because shipping took a bit longer than expected.", date: "January 20, 2026", verified: true, helpful: 56, }, { id: 4, author: "David K.", rating: 5, title: "Stand out from the crowd", content: "If you want a bag that nobody else has, this is it. The portrait design is hilarious and the bag itself is very functional. Highly recommend!", date: "January 15, 2026", verified: true, helpful: 203, }, ]; export function ReviewsSection() { return (

Customer Reviews

{/* Rating Summary */}

4.8

{[...Array(5)].map((_, i) => ( ))}

2,847 global ratings

{/* Rating Bars */}

{[ { stars: 5, percent: 78 }, { stars: 4, percent: 15 }, { stars: 3, percent: 5 }, { stars: 2, percent: 1 }, { stars: 1, percent: 1 }, ].map(({ stars, percent }) => (

{stars} star

{percent}%

))}

{/* Individual Reviews */}

{reviews.map((review) => (

{review.author[0]}

{review.author}

{[...Array(5)].map((_, i) => ( ))}

{review.title}

Reviewed on {review.date} {review.verified && ( Verified Purchase )}

{review.content}

))}

); } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client"; import { ShoppingCart, Search, MapPin, Menu } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; interface HeaderProps { cartCount: number; onCartClick: () => void; } export function Header({ cartCount, onCartClick }: HeaderProps) { return (

{/* Top Nav */}

{/* Logo */}

BagMart

{/* Delivery Location */}

Deliver to

United States

{/* Search Bar */}

{/* Account & Cart */}

Hello, sign in

Account & Lists

Returns

& Orders

{/* Secondary Nav */}

); } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" 'use client'; export function Footer() { return ( ); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client"; import { useState } from "react"; import { Header } from "@/components/header"; import { ProductDisplay } from "@/components/product-display"; import { ReviewsSection } from "@/components/reviews-section"; import { CartSidebar } from "@/components/cart-sidebar"; import { Footer } from "@/components/footer"; interface CartItem { id: number; name: string; price: number; quantity: number; image: string; } export default function Home() { const [cartItems, setCartItems] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const handleAddToCart = (quantity: number) => { const existingItem = cartItems.find((item) => item.id === 1); if (existingItem) { setCartItems( cartItems.map((item) => item.id === 1 ? { ...item, quantity: item.quantity + quantity } : item ) ); } else { setCartItems([ ...cartItems, { id: 1, name: "The Distinguished Gentleman Portrait Tote", price: 89.99, quantity, image: "/images/product.jpg", }, ]); } setIsCartOpen(true); }; const handleUpdateQuantity = (id: number, quantity: number) => { if (quantity === 0) { setCartItems(cartItems.filter((item) => item.id !== id)); } else { setCartItems( cartItems.map((item) => item.id === id ? { ...item, quantity } : item ) ); } }; const handleRemoveItem = (id: number) => { setCartItems(cartItems.filter((item) => item.id !== id)); }; const cartCount = cartItems.reduce((sum, item) => sum + item.quantity, 0); return (

setIsCartOpen(true)} />

); } [V0_FILE]png:file="public/images/product-lifestyle.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/product_in_a_dreamstate_1f1002ec-017d-6900-9bf2-c6d892c8cc99_0_0-qm8TfApjHJLGp5rVDviqGgtoqsEmcN.png" isMerged="true" [V0_FILE]typescriptreact:file="components/product-display.tsx" "use client"; import Image from "next/image"; import { Star, Truck, ShieldCheck, RotateCcw } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useState } from "react"; interface ProductDisplayProps { onAddToCart: (quantity: number) => void; } const productImages = [ { src: "/images/product.jpg", alt: "Product front view" }, { src: "/images/product-lifestyle.png", alt: "Product lifestyle shot" }, ]; export function ProductDisplay({ onAddToCart }: ProductDisplayProps) { const [quantity, setQuantity] = useState(1); const [selectedImage, setSelectedImage] = useState(0); const product = { name: "Limited Edition $BAGSTEIN", price: 89.99, originalPrice: 129.99, rating: 4.8, reviews: 2847, description: "Make a statement with this premium designer tote bag featuring a distinguished portrait design. Crafted from high-quality vegan leather with reinforced handles and a spacious interior. Perfect for work, shopping, or everyday use.", features: [ "Premium vegan leather construction", "Unique artistic portrait design", "Reinforced braided handles for comfort", "Spacious interior with multiple pockets", "Vibrant orange color that stands out", "Dimensions: 14\" x 12\" x 5\"", ], }; const discount = Math.round( ((product.originalPrice - product.price) / product.originalPrice) * 100 ); return (

{/* Product Images */}

{/* Thumbnail Gallery */}

{productImages.map((image, index) => ( ))}

{/* Product Details */}

{product.name}

Visit the BagMart Designer Collection

{/* Rating */}

{[...Array(5)].map((_, i) => ( ))}

{product.rating} ({product.reviews.toLocaleString()} ratings)

{/* Price */}

-{discount}% ${product.price.toFixed(2)}

List Price:{" "} ${product.originalPrice.toFixed(2)}

{/* Description */}

{product.description}

{/* Features */}

About this item:

• {feature}

{/* Buy Box */}

FREE delivery Tomorrow, Feb 3

In Stock

{/* Quantity Selector */}

Qty:

{/* Action Buttons */}

{/* Trust Badges */}

Secure transaction

Easy returns

); }