bear2u/my-skills

Guia de Landing Page V2

Visão Geral

Este skill permite a criação de landing pages marcantes e de alta conversão que combinam:

• Framework de Conversão Comprovado: 11 elementos essenciais do DESIGNNAS para altas taxas de conversão.
• Qualidade de Design Excepcional: Escolhas estéticas ousadas que criam experiências de marca inesquecíveis.
• Código Pronto para Produção: Next.js 14+ com ShadCN UI, TypeScript e otimização de desempenho.

Filosofia: Uma landing page deve converter visitantes E fazer com que eles se lembrem da sua marca. Páginas genéricas e modeladas falham em ambos os objetivos. Este skill garante que suas landing pages sejam funcionalmente eficazes e visualmente extraordinárias.

Quando Usar Este Skill

Use este skill quando os usuários solicitarem:

• Criação de landing pages, páginas de marketing ou páginas de produto.
• Sites promocionais baseados em Next.js ou React.
• Páginas que precisam converter visitantes em clientes E se destacar visualmente.
• Páginas de marketing profissionais com qualidade de design excepcional.
• Landing pages que evitem a estética genérica de "template".
• Experiências de marca que sejam otimizadas para conversão e memoráveis.

Pensamento de Design: Antes de Codificar

Antes de implementar qualquer landing page, comprometa-se com uma direção estética OUSADA que esteja alinhada com a marca e o produto:

1. Entenda o Contexto

• Propósito: Qual problema este produto resolve? Quem é o público-alvo?
• Personalidade da Marca: Esta marca é divertida, profissional, de luxo, minimalista, ousada, técnica?
• Setor: Qual linguagem visual este setor espera (ou devemos quebrá-la)?
• Diferenciação: O que torna esta marca inesquecível? Qual é a ÚNICA coisa que os visitantes lembrarão?

2. Escolha uma Direção Estética

Escolha uma direção extrema e comprometa-se totalmente. Exemplos:

Minimalista & Refinado

• Layouts brutalmente limpos, amplo espaço em branco.
• Tipografia sofisticada com grandes contrastes de escala.
• Paleta de cores monocromática ou limitada (máximo 2-3 cores).
• Micro-interações sutis, transições elegantes.
• Exemplos: Produtos de luxo, serviços profissionais, SaaS premium.

Ousado & Maximalista

• Camadas visuais ricas e complexas.
• Animações dinâmicas e efeitos de rolagem.
• Mesclagens de gradiente, texturas e elementos sobrepostos.
• Paletas de cores vibrantes com alto contraste.
• Exemplos: Agências criativas, entretenimento, marcas jovens.

Retrô-Futurista

• Elementos nostálgicos com execução moderna.
• Padrões geométricos, detalhes em neon.
• Efeitos glitch, scanlines, texturas granuladas.
• Fontes monoespaçadas ou display com personalidade.
• Exemplos: Jogos, startups de tecnologia, ferramentas criativas.

Orgânico & Natural

• Formas suaves e fluidas, gradientes.
• Cores inspiradas na natureza (tons terrosos, pastéis).
• Animações suaves imitando o movimento natural.
• Cantos arredondados, sombras suaves.
• Exemplos: Bem-estar, sustentabilidade, alimentação.

Editorial & Revista

• Hierarquia tipográfica forte.
• Layouts assimétricos que quebram a grade.
• Imagens grandes e impactantes.
• Uso ousado de espaço em branco e espaço negativo.
• Exemplos: Plataformas de conteúdo, mídia, educação.

Brutalista & Cru

• Layouts não convencionais, "feios" intencionais.
• Fontes de sistema ou tipografia deliberadamente básica.
• Alto contraste, cor limitada.
• Mínimo ou nenhuma animação.
• Exemplos: Arte, moda, marcas anti-establishment.

CRÍTICO: Escolha UMA direção clara. Tanto o maximalismo ousado quanto o minimalismo refinado funcionam - o segredo é a intencionalidade, não a intensidade. Execute sua direção escolhida com precisão e consistência em todos os 11 elementos.

3. Defina Seu Sistema de Design

Antes de codificar, defina estas decisões principais:

Escolhas Tipográficas

