Prompt para landing page Dark SaaS com Direct Response

# Prompt: landing page estilo "Dark SaaS / Direct Response"

> **Como usar:** salve como `CLAUDE.md` na raiz do projeto (fica ativo em todas as sessões) ou cole no início da conversa. Preencha só o bloco `BRIEF` — o resto é fixo.

---

## BRIEF

- **Produto:** `<o que é>`
- **Público:** `<quem compra / usa>`
- **Job da página:** `<a única ação que a página precisa gerar>`
- **Cor de marca:** `<#hex primário>` / `<#hex secundário, se houver>`
- **Stack:** `<HTML+CSS puro | React+Tailwind | Next.js | outro>`
- **Restrições:** `<ex: CSS precisa sobreviver a override de tema, sem box-shadow, etc>`

---

## Direção de arte

Referência: escola de landing page de infoproduto brasileira (Othon Ciparoni / Atomik) cruzada com dark SaaS moderno (Vercel, Linear, Framer).

### Tokens

Defina primeiro um bloco de CSS custom properties e derive **todas** as decisões dele. Nada de hex solto no meio do código.

```
--bg          #0A0A0B  (quase preto, nunca #000)
--surface     #131316  (cards, 1 degrau acima do bg)
--border      rgba(255,255,255,.08)
--text        #FAFAFA
--text-muted  #A1A1AA
--accent      <cor de marca>
--accent-2    <variação clara do accent, pro gradiente>
```

Regra de cor: **um** acento saturado sobre neutros escuros. O acento aparece em CTA, eyebrow, palavra destacada do título e glow — em mais nada.

### Tipografia

- Display: sans geométrica pesada (Satoshi, Sora, Archivo, Clash Display, Poppins). `font-weight: 700–800`, `letter-spacing: -0.02em` a `-0.04em`, `line-height: 1.05–1.15`.
- Body: sans neutra (Inter, Manrope). `line-height: 1.6`, cor `--text-muted`.
- Escala fluida com `clamp()`. H1 entre 40px e 72px.
- **Assinatura tipográfica:** em cada título, uma palavra-chave recebe tratamento diferente — itálico, `--accent`, ou gradiente. Uma só por título.

### Ritmo de seção

Toda seção segue a mesma anatomia. É isso que dá coesão:

```
[ EYEBROW ]        ← caixa alta, 12–13px, letter-spacing .12em, cor --accent
Título grande      ← 1 palavra destacada
Subtítulo          ← 1–2 linhas, --text-muted, max-width ~60ch
[ mídia | grid | cards ]
```

Padding vertical: `clamp(80px, 10vw, 140px)`. Container: `max-width: 1200px`.

### Efeitos

- **Glow ambiente:** gradiente radial em pseudo-elemento posicionado atrás do conteúdo, `filter: blur(80–140px)`, opacidade baixa. Um por seção, no máximo.
- **Bento grid:** para blocos de features. Cards de tamanhos diferentes em `grid-template-areas`, borda `--border`, raio 16–24px.
- **Divisores de seção:** SVG em curva ou diagonal na transição entre blocos de cor diferente.
- **Mockups:** device/browser frame com perspectiva sutil, nunca imagem crua.
- Motion: revelação no scroll com `IntersectionObserver` (fade + translateY 16px, stagger 60ms) e hover nos cards. Nada além disso. Respeite `prefers-reduced-motion`.

---

## Estrutura da página

Ordem padrão. Corte o que não servir ao brief, mas não invente ordem nova:

1. **Hero** — promessa concreta + subtítulo explicativo + 1 CTA. Sem menu poluído.
2. **Problema** — nomeia a dor do público em uma frase.
3. **Benefícios** — 3 a 5 blocos alternados texto/mídia (z-pattern), cada um com eyebrow próprio.
4. **Grid de features** — o "e tem muito mais", em bento ou cards uniformes.
5. **Prova** — números, logos, depoimentos ou autoridade.
6. **Oferta** — planos lado a lado, um destacado. Ancoragem de preço explícita.
7. **Autoridade** — foto + fala do fundador/time.
8. **FAQ** — acordeão, cada pergunta quebrando uma objeção real.
9. **CTA final** + rodapé (CNPJ, política, termos).

---

## Regras técnicas

- Mobile-first. Testar em 375px, 768px, 1440px.
- HTML semântico: `<section>`, `<h1>` único, hierarquia de heading correta.
- Foco de teclado visível. `aria-expanded` no acordeão. Contraste mínimo 4.5:1 no texto corpo.
- Imagens em `.webp`, `loading="lazy"`, `width`/`height` explícitos.
- Fontes com `font-display: swap`, preload da display.
- Sem dependência externa a menos que o brief peça. Zero jQuery.
- CSS: cuidado com especificidade — não crie regras de padding em `.section` e `.cta` que se anulam.

---

## Não faça

- Mais de um acento cromático.
- Glow/gradiente em toda seção — vira sopa.
- Marcadores numerados (01/02/03) se o conteúdo não for uma sequência real.
- Emoji como ícone. Use SVG inline.
- Genérico de IA: fundo creme `#F4F1EA` + serifa alta + terracota `#D97757`; ou preto com verde-limão ácido. São defaults, não escolhas.
- Copy vazia ("soluções inovadoras", "eleve seu negócio"). Escreva o benefício concreto, em voz ativa, com o vocabulário do público.

---

## Como quero que você trabalhe

1. **Antes de codar**, me mostre um plano curto: paleta (4–6 hex nomeados), par tipográfico com justificativa, wireframe em ASCII das seções, e **qual é o elemento-assinatura** da página — a coisa única que vão lembrar.
2. Critique o próprio plano: se alguma parte é o que você faria pra qualquer brief parecido, troque e me diga o que mudou.
3. Só então escreva o código, derivando tudo do plano.
4. No fim, revise o resultado contra esta lista e me diga o que ficou fora.

Copy: se eu não fornecer os textos, escreva você — específico, verbo ativo, sentence case, sem enrolação. É material de design, não preenchimento.