[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.97 0.01 85); --foreground: oklch(0.25 0.02 120); --card: oklch(0.99 0.005 85); --card-foreground: oklch(0.25 0.02 120); --popover: oklch(0.99 0.005 85); --popover-foreground: oklch(0.25 0.02 120); --primary: oklch(0.35 0.08 160); --primary-foreground: oklch(0.99 0.005 85); --secondary: oklch(0.92 0.015 85); --secondary-foreground: oklch(0.25 0.02 120); --muted: oklch(0.94 0.01 85); --muted-foreground: oklch(0.5 0.02 120); --accent: oklch(0.88 0.03 50); --accent-foreground: oklch(0.25 0.02 120); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0.005 85); --border: oklch(0.88 0.015 85); --input: oklch(0.88 0.015 85); --ring: oklch(0.35 0.08 160); --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.99 0.005 85); --sidebar-foreground: oklch(0.25 0.02 120); --sidebar-primary: oklch(0.35 0.08 160); --sidebar-primary-foreground: oklch(0.99 0.005 85); --sidebar-accent: oklch(0.92 0.015 85); --sidebar-accent-foreground: oklch(0.25 0.02 120); --sidebar-border: oklch(0.88 0.015 85); --sidebar-ring: oklch(0.35 0.08 160); } .dark { --background: oklch(0.18 0.02 120); --foreground: oklch(0.97 0.01 85); --card: oklch(0.2 0.02 120); --card-foreground: oklch(0.97 0.01 85); --popover: oklch(0.2 0.02 120); --popover-foreground: oklch(0.97 0.01 85); --primary: oklch(0.45 0.1 160); --primary-foreground: oklch(0.97 0.01 85); --secondary: oklch(0.25 0.02 120); --secondary-foreground: oklch(0.97 0.01 85); --muted: oklch(0.25 0.02 120); --muted-foreground: oklch(0.65 0.02 85); --accent: oklch(0.88 0.03 50); --accent-foreground: oklch(0.18 0.02 120); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.97 0.01 85); --border: oklch(0.3 0.02 120); --input: oklch(0.3 0.02 120); --ring: oklch(0.45 0.1 160); --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.2 0.02 120); --sidebar-foreground: oklch(0.97 0.01 85); --sidebar-primary: oklch(0.45 0.1 160); --sidebar-primary-foreground: oklch(0.97 0.01 85); --sidebar-accent: oklch(0.25 0.02 120); --sidebar-accent-foreground: oklch(0.97 0.01 85); --sidebar-border: oklch(0.3 0.02 120); --sidebar-ring: oklch(0.45 0.1 160); } @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 type React from "react" import type { Metadata } from "next" import { Geist, Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { Header } from "@/components/header" import { CartProvider } from "@/components/cart-provider" const geist = Geist({ subsets: ["latin"], variable: "--font-sans" }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-serif" }) export const metadata: Metadata = { title: "Tudo um Pouco - Moda para Todos", description: "Descubra as melhores peças de roupa para todos os estilos", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children} ) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import Link from "next/link" import { ShoppingBag, Menu, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { useCart } from "@/components/cart-provider" import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet" export function Header() { const { items } = useCart() const itemCount = items.reduce((sum, item) => sum + item.quantity, 0) return (

Menu Tudo um Pouco

) } [V0_FILE]typescriptreact:file="components/cart-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" export interface CartItem { id: string name: string price: number image: string size: string quantity: number } interface CartContextType { items: CartItem[] addItem: (item: Omit) => void removeItem: (id: string, size: string) => void updateQuantity: (id: string, size: string, quantity: number) => void clearCart: () => void total: number } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [items, setItems] = useState([]) const addItem = (item: Omit) => { setItems((prev) => { const existingItem = prev.find((i) => i.id === item.id && i.size === item.size) if (existingItem) { return prev.map((i) => (i.id === item.id && i.size === item.size ? { ...i, quantity: i.quantity + 1 } : i)) } return [...prev, { ...item, quantity: 1 }] }) } const removeItem = (id: string, size: string) => { setItems((prev) => prev.filter((i) => !(i.id === id && i.size === size))) } const updateQuantity = (id: string, size: string, quantity: number) => { if (quantity <= 0) { removeItem(id, size) return } setItems((prev) => prev.map((i) => (i.id === id && i.size === size ? { ...i, quantity } : i))) } const clearCart = () => { setItems([]) } const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within CartProvider") } return context } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ProductGrid } from "@/components/product-grid" import { ArrowRight } from "lucide-react" export default function HomePage() { return (

{/* Hero Section */}

Descubra seu estilo único

Moda versátil para todos os momentos da sua vida

{/* Featured Categories */}

Explore por Categoria

Feminino

Elegância e conforto

Masculino

Estilo e sofisticação

Acessórios

Complete seu look

{/* Featured Products */}

Produtos em Destaque

{/* Newsletter */}

Fique por dentro das novidades

Receba em primeira mão nossas promoções e lançamentos exclusivos

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" isMerged="true" import { ProductCard } from "@/components/product-card" const featuredProducts = [ { id: "1", name: "Vestido Floral Elegante", price: 189.9, image: "/elegant-floral-dress-on-model.jpg", category: "Feminino", }, { id: "2", name: "Camisa Social Premium", price: 149.9, image: "/premium-men-dress-shirt.jpg", category: "Masculino", }, { id: "3", name: "Calça Jeans Skinny", price: 169.9, image: "/skinny-jeans-on-model.jpg", category: "Feminino", }, { id: "4", name: "Blazer Estruturado", price: 299.9, image: "/structured-blazer-fashion.jpg", category: "Masculino", }, { id: "5", name: "Bolsa de Couro", price: 249.9, image: "/leather-handbag-elegant.jpg", category: "Acessórios", }, { id: "6", name: "Tênis Casual Premium", price: 279.9, image: "/premium-casual-sneakers.jpg", category: "Acessórios", }, ] export function ProductGrid() { return (

{featuredProducts.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/product-card.tsx" isMerged="true" import Link from "next/link" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface Product { id: string name: string price: number image: string category: string } interface ProductCardProps { product: Product } export function ProductCard({ product }: ProductCardProps) { return (

{product.category}

{product.name}

R$ {product.price.toFixed(2)}

) } [V0_FILE]jpg:file="public/modern-fashion-store-interior-with-clothing-displa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-fashion-store-interior-with-clothing-displa-yhrL3pzMBZKSgl0rh4KTIwGU0JQqVs.jpg" isMerged="true" [V0_FILE]jpg:file="public/women-s-fashion-clothing-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/women-s-fashion-clothing-elegant-9tYjmRXd7Hd00DTtYsPmuUcPLWRvMc.jpg" isMerged="true" [V0_FILE]jpg:file="public/men-s-fashion-clothing-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/men-s-fashion-clothing-modern-8VY4qMn7MoJOP1Zd901ndL2ltjXAof.jpg" isMerged="true" [V0_FILE]jpg:file="public/fashion-accessories-bags-shoes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fashion-accessories-bags-shoes-2UgYQBlA72fAKQQX9PtxO9cHh5YabU.jpg" isMerged="true" [V0_FILE]jpg:file="public/elegant-floral-dress-on-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-floral-dress-on-model-LqL5zrOa0wk5NwpZd6C1NWMka4DCNE.jpg" isMerged="true" [V0_FILE]jpg:file="public/premium-men-dress-shirt.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-men-dress-shirt-0Sb6TjaHlVZveEtSGXe33VJfz8WodF.jpg" isMerged="true" [V0_FILE]jpg:file="public/skinny-jeans-on-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/skinny-jeans-on-model-9dXnKqFbaRADStkkV12p0QadbazN6w.jpg" isMerged="true" [V0_FILE]jpg:file="public/structured-blazer-fashion.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/structured-blazer-fashion-ZNc883p3tbhJweBF7QUaqkVRoglkmA.jpg" isMerged="true" [V0_FILE]jpg:file="public/leather-handbag-elegant.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/leather-handbag-elegant-VJpgWUzqJ50xOp0tEGX0Oyy1tj48FE.jpg" isMerged="true" [V0_FILE]jpg:file="public/premium-casual-sneakers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-casual-sneakers-roxXcEdYcoMnNxq0jAIbgKUElI7DH7.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.0", "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": "^0.9.9", "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]typescriptreact:file="app/produtos/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ProductCard } from "@/components/product-card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Filter } from "lucide-react" const allProducts = [ { id: "1", name: "Vestido Floral Elegante", price: 189.9, image: "/elegant-floral-dress-on-model.jpg", category: "Feminino", }, { id: "2", name: "Camisa Social Premium", price: 149.9, image: "/premium-men-dress-shirt.jpg", category: "Masculino", }, { id: "3", name: "Calça Jeans Skinny", price: 169.9, image: "/skinny-jeans-on-model.jpg", category: "Feminino", }, { id: "4", name: "Blazer Estruturado", price: 299.9, image: "/structured-blazer-fashion.jpg", category: "Masculino", }, { id: "5", name: "Bolsa de Couro", price: 249.9, image: "/leather-handbag-elegant.jpg", category: "Acessórios", }, { id: "6", name: "Tênis Casual Premium", price: 279.9, image: "/premium-casual-sneakers.jpg", category: "Acessórios", }, { id: "7", name: "Saia Midi Plissada", price: 139.9, image: "/pleated-midi-skirt-fashion.jpg", category: "Feminino", }, { id: "8", name: "Jaqueta de Couro", price: 399.9, image: "/leather-jacket-men.jpg", category: "Masculino", }, { id: "9", name: "Óculos de Sol", price: 199.9, image: "/sunglasses-fashion-accessory.jpg", category: "Acessórios", }, { id: "10", name: "Blusa de Seda", price: 159.9, image: "/silk-blouse-elegant.jpg", category: "Feminino", }, { id: "11", name: "Calça Chino", price: 179.9, image: "/chino-pants-men.jpg", category: "Masculino", }, { id: "12", name: "Relógio Minimalista", price: 329.9, image: "/minimalist-watch-accessory.jpg", category: "Acessórios", }, ] export default function ProdutosPage() { const [selectedCategory, setSelectedCategory] = useState("Todos") const [sortBy, setSortBy] = useState("relevance") const categories = ["Todos", "Feminino", "Masculino", "Acessórios"] // Filter products by category const filteredProducts = selectedCategory === "Todos" ? allProducts : allProducts.filter((product) => product.category === selectedCategory) // Sort products const sortedProducts = [...filteredProducts].sort((a, b) => { switch (sortBy) { case "price-asc": return a.price - b.price case "price-desc": return b.price - a.price case "name": return a.name.localeCompare(b.name) default: return 0 } }) return (