• Fonte de Destaque: Escolha algo distinto e memorável (NÃO Inter, Roboto, Arial ou fontes do sistema)
  • Considere: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  • Ou use Google Fonts com sabedoria: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  • NUNCA converja para escolhas comuns - varie as fontes em diferentes projetos.
• Fonte de Corpo: Escolha refinada e legível que complemente a fonte de destaque.
  • Considere: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• Escala: Estabeleça uma hierarquia clara (ex.: H1: 4rem → H2: 3rem → H3: 2rem → Corpo: 1rem)

Paleta de Cores

• Cor Dominante: Sua cor primária da marca (60% de uso).
• Cor de Destaque: Cor de alto contraste para CTAs (10% de uso).
• Paleta Neutra: Cinzas ou tons terrosos (30% de uso).
• Estratégia de Fundo: Sólido, gradiente, textura ou padrão?
• Defina como variáveis CSS para consistência.

Estratégia de Movimento

• Carregamento da Página: Revelações escalonadas com animation-delay para elementos do herói.
• Interações de Rolagem: Fade-ups, parallax ou animações acionadas por rolagem?
• Estados de Hover: Escala sUtil, mudança de cor ou transformações dramáticas?
• Animações de CTA: Como os botões atraem atenção sem serem irritantes?

Abordagem Espacial

• Estilo de Layout: Centralizado e simétrico? Assimétrico e dinâmico? Quebra de grade?
• Sistema de Espaçamento: Apertado e denso? Generoso e arejado?
• Fluxo de Seções: Empilhado tradicional? Diagonal? Sobreposto?

O Framework dos 11 Elementos Essenciais

Toda landing page eficaz deve incluir estes 11 elementos essenciais. Eles são baseados no framework comprovado do DESIGNNAS para landing pages de alta conversão.

Cada elemento tem DOIS requisitos:

1. Requisito funcional (para conversão) - Deve ser incluído.
2. Excelência em design (para memorabilidade) - Deve ser distinto e bonito.

Guia de Design Elemento por Elemento

1. URL com Palavras-chave

Funcional: Estrutura de URL descritiva e otimizada para SEO. Design: N/A (foco em SEO).

2. Logotipo da Empresa (Cabeçalho)

Funcional: Identidade da marca posicionada em destaque (canto superior esquerdo). Excelência em Design:

• Considere logotipo animado no carregamento da página.
• Cabeçalho fixo com transições suaves de rolagem.
• Variação da marca do logotipo para diferentes estados de rolagem.
• Fundo do cabeçalho: transparente → sólido com desfoque de fundo.
• Tipografia de navegação que corresponda à sua escolha de fonte de destaque.

3. Título e Subtítulo Otimizados para SEO (Herói)

Funcional: Proposta de valor clara com palavras-chave. Excelência em Design:

• Tipografia: Torne-a ENORME e inesquecível (4rem-6rem+).
• Use sua fonte de destaque distinta aqui.
• Considere texto gradiente, texto contornado ou sombras de texto para impacto.
• Anime as palavras do título com fade-in escalonado (animation-delay).
• O subtítulo deve ter 50% do tamanho do título, com peso ou fonte diferentes.
• Adicione ritmo visual com quebras de linha e espaçamento.

4. CTA Principal (Herói)

Funcional: Botão de call-to-action principal na seção herói. Excelência em Design:

• Torne-o IMPOSSÍVEL de ignorar: tamanho, contraste de cor, posição.
• Evite retângulos entediantes: considere formas de pílula, bordas únicas ou formas geométricas.
• Adicione micro-interações: escala ao passar o mouse, expansão de sombra, mudança de cor.
• Considere CTAs duplos com hierarquia primária/secundária.
• Animação de entrada que chame a atenção (atraso após o título).
• Adicione dicas visuais: setas, ícones ou efeitos pulsantes.

5. Prova Social (Herói)

Funcional: Avaliações, classificações, estatísticas de usuários. Excelência em Design:

• Os números devem ser ENORMES e animados no carregamento (efeito de contagem).
• Cartões de estatísticas com fundos gradientes ou bordas sutis.
• Avatares de clientes em círculos sobrepostos.
• Classificações por estrelas com estilo personalizado (não estrelas amarelas padrão).
• Logotipos "Como visto em" com espaçamento adequado e tratamento de opacidade.
• Considere depoimentos rotativos ou carrossel de prova social animado.

