[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # UNIVERSO v2 *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/kyrixcontacto-8259s-projects/v0-universo-v2) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/DV4uZpCtDzj) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/kyrixcontacto-8259s-projects/v0-universo-v2](https://vercel.com/kyrixcontacto-8259s-projects/v0-universo-v2)** ## Build your app Continue building your app on: **[https://v0.app/chat/DV4uZpCtDzj](https://v0.app/chat/DV4uZpCtDzj)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Paleta pastel fofa para amigurumi */ --pink-pastel: oklch(0.92 0.05 350); --mint-green: oklch(0.92 0.06 165); --lilac: oklch(0.9 0.05 290); --yellow-light: oklch(0.96 0.06 95); --peach: oklch(0.93 0.06 55); --cream: oklch(0.98 0.01 90); --background: oklch(0.99 0.005 90); --foreground: oklch(0.3 0.02 30); --card: oklch(1 0 0); --card-foreground: oklch(0.3 0.02 30); --popover: oklch(1 0 0); --popover-foreground: oklch(0.3 0.02 30); --primary: oklch(0.7 0.15 350); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.92 0.05 165); --secondary-foreground: oklch(0.35 0.05 165); --muted: oklch(0.96 0.02 90); --muted-foreground: oklch(0.5 0.02 30); --accent: oklch(0.9 0.08 290); --accent-foreground: oklch(0.35 0.08 290); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.92 0.02 350); --input: oklch(0.95 0.02 350); --ring: oklch(0.75 0.12 350); --chart-1: oklch(0.75 0.15 350); --chart-2: oklch(0.75 0.12 165); --chart-3: oklch(0.75 0.1 290); --chart-4: oklch(0.85 0.12 95); --chart-5: oklch(0.8 0.1 55); --radius: 1rem; --sidebar: oklch(0.98 0.01 350); --sidebar-foreground: oklch(0.3 0.02 30); --sidebar-primary: oklch(0.7 0.15 350); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.95 0.03 350); --sidebar-accent-foreground: oklch(0.35 0.05 350); --sidebar-border: oklch(0.92 0.02 350); --sidebar-ring: oklch(0.75 0.12 350); } .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: var(--font-nunito), "Nunito", system-ui, sans-serif; --font-display: var(--font-quicksand), "Quicksand", system-ui, sans-serif; --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); /* Custom pastel colors */ --color-pink-pastel: var(--pink-pastel); --color-mint: var(--mint-green); --color-lilac: var(--lilac); --color-yellow-light: var(--yellow-light); --color-peach: var(--peach); --color-cream: var(--cream); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Soft pulse animation for CTA buttons */ @keyframes pulse-soft { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -4px rgba(236, 72, 153, 0.3); } 50% { transform: scale(1.02); box-shadow: 0 12px 28px -4px rgba(236, 72, 153, 0.4); } } .animate-pulse-soft { animation: pulse-soft 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Gentle bounce animation */ @keyframes bounce-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .animate-bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; } /* Float animation for decorative elements */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(2deg); } } .animate-float { animation: float 4s ease-in-out infinite; } /* Fade in up animation */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; } /* Stitch pattern for decorative borders */ .stitch-border { background-image: repeating-linear-gradient( 90deg, transparent, transparent 8px, currentColor 8px, currentColor 12px ); background-size: 20px 2px; background-repeat: repeat-x; } /* Yarn texture overlay */ .yarn-texture { background-image: radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(167, 243, 208, 0.08) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(196, 181, 253, 0.05) 0%, transparent 50%); } /* Professional slow pulse for main CTA */ @keyframes pulse-slow { 0%, 100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } 50% { transform: scale(1.03); box-shadow: 0 20px 25px -5px rgba(34, 197, 94, 0.3), 0 10px 10px -5px rgba(34, 197, 94, 0.2); } } .animate-pulse-slow { animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Decorative dots pattern */ .dots-pattern { background-image: radial-gradient(circle, rgba(236, 72, 153, 0.15) 1px, transparent 1px); background-size: 20px 20px; } /* Smooth hover transitions */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15); } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Nunito, Quicksand } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import Script from "next/script" import "./globals.css" const nunito = Nunito({ subsets: ["latin"], display: "swap", variable: "--font-nunito" }) const quicksand = Quicksand({ subsets: ["latin"], display: "swap", variable: "--font-quicksand" }) export const metadata: Metadata = { title: "Universo Amigurumi", description: "Aprenda a criar plantinhas lindas e lucrativas em amigurumi. Transforme sua paixão por crochê em um negócio verde e rentável!", generator: "v0.app", icons: { icon: "/favicon.png", apple: "/favicon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import LandingPage from "@/components/landing-page" export default function Page() { return } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" "use client" import { useEffect, useState } from "react" export default function CountdownTimer() { const [timeLeft, setTimeLeft] = useState({ hours: "01", minutes: "13", seconds: "43", }) useEffect(() => { let totalSeconds = 1 * 3600 + 13 * 60 + 43 const timer = setInterval(() => { if (totalSeconds > 0) { totalSeconds-- const hours = Math.floor(totalSeconds / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const seconds = totalSeconds % 60 setTimeLeft({ hours: String(hours).padStart(2, "0"), minutes: String(minutes).padStart(2, "0"), seconds: String(seconds).padStart(2, "0"), }) } else { setTimeLeft({ hours: "00", minutes: "00", seconds: "00", }) clearInterval(timer) } }, 1000) return () => clearInterval(timer) }, []) return (

⚠️ Oferta por tempo limitado

{timeLeft.hours}:{timeLeft.minutes}:{timeLeft.seconds}

) } [V0_FILE]typescriptreact:file="components/landing-page.tsx" "use client" import { useState, useEffect } from "react" import Image from "next/image" import PurchaseNotification from "./purchase-notification" const LandingPage = () => { const [deadline, setDeadline] = useState(null) const [deadlineText, setDeadlineText] = useState("") const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }) const [activeTab, setActiveTab] = useState("flores") const [lightboxImage, setLightboxImage] = useState(null) useEffect(() => { const now = new Date() const targetDate = new Date(now) targetDate.setDate(targetDate.getDate() + 2) targetDate.setHours(23, 59, 59, 999) setDeadline(targetDate) const day = targetDate.getDate() const months = [ "janeiro", "fevereiro", "marco", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro", ] const month = months[targetDate.getMonth()] setDeadlineText(`Inscricoes abertas ate dia ${day} de ${month}`) }, []) useEffect(() => { if (!deadline) return const calculateTimeLeft = () => { const now = new Date().getTime() const distance = deadline.getTime() - now if (distance < 0) { return { days: 0, hours: 0, minutes: 0, seconds: 0 } } return { days: Math.floor(distance / (1000 * 60 * 60 * 24)), hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), seconds: Math.floor((distance % (1000 * 60)) / 1000), } } setTimeLeft(calculateTimeLeft()) const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()) }, 1000) return () => clearInterval(timer) }, [deadline]) const flores = [ "/images/flowers/anturio.jpg", "/images/flowers/tulipas.jpg", "/images/flowers/girassol.jpg", "/images/flowers/gerbera.jpg", "/images/flowers/rosa-deserto.jpg", "/images/flowers/5.webp", "/images/flowers/8.webp", "/images/flowers/2.webp", "/images/flowers/10.webp", "/images/flowers/9.webp", ] const suculentas = [ "/images/succulents/new-1.jpg", "/images/succulents/new-2.jpg", "/images/succulents/new-3.jpg", "/images/succulents/new-4.jpg", "/images/succulents/new-5.jpg", "/images/succulents/new-6.jpg", "/images/succulents/14.webp", "/images/succulents/16.webp", "/images/succulents/15.webp", "/images/succulents/13.webp", ] const scrollToPricing = () => { const pricingSection = document.getElementById("plano-completo") if (pricingSection) { pricingSection.scrollIntoView({ behavior: "smooth", block: "start" }) } } return (

{/* Decorative yarn elements */}

{/* Hero Section */}

{/* Countdown */}

{deadlineText || "Carregando..."}

{[ { value: timeLeft.days, label: "Dias" }, { value: timeLeft.hours, label: "Horas" }, { value: timeLeft.minutes, label: "Min" }, { value: timeLeft.seconds, label: "Seg" }, ].map((item, index) => (

{String(item.value).padStart(2, "0")}

{item.label}

))}

{/* Hero Image Area */}

{/* Content Card */}

{/* Decorative stitches */}

Aprenda a criar plantinhas lindas e lucrativas em amigurumi. Transforme sua paixao por croche em um negocio verde e rentavel, mesmo que esteja comecando agora!

O Jardim Criativo Amigurumi e o curso do{" "} Universo Amigurumi que ensina, do zero , a criar uma colecao exclusiva com mais de 100 plantinhas e suculentas{" "} em amigurumi, pensadas para encantar clientes,{" "} decorar ambientes e gerar renda com croche.

{/* Decorative wave */}

{/* Gallery Section */}

📖 Galeria de Amigurumis

+de 100 Criacoes Magicas

Explore uma previa das encantadoras plantinhas que voce aprendera a crochetar. Cada padrao foi desenhado com amor para florescer sua criatividade.

{/* Tabs */}

{/* Grid */}

{activeTab === "flores" ? flores.map((image, i) => (

setLightboxImage(image)} className="aspect-square bg-gradient-to-br from-pink-50 to-rose-50 rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer border-2 border-pink-100 hover:border-pink-200 hover-lift" style={{ animationDelay: `${i * 0.1}s` }} > {`Flor

)) : suculentas.map((image, i) => (

setLightboxImage(image)} className="aspect-square bg-gradient-to-br from-emerald-50 to-teal-50 rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer border-2 border-emerald-100 hover:border-emerald-200 hover-lift" style={{ animationDelay: `${i * 0.1}s` }} > {`Suculenta

))}

{/* Fioleta IA Section */}

{/* Decorative elements */}

🤖 Sua mentora digital de croche

Voce nao vai aprender sozinha!

Ela foi pensada para quem:

{[ "Esta comecando agora", "Quer aprender com mais seguranca", "Precisa de apoio constante", "Quer transformar croche em algo maior que um hobby", ].map((text, i) => (

✓

{text}

))}

{[ "Suporte disponivel 24h", "Ideias ilimitadas sob demanda", "Orientacao para vender melhor", "Acompanhamento que motiva", ].map((text, i) => (

✓

{text}

))}

Veja a Assistente IA do Universo Amigurumi em acao:

{/* Video Card */}

Exclusivo para Alunas

Vem Crochetar com a

ASSISTENTE IA AMIGURUMI

Sua mentora digital que transforma cada duvida em aprendizado e cada ponto em uma obra de arte

{/* Video Container */}