whicencer/product-landing

Landing de Produto

Construa um site de marketing de uma página para um único produto em um estilo visual consistente. Os arquivos de seção em references/ contêm as regras detalhadas; este arquivo contém o fluxo de trabalho e as regras compartilhadas por todas as seções.

Fluxo de Trabalho

Etapa 1 — Perguntar (uma mensagem, antes de escrever qualquer código)

Colete as informações essenciais abaixo em uma única mensagem. Pergunte no idioma do usuário.

• Pule cada item que o usuário já forneceu em sua solicitação.
• Se nada estiver faltando, pule esta etapa completamente.
• Ofereça um valor padrão para cada item, para que o usuário possa responder brevemente ou pular.

Item	Padrão se pulado
Nome do produto + o que ele faz em uma frase	— (obrigatório, não pode pular)
4–8 funcionalidades principais	Derivar da descrição do produto
Ação principal: rótulo do botão + link	"Começar agora" → #
Preços: planos, valores, moeda — ou "sem seção de preços"	Sem seção de preços
Cor da marca	#229ED9

NÃO pergunte sobre nome legal, endereço, contatos ou links de páginas legais — use placeholders (veja Etapa 5). NÃO faça rodadas de perguntas adicionais. Após a resposta, construa.

Etapa 2 — Planejar

Decida silenciosamente, sem perguntar:

• Modo de exibição de funcionalidades (agent / command / search / task) — veja references/features.md.
• 1–3 exemplos por funcionalidade, as 3–4 etapas de "como funciona", todos os títulos e textos.

Etapa 3 — Ler as regras da seção

Leia cada arquivo imediatamente antes de construir sua seção, na ordem da página:

1. references/hero.md — barra de navegação + hero
2. references/features.md — showcase de funcionalidades + tabela (usa assets/feature-showcase.js)
3. references/how-it-works.md
4. references/pricing.md — pule se não houver seção de preços
5. references/final-cta.md
6. references/footer.md

Etapa 4 — Construir

Gere esta estrutura de arquivos (a menos que o usuário tenha solicitado um framework):

• index.html

• css/styles.css

• js/main.js

• js/feature-showcase.js

• index.html — apenas marcação. Sem blocos <style>, sem atributos style="" exceto onde um script os define, sem JS inline. O único <script> inline permitido é o bloco JSON de exemplos da seção de funcionalidades.

• css/styles.css — todos os estilos. Começa com os tokens de design em :root, depois as seções na ordem da página, cada uma sob um cabeçalho de comentário (/* ===== Hero ===== */).

• js/main.js — comportamento da página escrito por você (estado da barra de navegação, menu mobile, ano no rodapé, etc.).

• js/feature-showcase.js — copie assets/feature-showcase.js byte por byte. Nunca mescle em main.js ou edite.

• Inclua arquivos assim:

  • <link rel="stylesheet" href="css/styles.css"> em <head>;
  • <script src="js/feature-showcase.js" defer></script> e <script src="js/main.js" defer></script> ao final de <head>.

• Apenas scripts simples — sem type="module", sem imports. A página deve funcionar quando aberta diretamente do disco (file://).

• Apenas caminhos relativos, para que a pasta possa ser enviada para qualquer hospedagem como está.

Etapa 5 — Verificar e relatar

1. Percorra a lista de verificação de cada arquivo de seção e a lista de verificação global abaixo. Corrija o que falhar.
2. Responda ao usuário com uma breve lista de todos os placeholders que ele precisa preencher (nome legal, endereço, contatos, links de páginas legais, links #, preços $XX).

Regras globais

Fatos

Nunca invente fatos sobre o negócio: preços, planos, números, nomes de clientes, depoimentos, nome legal, endereço, e-mails, handles, URLs. Use placeholders óbvios e liste-os na Etapa 5.

Tokens de design

Defina estes como variáveis CSS em :root e use apenas eles:

:root {
  --brand: #229ED9;              /* substituído pela cor da marca do usuário */
  --brand-tint: color-mix(in srgb, var(--brand) 12%, white);
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --surface: #EEEEF1;            /* cartões, placas */
  --bg: #FFFFFF;
  --hairline: rgba(0, 0, 0, 0.08);
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --container: 1040px;
}

• Apenas tema claro. Uma cor de destaque (--brand); todo o resto é preto, cinza e branco.
• Fonte: Inter do Google Fonts (pesos 400, 500, 600, 700, 800).
• Ícones: Phosphor Icons via https://unpkg.com/@phosphor-icons/[email protected] (versão fixa).

Cabeçalho de seção (compartilhado por funcionalidades, como funciona, preços)

• H2: clamp(32px, 5vw, 48px), peso 800, letter-spacing: -0.03em, line-height: 1.05, --text, alinhado à esquerda.
• Subtítulo opcional: 18px, regular, --text-muted, largura máxima ~540px, 12px abaixo.

Espaçamento e ritmo

• Contêiner de conteúdo: max-width: var(--container), preenchimento lateral 24px (16px no mobile).
• Espaço vertical entre seções: clamp(80px, 12vw, 140px).
• Alterne seções pesadas e leves. Nunca coloque duas seções interativas em sequência.

Texto

• Simples, concreto, humano. Frases curtas. Substantivos e números reais.
• Palavras proibidas: seamless, powerful, revolutionary, unlock, supercharge, effortless, cutting-edge.
• Todo o texto da página no idioma solicitado pelo usuário (padrão: o idioma da descrição do produto).

Movimento

• Apenas sutil: elevação ao passar o mouse, transições de 150–250ms, fade-in opcional único ao rolar.
• Tudo respeita prefers-reduced-motion.
• A única animação em loop na página é o pulso da marca no hero (veja references/hero.md). Nenhuma outra animação infinita.

Lista de verificação global

• Apenas as seções listadas na Etapa 3, nessa ordem.
• Apenas cores dos tokens; uma cor de destaque.
• Nenhum fato inventado sobre o negócio; todos os placeholders relatados ao usuário.
• CTA do hero, CTA da barra de navegação e CTA final são a mesma ação.
• Sem rolagem horizontal da página em 375px; tudo legível no mobile.
• Básico de teclado e leitor de tela: botões reais, texto alternativo, estados de foco visíveis.
• Cada <script> inline termina apenas em sua tag de fechamento real: sem </script dentro de código JS, comentários ou strings.
• Arquivos: index.html, css/styles.css, js/main.js, js/feature-showcase.js — nada mais, sem CSS/JS inline.
• js/feature-showcase.js é idêntico a assets/feature-showcase.js.
• O bloco JSON de exemplos não contém texto </script.
• A página funciona quando index.html é aberto diretamente do disco.