6. Imagens ou Vídeos (Seção de Mídia)

Funcional: Demonstração visual do produto/serviço. Excelência em Design:

• CRÍTICO: Nunca use imagens de placeholder ou genéricas.
• Capturas de tela do produto com mockups de dispositivos (molduras de laptop/telefone).
• Adicione profundidade: sombras, reflexos, efeitos de inclinação 3D.
• Considere: Capturas de tela flutuantes, efeitos de parallax na rolagem, fundos de vídeo.
• Animações de revelação de imagem na rolagem (fade-up, slide-in).
• Para vídeos: Design de botão de reprodução personalizado, brilho de fundo ambiente.
• Layouts de grade: Assimétricos, sobrepostos ou estilo bento box.

7. Benefícios/Recursos Principais

Funcional: 3-6 vantagens principais com ícones. Excelência em Design:

• Ícones: Desenhados personalizados ou cuidadosamente selecionados (NÃO ícones de linha genéricos).
• Considere: Preenchimentos gradientes, ícones animados ao passar o mouse, ilustrações em estilo 3D.
• Variações de design de cartão: glassmorfismo, neumorfismo, bordas gradientes, sombras sutis.
• Animação escalonada conforme o usuário rola para esta seção.
• Layout assimétrico em vez de grade chata de 3 colunas.
• Elementos de fundo: padrões sutis, gradientes ou formas decorativas.
• Tipografia: Títulos de recursos em sua fonte de destaque, negrito e proeminente.

8. Depoimentos de Clientes

Funcional: 4-6 avaliações autênticas com fotos. Excelência em Design:

• Tratamento de foto: Avatares circulares com bordas gradientes ou formas únicas.
• Fundos de cartão: Gradientes sutis, vidro fosco ou sombras elevadas.
• Marcas de citação: Superdimensionadas, decorativas ou com estilo personalizado.
• Layout: Grade masonry, carrossel ou vertical escalonado.
• Estrelas de classificação: Cores personalizadas que combinam com a paleta da marca.
• Efeitos de hover: Levantar, expandir ou brilhar.
• Nomes e cargos dos clientes: Tipografia refinada.

9. Seção de FAQ

Funcional: 5-10 perguntas comuns com interface de acordeão. Excelência em Design:

• Animações de acordeão: Expansão/recolhimento suave com easing.
• Ícones: Chevrons personalizados ou sinais de mais/menos com rotação.
• Estados de hover nas perguntas.
• Tipografia: Perguntas em negrito ou peso de fonte diferente.
• Considere: Layout de duas colunas no desktop, pares de Q&A lado a lado.
• Fundo: Mudança sutil de cor da seção anterior.
• Espaçamento: Preenchimento generoso dentro dos itens do acordeão.

10. CTA Final

Funcional: Call-to-action na parte inferior para uma segunda chance de conversão. Excelência em Design:

• Transforme em um momento de HERÓI: Esta é a última chance.
• Seção de largura total com fundo dramático (gradiente, padrão ou cor).
• Botão de CTA ainda MAIOR que o CTA do herói.
• Adicione urgência: Temporizadores de contagem regressiva, vagas limitadas, indicadores de escassez.
• Cerque-o com cópia convincente e micro-benefícios.
• Animação: Fundo parallax, elementos flutuantes ou efeitos acionados por rolagem.
• Considere: Combinação de campo de e-mail + botão para newsletter/lista de espera.

11. Informações de Contato/Páginas Legais (Rodapé)

Funcional: Rodapé com informações completas, links legais. Excelência em Design:

• Layout de várias colunas com hierarquia de informações clara.
• Ícones sociais: Efeitos de hover (mudança de cor, escala ou rotação).
• Inscrição na newsletter: Campo de entrada estilizado com botão inline.
• Tipografia: Menor, mas ainda legível (14-16px).
• Fundo: Mais escuro que o corpo ou cor distinta.
• Separador do conteúdo: Linha gradiente sutil ou divisor decorativo.
• Barra inferior: Copyright e links legais com espaçamento adequado.

Crítico: Todos os 11 elementos devem ser incluídos em toda landing page. Sem exceções.