{/* Header */}

Todos os Produtos

Explore nossa coleção completa de moda e acessórios

{/* Filters and Sort */}

Categoria: {categories.map((category) => ( ))}

Ordenar:

{/* Product Count */}

Mostrando {sortedProducts.length} {sortedProducts.length === 1 ? "produto" : "produtos"}

{/* Product Grid */}

{sortedProducts.map((product) => ( ))}

{/* Empty State */} {sortedProducts.length === 0 && (

Nenhum produto encontrado nesta categoria.

)}

) } [V0_FILE]typescriptreact:file="app/produto/[id]/page.tsx" isMerged="true" import { ProdutoClient } from "./produto-client" const allProducts = [ { id: "1", name: "Vestido Floral Elegante", price: 189.9, image: "/elegant-floral-dress-on-model.jpg", category: "Feminino", description: "Vestido floral elegante perfeito para ocasiões especiais. Confeccionado em tecido leve e fluido, com estampa floral delicada e corte que valoriza a silhueta.", sizes: ["P", "M", "G", "GG"], details: [ "Tecido: 100% Viscose", "Modelagem: Regular", "Comprimento: Midi", "Lavagem: Lavar à mão ou máquina em ciclo delicado", ], }, { id: "2", name: "Camisa Social Premium", price: 149.9, image: "/premium-men-dress-shirt.jpg", category: "Masculino", description: "Camisa social premium em algodão egípcio de alta qualidade. Corte slim fit moderno com acabamento impecável para o homem contemporâneo.", sizes: ["P", "M", "G", "GG"], details: [ "Tecido: 100% Algodão Egípcio", "Modelagem: Slim Fit", "Gola: Italiana", "Lavagem: Lavar à máquina em água fria", ], }, { id: "3", name: "Calça Jeans Skinny", price: 169.9, image: "/skinny-jeans-on-model.jpg", category: "Feminino", description: "Calça jeans skinny com elastano para maior conforto e mobilidade. Cintura média e lavagem moderna que combina com diversos looks.", sizes: ["36", "38", "40", "42", "44"], details: [ "Tecido: 98% Algodão, 2% Elastano", "Modelagem: Skinny", "Cintura: Média", "Lavagem: Lavar à máquina em água fria", ], }, { id: "4", name: "Blazer Estruturado", price: 299.9, image: "/structured-blazer-fashion.jpg", category: "Masculino", description: "Blazer estruturado em tecido nobre com forro interno. Peça versátil que transita entre o formal e o casual com elegância.", sizes: ["P", "M", "G", "GG"], details: ["Tecido: 70% Lã, 30% Poliéster", "Modelagem: Regular", "Forro: Completo", "Lavagem: Lavar a seco"], }, { id: "5", name: "Bolsa de Couro", price: 249.9, image: "/leather-handbag-elegant.jpg", category: "Acessórios", description: "Bolsa de couro legítimo com acabamento artesanal. Design atemporal com compartimentos internos organizados e alça ajustável.", sizes: ["Único"], details: [ "Material: Couro Legítimo", "Dimensões: 30x25x10cm", "Compartimentos: 3 internos + 1 externo", "Cuidados: Limpar com produto específico para couro", ], }, { id: "6", name: "Tênis Casual Premium", price: 279.9, image: "/premium-casual-sneakers.jpg", category: "Acessórios", description: "Tênis casual premium com design minimalista e conforto excepcional. Palmilha anatômica e solado de alta durabilidade.", sizes: ["37", "38", "39", "40", "41", "42", "43"], details: [ "Material: Couro sintético premium", "Solado: Borracha antiderrapante", "Palmilha: Anatômica removível", "Cuidados: Limpar com pano úmido", ], }, { id: "7", name: "Saia Midi Plissada", price: 139.9, image: "/pleated-midi-skirt-fashion.jpg", category: "Feminino", description: "Saia midi plissada com movimento elegante. Cintura alta e tecido fluido que garante conforto durante todo o dia.", sizes: ["P", "M", "G", "GG"], details: [ "Tecido: 100% Poliéster", "Modelagem: Midi", "Cintura: Alta", "Lavagem: Lavar à máquina em ciclo delicado", ], }, { id: "8", name: "Jaqueta de Couro", price: 399.9, image: "/leather-jacket-men.jpg", category: "Masculino", description: "Jaqueta de couro genuíno com design atemporal. Forro interno macio e detalhes em metal que agregam sofisticação.", sizes: ["P", "M", "G", "GG"], details: ["Material: Couro Genuíno", "Forro: Poliéster", "Fechamento: Zíper frontal", "Cuidados: Lavar a seco"], }, { id: "9", name: "Óculos de Sol", price: 199.9, image: "/sunglasses-fashion-accessory.jpg", category: "Acessórios", description: "Óculos de sol com proteção UV400 e design moderno. Armação resistente e lentes polarizadas para maior conforto visual.", sizes: ["Único"], details: ["Proteção: UV400", "Lentes: Polarizadas", "Material: Acetato", "Inclui: Estojo e flanela"], }, { id: "10", name: "Blusa de Seda", price: 159.9, image: "/silk-blouse-elegant.jpg", category: "Feminino", description: "Blusa de seda pura com caimento impecável. Peça versátil que pode ser usada em diversas ocasiões, do casual ao formal.", sizes: ["P", "M", "G", "GG"], details: ["Tecido: 100% Seda", "Modelagem: Regular", "Manga: Longa", "Lavagem: Lavar a seco"], }, { id: "11", name: "Calça Chino", price: 179.9, image: "/chino-pants-men.jpg", category: "Masculino", description: "Calça chino em sarja de algodão com corte moderno. Versátil e confortável, ideal para o dia a dia e ocasiões casuais.", sizes: ["38", "40", "42", "44", "46"], details: [ "Tecido: 97% Algodão, 3% Elastano", "Modelagem: Slim", "Bolsos: 4 (2 frontais, 2 traseiros)", "Lavagem: Lavar à máquina em água fria", ], }, { id: "12", name: "Relógio Minimalista", price: 329.9, image: "/minimalist-watch-accessory.jpg", category: "Acessórios", description: "Relógio minimalista com design clean e atemporal. Movimento de quartzo preciso e pulseira em couro genuíno.", sizes: ["Único"], details: [ "Movimento: Quartzo japonês", "Caixa: Aço inoxidável 40mm", "Pulseira: Couro genuíno", "Resistência: 3 ATM", ], }, ] export default async function ProdutoPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params const product = allProducts.find((p) => p.id === id) if (!product) { return (

Produto não encontrado

Voltar para produtos

) } const relatedProducts = allProducts.filter((p) => p.category === product.category && p.id !== product.id).slice(0, 4) return } [V0_FILE]typescriptreact:file="app/carrinho/page.tsx" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useCart } from "@/components/cart-provider" import { Minus, Plus, Trash2, ShoppingBag, ArrowLeft } from "lucide-react" export default function CarrinhoPage() { const { items, updateQuantity, removeItem, total, clearCart } = useCart() if (items.length === 0) { return (

Seu carrinho está vazio

Adicione produtos ao seu carrinho para continuar comprando

) } return (

{/* Back Button */}

Carrinho de Compras

{/* Cart Items */}

{items.map((item) => (

{/* Product Image */}

{/* Product Info */}

{item.name}

Tamanho: {item.size}

R$ {item.price.toFixed(2)}

{/* Quantity Controls */}

{item.quantity}

))} {/* Clear Cart Button */}

{/* Order Summary */}

Resumo do Pedido

Subtotal ({items.reduce((sum, item) => sum + item.quantity, 0)} itens) R$ {total.toFixed(2)}

Frete Grátis

Total R$ {total.toFixed(2)}

Frete grátis para compras acima de R$ 150,00

{/* Benefits */}

✓

Entrega rápida em todo o Brasil

✓

Troca grátis em até 30 dias

✓

Pagamento 100% seguro

) } [V0_FILE]typescriptreact:file="app/produto/[id]/produto-client.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { useCart } from "@/components/cart-provider" import { ProductCard } from "@/components/product-card" import { ArrowLeft, ShoppingBag, Check } from "lucide-react" import { useRouter } from "next/navigation" interface Product { id: string name: string price: number image: string category: string description: string sizes: string[] details: string[] } interface ProdutoClientProps { product: Product relatedProducts: Product[] } export function ProdutoClient({ product, relatedProducts }: ProdutoClientProps) { const [selectedSize, setSelectedSize] = useState("") const [added, setAdded] = useState(false) const { addItem } = useCart() const router = useRouter() const handleAddToCart = () => { if (!selectedSize) return addItem({ id: product.id, name: product.name, price: product.price, image: product.image, size: selectedSize, }) setAdded(true) setTimeout(() => setAdded(false), 2000) } return (

{product.category}

{product.name}

R$ {product.price.toFixed(2)}

{product.description}

Selecione o tamanho:

{product.sizes.map((size) => ( ))}

{!selectedSize && (

Por favor, selecione um tamanho

)}

Detalhes do Produto

{detail}

{relatedProducts.length > 0 && (

Produtos Relacionados

{relatedProducts.map((relatedProduct) => ( ))}

)}

) }