LANDING PAGES.

Uma landing page e um argumento linear. Cada bloco prepara o seguinte. O visitante entra com ceticismo e sai com clareza — ou sai antes. A pagina deve eliminar distracao e manter o foco em um unico CTA.

Principio central: Uma acao por pagina. Se voce tem dois CTAs diferentes (agendar + comprar), voce tem duas landing pages diferentes.

Estrutura da Pagina

01 — Hero

Capturar atencao em 3 segundos

Elementos

→Titulo em Bebas Neue 72–96px — proposta de valor direta
→Subtitulo em DM Sans 18px — quem e para quem
→CTA gold — 1 unico botao, verbo de acao
→Prova social discreta: "X empresas atendidas"

Regra

Above the fold: titulo + CTA devem aparecer sem scroll em qualquer device.

Exemplo

02 — Problema

Fazer o visitante se reconhecer

Elementos

→Titulo de secao em Oswald — a dor especifica
→Lista de sintomas que o cliente sente
→Ton certo: sério, sem exagero dramatico

Regra

Nao mais que 3 problemas. Especificidade bate generalidade.

Exemplo

03 — Solucao

Apresentar o que resolve

Elementos

→Como funciona: 3 passos ou 3 pilares
→Cada item com icone Phosphor + titulo Oswald + descricao DM Sans
→Grid de 3 colunas com gap 2px

Regra

Solucao especifica para o problema especifico do bloco anterior.

Exemplo

04 — Prova

Eliminar ceticismo com evidencia

Elementos

→Case ou depoimento com dado real (metrica + prazo)
→Nome e cargo do cliente (com permissao)
→Formato: metrica Bebas 80px dourado + contexto DM Sans

Regra

Dado real supera qualquer copywriting. Uma metrica real vale mais que um paragrafo de descricao.

Exemplo

05 — CTA Final

Converter quem chegou ate o fim

Elementos

→Titulo direto: o que acontece ao clicar
→Botao gold — mesmo CTA do hero
→Remover distracao: sem menu, sem links extras

Regra

Uma acao por landing. Tudo deve apontar para o mesmo CTA.

Exemplo

Regras de CTA

Verbo de acao direto. "AGENDAR DIAGNOSTICO", "VER PROPOSTA", "COMECAR AGORA". Sem ambiguidade.

Sem CTAs vagos. "Saiba mais", "Clique aqui", "Entre em contato" nao comunicam o que acontece depois.

Botao gold, texto mono uppercase. Unico elemento dourado na tela — contraste total com o fundo preto.

Nao compete com outros CTAs. Se tem "Agendar" e "Ver portfolio" na mesma tela, um dos dois some.

Formularios

Estilo de inputs — CSS

/* Input padrao */
input, textarea, select {
  background:    var(--black-card);
  border:        1px solid var(--border);
  border-radius: 0;                    /* NUNCA arredondar */
  padding:       12px 16px;
  font-family:   var(--font-body);
  font-size:     15px;
  color:         var(--white);
  width:         100%;
  outline:       none;
  transition:    border-color var(--transition);
}

/* Estado de foco */
input:focus, textarea:focus {
  border-color: var(--gold);           /* acende o contorno */
}

/* Placeholder */
input::placeholder {
  color: var(--gray-500);
  font-family: var(--font-body);
}

/* Label acima do input */
label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 3px;
  color:          var(--gray-400);
  text-transform: uppercase;
  display:        block;
  margin-bottom:  8px;
}

Above the fold: O visitante deve ver o titulo principal + CTA sem nenhum scroll em desktop (1024px+). Isso significa hero com max-height: 100vh e elementos posicionados no primeiro terco da tela.

← AnteriorSite Institucional Próximo →Propostas e Decks