Camilexx/enviosxpress-web

🚀 Skill de Landing Page CRO

Crie landing pages que convertem visitantes em clientes. Cada elemento é baseado em psicologia de conversão e padrões comprovados.

---

Referência Rápida

HIERARQUIA DE CONVERSÃO (verifique nesta ordem):
1. Proposta de valor clara em 5 segundos? → Manchete do herói
2. CTA visível acima da dobra? → Posicionamento do botão
3. Prova social presente? → Depoimentos, logotipos, números
4. Objeções abordadas? → FAQ, garantias
5. Fricção minimizada? → Campos de formulário, velocidade de carregamento

---

Arquitetura da Seção (De Cima para Baixo)

FLUXO IDEAL DE LANDING PAGE:
┌─────────────────────────────────────────┐
│  1. NAVBAR — Logotipo + Nav + Botão CTA │
├─────────────────────────────────────────┤
│  2. HEROI — Manchete + Sub + CTA + Img  │
│     (acima da dobra, < 3 segundos)      │
├─────────────────────────────────────────┤
│  3. BARRA DE PROVA SOCIAL — Logos / Núm.│
├─────────────────────────────────────────┤
│  4. PROBLEMA — Pontos de dor (formato PA)│
├─────────────────────────────────────────┤
│  5. SOLUÇÃO — Seu produto como resposta │
├─────────────────────────────────────────┤
│  6. RECURSOS — 3-6 benefícios principais│
├─────────────────────────────────────────┤
│  7. COMO FUNCIONA — 3 etapas            │
├─────────────────────────────────────────┤
│  8. DEPOIMENTOS — Citações de usuários  │
├─────────────────────────────────────────┤
│  9. PREÇOS — Planos + Comparação        │
├─────────────────────────────────────────┤
│ 10. FAQ — Tratamento de objeções        │
├─────────────────────────────────────────┤
│ 11. CTA FINAL — Último impulso de conv. │
├─────────────────────────────────────────┤
│ 12. RODAPÉ — Links + Legal + Contato    │
└─────────────────────────────────────────┘

---

Padrões de Seção Herói

Padrão 1: Herói Dividido (Manchete à Esquerda, Visual à Direita)

<section class="hero">
  <div class="hero-grid">
    <!-- Esquerda: Copy -->
    <div class="hero-content">
      <span class="hero-badge">🚀 Novo em 2026</span>
      <h1 class="hero-title">
        Envie pacotes para
        <span class="text-gradient">todo o Brasil</span>
        a partir de R$ 2,50
      </h1>
      <p class="hero-subtitle">
        O serviço de courier mais rápido e confiável. 
        Entrega em 24-48h com rastreamento em tempo real.
      </p>
      <div class="hero-actions">
        <a href="#cotizar" class="btn btn-primary btn-lg">
          Solicitar orçamento grátis
          <svg><!-- ícone de seta --></svg>
        </a>
        <a href="#como-funciona" class="btn btn-secondary btn-lg">
          Ver como funciona
        </a>
      </div>
      <div class="hero-proof">
        <div class="hero-avatars"><!-- avatares empilhados --></div>
        <p><strong>+2.500</strong> empreendedores confiam em nós</p>
      </div>
    </div>
    
    <!-- Direita: Visual -->
    <div class="hero-visual">
      <!-- Captura de tela do produto, ilustração ou vídeo -->
    </div>
  </div>
</section>

.hero {
  padding: var(--space-section) 0;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero-avatars {
  display: flex;
}
.hero-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -8px;
}
.hero-avatars img:first-child {
  margin-left: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-proof { justify-content: center; }
  .hero-visual { order: -1; }
}

---

Padrões de Prova Social

Barra de Logotipos

<section class="social-proof-bar">
  <p class="social-proof-label">Confiado por</p>
  <div class="logo-scroll">
    <div class="logo-track">
      <!-- Repita os logotipos 2x para rolagem infinita -->
      <img src="/logos/brand1.svg" alt="Marca 1" />
      <img src="/logos/brand2.svg" alt="Marca 2" />
      <!-- ... -->
    </div>
  </div>
</section>

.social-proof-bar {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}

.social-proof-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-8);
}