Para explicações detalhadas de cada elemento, consulte references/11-essential-elements.md.

Diretrizes de Estética de Design

Excelência em Tipografia

• NUNCA use fontes genéricas: Inter, Roboto, Arial, Helvetica, system-ui.
• Fontes de destaque devem ser distintas e memoráveis.
• Combine com sabedoria: Fonte de destaque para títulos + fonte de corpo refinada para texto.
• Escale dramaticamente: Crie hierarquia clara com saltos de tamanho (não diferenças sutis).
• Espaçamento entre letras: Ajuste para fontes de destaque (geralmente precisa de tracking mais apertado).
• Altura da linha: Destaque = 1.1-1.2, Corpo = 1.6-1.8.

Coerência de Cores e Visual

• Defina variáveis CSS para todas as cores (mantenha a consistência).
• Cor dominante deve aparecer em toda a página (não apenas nos CTAs).
• Cores de destaque devem ter contraste suficiente para acessibilidade (mínimo WCAG AA).
• Evite: Gradientes roxos sobre branco (estética de IA superutilizada).
• Fundos: Crie atmosfera com gradientes, mesclagens, padrões ou texturas.
  • Mesclagens de gradiente: Gradientes suaves multicoloridos.
  • Texturas de ruído: Grão sutil para profundidade.
  • Padrões geométricos: Pontos, linhas ou formas em baixa opacidade.
  • Transparências em camadas: Seções coloridas sobrepostas.

Movimento e Animação

• Carregamento da página: Uma entrada bem orquestrada com revelações escalonadas.
  • Palavras do título do herói aparecem sequencialmente (animation-delay: 0ms, 100ms, 200ms).
  • Subtítulo segue (atraso: 300ms).
  • CTA aparece por último (atraso: 500ms) com ênfase.
• Animações de rolagem: Seções aparecem gradualmente à medida que entram na janela de visualização.
  • Use Intersection Observer API ou acionadores de rolagem do Framer Motion.
  • Cartões aparecem escalonados (cada um com atraso incremental).
• Estados de hover: Surpreenda e encante.
  • Botões: Aumentar escala, expandir sombra, mudar cor.
  • Cartões: Efeito de levantar com sombra.
  • Imagens: Zoom sutil ou parallax.
• Desempenho: Prefira animações CSS em vez de JavaScript.
  • Use transform e opacity (acelerados por GPU).
  • Evite animar width, height, top, left.

Composição Espacial e Layout

• Quebre a grade: Não use como padrão layouts centralizados e simétricos.
• Assimetria: Um lado com texto maior, o outro com visual.
• Elementos sobrepostos: Coloque seções em camadas para profundidade.
• Fluxo diagonal: Divisores angulados entre seções.
• Espaço em branco generoso OU densidade controlada (escolha um e comprometa-se).
• Pensamento no eixo Z: Use sombras, desfoque e camadas para profundidade.

EVITE Estéticas Genéricas de IA

Esses padrões fazem as landing pages parecerem "geradas por IA" e esquecíveis:

NÃO FAÇA:

• ❌ Fontes Inter/Roboto/Arial.
• ❌ Gradientes roxos em fundos brancos.
• ❌ Layouts perfeitamente centralizados e simétricos o tempo todo.
• ❌ Ícones de linha genéricos.
• ❌ Classificações de estrelas amarelas padrão.
• ❌ Botões retangulares entediantes sem personalidade.
• ❌ Fundo branco sem interesse visual.
• ❌ Grades de recursos de três colunas padronizadas.
• ❌ Fotos de stock de pessoas apontando para laptops.

FAÇA:

• ✅ Escolha fontes distintas que combinem com a personalidade da marca.
• ✅ Comprometa-se com uma paleta de cores única (nem sempre roxo!).
• ✅ Crie layouts inesperados com assimetria.
• ✅ Desenhe ou selecione ícones com personalidade.
• ✅ Personalize o estilo de todos os elementos da interface para combinar com a estética.
• ✅ Adicione texturas, gradientes ou padrões de fundo.
• ✅ Varie os layouts entre as seções.
• ✅ Use capturas de tela do produto, ilustrações personalizadas ou fotografia autêntica.

Requisitos de Stack de Tecnologia

Quando...