Sites & Landing Pages
Claude 3.5 Sonnet
Landing Page Neobrutalista de Alta Conversão
Landing page neobrutalista com sombras duras, hero com badge animado, Bento Grid e FAQ sanfona.
2cópias
0joinhas
0favoritos
O prompt
Atue como um Designer UI/UX de elite e Engenheiro Frontend. Crie o código HTML completo de uma Landing Page Neobrutalista de altíssima conversão para o produto {{nome_produto}}.
Parâmetros:
- Nome do Produto: {{nome_produto}}
- Proposta de Valor: {{proposta_valor}}
- Cor de Destaque: {{cor_destaque}}
Requisitos de Design e Estrutura:
1. Estilo Neobrutalista: Bordas pretas sólidas (2px/3px solid #0f172a), sombras duras projetadas (8px 8px 0 #0f172a), cores fortes com {{cor_destaque}} nos CTAs e badges, tipografia contrastante.
2. Seção Hero: Badge de novidade pill, headline magnética focada em {{proposta_valor}}, CTA duplo ('Começar Agora' e 'Ver Demonstração') e prova social de clientes.
3. Seção Bento Grid: Grade assimétrica destacando 4 recursos-chave com cartões coloridos, ilustrações SVG e micro-interações hover.
4. Seção de Depoimentos: Carrossel horizontal com 3 depoimentos (avatar, nome, cargo e frase curta) navegável por setas em JavaScript puro.
5. Seção de Preços: Cards com destaque para o plano mais popular e lista de benefícios com ícones de check.
6. Seção de Perguntas Frequentes (FAQ): Accordion interativo em JavaScript puro sem dependências pesadas.
7. CTA Sticky: Barra fixa no rodapé da viewport, visível após o scroll do hero, com botão 'Começar Agora' para conversão contínua.
8. Rodapé completo com links institucionais e copyright.
Como usar
- Substitua {{nome_produto}}, {{proposta_valor}} (uma frase) e {{cor_destaque}} (hex, ex.: #ff6c00).
- Cole no Claude — o prompt foi calibrado para modelos com bom senso de design.
- Salve como index.html e abra no navegador: tudo funciona sem build (carrossel e accordion em JS puro).
- Para adaptar à sua marca, troque a cor de destaque na variável CSS do topo e substitua as ilustrações SVG.
Exemplo de saída
HTML completo (~450 linhas): hero com badge pill animado e CTA duplo, bento grid assimétrico com 4 recursos e micro-interações hover, carrossel de depoimentos em JS puro, seção de preços destacando o plano popular, FAQ accordion e barra sticky de CTA que aparece após o scroll do hero.