landing-page

Página de Destino (Landing Page)

Produza um único arquivo HTML autocontido que pareça dirigido por design, não gerado. O exemplo em examples/ (pulse-landing.html) é a referência de qualidade. Corresponda ao seu nível de especificidade: cópia com sensação real, espaçamento deliberado, um destaque.

Antes de construir

Colete ou invente (e mantenha consistentes) estas cinco entradas:

1. Produto em uma frase: o que é e o que faz.
2. Público: uma pessoa específica, não "todo mundo".
3. A ação principal única (inscrever-se, comprar, baixar, entrar na lista de espera).
4. Um ponto de prova: um número, uma citação ou um resultado concreto. Se o usuário não tiver nenhum, use um mecanismo ("funciona offline", "nenhuma conta necessária") — nunca invente depoimentos ou estatísticas.
5. Tom: escolha um — tranquilo/premium, ousado/forte, caloroso/humano, técnico/preciso.

Se o usuário forneceu um produto e um público, não faça mais perguntas. Tome decisões razoáveis e anote-as em uma linha no final.

Tokens de design (sistema padrão — "Tinta & Citrinos")

Use estes a menos que o usuário forneça cores da marca. Altere todos os valores em um lugar: o bloco :root.

:root{
  --bg:#0F1013;        /* fundo da página */
  --panel:#17181D;     /* superfícies elevadas */
  --line:#26272E;      /* linhas finas, bordas */
  --ink:#F4F2EA;       /* texto principal */
  --muted:#9BA0A6;     /* texto secundário */
  --accent:#D9F24F;    /* UM destaque — botões, destaques */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

Regras que fazem parecer projetado:

• Uma cor de destaque. Tudo que é clicável ou importante a usa; nada mais compete. Sem gradientes arco-íris, sem gradiente roxo-azul "de IA".
• A tipografia faz o trabalho. Título com 56–72px, peso 800, espaçamento entre letras ligeiramente negativo (-0.02em). Corpo com 17–18px, altura de linha 1.6. Rótulos em versaletes (12px, espaçamento entre letras 0.12em, maiúsculas, muted) acima dos títulos.
• Espaçamento em múltiplos de 8. Padding da seção com 96px topo/base no desktop. Se um espaço parece arbitrário, parece gerado.
• Linhas finas em vez de sombras. Separe as seções com bordas de 1px --line, não com sombras projetadas ou cartões flutuantes sobre fundos coloridos.
• Números como design. Números grandes de estatísticas (48px+) na cor de destaque ou ink, com rótulos pequenos muted. No máximo uma linha de três estatísticas.

Receita da página (nesta ordem)

1. Barra superior — marca à esquerda, dois ou três links de texto simples, um botão de destaque (a ação principal). Borda inferior fina.
2. Herói — rótulo em versaletes (categoria), título, uma frase de apoio (máx. 22 palavras), botão primário + um link secundário discreto. À direita ou abaixo: um visual do produto feito com CSS (uma janela simulada, um agrupamento de cartões de estatísticas, uma composição tipográfica). Nunca uma caixa de placeholder cinza vazia.
3. Faixa de logotipos/prova — uma linha: "Usado por…" com marcas de texto, ou a linha de estatísticas de prova. Pule completamente se não houver prova honesta.
4. Problema → mudança — duas colunas: o jeito antigo (sensação muted, riscado) vs. o jeito do produto. Linhas curtas, sem parágrafos com mais de 3 linhas.
5. Funcionalidades — exatamente três ou quatro. Cada uma: número em versaletes (01–04), título, descrição de duas linhas. Grade com divisores de linhas finas, não seis cartões de ícones idênticos.
6. Como funciona — três etapas numeradas, uma linha cada.
7. Preços ou oferta — se o usuário deu um preço: um plano destacado, o que está incluído como uma lista de verificação, o botão de ação principal. Se não houver preço: uma faixa de lista de espera/CTA.
8. FAQ — no máximo quatro perguntas, escritas contra objeções reais (preço, esforço, troca, "isso é para mim?").
9. Faixa de CTA final — bloco de fundo de destaque, texto na cor ink, título repete a promessa principal com palavras diferentes, um botão.
10. Rodapé — marca, uma linha de posicionamento, links pequenos. Sem mapa do site.

Regras de cópia

• Fórmula do título: [resultado específico] para [pessoa específica], ou uma afirmação concreta que o produto pode sustentar. "Recupere suas noites, corredores" — não "Bem-vindo ao futuro da produtividade".
• Cada seção deve conter pelo menos um substantivo concreto e um número ou nome. Adjetivos vagos ("perfeito", "poderoso", "revolucionário", "de ponta", "próximo nível") são proibidos.
• Botões dizem o que acontece: "Comece grátis", "Obter o modelo", "Entrar na lista de espera". Nunca "Saiba mais" como ação principal.
• Escreva como o criador do produto, primeira pessoa do plural com moderação ("construímos isso porque…"), nunca linguagem corporativa de "soluções".

Anti-padrões (o "visual de IA" — nunca faça isso)

• Fundos de herói com gradiente roxo/azul ou texto gradiente.
• Três cartões idênticos com emoji ou ícones SVG genéricos em círculos.
• Cópia estilo "🚀 Turbine seu fluxo de trabalho", pontos de exclamação em títulos.
• Lorem ipsum, "Recurso Um / Recurso Dois", placeholders de fotos de stock.
• Tudo centralizado. Misture blocos de texto alinhados à esquerda com visuais deslocados.
• Mais de duas famílias/pesos de fonte, ou mais de uma cor de destaque.
• Depoimentos falsos, logotipos falsos, estatísticas inventadas. Nunca.

Regras técnicas

• Um arquivo HTML, CSS em <style>, sem recursos externos, exceto um link do Google Fonts (Inter ou a fonte da marca do usuário). Nenhum JavaScript obrigatório, exceto um alternador de FAQ opcional.
• Tags semânticas: header, main, section, footer. Um <h1> real uma vez.
• Responsivo: coluna única abaixo de 760px, visual do herói abaixo da cópia, alvos de toque com pelo menos 44px.
• Mantenha o arquivo abaixo de ~700 linhas. Se precisar de mais, a página está fazendo demais — corte uma seção.

Lista de verificação de QA (execute antes de entregar)

• Uma cor de destaque, usada consistentemente; sem gradientes, exceto um sutil desbotamento de fundo no mesmo matiz.
• O título contém um resultado concreto e um público ou mecanismo específico.
• Cada número na página veio do usuário ou da mecânica real do produto.
• Nenhuma palavra proibida: perfeito, turbinar, revolucionar, de ponta, próximo nível, desbloqueie seu potencial.
• Lê corretamente em 390px de largura sem rolagem horizontal.
• A ação principal aparece pelo menos três vezes (barra superior, herói, faixa final).