Landing page que converte: como fazer loja de VIP MC que vende

Por que a maioria das lojas MC vende mal

Erros típicos que matam conversão em servers BR:

• Preço escondido (você tem que clicar 3x pra ver)
• Sem descrição do que o VIP dá
• Zero prova social (nada de "X pessoas compraram")
• Botão de compra sem destaque
• Página lenta (5+ segundos pra carregar)
• Mobile ruim (60% dos players vão pelo celular)
• Muito texto, pouco visual

Landing page boa tem menos elementos, mais foco em conversão.

Estrutura comprovada (7 seções)

Baseado em benchmarks de e-commerce SaaS:

1. Hero (topo da tela)

O que precisa ter:

• Título direto: "Aproveite ao máximo no [nome do servidor]"
• Subtítulo: 1 frase explicando o benefício
• CTA único e destacado: "Ver planos VIP"
• Imagem/vídeo do server em ação (não só logo)

Exemplo:

[Logo Server]

# Seja VIP no MeuSurvival BR
Ganhe cosméticos exclusivos, prioridade nos servidores e apoie o projeto.

[Ver planos VIP  →]

[Screenshot cinematográfico do jogo]

2. Prova social (barra logo abaixo)

• "500+ VIPs ativos" — número real
• Logos de mídias (se apareceu em algum)
• Rating: "⭐⭐⭐⭐⭐ (4.8/5) baseado em 300 avaliações"
• Testimonials curtos de players

3. Tiers (o coração da página)

Cards lado-a-lado (3-4 tiers). Destaque o do meio (sweet spot).

Estrutura de cada card:

• Nome do cargo (VIP, MVP, LENDA)
• Preço com moeda clara
• Lista de benefícios (5-8 itens, ícone ao lado)
• Botão "Comprar"
• Badge "Mais popular" no do meio

Wireframe (Bootstrap classes):

<div class="row">
  <div class="col-md-4">
    <div class="pricing-card">
      <h3>VIP</h3>
      <p class="price">R$ <strong>10</strong>/mês</p>
      <ul>
        <li>✓ Prefixo [VIP] no chat</li>
        <li>✓ Cor de nome custom</li>
        <li>✓ Skinbox in-game</li>
        <li>✓ 3 cosméticos de kit</li>
        <li>✓ Suporte prioritário</li>
      </ul>
      <a href="/comprar/vip" class="btn btn-outline">Comprar</a>
    </div>
  </div>

  <div class="col-md-4">
    <div class="pricing-card featured">
      <span class="badge">MAIS POPULAR</span>
      <h3>VIP+</h3>
      <p class="price">R$ <strong>25</strong>/mês</p>
      <ul>
        <li>✓ Tudo do VIP</li>
        <li>✓ Emotes animados</li>
        <li>✓ Particles ao andar</li>
        <li>✓ 8 cosméticos extras</li>
        <li>✓ /fly no lobby</li>
        <li>✓ Slot reservado</li>
      </ul>
      <a href="/comprar/vip-plus" class="btn btn-primary btn-lg">Comprar</a>
    </div>
  </div>

  <div class="col-md-4">
    <div class="pricing-card">
      <h3>MVP</h3>
      <p class="price">R$ <strong>60</strong>/mês</p>
      <ul>
        <li>✓ Tudo do VIP+</li>
        <li>✓ Prefixo animado</li>
        <li>✓ Emote 3D exclusivo</li>
        <li>✓ Capa custom no site</li>
        <li>✓ Canal VIP no Discord</li>
      </ul>
      <a href="/comprar/mvp" class="btn btn-outline">Comprar</a>
    </div>
  </div>
</div>

4. Benefícios detalhados (com GIFs/vídeos)

Para cada benefício-chave, mostre visualmente:

• GIF de emote 3D em ação
• Vídeo de particle effect
• Screenshot do prefixo custom

Isso triplica conversão vs só texto.

5. FAQ

Responda dúvidas ANTES do player desistir:

• Como recebo o cargo depois de comprar?
• Aceita PIX?
• Posso cancelar quando quiser?
• Serve pra Bedrock?
• E se meu personagem for banido?
• Tem reembolso?
• Preciso ser Java Edition?

Use accordion (<details> HTML nativo é ótimo pra SEO).

6. Testimonials (prova social forte)

• Foto + nome + "PlayerX joga há 2 anos"
• Quote curta: "Melhor server BR de RP, os VIPs valem cada centavo!"
• Rotação de 3-6 depoimentos

Não invente testimonials falsos. Cliente do site consegue ver que é fake.

7. CTA final + urgência (opcional)

• CTA principal repetido: "Ver planos VIP"
• Se tem oferta limitada: "Faltam 3 dias para o desconto de 20%"
• Contato pra dúvidas: WhatsApp/Discord

Design principles

1. Above the fold = decisão em 3 segundos

Ao chegar, player vê:

