[V0_FILE]typescriptreact:file="components/product-header.tsx" isMerged="true" import { Menu, Search, ShoppingCart, User, Heart } from "lucide-react" import { Button } from "@/components/ui/button" export function ProductHeader() { return (

{/* Logo */}

LOJA

{/* Navigation */} {/* Actions */}

) } [V0_FILE]typescriptreact:file="components/product-gallery.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { Card } from "@/components/ui/card" const images = [ "/orange-yellow-notebook-organizer-fullfolja.jpg", "/orange-notebook-open-pages.jpg", "/yellow-organizer-different-angle.jpg", "/notebook-details-close-up.jpg", ] export function ProductGallery() { const [selectedImage, setSelectedImage] = useState(0) return (

{/* Main Image */}

{/* Thumbnail Images */}

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

) } [V0_FILE]typescriptreact:file="components/product-info.tsx" isMerged="true" "use client" import { useState } from "react" import { Star, Heart, Share2, Minus, Plus, MapPin, Package } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export function ProductInfo() { const [quantity, setQuantity] = useState(1) const [selectedColor, setSelectedColor] = useState("amarelo") return (

{/* Title and Rating */}

FULLFÖLJA

Organizador, amarelo, 21x15 cm

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

(17 avaliações)

{/* Price */}

R$ 24,90

Preço por unidade

{/* Stock Status */}

Poucas unidades disponíveis

Aproveite enquanto temos estoque

{/* Size Selection */}

Tamanho

{/* Color Selection */}

Cor

{/* Quantity and Add to Cart */}

{quantity}

{/* Store Availability */}

Disponibilidade na loja

) } [V0_FILE]typescriptreact:file="components/product-details.tsx" isMerged="true" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Card } from "@/components/ui/card" import { Leaf, Ruler, Info } from "lucide-react" export function ProductDetails() { return (

Detalhes do produto

Medidas

Largura

15 cm

Altura

21 cm

Profundidade

2 cm

Peso

280 g

Características

Capa dura em papelão reciclado
96 páginas pautadas
Marcador de páginas integrado
Bolso interno para documentos
Elástico de fechamento
Design moderno e funcional

Materiais sustentáveis

Este produto é feito com pelo menos 60% de materiais reciclados. Ao usar materiais reciclados, reduzimos o desperdício e ajudamos a proteger o meio ambiente para as futuras gerações.

Papel: 100% reciclado

Capa: 80% papelão reciclado

Certificação: FSC Mix

) } [V0_FILE]typescriptreact:file="components/product-reviews.tsx" isMerged="true" import { Star, ThumbsUp } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" const reviews = [ { id: 1, author: "Maria Silva", rating: 5, date: "2 semanas atrás", title: "Excelente qualidade!", comment: "Adorei este organizador! A qualidade é ótima e o tamanho é perfeito para levar na bolsa. As páginas são bem grossas e não mancham.", helpful: 12, }, { id: 2, author: "João Santos", rating: 4, date: "1 mês atrás", title: "Muito bom, recomendo", comment: "Produto de boa qualidade. Uso para anotar minhas tarefas diárias. A única ressalva é que poderia ter mais páginas.", helpful: 8, }, { id: 3, author: "Ana Costa", rating: 5, date: "1 mês atrás", title: "Sustentável e bonito", comment: "Além de funcional, é ecológico! A cor amarela é vibrante e alegre. Perfeito para o dia a dia.", helpful: 15, }, ] export function ProductReviews() { return (

Avaliações de clientes

Veja o que nossos clientes estão dizendo sobre este produto

{/* Rating Summary */}

4.5

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

17 avaliações

{[5, 4, 3, 2, 1].map((stars) => (

{stars}

{stars === 5 ? "12" : stars === 4 ? "3" : stars === 3 ? "1" : stars === 2 ? "1" : "0"}

))}

{/* Reviews List */}

{reviews.map((review) => (

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

{review.title}

{review.date}

{review.comment}

Por {review.author}

))}

) } [V0_FILE]typescriptreact:file="components/product-recommendations.tsx" isMerged="true" import { Star } from "lucide-react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Image from "next/image" const recommendations = [ { id: 1, name: "SKRIVMA", description: "Caderno, azul", price: "R$ 19,90", rating: 4.3, reviews: 24, image: "/blue-notebook.png", }, { id: 2, name: "ANTECKNA", description: "Organizador, verde", price: "R$ 29,90", rating: 4.7, reviews: 31, image: "/green-organizer.jpg", }, { id: 3, name: "PLANERA", description: "Planner, rosa", price: "R$ 34,90", rating: 4.6, reviews: 19, image: "/pink-planner.jpg", }, { id: 4, name: "SKRIVA", description: "Caderno de anotações", price: "R$ 24,90", rating: 4.5, reviews: 42, image: "/notebook-organizer.jpg", }, ] export function ProductRecommendations() { return (

