Habilidade de Landing Page para Startup
Categoria: SaaS / Startup Gera uma página de destino inicial de alta conversão para startups: hero, funcionalidades, prova social, preços e CTA. O objetivo é comunicar o valor em 30 segundos e obter o e-mail.
Metadados
Nome: startup-landing Descrição: Página de destino inicial de página única para startup: hero, funcionalidades, prova social, preços e CTA. Palavras-chave de Gatilho: "startup landing", "página de marketing", "lançamento de produto", "landing SaaS", "página de destino"
Entradas e Parâmetros
| Parâmetro | Tipo | Obrigatório | Padrão |
|---|---|---|---|
product_name | string | ✓ | — |
tagline | string | ✓ | — |
description | string | ✓ | — |
has_pricing | boolean | ✓ | true |
has_testimonials | boolean | — | true |
proof_count | integer | — | 4 |
pricing_tiers | array | — | [3 faixas padrão] |
primary_color | string | — | DESIGN.md accent |
Faixa de preço:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
Seções Obrigatórias (em ordem)
- Navegação — Logotipo + links de navegação + botão CTA "Começar Agora"
- Hero — Nome do produto, tagline, descrição, CTAs duplos (principal: "Comece Gratuitamente", secundário: "Ver Demonstração"), captura de tela/mockup opcional do produto
- Faixa de Prova Social — Linha de logotipos (em tons de cinza, máximo 6)
- Funcionalidades — Grade de 3 colunas, cada uma com ícone + título + descrição
- Como Funciona — Fluxo horizontal de 3 etapas com etapas numeradas
- Preços — 3 cartões de faixa (Iniciante / Profissional / Empresarial)
- Depoimentos — 2-3 citações com nome, cargo, empresa, avatar
- Faixa de CTA — Seção escura: título + campo de e-mail + botão
- Rodapé — Links + copyright
Regras de Design
- Responsivo mobile-first
- Todos os CTAs devem ter href funcional ou action de formulário
- Cartões de preço: cartão destacado tem borda distinta + sombra
- Avatares de depoimentos: use
https://i.pravatar.cc/60?img=[n]para placeholders consistentes - Sem JS externo
- Todo CSS inline no bloco
<style> - Nenhuma cor inventada — use apenas os tokens do DESIGN.md
Saída
Arquivo único: index.html (auto-contido)
Auto-verificação
- Nenhum lorem ipsum em lugar algum
- Pelo menos 4 funcionalidades listadas
- Faixas de preço têm altura consistente
- Todos os CTAs estão claramente rotulados e estilizados
- Mobile: colapsa para coluna única
- Campo de e-mail na faixa de CTA tem
type="email"erequired