# APLICACAO VISUAL POR SECAO DE SITE

Cada secao de pagina tem funcao especifica e aceita visuais especificos. Usar visual errado = secao nao converte.

---

## 1. HERO (above the fold)

### Objetivo
Em **5 segundos** comunicar: "isso e pra mim, e faz X".

### Espaco visual disponivel
- Desktop: 1920x1080 (ou 1440x900)
- Mobile: 414x896 (vertical)
- **Dobra:** primeiros 600px verticais
- Metade superior geralmente e visual, metade inferior e texto+CTA

### Texto maximo
- 1 headline (5-10 palavras)
- 1 sub-headline (10-20 palavras)
- 1 CTA (2-4 palavras)

### Visuais ideais (escolher 1)

**Opcao A — Foto sua em contexto**
- Cria conexao pessoal
- Publico 35+ conecta mais com foto real que ilustracao
- Regra: olhar na camera ou pra headline (direciona olho do visitante)

**Opcao B — Ilustracao que carrega metafora do mecanismo**
- Boa quando voce tem mecanismo visualmente representavel
- Ferramentas IA: Ideogram, Midjourney, Gemini Nano Banana

**Opcao C — Mockup de produto / dashboard**
- SaaS / produto digital
- Mostra o "que o usuario vai ver/receber"

**Opcao D — Video autoplay sem som (loop)**
- Alto impacto
- Testimonial curto ou demonstracao
- Cuidado: peso de pagina

### Anti-patterns de hero
- Carrossel de slides (usuario nao rotaciona, perde)
- Stock photo obvia (destroi credibilidade)
- Video com som automatico (odiado pelo usuario)
- Texto demais (so 3 elementos: headline + sub + CTA)

### Tipos de visualizacao usados
- Ilustracao narrativa (17)
- Mockup (tipo especial de foto)

---

## 2. SOCIAL PROOF (faixa abaixo do hero)

### Objetivo
"Nao sou unica — outros confiam."

### Espaco
Faixa horizontal, alta 80-120px, fundo contrastante.

### Texto maximo
"Mais de 347 alunas" ou "Visto em..." (4-8 palavras)

### Visuais ideais

**Opcao A — Logos de marcas/midias em escala cinza**
- Veja na Claudia, UOL, G1, Exame
- Cinza = "nao queremos destacar elas, so citar"

**Opcao B — Numero gigante + label**
- "347 alunas" | "R$ 12M faturados" | "14 meses no ar"
- Tipografia enorme

**Opcao C — 3-4 rostos em circulos + rating de estrelas**
- Rostos reais (nao avatar)
- Estrelas amarelas ou cor de marca

### Tipos de visualizacao usados
- Dashboard de numeros (12)
- Isotype (15)

---

## 3. DOR / PROBLEMA

### Objetivo
Fazer visitante se identificar. "Isso sou eu."

### Espaco
Secao completa, pode ter 400-600px de altura.

### Texto
- 1 headline provocativa
- 3-5 bullets curtos (maximo 6 palavras cada)
- Opcional: 1 paragrafo de contexto

### Visuais ideais

**Opcao A — Before/After**
- Do "que e" pro "que poderia ser"
- Em numeros, fotos, ou situacao

**Opcao B — Lista de pains com icones**
- 3-5 icones pequenos
- Cada um + frase curta (5-7 palavras)
- Grid de 1 coluna ou 2x2

**Opcao C — Ilustracao de mulher em situacao de frustracao**
- Imagem emocional
- IA: Gemini Nano Banana pra rosto BR natural

**Opcao D — Dashboard de estatistica negativa**
- "73% das empresarias travam em 30k/mes"
- Numero gigante + contexto

### Tipos de visualizacao usados
- Before/After (9)
- Grid de pains (17 + icones)
- Dashboard negativo (12)

---

## 4. MECANISMO / COMO FUNCIONA

### Objetivo (SECAO MAIS IMPORTANTE DA PAGINA)
Explicar teu diferencial em 15 segundos.

### Espaco
Secao grande, 600-800px altura. Merece protagonismo.

### Texto
- 1 headline apresentando o mecanismo
- 1 paragrafo de 2-3 linhas
- Labels curtos no diagrama (1-3 palavras)

### Visuais ideais

**Opcao A — Diagrama simples SVO**
- [Causa] → [Mecanismo] → [Resultado]
- 3 elementos, setas entre

**Opcao B — Flowchart de 3-5 passos**
- Usado se mecanismo e sequencial
- Icones + numeros + labels

**Opcao C — Infografico com metafora**
- Se mecanismo tem metafora forte (enzima, engrenagem)
- Ilustracao da metafora + labels

**Opcao D — Venn de 3 circulos**
- Se mecanismo e intersecao de 3 elementos
- Ex: Schwartz ∩ Bencivenga ∩ Adaptacao BR

### Regra critica
Visual dessa secao e **coluna vertebral do site**. Investir tempo aqui.

### Tipos de visualizacao usados
- Diagrama SVO (1)
- Flowchart (5)
- Venn (2)
- Stepper (8)

---

## 5. BENEFICIOS (NAO features)

### Objetivo
"O que muda na minha vida depois de ter isso."

### Espaco
Grid de cards, 3 ou 4 por linha, 1-2 linhas.

### Texto por card
- 1 titulo (2-4 palavras)
- 1 descricao (1 linha)

### Visuais ideais