Produtos recomendados

Clientes que compraram este produto também gostaram

{recommendations.map((product) => (

{product.name}

{product.description}

{product.rating}

({product.reviews})

{product.price}

))}

) } [V0_FILE]typescriptreact:file="components/product-footer.tsx" isMerged="true" import { Facebook, Instagram, Twitter, Youtube } from "lucide-react" export function ProductFooter() { return ( ) } [V0_FILE]jpg:file="public/orange-yellow-notebook-organizer-fullfolja.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orange-yellow-notebook-organizer-fullfolja-bXBpg2lWQt5Z8TTbLMurfexAwiWekK.jpg" isMerged="true" [V0_FILE]jpg:file="public/orange-notebook-open-pages.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orange-notebook-open-pages-HdibF3b9GmISFUSAH4CeKP7CdclqLt.jpg" isMerged="true" [V0_FILE]jpg:file="public/yellow-organizer-different-angle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yellow-organizer-different-angle-L0mq6JdxlGkSytKk4dGo2FK4aEv4J4.jpg" isMerged="true" [V0_FILE]jpg:file="public/notebook-details-close-up.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-details-close-up-JYYZ44w9dzrKfIQ7aIIBX6eT73XdAS.jpg" isMerged="true" [V0_FILE]png:file="public/blue-notebook.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/blue-notebook-pQPiQ0H68ulEwvCgfg6xdbsELWes0Q.png" isMerged="true" [V0_FILE]jpg:file="public/green-organizer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/green-organizer-ytkmiPAP2tqP6OZhl4d65rECcfbjEm.jpg" isMerged="true" [V0_FILE]jpg:file="public/pink-planner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pink-planner-pEvgIkMd6xPzCdNVl6N4DPv4C75ZsN.jpg" isMerged="true" [V0_FILE]jpg:file="public/notebook-organizer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notebook-organizer-nLbQ1V7xBcnBzGc8a1WsjNB0Kahrgr.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.7", "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]typescriptreact:file="components/ml-product-description.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" export function MlProductDescription() { const [activeTab, setActiveTab] = useState<"description" | "specs">("description") return (

{/* Tabs */}

