🦸 Hero Section
O Hero e a primeira coisa que o visitante ve. Voce tem segundos para comunicar: quem voce e, o que faz, e por que o visitante deve ficar.
🧩 Componentes do Hero
Headline
Titulo principal, grande e impactante. O que voce oferece.
Subheadline
Texto de suporte que expande a headline. Para quem e como.
CTA Primario
Botao principal. Acao que voce mais quer que o visitante tome.
Visual/Imagem
Imagem, ilustracao ou video que comunica o valor visualmente.
🖼️ Estrutura de Hero
ACIMA DO FOLD
Headline Principal
Subheadline que explica melhor a proposta de valor e para quem e o produto.
🎯 Vocabulario para Prompts
Use: hero section com headline grande e CTA destacado,
proposta de valor clara acima do fold,
hero centralizado com muito whitespace,
headline + subheadline + CTA.
🧭 Navegacao/Header
O header e o ponto de orientacao constante. Deve ser simples, nao competir com o conteudo, e permitir acesso rapido as paginas principais.
🧩 Elementos do Header
Logo
Canto superior esquerdo. Link para home.
Navegacao Principal
Links para secoes/paginas principais. Maximo 5-7 itens.
CTA do Header
Botao de acao (Login, Comecar, Contato). Opcional mas comum.
✓ Boas Praticas
- ✓ Sticky/fixo no topo (com backdrop-blur)
- ✓ Menu hamburger em mobile
- ✓ Altura entre 56-80px
- ✓ Contraste sutil com conteudo
✗ Evitar
- ✗ Muitos niveis de dropdown
- ✗ Navegacao que desaparece ao rolar
- ✗ Mais de 7 itens no menu
- ✗ Header muito alto (ocupa muito espaco)
🎯 Vocabulario para Prompts
Use: header sticky com backdrop-blur,
logo esquerda, nav centro, CTA direita,
menu hamburger responsivo em mobile,
navegacao simples com 5 itens.
📄 Secoes de Conteudo
Apos o hero, o conteudo e organizado em secoes tematicas. Cada secao aborda um aspecto: features, como funciona, beneficios, pricing, etc.
📋 Secoes Comuns em Landing Pages
Features/Beneficios
Grid de 3-4 cards com icones. O que o produto faz.
Como Funciona
3-4 passos numerados. Simplifica o processo.
Pricing
Tabela de precos. Destaque no plano recomendado.
FAQ
Perguntas frequentes. Accordion expansivel.
📐 Estrutura de uma Secao
Titulo da Secao
Subtitulo opcional que expande o titulo e prepara para o conteudo abaixo.
🎯 Vocabulario para Prompts
Use: secao features com grid 3 colunas,
eyebrow + titulo + subtitulo centralizado,
secao como funciona em 3 passos,
alternancia de fundo entre secoes.
⭐ Prova Social
Pessoas confiam em outras pessoas. Prova social mostra que outros ja usam e aprovam seu produto. E fundamental para converter visitantes em clientes.
🏆 Tipos de Prova Social
Logos de Clientes
"Usado por empresas como..." com logos em grayscale.
Testimonials
Citacoes de clientes com foto, nome e cargo.
Numeros
"10.000+ clientes" ou "4.9 estrelas em 500 reviews".
Case Studies
Historias detalhadas de sucesso com resultados.
💬 Estrutura de Testimonial
"Este produto mudou completamente como trabalhamos. Recomendo para qualquer equipe que quer escalar."
🎯 Vocabulario para Prompts
Use: secao de logos de clientes em grayscale,
testimonials com foto e cargo,
social proof com numeros grandes,
carrossel de reviews.
🎯 CTAs (Call-to-Action)
CTAs sao os momentos de conversao. Cada pagina deve ter um CTA principal claro, e CTAs secundarios podem aparecer ao longo do conteudo.
📋 Tipos de CTA
Primario
Acao principal. Cor de destaque, maior.
Secundario
Alternativa. Outline ou cor neutra.
Ghost/Link
Navegacao. Sem fundo, so texto.
✍️ Copywriting de CTA
✓ Bom
- • Comecar gratis
- • Criar minha conta
- • Ver demonstracao
- • Agendar reuniao
✗ Evitar
- • Clique aqui
- • Enviar
- • Submit
- • OK
🎯 Vocabulario para Prompts
Use: CTA primario com cor de destaque,
botao secundario outline,
copy orientado a acao (Comecar, Criar, Ver),
CTA acima do fold e no final da pagina.
👟 Footer
O footer e o fechamento da pagina. Contem links uteis, informacoes legais e contato. Muitos visitantes rolam ate o fim para encontrar informacoes.
🧩 Elementos do Footer
Logo e Descricao
Breve sobre a empresa. Links para redes sociais.
Links Organizados
Colunas: Produto, Empresa, Recursos, Legal.
Contato
Email, telefone, endereco se relevante.
Legal
Copyright, Termos, Privacidade.
🖼️ Estrutura de Footer
Breve descricao da empresa.
Produto
- Features
- Pricing
- API
Empresa
- Sobre
- Blog
- Carreiras
Legal
- Termos
- Privacidade
- Cookies
🎯 Vocabulario para Prompts
Use: footer com 4 colunas de links,
logo + descricao + redes sociais,
copyright e links legais no rodape,
footer dark com fundo mais escuro.
📝 Resumo do Modulo
🎉 Parabens! Voce completou a Trilha 1
Voce agora domina os fundamentos de design web: hierarquia visual, tipografia, cores, espacamento, Gestalt, responsividade e anatomia de pagina. Na Trilha 2, vamos para padroes e sistemas.