ko-system/página-de-destino

Página de destino

Uma landing page tem um trabalho: mover um visitante específico para uma única ação. Cada seção constrói o caso para essa ação ou remove uma razão para não realizá-la. Decida a ação primeiro, depois projete.

1. Decida antes de construir

Escreva estas informações (em DESIGN.md se o aplicativo tiver um) antes de tocar em JSX:

• Público-alvo: quem chega aqui e o que já sabe.
• Ação primária: um verbo ("Iniciar teste gratuito", "Reservar uma mesa", "Solicitar orçamento"). Cada página tem exatamente um rótulo de CTA primário; repita-o, não varie.
• Ação secundária: opcional e de menor compromisso ("Ver preços", "Assistir demonstração").
• Prova que você realmente tem: números reais, nomes de clientes, citações, avaliações. Nunca invente depoimentos, logotipos, contagens de usuários ou preços. Se o proprietário não os forneceu, deixe a seção de fora ou use um TODO claramente marcado nos dados de conteúdo, nunca na cópia visível.

2. Ordem das seções (padrão)

#	Seção	Propósito	Bloco
1	Cabeçalho	Marca, 3-5 links de navegação, CTA primário	SiteHeader
2	Herói	Promessa + CTA primário acima da dobra	Hero
3	Faixa de prova	Logotipos, avaliação ou um número duro	LogoMarquee ou estatísticas inline
4	Problema/resultado	Por que o status quo prejudica, o que muda	Section + SectionHeader
5	Recursos	3-6 benefícios, cada um vinculado a um resultado	FeatureGrid ou BentoGrid
6	Como funciona	3-4 etapas quando o processo é desconhecido	StepList
7	Depoimentos	Citações reais com nome e cargo	Testimonials
8	Preços	Planos, ou preço "a partir de" e o que está incluído	PricingTable
9	FAQ	Objeções respondidas de forma clara	Faq
10	CTA final	Reafirme a promessa + mesmo CTA primário	CtaBand
11	Rodapé	Contato, legal, links secundários	SiteFooter

Remova seções que não têm conteúdo real. Uma página curta e honesta é melhor do que uma longa e inchada. Mantenha as seções 1, 2, 5 e 10 no mínimo.

3. Regras do herói

• Exatamente um <h1> na página, dentro do herói. Hero já renderiza seu title como h1; não adicione outro h1 em outro lugar. Títulos de seção são h2.
• O título declara o resultado para o público em menos de ~10 palavras. O subtítulo (uma ou duas frases, com menos de ~25 palavras) diz como, para quem ou o que o torna diferente.
• CTA primário visível sem rolagem em 375x667 e 1280x800. Coloque-o na prop actions do Hero; aponte para o destino real (rota, mailto:, tel:, âncora de formulário), nunca href="#".
• Mídia: uma captura de tela real do produto, foto ou ilustração que mostre o resultado. Defina width/height explícitos na imagem e não carregue preguiçosamente a imagem do herói (geralmente é o elemento LCP).
• Linha de confiança opcional abaixo do CTA: "Sem cartão de crédito", "4,8/5 de 1.200 avaliações".

4. Hierarquia de texto

1. Título (h1): resultado. 2. Subtítulo: mecanismo ou público. 3. CTA: verbo + objeto.
2. Títulos de seção (h2): declarações de benefícios, não rótulos ("Feche os livros em um dia", não "Recursos").
3. Corpo: parágrafos curtos, com menos de ~80 caracteres por linha (max-w-prose ou max-w-xl).

Escreva texto específico e simples no idioma do aplicativo. Sem lorem ipsum, sem "Revolucione seu fluxo de trabalho", sem "Recurso 1". Veja references/copy-formulas.md.

5. Layout e ritmo visual

• Use tokens semânticos (bg-background, bg-secondary, text-muted-foreground), nunca classes de paleta brutas. Alterne Section tone="muted" para separar blocos em vez de adicionar bordas e sombras em todos os lugares.
• Varie as formas das seções: uma grade, depois uma imagem/texto dividido, depois uma citação em largura total. Evite uma página que seja apenas grades de cartões idênticas empilhadas.
• Um elemento ousado por página (o visual do herói ou um tratamento de tipo). Mantenha o resto calmo.
• Agrupe grupos de conteúdo em <Reveal> com atraso escalonado delay={index * 80}; BentoGrid, Testimonials e PricingTable já se revelam.
• Mobile primeiro: coluna única abaixo de md, botões de CTA em largura total em telefones (w-full sm:w-auto), alvos de toque de pelo menos 44px.

6. Detalhes de conversão

• Repita o CTA primário após os recursos ou preços e no CtaBand final.
• Navegação por âncora: dê ids às seções (<Section id="pricing">) e vincule a #pricing; adicione scroll-mt-20 para que o cabeçalho fixo não cubra os títulos.
• Formulários na página: peça o mínimo (e-mail, ou nome + telefone). Mostre validação inline e um estado de sucesso claro (veja o skill de validação de formulários).
• Preços: mostre a moeda e o período de cobrança, destaque um plano e informe o que acontece após o clique (duração do teste, cancelamento).
• Acessibilidade: foco visível, texto alternativo em imagens significativas, contraste 4,5:1, botões que dizem o que fazem.

7. Lista de verificação concluída

• Um h1, no herói; títulos de seção são h2 em ordem.
• CTA primário acima da dobra em dispositivos móveis e desktop, apontando para um destino real.
• Cada afirmação, número, logotipo e citação são reais ou a seção é removida.
• Imagem do herói tem width/height e não é lazy; outras imagens são lazy.
• Título da página e meta descrição definidos (veja o skill seo-metadata).
• Verificado nas larguras 375px, 768px e 1280px com uma captura de tela.
• Executou audit_landing_sections e corrigiu falhas.

Script

audit_landing_sections lê o arquivo da página e os componentes locais que ele importa. Args (todos opcionais): { "file": "src/pages/Index.tsx" }. Sem file, ele tenta src/pages/Index.tsx, app/page.tsx, src/app/page.tsx, pages/index.tsx e src/pages/index.tsx. Ele retorna checks (pass, warn ou fail), sections detectadas e placeholders. É heurístico: confirme falhas lendo o código antes de alterar qualquer coisa.