{/* Description Tab */} {activeTab === "description" && (

• Altura: 2.1 m.
• Tipo de folhagem: natural.
• Possui 800 ramos.
• Largura máxima: 1m.
• Materiais: plástico, metal, pvc.

A Arvore De Natal 2,10m Pinheiro da marca Arco Verde é a escolha perfeita para transformar sua decoracao natalina. Com 800 galhos, esta arvore luxuosa em verde proporciona um visual exuberante e acolhedor, ideal para criar um ambiente festivo em sua casa.

Com uma altura de 2,1 metros, ela se destaca em qualquer espaco, tornando-se o centro das atencoes nas celebracoes de fim de ano. Seu design em forma de pinheiro traz a essencia da natureza para dentro de sua casa, permitindo que voce desfrute da magia do Natal.

A embalagem do produto é cuidadosamente projetada, com dimensoes que facilitam o armazenamento e o manuseio.

Invista em momentos inesqueciveis com a Arvore De Natal 2,10m Pinheiro. Sua beleza e elegancia farao com que cada celebracao seja especial, criando memorias que durarao para sempre.

Itens da embalagem:

1- ARVORE NATAL PINHEIRO 2,10MT 800 GALHOS PES DE FERRO
12- BOLA SAQ GLITTER 3CM
9- BOLA SAQ GLITTER 3CM
7- BOLA SAQ LISA 3CM CHAMPAGNE
7- BOLA TB LISA 3CM PRATA
7- BOLA TB LISA 3CM ROSE
7- BOLA TB LISA 3CM VERMELHA
12- BOLA TB LISA 4CM PRATA
12- ENF MACA VELUDO 2,5CM
9- ENF SINO DECORADO 2,5CM
6- ENF TAMBOR 2,5CM
1- FESTAO METALIZADO 9CMX2M VERDE
1- PISCA LED 100L COLOR 8M 127V
1- ENF PONTEIRA ESTRELA GLITTER

)} {/* Specs Tab */} {activeTab === "specs" && (

Características principais

Marca Arco Verde

Modelo 2,10mt 800 galhos decorada

Forma Tradicional

Cor Verde-escuro

Peso e dimensões

Altura x Largura máxima 2.1 m x 1 m

Peso 4 kg

Outros

Quantidade de galhos 800

Tipo de folhagem Natural

Materiais da árvore Plástico, Metal, PVC

Material da base Metal

É desmontável Sim

Largura da base 50 cm

É dobrável Não

Es de mesa Não

Com luzes Sim

Inclui enfeites Sim

)}

) } [V0_FILE]jpg:file="public/yellow-notebook-organizer-open.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yellow-notebook-organizer-open-bvQxgvpKST6KSer4QTUhoyVmMgQOI4.jpg" isMerged="true" [V0_FILE]jpg:file="public/yellow-notebook-back-view.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yellow-notebook-back-view-fJAVPrbYbCV0MMe4qlboRuekChhbfq.jpg" isMerged="true" [V0_FILE]jpg:file="public/yellow-notebook-detail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yellow-notebook-detail-FWXcdFa2PFTquaUr8zDjodZCOaK48X.jpg" isMerged="true" [V0_FILE]jpg:file="public/yellow-notebook-pages.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/yellow-notebook-pages-24c7EW9J63STp0a8y7G4QbBvZJkpIp.jpg" isMerged="true" [V0_FILE]jpeg:file="public/images/ml.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ml-6G0Cns5IyxEWY26LrJ5ML74r70vxUO.jpeg" isMerged="true" [V0_FILE]jpg:file="public/spiral-notebook.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/spiral-notebook-nfWwA8QLeqGyHChdVAjZ4RFDyVgJ2h.jpg" isMerged="true" [V0_FILE]jpg:file="public/weekly-planner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/weekly-planner-KaIH3jPCDk6f1GqZqzGMQ1WQvVqFLN.jpg" isMerged="true" [V0_FILE]jpg:file="public/gel-pen-set.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gel-pen-set-9Tlc4AZy8zBKo44sGD9TUfYTbIwOVf.jpg" isMerged="true" [V0_FILE]jpg:file="public/colorful-sticky-notes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-sticky-notes-1uVVDbCo70fkFUxMeGC8ZpD4Hvamsb.jpg" isMerged="true" [V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-1O81foKaEYOZekPnzGazw8W0IgIIkg.png" isMerged="true" [V0_FILE]png:file="public/images/ml-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ml_logo-removebg-preview-ekz4UoFHjy0ZeRhpbDBGixHm8Fm6tN.png" isMerged="true" [V0_FILE]jpeg:file="public/images/deadea.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/deadea-VTaIA2nzmV0qPyu4Dab5fWH6l4TSKW.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/daedae.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/daedae-cRYzqbfiHmepg2oVXgyxgjzBSay0iI.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/eeeeeeeeeee.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/eeeeeeeeeee-yDEyYEuSxqXnhQL9G6Pa5BqxV5kI1u.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/wwew.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/wwew-033UP8KgqIsZtZefkl2PBwUwnBwR8K.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/ml-breadcrumb.tsx" isEdit="true" isMerged="true" import { ChevronRight } from "lucide-react" export function MlBreadcrumb() { return ( ) } [V0_FILE]typescriptreact:file="components/ml-product-questions.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" const questions = [ { id: 1, question: "A árvore já vem montada?", answer: "Não, a árvore vem desmontada em 3 partes para facilitar o armazenamento. A montagem é muito simples e rápida!", date: "Há 2 dias", }, { id: 2, question: "As luzes funcionam em 220V também?", answer: "Sim! A pisca pisca que acompanha é bivolt (110V-220V), funcionando em qualquer voltagem.", date: "Há 5 dias", }, { id: 3, question: "Os enfeites já vem inclusos?", answer: "Sim! A árvore vem completa com 91 enfeites variados, festão, pisca LED e ponteira de estrela. Tudo pronto para decorar sua casa!", date: "Há 1 semana", }, ] export function MlProductQuestions() { return (

Perguntas e respostas

{questions.map((item) => (

{item.question}

{item.answer}

{item.date}

))}

) } [V0_FILE]jpg:file="public/christmas-decorations-kit.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/christmas-decorations-kit-bVMkezhxCo95uDtQlDqacxuml3w1By.jpg" isMerged="true" [V0_FILE]jpeg:file="public/images/fsdfsdfsdfsd.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fsdfsdfsdfsd-AkCYk347VKI3sBQdvl58oeZvUzhoL8.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/dsad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dsad-nQtoR8tlTQqRxV4r6TcVJLAMtQso7s.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/whatsapp-20image-202025-12-02-20at-2023.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-12-02%20at%2023.09.15-Wov47VhGA5DQkEG37BrK1JgcI4ptmR.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/kk.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/kk-BMDZazd5TL0tZg2ApGtJs9VUDcgT0X.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/ffffff.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ffffff-hvW3HAieCezdL77o09PIpH5jodjNsk.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/sadsads.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sadsads-6IUtHJGFnhhe1iYHmMwu6iHlx0O638.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/dsdsa.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dsdsa-m42WAvd2QuD78WsZeCjXaXATTnk4Ac.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/adadad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/adadad-o1jEh4pHfbIYwmXBg2ovtH5RWKnfIS.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/sadsad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sadsad-E3SRwmU7r81GShtWC2utLd4mpMxeHA.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/sdsdsa.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sdsdsa-Ax4JPeWHd9rGQlHEqLX0xp56dcUkKl.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/dasdad.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dasdad-eGjprrIKQMEoBVImulkPfzTmUJbrhf.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/dsfdsfsads.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dsfdsfsads-4wrYNujZCA4Hqln9ZLkWcqzAjzFz3x.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/dsdsadasd.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dsdsadasd-n9as2aJavKAxDZewl0fvIyYrwYUiZy.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/ml-header.tsx" isEdit="true" isMerged="true" "use client" import { Search, ShoppingCart, Menu, Bell } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import Image from "next/image" export function MlHeader() { return (

{/* Logo */}

{/* Search Bar */}

{/* Right Actions */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type 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"] }) // Adicionando meta tags para PWA e mobile optimization export const metadata: Metadata = { title: "Árvore De Natal 2,10m - Mercado Livre", description: "Árvore De Natal Decorada Enfeitada 2,10mt 800 Galhos Pinheiro Verde Cheia Premium", generator: "v0.app", viewport: "width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes", themeColor: "#FFE600", appleWebApp: { capable: true, statusBarStyle: "default", title: "Mercado Livre", }, 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]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Updated theme with Mercado Livre yellow/blue color scheme */ :root { --background: oklch(0.98 0 0); --foreground: oklch(0.2 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.2 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2 0 0); --primary: oklch(0.65 0.2 95); --primary-foreground: oklch(0.15 0 0); --secondary: oklch(0.96 0 0); --secondary-foreground: oklch(0.2 0 0); --muted: oklch(0.96 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.85 0.18 95); --accent-foreground: oklch(0.2 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.65 0.2 95); --chart-1: oklch(0.65 0.2 95); --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.375rem; --ml-yellow: oklch(0.85 0.18 95); --ml-blue: oklch(0.5 0.15 240); --ml-green: oklch(0.55 0.12 145); } .dark { --background: oklch(0.2 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.25 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.25 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.2 0 0); --secondary: oklch(0.3 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.78 0.15 85); --accent-foreground: oklch(0.2 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.3 0 0); --input: oklch(0.3 0 0); --ring: oklch(0.6 0 0); --chart-1: oklch(0.78 0.15 85); --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 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.78 0.15 85); --sidebar-primary-foreground: oklch(0.2 0 0); --sidebar-accent: oklch(0.3 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.3 0 0); --sidebar-ring: oklch(0.6 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); --color-ml-yellow: var(--ml-yellow); --color-ml-blue: var(--ml-blue); --color-ml-green: var(--ml-green); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Adicionando estilos para melhor experiência mobile */ /* Esconder scrollbar mas manter funcionalidade */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* Melhorar experiência de toque em mobile */ @media (hover: none) and (pointer: coarse) { * { -webkit-tap-highlight-color: transparent; } button, a { touch-action: manipulation; } } /* Otimizar fontes para mobile */ @media (max-width: 768px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } } /* Suavizar scrolling em toda a aplicação */ html { scroll-behavior: smooth; } /* Melhorar performance de animações em mobile */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="app/pagamento/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/payment/pix/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" // TODO: Esta rota está preparada para integração futura com gateway de pagamento // Exemplos de gateways: Mercado Pago, PagSeguro, Stripe, etc. export async function POST(request: NextRequest) { try { const orderData = await request.json() // TODO: Integrar com API do gateway de pagamento // Exemplo de integração com Mercado Pago: /* const mercadopago = require('mercadopago'); mercadopago.configure({ access_token: process.env.MERCADO_PAGO_ACCESS_TOKEN }); const payment = await mercadopago.payment.create({ transaction_amount: 47.00, description: 'Árvore De Natal Decorada', payment_method_id: 'pix', payer: { email: orderData.email, first_name: orderData.nome.split(' ')[0], last_name: orderData.nome.split(' ').slice(1).join(' '), identification: { type: 'CPF', number: orderData.cpf.replace(/\D/g, '') } } }); return NextResponse.json({ qrCode: payment.point_of_interaction.transaction_data.qr_code_base64, pixCode: payment.point_of_interaction.transaction_data.qr_code, transactionId: payment.id, status: payment.status }); */ // Resposta temporária até a integração com o gateway return NextResponse.json({ success: true, message: "Aguardando integração com gateway de pagamento", orderData, }) } catch (error) { console.error("Erro ao processar pagamento:", error) return NextResponse.json({ error: "Erro ao processar pagamento" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ml-product-reviews.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Star, ThumbsUp } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" const reviews = [ { id: 1, author: "Comprador verificado", date: "25 nov. 2025", rating: 5, text: "Valeu muito a pena. Qualidade muito boa.", helpful: 2, image: "/images/sadsads.jpeg", }, { id: 2, author: "Comprador verificado", date: "27 nov. 2025", rating: 5, text: "Muito linda amei super indico.", helpful: 1, images: ["/images/dsdsa.jpeg", "/images/sadsad.jpeg"], }, { id: 3, author: "Comprador verificado", date: "23 nov. 2025", rating: 5, text: "Perfeita.", helpful: 1, }, ] const reviewPhotos = ["/images/sadsads.jpeg", "/images/dsdsa.jpeg", "/images/sadsad.jpeg"] export function MlProductReviews() { return (

Opiniões

{/* Rating Summary */}

4.9

{[1, 2, 3, 4, 5].map((star) => ( ))}

30 avaliações

Custo-benefício

{[1, 2, 3, 4].map((star) => ( ))}

Fácil para montar

{[1, 2, 3, 4, 5].map((star) => ( ))}

Qualidade dos materiais

{[1, 2, 3, 4].map((star) => ( ))}

{/* Review Photos */}

Opiniões com fotos

{reviewPhotos.map((photo, index) => (

))}

{/* Reviews List */}

Opiniões em destaque

16 comentários

{reviews.map((review) => (

{[1, 2, 3, 4, 5].map((star) => ( ))}

{review.image && (

)} {review.images && (

{review.images.map((img, idx) => (

))}

)}

{review.text}

{review.date}

))}

) } [V0_FILE]typescriptreact:file="components/ml-related-products.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import { Star } from "lucide-react" const relatedProducts = [ { id: 1, title: "Arvore Natal Decorada Luxo Grande Completa 180cm 142 Enfeites", price: "R$ 209,90", originalPrice: "R$ 269,90", discount: "22% OFF", image: "/images/adadad.jpeg", rating: 4.6, reviews: 500, seller: "Rebirth", freeShipping: true, colors: 4, }, { id: 2, title: "Arvore De Natal 1,50m Nevada Com Detalhes Vermelhos Premium", price: "R$ 249,90", installments: "12x R$ 24,68", image: "/images/dsdsadasd.jpeg", rating: 4.8, reviews: 500, seller: "CQMQ VARIEDADES", freeShipping: true, fullLogo: true, }, { id: 3, title: "Arvore De Natal 1,80m 900 Galhos Cheia Zenx Medali Premium", price: "R$ 299,90", image: "/images/sdsdsa.jpeg", rating: 4.5, reviews: 100, freeShipping: true, }, { id: 4, title: "Guirlanda Natalina Decorada Luxo Com Laço Dourado e Flores", price: "R$ 89,90", image: "/images/dsfdsfsads.jpeg", rating: 4.7, reviews: 350, freeShipping: true, }, ] export function MlRelatedProducts() { return (

Você também pode gostar

{relatedProducts.map((product) => (

{product.colors && (

{[...Array(product.colors)].map((_, i) => (

))}

{product.colors}

)}

{product.title}

{product.seller && (

{product.seller} {product.seller === "Rebirth" && ( )}

)}

{product.rating} | +{product.reviews}

{product.originalPrice && (

{product.originalPrice} {product.discount && ( {product.discount} )}

)}

{product.price}

{product.installments && (

{product.installments}

)} {product.freeShipping && (

Frete grátis

)}

))}

) } [V0_FILE]typescriptreact:file="components/ml-product-gallery.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, type TouchEvent } from "react" import Image from "next/image" import { Heart, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" const productImages = [ "/images/dsad.jpeg", "/images/whatsapp-20image-202025-12-02-20at-2023.jpeg", "/images/dasdad.jpeg", "/images/kk.jpeg", "/images/adadad.jpeg", "/images/ffffff.jpeg", ] export function MlProductGallery() { const [selectedImage, setSelectedImage] = useState(0) const touchStartX = useRef(0) const touchEndX = useRef(0) const handleTouchStart = (e: TouchEvent) => { touchStartX.current = e.touches[0].clientX } const handleTouchMove = (e: TouchEvent) => { touchEndX.current = e.touches[0].clientX } const handleTouchEnd = () => { if (touchStartX.current - touchEndX.current > 50) { // Swipe left - próxima imagem setSelectedImage((prev) => (prev + 1) % productImages.length) } if (touchEndX.current - touchStartX.current > 50) { // Swipe right - imagem anterior setSelectedImage((prev) => (prev - 1 + productImages.length) % productImages.length) } } return (

{/* Thumbnails - horizontal scroll em mobile */}

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

{/* Main Image */}

Árvore De Natal Decorada Enfeitada 2,10mt 800 Galhos Pinheiro Verde Cheia Premium

{/* Action Buttons */}

{/* Image Counter */}

{selectedImage + 1} / {productImages.length}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { MlHeader } from "@/components/ml-header" import { MlBreadcrumb } from "@/components/ml-breadcrumb" import { MlProductGallery } from "@/components/ml-product-gallery" import { MlProductInfo } from "@/components/ml-product-info" import { MlProductDescription } from "@/components/ml-product-description" import { MlProductReviews } from "@/components/ml-product-reviews" import { MlProductQuestions } from "@/components/ml-product-questions" import { MlRelatedProducts } from "@/components/ml-related-products" export default function ProductPage() { return (

) } [V0_FILE]typescriptreact:file="components/ml-product-info.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Star, Truck, Award, Shield, Plus, Minus } from "lucide-react" import { useRouter } from "next/navigation" export function MlProductInfo() { const [quantity, setQuantity] = useState(1) const router = useRouter() const handleBuyNow = () => { const totalValue = (47 * quantity).toFixed(2) router.push(`/checkout?quantity=${quantity}&total=${totalValue}`) } return (

{/* Condition */}

Novo | +100 vendidos

{/* Title */}

Arvore De Natal Decorada Enfeitada 2,10mt 800 Galhos Pinheiro Verde Cheia Premium

{/* Rating */}

{[1, 2, 3, 4, 5].map((star) => ( ))}

4.9 (30)

{/* Color */}

Cor: Verde-escuro

{/* Price */}

R$ {(47 * quantity).toFixed(0).split(".")[0]} {(((47 * quantity) % 1) * 100).toFixed(0).padStart(2, "0")}

12x R$ {((47 * quantity) / 12).toFixed(2).replace(".", ",")}

{/* Shipping info */}

Frete grátis

Chegará amanhã

Saiba os prazos de entrega e as formas de envio

{/* Stock */}

Estoque disponível

{/* Quantity */}

Quantidade:

{quantity}

{/* Action Buttons */}

{/* Features */}

Devolução grátis

Você tem 30 dias a partir da data de recebimento

Compra Garantida

Receba o produto que está esperando ou devolvemos o dinheiro

{/* Seller Info */}

Acesse a Loja Oficial de Arco Verde

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ArrowLeft } from "lucide-react" import { useRouter, useSearchParams } from "next/navigation" export default function CheckoutPage() { const router = useRouter() const searchParams = useSearchParams() const quantity = Number.parseInt(searchParams.get("quantity") || "1") const totalValue = Number.parseFloat(searchParams.get("total") || "47.00") const [formData, setFormData] = useState({ nome: "", cpf: "", telefone: "", cep: "", rua: "", numero: "", complemento: "", bairro: "", cidade: "", estado: "", }) const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("[v0] Form submitted:", formData) router.push(`/pagamento?quantity=${quantity}&total=${totalValue.toFixed(2)}`) } const formatCPF = (value: string) => { return value .replace(/\D/g, "") .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d)/, "$1.$2") .replace(/(\d{3})(\d{1,2})/, "$1-$2") .replace(/(-\d{2})\d+?$/, "$1") } const formatPhone = (value: string) => { return value .replace(/\D/g, "") .replace(/(\d{2})(\d)/, "($1) $2") .replace(/(\d{5})(\d)/, "$1-$2") .replace(/(-\d{4})\d+?$/, "$1") } const formatCEP = (value: string) => { return value .replace(/\D/g, "") .replace(/(\d{5})(\d)/, "$1-$2") .replace(/(-\d{3})\d+?$/, "$1") } return (

{/* Header */}

Finalizar Compra

{/* Product Summary */}

Arvore De Natal Decorada Enfeitada 2,10mt 800 Galhos Pinheiro Verde Cheia Premium

R$ {totalValue.toFixed(2).replace(".", ",")} ({quantity}x)

{/* Form */}

{/* Dados Pessoais */}

Dados Pessoais

Nome Completo *

CPF * { const formatted = formatCPF(e.target.value) setFormData({ ...formData, cpf: formatted }) }} required maxLength={14} className="mt-1.5 h-10 md:h-11 text-sm md:text-base" placeholder="000.000.000-00" />

