igorbritoeali/ghl-landing-page-skill

Guia de Landing Page para GoHighLevel

Visão Geral

Este guia cobre a criação de landing pages de alta conversão como arquivos HTML únicos para implantação no GoHighLevel (GHL), abordando arquitetura, padrões de CSS/JS, armadilhas de desempenho e soluções para problemas comuns do GHL.

Stack Técnico Principal

• Arquivo HTML único (sem ferramentas de build — o GHL não suporta frameworks)
• Tailwind CDN (https://cdn.tailwindcss.com)
• Google Fonts via CDN
• Assets CDN externos (filesafe.space ou similar)

Soluções Críticas para GHL

Breakout de largura total: Use .ghl-wrapper com width: 100vw; left: 50%; transform: translateX(-50%)

Workaround para posicionamento fixo: Mova elementos fixos para document.body via JavaScript, pois transform quebra o comportamento de posicionamento fixo.

Estrutura da Página (Ordem de Conversão)

Siga o framework Problema-Agitação-Solução (PAS) com as seções:

Hero → Prova Social → Explicação → Estudos de Caso → Problema/Agitação → Como Funciona → Recursos → Benefícios → Preços → Equipe → FAQ → CTA Final → Rodapé

Animações CSS Essenciais

Fade-up com IntersectionObserver, atrasos escalonados, pulsação do CTA, efeitos de desfoque ao passar o mouse em grades de cards, glassmorphism e badges com gradiente animado são padrões recomendados.

Regras Críticas para Vídeos

Use: <video autoplay loop muted playsinline> (abordagem simples)

Evite: atributos preload, loading="lazy" ou scripts de lazy-load — eles quebram a funcionalidade de reprodução automática.

Meta de compressão: Vídeos com menos de 5MB, 720p H.264, bitrate de 1-2Mbps, no máximo 30 segundos para loops.

Melhores Práticas para Seção de Preços

Layout de três cards: Mensal | Anual (centralizado, escalado 1.10, fundo escuro, badge popular, CTA pulsante) | Semestral. Inclua preços riscados e cálculo de economia.

Otimização de Imagens

Redimensione antes do upload: avatares ≤100×100px, cards ≤400×400px, heróis ≤1200px de largura. Prefira formatos WebP/AVIF. Adicione atributos width e height; use loading="lazy" abaixo da dobra.

Metas do PageSpeed

Métrica	Meta
LCP	< 2,5s
TBT	< 300ms (o Tailwind CDN adiciona ~1,3s+)
CLS	< 0,1
FCP	< 1,8s

Comprima vídeos e imagens, inclua links de preconnect, use decodificação assíncrona.

Portão de Performance OBRIGATÓRIO (Lighthouse Local)

Não dê a página como pronta antes de PASSAR neste teste. Página lenta = lead sai antes de carregar = connect rate baixo no tráfego. A gente valida ANTES de subir, não depois de gastar em ads.

O teste roda em emulação mobile com 4G lento — o cenário real do lead vindo do anúncio.

Como rodar (na pasta onde está o index.html):

bash ~/.claude/skills/ghl-landing-page/lh-check.sh .

O script sobe a página local (npx serve), roda o Lighthouse (npx lighthouse — sem instalar nada, já cacheado), imprime score + Core Web Vitals + as maiores oportunidades, derruba o servidor sozinho e retorna:

• exit 0 → PASSOU (score ≥90, LCP <2,5s, TBT <300ms, CLS <0,1) → pode publicar
• exit 1 → REPROVOU → leia as "Maiores oportunidades" no output, corrija e rode de novo. Loop até passar.

Se reprovar, ataque nesta ordem (maior ganho primeiro):

1. Tailwind CDN é o vilão nº1 de TBT. Para produção, compile o Tailwind CLI (purga classes não usadas → CSS ~5-15KB) e inline no <head> em vez do cdn.tailwindcss.com. Sozinho isso costuma salvar o score.
2. Vídeo de fundo — poster estático no primeiro paint; só troca pelo vídeo depois de carregado. Mantenha <5MB, 720p.
3. Imagens — WebP/AVIF, com width/height (evita CLS).

Depois de no ar, faça um check final na URL real do GHL pelo PageSpeed Insights (o wrapper/CDN do GHL adiciona peso que o teste local não captura).

Armadilhas Comuns & Correções

Problema	Correção
Bordas nas laterais no GHL	Aplique a solução de largura total com ghl-wrapper
Vídeo não reproduz automaticamente	Remova preload, mantenha o atributo muted
Layout de preços quebra no mobile	Separe o preço riscado em sua própria linha, reduza o tamanho da fonte
Fotos de avatar enormes	Redimensione para 100×100 antes de fazer upload