**Opcao A — Grid de 3x2 ou 2x3 com icones grandes**
- Icones do MESMO sistema (todos filled ou todos outline)
- Icone grande + titulo curto + 1 frase

**Opcao B — Cards com pequena ilustracao**
- Ilustracoes simples e consistentes
- Storyset / unDraw gratis

### Anti-patterns
- Icones de estilos diferentes (destroi consistencia)
- Beneficios que sao features disfarcadas
- Mais de 6 cards (dilui)

### Tipos de visualizacao usados
- Grid de ilustracoes (17)
- Icon system

---

## 6. PROOF / CASOS

### Objetivo
"Funciona de verdade."

### Espaco
Secao ampla, 600-1000px.

### Texto
Nomes, idades, resultados em numeros. Pouco mais.

### Visuais ideais (combinar)

**A — Dashboard de 3-4 metricas gigantes**
- 347 alunas | 6,3kg media | 89% satisfacao | 14 meses

**B — 3-5 cases com foto + nome + numero + frase curta**
- "Ana, 42, perdeu 7kg em 60 dias"
- Foto real (com autorizacao)

**C — Video-testemunho embedded**
- 30-60s cada
- Autoplay sem som, clicar pra ouvir

**D — Antes/Depois**
- Se visualizavel (peso, copy, etc)

**E — Logos de midia onde apareceu**
- Autoridade por associacao

### Tipos de visualizacao usados
- Dashboard (12)
- Before/After (9)
- Isotype (15)
- Grid de cards (17)

---

## 7. OFERTA / PRECO

### Objetivo
"O que eu levo, quanto e, por que vale."

### Espaco
Secao grande, proxima do fechamento.

### Texto
Aqui pode ter mais — mas com hierarquia forte.

### Visuais ideais

**Opcao A — Stack visual dos bonus**
- Cada bonus com icone + titulo + valor "R$ X" (riscado depois)
- Soma total dos valores em destaque
- "Voce paga apenas R$ Y"

**Opcao B — Comparacao valor real vs preco**
- "Valor total: R$ 12.000 | Voce paga: R$ 2.997"
- Ancora psicologica

**Opcao C — Selo de garantia visual**
- Circulo com "30 dias garantidos"
- Selo estilo medalha

**Opcao D — Tabela comparativa (tipo 10)**
- Se tem multiplos pacotes (basico, premium, vip)

### Tipos de visualizacao usados
- Stack de bonus (grid customizado)
- Comparacao (matriz simples)
- Tabela (10)

---

## 8. FAQ (perguntas frequentes)

### Objetivo
Resolver objecoes sem friccao.

### Espaco
Lista vertical, accordeaos.

### Visuais ideais

**Accordeao simples**
- Pergunta fechada com + ou seta
- Clica, abre resposta
- Icones sutis pra categorizar (opcional)

### Regra
Perguntas sao texto; respostas curtas.

---

## 9. CTA FINAL

### Objetivo
Fechar.

### Espaco
Secao dedicada, final da pagina.

### Visuais ideais

**A — Botao gigante com cor de destaque**
- Contraste maximo com fundo
- Texto direto ("Quero entrar", "Garantir minha vaga")

**B — Contagem regressiva (se escassez real)**
- Dias:Horas:Minutos:Segundos

**C — Foto tua sorrindo ao lado**
- Reforca conexao pessoal na decisao

**D — Selo de garantia**
- Tranquiliza risco

---

## ESTRUTURA COMPLETA DE PAGINA DE VENDAS (resumo)

```
┌────────────────────────────────────┐
│ 1. HERO                             │
│    Foto/ilustracao + Headline + CTA │
├────────────────────────────────────┤
│ 2. SOCIAL PROOF (faixa)            │
│    Logos/numeros                    │
├────────────────────────────────────┤
│ 3. DOR                              │
│    Ilustracao + bullets             │
├────────────────────────────────────┤
│ 4. MECANISMO                        │
│    Diagrama + explicacao            │
├────────────────────────────────────┤
│ 5. BENEFICIOS                       │
│    Grid de icones + titulos         │
├────────────────────────────────────┤
│ 6. PROOF                            │
│    Dashboard + cases + video        │
├────────────────────────────────────┤
│ 7. OFERTA                           │
│    Stack bonus + preco + garantia   │
├────────────────────────────────────┤
│ 8. FAQ                              │
│    Accordeao                        │
├────────────────────────────────────┤
│ 9. CTA FINAL                        │
│    Botao + foto + urgencia          │
└────────────────────────────────────┘
```

---

## ADAPTACAO MOBILE

Regras obrigatorias:

- **Hero:** foto/ilustracao acima, texto abaixo (nao lado a lado)
- **Mecanismo:** diagrama vertical (nao horizontal)
- **Grids:** 2 colunas mobile max (nunca 3-4)
- **Tabelas:** converte em cards stackados
- **CTA:** sticky no bottom em mobile (sempre visivel)
- **Fonte:** minimo 16px corpo, 14px legal

---

## CHECKLIST POR SECAO

Antes de aprovar pagina, cada secao precisa:

- [ ] 1 objetivo claro
- [ ] Maximo texto respeitado
- [ ] Visual correspondente ao objetivo
- [ ] Responsive mobile funcional
- [ ] Contraste WCAG
- [ ] Hierarquia visual clara
- [ ] Principios dos 10 respeitados
- [ ] Integra com secao anterior e proxima (transicao suave)

Se falhar algum → ajustar antes de publicar.
