Landing Page

O que Landing Page faz?

Crie páginas de destino bonitas e responsivas em minutos.

Quando Usar

• Lançando um novo produto ou funcionalidade
• Criando uma página de marketing ou promocional
• Construindo um portfólio ou site pessoal
• Criando uma página de inscrição ou lista de espera
• Prototipando um conceito de produto rapidamente

Como Funciona

1. Seções da Página

Toda landing page eficaz segue esta estrutura:

┌─────────────────────────────┐
│  Navegação (logo + links)    │
├─────────────────────────────┤
│  Hero (título + CTA)         │
├─────────────────────────────┤
│  Prova Social / Logos        │
├─────────────────────────────┤
│  Recursos (3-4 cards)        │
├─────────────────────────────┤
│  Como Funciona (3 etapas)    │
├─────────────────────────────┤
│  Depoimentos                 │
├─────────────────────────────┤
│  Preços (opcional)           │
├─────────────────────────────┤
│  CTA (repetir ação principal)│
├─────────────────────────────┤
│  Rodapé                      │
└─────────────────────────────┘

2. Seção Hero

O Hero define o sucesso ou fracasso da página. Mantenha-o simples:

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* Badge */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        Agora em beta público
      </div>

      {/* Título — uma proposta de valor clara */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        Entregue seu produto <span className="text-blue-600">10x mais rápido</span> com IA
      </h1>

      {/* Subtítulo — apoie o título */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Pare de escrever código repetitivo. Deixe a IA cuidar do trabalho tedioso
        enquanto você foca no que realmente importa.
      </p>

      {/* CTA — uma ação principal */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          Comece Grátis
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          Ver Demonstração
        </a>
      </div>
    </section>
  )
}

3. Cards de Recursos

const features = [
  { icon: '⚡', title: 'Rápido como um Raio', description: 'Implante em segundos, não em horas' },
  { icon: '🔒', title: 'Seguro por Padrão', description: 'Segurança de nível empresarial integrada' },
  { icon: '📊', title: 'Analytics', description: 'Insights em tempo real sobre seus dados' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">Tudo que você precisa</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. Princípios de Design

• Um CTA por seção — não sobrecarregue com opções
• Espaço em branco é seu amigo — preenchimento generoso (py-20, gap-8)
• Largura máxima no texto — nunca deixe o texto ocupar a largura total (max-w-3xl)
• Hierarquia visual — maior = mais importante, use font-bold com moderação
• Mobile-first — projete para mobile, aprimore com breakpoints md: e lg:
• Carregamento rápido — use next/image, minimize JS, evite bibliotecas pesadas

5. Configuração Rápida

# Caminho mais rápido: Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

Checklist de Qualidade

• Parece bom no mobile (verifique na largura 375px)
• Título do Hero é claro e conciso (< 10 palavras)
• Um CTA óbvio acima da dobra
• Página carrega em < 2 segundos
• Todos os links e botões funcionam
• Favicon e meta tags configurados

Exemplos

> Crie uma landing page para uma ferramenta de escrita com IA
> Crie uma página de lista de espera com inscrição por e-mail para um aplicativo móvel
> Crie uma landing page de portfólio com vitrine de projetos