• Nome do servidor
• Proposta
• Botão de comprar

Se ele precisa rolar pra achar preço, você perde.

2. Contraste visual do CTA principal

• Fundo escuro → botão cor vibrante
• Nunca cor "sutil" (marrom, cinza)
• Verde/roxo/laranja funcionam bem
• Tamanho: mínimo 48px altura

3. Mobile-first (obrigatório)

70%+ dos players entram do celular. Teste em Chrome mobile devtools:

• Fonte mínima 16px
• Botões grandes (44×44px mín — Apple guideline)
• Sem hover-only interactions

4. Performance

• Peso da página: < 2 MB
• Carrega em < 2s (mobile 4G)
• Ferramentas: PageSpeed Insights

Otimizações:

• Imagens WebP (não PNG)
• Lazy loading de imagens abaixo do fold
• Fonts do Google Fonts com display=swap
• Sem 20 plugins WooCommerce

Copywriting que converte

Título ruim vs bom

❌ "VIP Server MeuSurvival"
✅ "Destaque-se no MeuSurvival — vire VIP"

Descrição ruim vs boa

❌ "O VIP dá cor no nome e algumas coisas legais"
✅ "8 cosméticos exclusivos, prefixo animado e prioridade em servidor cheio"

CTA ruim vs bom

❌ "Enviar" / "Comprar"
✅ "Ativar meu VIP" / "Quero ser VIP+" / "Começar agora"

Métricas para acompanhar

Use Google Analytics 4 (grátis) ou Plausible (privacy-friendly).

Métricas críticas:

• Bounce rate — % que sai sem interagir. < 60% é bom
• Conversion rate — % visitantes que compram. 1-3% é normal
• Tempo na página — > 30s é bom sinal
• Scroll depth — quantos chegam ao FAQ (indica engajamento)
• Origem do tráfego — Discord? YouTube? Google?

Tools para montar rápido

WordPress + tema pronto

• Astra ou Kadence (grátis, rápido)
• Elementor free (page builder)
• WooCommerce pra checkout

Landing standalone

• Framer ou Webflow (US$ 15-40/mês)
• Carrd (US$ 19/ano) — hyper-simples
• HTML puro (custo zero, mais trabalho)

Analytics

• Google Analytics 4 (grátis)
• Microsoft Clarity (grátis, tem heatmap e recordings)
• Hotjar (freemium, muito bom pra heatmap)

Erros que matam conversão

• ❌ Loja em subdomínio esquisito (shop.dominio.com.br vs dominio.com.br/loja)
• ❌ Certificado SSL expirado (browser mostra "não seguro")
• ❌ 3 passos até chegar no checkout
• ❌ Pedir cadastro antes de mostrar preço
• ❌ Pop-up de newsletter atrapalhando
• ❌ Vídeo autoplay com som
• ❌ Cor de fundo confusa (não usar amarelo com branco)

Exemplo de landing minimal em HTML

Se você quer começar com zero framework:

<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>MeuServidor — VIP</title>
  <style>
    body { font-family: system-ui; background: #0a0e1a; color: #fff; margin: 0; }
    .hero { padding: 80px 20px; text-align: center; background: linear-gradient(135deg, #7c3aed, #4f46e5); }
    .hero h1 { font-size: 48px; margin: 0 0 20px; }
    .hero p { font-size: 20px; color: #e0e7ff; }
    .btn { display: inline-block; background: #fff; color: #7c3aed; padding: 16px 40px; border-radius: 12px; text-decoration: none; font-weight: 700; margin-top: 24px; }
    .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 60px 20px; max-width: 1000px; margin: auto; }
    .card { background: #0f1424; padding: 30px; border-radius: 12px; }
    .card.featured { border: 2px solid #7c3aed; transform: scale(1.05); }
    .price { font-size: 40px; font-weight: 800; margin: 10px 0; }
  </style>
</head>
<body>
  <section class="hero">
    <h1>Seja VIP no MeuServer</h1>
    <p>Cosméticos exclusivos, prioridade e mais</p>
    <a href="#planos" class="btn">Ver planos →</a>
  </section>
  <section id="planos" class="pricing">
    <div class="card"><h3>VIP</h3><p class="price">R$ 10</p>...</div>
    <div class="card featured"><h3>VIP+</h3><p class="price">R$ 25</p>...</div>
    <div class="card"><h3>MVP</h3><p class="price">R$ 60</p>...</div>
  </section>
</body>
</html>

Conclusão

Landing page boa converte 3-5x mais que loja mal feita. Investir 4-8h em copy + design compensa.

Comece simples: hero + tiers + FAQ. Adicione testimonials + benefícios ilustrados depois.

Precisa de VPS BR pra hospedar sua loja? VPS-BR começam em R$ 44,99.

Links

• PageSpeed Insights
• Microsoft Clarity — grátis, com heatmap
• Elementor
• Google Analytics 4