.logo-scroll {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.logo-track {
  display: flex;
  gap: var(--space-12);
  animation: scroll 30s linear infinite;
}

.logo-track img {
  height: 28px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all var(--duration-normal) var(--ease-out);
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

Barra de Estatísticas

<div class="stats-bar">
  <div class="stat">
    <span class="stat-value" data-count="15000">15.000+</span>
    <span class="stat-label">Entregas realizadas</span>
  </div>
  <div class="stat">
    <span class="stat-value">98,5%</span>
    <span class="stat-label">Taxa de entrega</span>
  </div>
  <div class="stat">
    <span class="stat-value">24h</span>
    <span class="stat-label">Tempo médio</span>
  </div>
  <div class="stat">
    <span class="stat-value">4,9★</span>
    <span class="stat-label">Avaliação</span>
  </div>
</div>

---

Seção de Preços

Layout de 3 Planos com Alternador

<section class="pricing" id="pricing">
  <div class="container">
    <div class="section-header">
      <h2>Planos simples e transparentes</h2>
      <p>Sem custos ocultos. Cancele quando quiser.</p>
    </div>
    
    <!-- Alternador -->
    <div class="pricing-toggle">
      <span class="toggle-label" data-active="monthly">Mensal</span>
      <button class="toggle-switch" role="switch" aria-checked="false">
        <span class="toggle-thumb"></span>
      </button>
      <span class="toggle-label" data-active="yearly">
        Anual <span class="toggle-badge">-20%</span>
      </span>
    </div>
    
    <!-- Grade de Planos -->
    <div class="plans-grid">
      <!-- Básico -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>Básico</h3>
          <p class="plan-desc">Para empreendedores iniciantes</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="R$ 19" data-yearly="R$ 15">R$ 19</span>
          <span class="price-period">/mês</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 100 envios/mês</li>
          <li class="feature-included">✓ Rastreamento básico</li>
          <li class="feature-included">✓ Suporte por e-mail</li>
          <li class="feature-excluded">✗ API access</li>
          <li class="feature-excluded">✗ Prioridade</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">Começar grátis</button>
      </div>
      
      <!-- Pro (Destaque) -->
      <div class="plan-card plan-featured">
        <div class="plan-badge">Mais popular</div>
        <div class="plan-header">
          <h3>Profissional</h3>
          <p class="plan-desc">Para negócios em crescimento</p>
        </div>
        <div class="plan-price">
          <span class="price-amount" data-monthly="R$ 49" data-yearly="R$ 39">R$ 49</span>
          <span class="price-period">/mês</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ 500 envios/mês</li>
          <li class="feature-included">✓ Rastreamento em tempo real</li>
          <li class="feature-included">✓ Suporte prioritário</li>
          <li class="feature-included">✓ API access</li>
          <li class="feature-included">✓ Dashboard analytics</li>
        </ul>
        <button class="btn btn-primary btn-lg btn-full">Começar agora</button>
      </div>
      
      <!-- Empresa -->
      <div class="plan-card">
        <div class="plan-header">
          <h3>Empresarial</h3>
          <p class="plan-desc">Solução personalizada</p>
        </div>
        <div class="plan-price">
          <span class="price-amount">Customizado</span>
        </div>
        <ul class="plan-features">
          <li class="feature-included">✓ Envios ilimitados</li>
          <li class="feature-included">✓ Gerente de conta dedicado</li>
          <li class="feature-included">✓ SLA garantido</li>
          <li class="feature-included">✓ Integração personalizada</li>
          <li class="feature-included">✓ Faturamento corporativo</li>
        </ul>
        <button class="btn btn-secondary btn-lg btn-full">Falar com vendas</button>
      </div>
    </div>
    
    <!-- Garantia -->
    <div class="guarantee">
      <span class="guarantee-icon">🛡️</span>
      <p>Garantia de satisfação de 30 dias. Se não ficar satisfeito, devolvemos seu dinheiro.</p>
    </div>
  </div>
</section>

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-12) auto;
}

.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out);
}

.plan-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
  transform: scale(1.05);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-included {
  color: var(--color-text);
}

.feature-excluded {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.btn-full {
  width: 100%;
}

@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plan-featured {
    transform: none;
    order: -1;
  }
}

---

Seção FAQ

<section class="faq">
  <div class="container">
    <h2>Perguntas frequentes</h2>
    <div class="faq-grid">
      <details class="faq-item">
        <summary class="faq-question">
          Quanto tempo leva a entrega?
          <svg class="faq-arrow"><!-- chevron --></svg>
        </summary>
        <div class="faq-answer">
          <p>Nosso tempo médio de entrega é de 24-48 horas 
          para cidades principais e 48-72 horas para áreas rurais.</p>
        </div>
      </details>
      <!-- Mais itens... -->
    </div>
  </div>
</section>

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  padding: var(--space-5) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

details[open] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  animation: slideDown 0.3s var(--ease-out);
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}

---

Fórmulas de Copywriting

Manchete do Herói (PAS: Problema → Agitação → Solução)

FÓRMULA: [Resultado Desejado] + [em Período Específico] + [Sem Objeção Principal]

EXEMPLOS:
✅ "Envie pacotes para todo o Brasil a partir de R$ 2,50 — entrega em 24h"
✅ "Lance sua loja online em 48 horas sem saber programar"
✅ "Dobre suas vendas em 30 dias com e-mail marketing automático"

❌ "A melhor plataforma de envios" (genérico, sem benefício)
❌ "Soluções inovadoras de logística" (corporativo vazio)

Marcadores de Recursos (FAB: Recurso → Vantagem → Benefício)

FÓRMULA: [Verbo de ação] + [o que faz] + [por que importa]

EXEMPLOS:
✅ "Rastreie cada pacote em tempo real — nunca perca uma entrega"
✅ "Cobre contra entrega — seus clientes pagam ao receber"
✅ "Integre sua loja em 5 minutos — sem código, sem complicações"

Botões CTA

FÓRMULA: [Verbo] + [Benefício]