Spaces:
Running
Running
Perfeito! Agora vamos criar um **prompt definitivo para DeepSite**, incluindo **todas as 8 inovações/funcionalidades da NOVA**, reorganizando a Home de forma clara, harmoniosa e elegante, **adicionando empresas/logos falsos e seções extras para preencher a página**. --- # **Prompt Final de Edição — Home NOVA Ultra Dark Mode (com todas inovações)** **Objetivo:** Refinar a Home do site **NOVA** em **ultra dark mode**, reorganizando **hierarquia, alinhamento e espaçamento**, adicionando **todos os elementos da plataforma (8 inovações)**, animações suaves, efeitos de fundo e empresas/logos fictícios para maior realismo. --- ## **1. Paleta de cores** * Fundo: #000000 (preto absoluto) * Texto: #ffffff (branco) * Destaques/CTAs: #e0e0e0 (cinza claro) * Bordas/neutros: #1a1a1a / #2c2c2c * Gradientes discretos ou partículas cinza claro para efeitos de fundo --- ## **2. Tipografia** * Roboto, fallback system-ui, -apple-system, “Segoe UI” * H1: 40px / H2: 28px / H3: 20px / P: 16px * Contraste alto, legível no fundo preto * Linha-height 1.5x --- ## **3. Estrutura de seções e posicionamento** ### **3.1 Header** * Altura 80px, sticky, fundo preto absoluto * Logo à esquerda, menu à direita: Produtos | Preços | Como funciona | Blog | Entrar | Experimentar grátis * Links: branco, hover cinza claro --- ### **3.2 Hero Section** * Altura: 100vh * H1 centralizado, branco, fade-in + slide-in de baixo para cima * Subtexto cinza claro, abaixo do H1 * CTAs: “Experimentar grátis” (principal) e “Ver planos” (secundário), hover clareia * Fundo: partículas cinza claro ou gradiente discreto --- ### **3.3 Funcionalidades / Inovações (8 cards)** 1. **Conteúdo ultra-personalizado** 2. **Modo Multi-Formato Inteligente** 3. **Análise de Performance Instantânea** 4. **Editor Criativo Colaborativo** 5. **Modo Storytelling Automático** 6. **Moodboard e Inspiração Visual Integrada** 7. **Aprendizado Adaptativo do Usuário** 8. **Assistente de Marketing Proativo** * Grid responsivo: 4 colunas desktop, 2 tablet, 1 mobile * Cards: fundo #1a1a1a, bordas 12px, sombra sutil * Hover: leve elevação + glow discreto * Ícones animados suavemente (pulse ou rotação) * Títulos e descrições legíveis, texto branco ou cinza claro --- ### **3.4 Estatísticas** * Grid 4 colunas: * “+10.542 textos gerados” * “+3.217 campanhas automatizadas” * “+7.890 e-mails otimizados” * “+12.345 ideias de anúncios criadas” * Contadores animados, fade-in ao scroll * Fundo: #0a0a0a, texto branco --- ### **3.5 Depoimentos / Empresas Fictícias** * Grid ou carrossel: 2–3 colunas desktop * Logos de empresas fictícias (ex.: NovaCorp, HyperMedia, AI Solutions, MarketX, DigitalHive, PromoLabs, BrandForge, CreativePulse) * Hover: brilho discreto ou leve aumento * Cards: fundo #1a1a1a, bordas suaves * Texto: branco, citações itálico cinza claro --- ### **3.6 Planos** * Grid 2 ou 3 colunas, cards 320x250px, fundo #1a1a1a * Hover: elevação + borda clara * Destaque: glow leve no plano recomendado * CTA: hover clareia ou leve pulso --- ### **3.7 Seção Final / CTA** * Fundo: gradiente escuro ou partículas cinza claro * Texto centralizado: “Comece agora com a NOVA” * Botão CTA principal: “Experimentar grátis”, hover clareia --- ### **3.8 Footer** * Fundo #000, altura 150px * Links brancos, hover cinza claro, alinhamento horizontal * Redes sociais: ícones brancos * Copyright centralizado --- ## **4. Microinterações e animações** * Hero: H1 e CTA fade-in + slide-in * Cards: hover elevação + glow * Scroll suave entre seções * Efeitos de fundo: partículas ou gradientes animados * Contadores animados (Estatísticas) --- ## **5. Responsividade** * Mobile ≤ 640px: stack vertical, cards 100% largura * Tablet 641–1024px: grid 2 colunas * Desktop ≥ 1025px: grid 4 colunas (funcionalidades/estatísticas), hero tela cheia * Touch-friendly ≥44px --- ## **6. Resultado esperado** * Home **ultra dark mode**, elegante, organizada e moderna * Todos os **8 cards de inovações visíveis e claros** * Estatísticas com contadores animados * Empresas/logos fictícios distribuídos de forma harmoniosa * Cards e CTAs animados suavemente * Efeitos de fundo discretos * Layout limpo, hierarquia visual clara --- Se você quiser, posso gerar **o HTML/CSS/JS completo da Home**, **com todos os 8 elementos de inovação, estatísticas animadas, logos fictícios, microanimações e efeitos de fundo**, pronto para abrir no navegador e totalmente organizado. Quer que eu faça isso agora? - Initial Deployment
46c6865 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NOVA · Crie conteúdo em segundos com IA</title> | |
| <meta name="description" content="Plataforma de geração de conteúdo de marketing via IA com personalização por tom, público e objetivo."> | |
| <meta property="og:title" content="NOVA · Crie conteúdo em segundos com IA"> | |
| <meta property="og:description" content="Plataforma de geração de conteúdo de marketing via IA."> | |
| <meta property="og:type" content="website"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-900: #000000; | |
| --text-100: #ffffff; | |
| --accent-500: #e0e0e0; | |
| --muted-300: #1a1a1a; | |
| --muted-200: #2c2c2c; | |
| --section-padding: 5rem; | |
| } | |
| @media (max-width: 1024px) { | |
| :root { | |
| --section-padding: 3.75rem; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| :root { | |
| --section-padding: 2.5rem; | |
| } | |
| } | |
| body { | |
| font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif; | |
| background-color: var(--bg-900); | |
| color: var(--text-100); | |
| scroll-behavior: smooth; | |
| } | |
| .card-hover { | |
| transition: all 150ms ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| background-color: #2c2c2c; | |
| box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary { | |
| background-color: var(--accent-500); | |
| color: #0b0f19; | |
| transition: all 150ms ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #f5f5f5; | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| border: 1px solid var(--muted-200); | |
| transition: all 150ms ease; | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--muted-300); | |
| transform: translateY(-1px); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: var(--accent-500); | |
| transition: width 150ms ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| background-color: #f5f5f5; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 500ms ease forwards; | |
| } | |
| .delay-100 { | |
| animation-delay: 100ms; | |
| } | |
| .delay-200 { | |
| animation-delay: 200ms; | |
| } | |
| .delay-300 { | |
| animation-delay: 300ms; | |
| } | |
| .animate-count { | |
| transition: all 1s ease-out; | |
| } | |
| .grayscale { | |
| filter: grayscale(100%); | |
| } | |
| .grayscale-0 { | |
| filter: grayscale(0%); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-[var(--bg-900)] border-b border-[var(--muted-300)]"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-[var(--accent-500)]">NOVA</a> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="nav-link text-[var(--text-100)] hover:text-[var(--accent-500)]">Produtos</a> | |
| <a href="#pricing" class="nav-link text-[var(--text-100)] hover:text-[var(--accent-500)]">Preços</a> | |
| <a href="#how-it-works" class="nav-link text-[var(--text-100)] hover:text-[var(--accent-500)]">Como funciona</a> | |
| <a href="#" class="nav-link text-[var(--text-100)] hover:text-[var(--accent-500)]">Blog</a> | |
| </nav> | |
| <div class="hidden md:flex space-x-4"> | |
| <a href="#" class="px-4 py-2 rounded-lg text-[var(--text-100)] hover:text-[var(--accent-500)]">Entrar</a> | |
| <a href="#" class="btn-primary px-6 py-2 rounded-lg font-medium">Experimentar grátis</a> | |
| </div> | |
| <button class="md:hidden text-[var(--text-100)]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyMjAsMjIwLDIyMCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvc3ZnPg==')] opacity-5 pointer-events-none"></div> | |
| <div id="particles-js" class="absolute inset-0 opacity-10 pointer-events-none"></div> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-10 animate-fade-in [animation-delay:100ms] translate-y-10 opacity-0"> | |
| <span class="text-[var(--accent-500)]">NOVA</span> · Crie conteúdo em segundos com IA | |
| </h1> | |
| <p class="text-xl md:text-2xl text-[var(--text-100)] opacity-90 mb-16 max-w-3xl mx-auto animate-fade-in [animation-delay:300ms] translate-y-10 opacity-0"> | |
| Gere conteúdo de marketing perfeito para seu público, tom e objetivo - sem esforço. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-6 animate-fade-in [animation-delay:500ms] translate-y-10 opacity-0"> | |
| <a href="#" class="btn-primary px-10 py-4 rounded-lg font-medium text-lg w-48 hover:bg-white hover:shadow-[0_0_15px_rgba(224,224,224,0.3)] transition-all">Experimentar grátis</a> | |
| <a href="#pricing" class="btn-secondary px-10 py-4 rounded-lg font-medium text-lg w-40 hover:bg-[#2c2c2c] hover:shadow-[0_0_10px_rgba(224,224,224,0.1)] transition-all">Ver planos</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-[var(--section-padding)] bg-[var(--muted-300)] relative overflow-hidden"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Funcionalidades principais</h2> | |
| <p class="text-lg text-[var(--text-100)] opacity-80 max-w-2xl mx-auto"> | |
| Tudo que você precisa para criar conteúdo de marketing eficiente | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Feature 1 --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl card-hover animate-fade-in [animation-delay:100ms] border border-[var(--muted-300)] hover:border-[var(--accent-500)] hover:shadow-[0_0_15px_rgba(224,224,224,0.1)] transition-all"> | |
| <div class="w-12 h-12 bg-[var(--accent-500)] bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--accent-500)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Conteúdo ultra-personalizado</h3> | |
| <p class="text-[var(--text-100)] opacity-80"> | |
| Gere textos adaptados ao seu tom de voz, público-alvo e objetivos específicos de marketing. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl card-hover animate-fade-in delay-200"> | |
| <div class="w-12 h-12 bg-[var(--accent-500)] bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--accent-500)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Multi-formato inteligente</h3> | |
| <p class="text-[var(--text-100)] opacity-80"> | |
| Adapte automaticamente seu conteúdo para blogs, redes sociais, anúncios e newsletters. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl card-hover animate-fade-in delay-300"> | |
| <div class="w-12 h-12 bg-[var(--accent-500)] bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--accent-500)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Assistente proativo</h3> | |
| <p class="text-[var(--text-100)] opacity-80"> | |
| Receba sugestões de tendências e notificações para manter seu conteúdo relevante. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl card-hover animate-fade-in delay-300"> | |
| <div class="w-12 h-12 bg-[var(--accent-500)] bg-opacity-20 rounded-lg flex items-center justify-center mb-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--accent-500)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Biblioteca de templates</h3> | |
| <p class="text-[var(--text-100)] opacity-80"> | |
| Acesse e gerencie todos seus modelos e conteúdos anteriores em um só lugar. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 bg-[var(--bg-900)]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Números que falam por si</h2> | |
| <p class="text-lg text-[var(--text-100)] opacity-80 max-w-2xl mx-auto"> | |
| A plataforma preferida por criadores de conteúdo | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-6xl mx-auto"> | |
| <div class="text-center"> | |
| <div class="text-4xl md:text-5xl font-bold mb-2 text-[var(--accent-500)] animate-count" data-count="10000">0</div> | |
| <p class="text-[var(--text-100)] opacity-80">Textos gerados</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl md:text-5xl font-bold mb-2 text-[var(--accent-500)] animate-count" data-count="95">0</div> | |
| <p class="text-[var(--text-100)] opacity-80">Engajamento otimizado</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl md:text-5xl font-bold mb-2 text-[var(--accent-500)] animate-count" data-count="70">0</div> | |
| <p class="text-[var(--text-100)] opacity-80">Tempo economizado</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl md:text-5xl font-bold mb-2 text-[var(--accent-500)] animate-count" data-count="5000">0</div> | |
| <p class="text-[var(--text-100)] opacity-80">Usuários satisfeitos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section class="py-20 bg-[var(--muted-300)]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Parceiros e clientes</h2> | |
| <p class="text-lg text-[var(--text-100)] opacity-80 max-w-2xl mx-auto"> | |
| Empresas que confiam na nossa plataforma | |
| </p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-12 items-center opacity-80 hover:opacity-100 transition-opacity"> | |
| <div class="w-32 h-16 bg-[var(--muted-200)] rounded-lg flex items-center justify-center grayscale hover:grayscale-0 transition-all"> | |
| <span class="font-bold">LOGO</span> | |
| </div> | |
| <div class="w-32 h-16 bg-[var(--muted-200)] rounded-lg flex items-center justify-center grayscale hover:grayscale-0 transition-all"> | |
| <span class="font-bold">LOGO</span> | |
| </div> | |
| <div class="w-32 h-16 bg-[var(--muted-200)] rounded-lg flex items-center justify-center grayscale hover:grayscale-0 transition-all"> | |
| <span class="font-bold">LOGO</span> | |
| </div> | |
| <div class="w-32 h-16 bg-[var(--muted-200)] rounded-lg flex items-center justify-center grayscale hover:grayscale-0 transition-all"> | |
| <span class="font-bold">LOGO</span> | |
| </div> | |
| <div class="w-32 h-16 bg-[var(--muted-200)] rounded-lg flex items-center justify-center grayscale hover:grayscale-0 transition-all"> | |
| <span class="font-bold">LOGO</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyMjAsMjIwLDIyMCwwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPjwvc3ZnPg==')] opacity-10 pointer-events-none"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">O que nossos clientes dizem</h2> | |
| <p class="text-lg text-[var(--text-100)] opacity-80 max-w-2xl mx-auto"> | |
| Empresas que transformaram sua produção de conteúdo com NOVA | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-[var(--muted-300)] p-8 rounded-xl card-hover w-full max-w-md mx-auto lg:max-w-none"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-[var(--accent-500)] bg-opacity-20 flex items-center justify-center mr-4"> | |
| <span class="text-lg font-bold text-[var(--accent-500)]">M</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Mariana Silva</h4> | |
| <p class="text-sm opacity-70">Social Media Manager @AgênciaInova</p> | |
| </div> | |
| </div> | |
| <p class="italic text-[var(--text-100)] opacity-90"> | |
| "Reduzimos o tempo de criação de conteúdo em 70% com NOVA. A personalização por tom de voz foi um divisor de águas para nossa agência." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-[var(--muted-300)] p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-[var(--accent-500)] bg-opacity-20 flex items-center justify-center mr-4"> | |
| <span class="text-lg font-bold text-[var(--accent-500)]">R</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ricardo Almeida</h4> | |
| <p class="text-sm opacity-70">CEO @StartupTech</p> | |
| </div> | |
| </div> | |
| <p class="italic text-[var(--text-100)] opacity-90"> | |
| "Como startup, não tínhamos recursos para uma equipe de marketing. NOVA nos permitiu criar conteúdo profissional de forma consistente e acessível." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-[var(--muted-300)] p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-[var(--accent-500)] bg-opacity-20 flex items-center justify-center mr-4"> | |
| <span class="text-lg font-bold text-[var(--accent-500)]">C</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Carla Mendes</h4> | |
| <p class="text-sm opacity-70">Freelancer de Conteúdo</p> | |
| </div> | |
| </div> | |
| <p class="italic text-[var(--text-100)] opacity-90"> | |
| "NOVA me ajuda a entregar mais projetos em menos tempo, mantendo a qualidade. Meus clientes adoram os resultados e eu ganhei escala no meu trabalho." | |
| </p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="bg-[var(--muted-300)] p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-[var(--accent-500)] bg-opacity-20 flex items-center justify-center mr-4"> | |
| <span class="text-lg font-bold text-[var(--accent-500)]">L</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Lucas Oliveira</h4> | |
| <p class="text-sm opacity-70">CMO @EcomStore</p> | |
| </div> | |
| </div> | |
| <p class="italic text-[var(--text-100)] opacity-90"> | |
| "A integração de formatos é incrível. Criamos post para Instagram e automaticamente temos versões para blog e newsletter, tudo coeso e alinhado." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-[var(--muted-300)]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Planos simples e transparentes</h2> | |
| <p class="text-lg text-[var(--text-100)] opacity-80 max-w-2xl mx-auto"> | |
| Escolha o plano que melhor atende às suas necessidades | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Plan --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl h-full flex flex-col"> | |
| <h3 class="text-xl font-bold mb-2">Básico</h3> | |
| <p class="text-sm opacity-70 mb-6">Ideal para testar a plataforma</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">Grátis</span> | |
| <span class="opacity-70">/sempre</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| 10 gerações/mês | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| 1 tom de voz | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Formatos básicos | |
| </li> | |
| </ul> | |
| <a href="#" class="btn-secondary w-full py-3 rounded-lg font-medium">Começar agora</a> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl relative border border-[var(--accent-500)] group hover:shadow-[0_0_20px_rgba(224,224,224,0.15)] transition-all"> | |
| <div class="absolute inset-0 rounded-xl border border-[var(--accent-500)] opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none"></div> | |
| <div class="absolute top-0 right-0 bg-[var(--accent-500)] text-[var(--bg-900)] px-4 py-1 rounded-bl-lg rounded-tr-lg text-sm font-bold"> | |
| RECOMENDADO | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Profissional</h3> | |
| <p class="text-sm opacity-70 mb-6">Para criadores de conteúdo e pequenas empresas</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 97</span> | |
| <span class="opacity-70">/mês</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| 100 gerações/mês | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| 3 tons de voz | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Todos formatos | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Biblioteca de templates | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Suporte prioritário | |
| </li> | |
| </ul> | |
| <a href="#" class="btn-primary w-full py-3 rounded-lg font-medium">Assinar agora</a> | |
| </div> | |
| <!-- Business Plan --> | |
| <div class="bg-[var(--muted-200)] p-8 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-2">Empresarial</h3> | |
| <p class="text-sm opacity-70 mb-6">Para agências e equipes de marketing</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">R$ 297</span> | |
| <span class="opacity-70">/mês</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Gerações ilimitadas | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Tons de voz ilimitados | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Todos formatos premium | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Até 5 usuários | |
| </li> | |
| <li class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--accent-500)] mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| Suporte 24/7 | |
| </li> | |
| </ul> | |
| <a href="#" class="btn-primary w-full py-3 rounded-lg font-medium">Assinar agora</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="bg-[var(--muted-300)] rounded-xl p-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para transformar sua criação de conteúdo?</h2> | |
| <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90"> | |
| Comece hoje mesmo e experimente o poder da IA na sua estratégia de marketing. | |
| </p> | |
| <a href="#" class="btn-primary px-8 py-3 rounded-lg font-medium text-lg inline-block">Experimentar grátis</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[var(--muted-300)] py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">NOVA</h3> | |
| <p class="opacity-80"> | |
| A plataforma de criação de conteúdo com IA para profissionais de marketing. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Produto</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Funcionalidades</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Planos</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Recursos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Blog</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Tutoriais</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Documentação</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Termos</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Privacidade</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[var(--accent-500)]">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-[var(--muted-200)] flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="opacity-70">© 2025 NOVA. Todos os direitos reservados.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="opacity-70 hover:opacity-100 text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="opacity-70 hover:opacity-100 hover:text-[var(--accent-500)]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="opacity-70 hover:opacity-100 hover:text-[var(--accent-500)]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <script> | |
| // Particles.js config | |
| document.addEventListener('DOMContentLoaded', function() { | |
| if (document.getElementById('particles-js')) { | |
| particlesJS('particles-js', { | |
| particles: { | |
| number: { value: 80, density: { enable: true, value_area: 800 } }, | |
| color: { value: "#e0e0e0" }, | |
| shape: { type: "circle" }, | |
| opacity: { value: 0.5, random: true }, | |
| size: { value: 3, random: true }, | |
| line_linked: { enable: true, distance: 150, color: "#e0e0e0", opacity: 0.2, width: 1 }, | |
| move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" } | |
| }, | |
| interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "repulse" } } } | |
| }); | |
| } | |
| // Counter animation | |
| const counters = document.querySelectorAll('.animate-count'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-count'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(updateCount, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| function updateCount() { | |
| const count = +counter.innerText; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(updateCount, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| } | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Enhanced scroll animation observer | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const observerOptions = { | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver(function(entries) { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fade-in'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.animate-fade-in').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Mobile menu toggle would go here | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Vzrxone/template-1-bug" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |