cskwork/landing-page-skill

Construtor de Landing Pages

Visão Geral

Um sistema de design completo + biblioteca de componentes para construir landing pages bonitas e interativas em HTML/CSS/JS puro — sem frameworks, sem etapa de build. Fornece tokens de design CSS reutilizáveis, padrões de interação JS e templates de componentes HTML.

Princípio central: Copie os arquivos do sistema de design, componha seções a partir de templates de componentes e personalize os tokens. Tudo funciona com zero dependências (opcional: Google Fonts CDN).

Quando Usar

• Construir uma landing page de produto, site de marketing ou showcase
• Criar sites de documentação com elementos interativos
• Implantar no GitHub Pages, Netlify ou qualquer host estático
• Necessidade de alternância de tema escuro/claro, animações em scroll, tooltips
• Desejar um design refinado sem React/Vue/ferramentas de build

Quando NÃO usar:

• Aplicações web complexas com gerenciamento de estado (use um framework)
• Páginas renderizadas no servidor (isto é apenas estático)
• Dashboards administrativos internos (exagero)

Referência Rápida

Componente	Arquivo	Classes principais
Tokens de design	design-system/design-system.css	Variáveis :root, --accent-*, --gradient-*
Navbar	components-reference.html	.navbar, .nav-links, .lang-toggle
Hero	components-reference.html	.hero, .hero-title, .gradient-text, .hero-stats
Cartões de recursos	components-reference.html	.feature-grid, .feature-card, .reveal
Blocos de código	components-reference.html	.code-block, .code-header, .code-copy
Tooltips	components-reference.html	.tooltip-trigger, [data-tooltip]
Abas	components-reference.html	.tab-list, .tab-btn, .tab-panel
Alternador de tema	design-system.css + app-template.js	[data-theme], .icon-btn[data-toggle="theme"]
Botões de idioma	design-system.css	.lang-toggle, .lang-btn[data-lang]
Revelação em scroll	app-template.js	.reveal → .visible via IntersectionObserver
i18n	app-template.js	[data-i18n] + dicionário de traduções

Sistema de Design

design-system.css fornece o conjunto completo de tokens para ambos os temas. Ajuste-os para sua marca; leia o arquivo para o resto.

Leia design-system/design-system.css para os tokens de tema escuro/claro mantidos; ajuste-os conforme a marca solicitada em vez de manter uma segunda lista de tokens aqui.

Arquivos

Arquivo	Finalidade
design-system/design-system.css	CSS completo: tokens, navbar, hero, cartões, blocos de código, tooltips, abas, rodapé, responsivo
design-system/app-template.js	JS: revelação em scroll, scroll da navbar, cópia de código, abas, alternância de tema, menu mobile, i18n
design-system/components-reference.html	Todos os componentes com snippets HTML copiáveis
templates/landing-template.html	Template inicial completo — wireframe com todas as seções

Padrão de Tooltip

Tooltips funcionam em desktop (hover) e mobile/touch (toque para alternar). Requer app-template.js para suporte a toque.

<!-- Abre para cima (padrão) -->
<span class="tooltip-trigger" data-tooltip="Explicação útil aqui">
    Passe o mouse
</span>

<!-- Abre para baixo (para gatilhos próximos ao topo da página) -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="Explicação">
    Passe o mouse
</span>

<!-- Variante larga para texto mais longo (quebra em mobile) -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="Explicação longa de várias linhas...">
    Passe o mouse
</span>

Desktop: CSS :hover mostra o tooltip. Mobile/tablet: JS adiciona alternância por toque com fechamento por clique fora. Teclado: Tab para focar, Enter/Espaço para alternar, Escape para fechar.

Os caminhos de toque e teclado funcionam alternando .tooltip-active no gatilho. O CSS do tooltip escrito à mão deve estilizar .tooltip-trigger:hover::after e .tooltip-trigger.tooltip-active::after juntos, caso contrário o toque não faz nada — leia design-system/design-system.css seção 10 (Tooltips) antes de escrever o seu.

Empilhamento: tooltips escapam de seu contêiner via z-index:10 em .feature-card:hover, .code-block:hover e .callout:hover. Mantenha essas regras e recorte cantos arredondados com border-radius no elemento filho (como .feature-card::before faz) — overflow:hidden no contêiner corta o tooltip e nenhum z-index pode salvá-lo.

Fluxo de Build

1. Copie design-system.css, app-template.js e templates/landing-template.html (renomeado para index.html) para seu projeto — todos os três lado a lado, já que o template os referencia pelo nome de arquivo simples
2. Adicione seções de components-reference.html (recursos, blocos de código, abas, callouts, rodapé) no wireframe
3. Personalize tokens em :root (cores, fontes, gradientes)
4. Adicione conteúdo ao HTML, configure chaves data-i18n se for multilíngue
5. Teste localmente — abra index.html em um navegador e percorra cada linha de Erros Comuns abaixo; pronto quando cada linha estiver verificada
6. Entregue os arquivos verificados. Implante somente quando solicitado, usando o host e fluxo de trabalho de repositório acordados.

Implantar no GitHub Pages

Quando a publicação for solicitada, inspecione o repositório existente e a configuração do Pages, prepare os arquivos revisados e siga seu fluxo de trabalho de implantação. Crie um repositório público ou altere a visibilidade somente quando autorizado. Organize os arquivos de saída nomeados, preservando trabalhos não relacionados. Verifique a revisão implantada e o conteúdo ao vivo antes de relatar uma URL pública; HTTP 200 sozinho não é prova visual.

Erros Comuns

Erro	Correção
Nenhuma meta viewport	Adicione <meta name="viewport" content="width=device-width, initial-scale=1.0">
Faltando [data-theme] no <html>	Defina <html data-theme="dark"> para o tema padrão
Elementos de revelação invisíveis	Garanta que app-template.js foi carregado e que .reveal tem lógica .visible correspondente
Revelação dentro de painel de aba oculto	A alternância de aba revela automaticamente; ou remova .reveal do conteúdo da aba
Tooltips cortados no topo	Use a variante .tooltip-bottom para gatilhos próximos ao topo da viewport
Flash de tema ao carregar	Script inline <script> no <head> lendo localStorage.getItem('lp-theme') para data-theme antes da renderização — já está em templates/landing-template.html
Conteúdo sem JS invisível	class="no-js" no <html> + fallback .no-js .reveal { opacity:1 }
Cópia de código não funciona	Verifique se o botão .code-copy existe e o JS foi carregado
Flash de conteúdo não estilizado	Coloque o <link> da fonte no <head> antes da folha de estilo
Faltando estilos de foco	Todos os elementos interativos têm contorno :focus-visible embutido

Acessibilidade

O sistema de design inclui:

• Contornos :focus-visible em todos os elementos interativos (navegação por teclado)
• Consulta de mídia prefers-reduced-motion (desabilita animações)
• Fallback .no-js (conteúdo visível sem JavaScript)
• Rótulos ARIA em botões com apenas ícone
• Estrutura HTML semântica (hierarquia de títulos adequada)
• Tokens de contraste de tema; verifique o contraste após personalização antes de afirmar conformidade com WCAG