Telefone * { const formatted = formatPhone(e.target.value) setFormData({ ...formData, telefone: formatted }) }} required maxLength={15} className="mt-1.5 h-10 md:h-11 text-sm md:text-base" placeholder="(00) 00000-0000" />

{/* Endereço de Entrega */}

Endereço de Entrega

CEP * { const formatted = formatCEP(e.target.value) setFormData({ ...formData, cep: formatted }) }} required maxLength={9} className="mt-1.5 h-10 md:h-11 text-sm md:text-base" placeholder="00000-000" />

Rua *

Número *

Complemento

Bairro *

Cidade *

Estado *

{/* Submit Button */}

) } [V0_FILE]typescriptreact:file="app/checkout/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/pagamento/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { ArrowLeft, Copy, Check } from "lucide-react" export default function PagamentoPage() { const router = useRouter() const searchParams = useSearchParams() const [copied, setCopied] = useState(false) const [timeRemaining, setTimeRemaining] = useState(600) // 10 minutos em segundos const quantity = Number.parseInt(searchParams.get("quantity") || "1") const totalValue = Number.parseFloat(searchParams.get("total") || "47.00") // Este é um código PIX de exemplo - será substituído pela API do gateway de pagamento const pixCode = "00020126580014br.gov.bcb.pix0136a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p652040000530398654045.005802BR5925NOME DO VENDEDOR6014SAO PAULO62070503***63041D3D" const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(pixCode)}` // Countdown timer useEffect(() => { const timer = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { clearInterval(timer) return 0 } return prev - 1 }) }, 1000) return () => clearInterval(timer) }, []) const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}` } const handleCopyPix = async () => { try { await navigator.clipboard.writeText(pixCode) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Erro ao copiar código PIX:", err) } } // TODO: Integração futura com gateway de pagamento // const generatePixPayment = async (orderData: any) => { // const response = await fetch('/api/payment/pix', { // method: 'POST', // headers: { 'Content-Type': 'application/json' }, // body: JSON.stringify(orderData) // }) // const { qrCode, pixCode, transactionId } = await response.json() // return { qrCode, pixCode, transactionId } // } return (

{/* Header */}

Pagamento PIX

{/* Payment Content */}

{/* Timer */}

Tempo restante para pagamento

{formatTime(timeRemaining)}

{/* QR Code */}

Escaneie o QR Code para pagar

R$ {totalValue.toFixed(2).replace(".", ",")}

Árvore De Natal Decorada Enfeitada 2,10mt {quantity > 1 && `(${quantity} unidades)`}

{/* PIX Code */}

Ou copie o código PIX

{pixCode}

{copied &&

Código copiado!

}

{/* Instructions */}

Como pagar com PIX

1 Abra o app do seu banco e escolha pagar com PIX
2 Escaneie o QR Code ou cole o código PIX
3 Confirme as informações e finalize o pagamento
4 Pronto! Você receberá a confirmação por e-mail

{/* Cancel Button */}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This