# Projeto: Cultiv ## Contexto A Cultiv é um motor de escrita por IA que captura a voz autoral do usuário e gera textos q
# Projeto: Cultiv
## Contexto
A Cultiv é um motor de escrita por IA que captura a voz autoral do usuário e gera textos que soam como se tivessem sido escritos por ele — não por um modelo genérico.
## Identidade Visual (Design System)
- **Posicionamento:** Premium, sofisticado, minimalista, marcante, memorável e aconchegante.
- **Cores (Earthy Luxe):**
- Light: off-white (#F8F5F0), branco (#FFFFFF), preto sépia (#1A1410), âmbar (#D48B5A), musgo (#5A6B4A), terracota (#A65A4A).
- Dark: terra úmida (#1C1815), madeira escura (#28231E), creme suave (#ECE6DE), âmbar noturno (#E6A574), jade (#7A9B5A), terracota vibrante (#C46A58).
- **Tipografia (Tríade Autoral):**
- **Display (headlines/marca):** Sora Bold (700) — tracking -0.03em, line-height 1.1.
- **Interface (UI funcional):** Satoshi Regular/Medium (400/500) — tracking 0em, line-height 1.4.
- **Conteúdo (outputs da IA):** Merriweather Light/Regular (300/400) — tracking 0.02em, line-height 1.8–1.9.
- **Espaçamento:** Escala de 4px (micro: 4-8px, médio: 16-24px, grande: 32-48px, extra: 64-80px).
- **Cantos:** 8px (botões), 16px (cards), 24px (modais).
- **Estilo:** Editorial, assimétrico, com uso massivo de tipografia como elemento visual.
---
## Tela 1 — Landing Page (Marketing)
**Objetivo:** Funcionar como um manifesto de marca, não como um catálogo de features.
**Seções:**
1. **Hero:** "Sua voz não é um dado. É território." + subtítulo + CTA "Comece a usar" + selo "100% autoral | 0% genérico".
2. **Manifesto:** Fundo papel, título "A era dos textos genéricos acabou." + texto em Merriweather sobre o problema.
3. **Demo Interativa:** Textarea para o usuário escrever um parágrafo + botão "Analisar minha voz" + resultado com 6 métricas (ritmo, formalidade, vocabulário, pontuação, complexidade, certeza) em chips.
4. **Como funciona:** 5 passos com números grandes (Sora 72px) em layout alternado.
5. **Métricas:** Exibição das 6 métricas como chips interativos.
6. **Diferenciais:** Comparativo vs ChatGPT em lista/cards assimétricos.
7. **Depoimento:** Estilo carta com assinatura.
8. **Planos:** 3 planos (Explorador, Criador, Profissional) com toggle BRL/USD e mensal/anual.
9. **FAQ:** Acordeão com 5–6 perguntas.
10. **Rodapé:** Links para Política de Privacidade, Termos, Blog, contato e redes sociais.
---
## Tela 2 — Onboarding (App Autenticado)
**Fase 1 — Coleta de Contexto:**
- 3 perguntas: Domínio (chips), Audiência (chips), Força declarada (textarea opcional).
- Estilo "entrevista" com animações suaves.
**Fase 2 — Wizard de Calibração (5 etapas):**
- Cada etapa: prompt + textarea + contador de caracteres (mínimo/atual/máximo) + botão "Próximo".
- Última etapa: tela de revisão com 3 seções ("Como você pensa", "Como desenvolve textos", "Consistência da voz") + loading com ondas de áudio.
---
## Tela 3 — Geração (Fluxo em 3 Passos Progressivos)
**Passo 1 — "O que você quer criar?"**
- Grid de cards com intenções: Compartilhar ideia, Explicar a fundo, Engajar audiência, Narrar jornada, Atualizar assinantes, Documentar decisão.
- Cada card: ícone + título + descrição curta. Clique seleciona e avança.
**Passo 2 — "Como quer fazer?"**
- Segmented control: Curto / Médio / Longo.
- Canal (opcional): dropdown com LinkedIn, Blog, Thread, E-mail.
**Passo 3 — "Conte os detalhes"**
- Split desktop (2:1):
- **Esquerda:** Card de dicas + campos dinâmicos (texto, selects, checkboxes) + textarea para referência (colapsável) + seletor de idioma (PT/EN) + seletor de modo de qualidade (rápido/equilibrado/polido — com bloqueio para planos inferiores).
- **Direita (sticky):** Prévia de preço em tempo real + modo recomendado + botão "Gerar" (desabilitado se formulário incompleto, sem créditos ou modo bloqueado).
- Ao gerar: formulário some, drawer lateral abre com progresso (ondas de áudio) e, ao concluir, notificação + texto pronto no drawer.
---
## Tela 4 — Histórico
- Lista paginada com todas as gerações (status, título, subtítulo, formato, data).
- Filtros: período, status, formato, tamanho.
- Clique em um item → tela de detalhe com texto completo, metadados (data, confiança da voz, modo de adaptação) e botões "Copiar" e "Regenerar".
---
## Tela 5 — Voz (Dashboard de Perfil)
- **3 abas:** Visão Geral, Camadas, Saúde.
- **Visão Geral:** Nível de confiança + narrativas sobre o estilo + traits com indicadores.
- **Camadas:** Expressões por formato, evidências dos traits, anti-patterns.
- **Saúde:** Confiança, modo de adaptação, diagnósticos, cobertura por formato + próxima ação recomendada + botão "Gerenciar exemplos".
- Banner quando o perfil está sendo recalculado.
---
## Tela 6 — Configurações
- E-mail (leitura) + Idioma (PT/EN) + Aparência (sistema/claro/escuro).
- Consentimento de treinamento de voz (toggle com confirmação para revogar).
- Botão de logout (com confirmação).
---
## Tela 7 — Planos
- Plano atual em destaque.
- Lista dos 3 planos com nome, descrição, preço (toggle BRL/USD e mensal/anual).
- Método de pagamento: cartão/PIX.
- Botão de upgrade para cada plano (atual com selo "Atual").
- Seção de compra avulsa de créditos.
- Feedback de sucesso/erro no checkout.
---
## Diretrizes Gerais de UI/UX
- **Layout:** Assimétrico, com espaçamento generoso e hierarquia tipográfica forte.
- **Animações:** Transições suaves (ease-in-out, 200ms); loading com ondas de áudio (não spinner).
- **Acessibilidade:** Roles, aria-labels, navegação por teclado.
- **Responsividade:** Mobile-first, com empilhamento vertical no mobile.
- **Bilinguismo:** Landing em PT/EN (rotas separadas); app com toggle de idioma nas configurações.
---
**Gere os protótipos de alta fidelidade para todas as telas descritas acima, seguindo fielmente a identidade visual e a experiência de usuário definidas.**