Construtor de Landing Page — Padrão CAE
Descrição Geral
Esta skill ajuda você a criar uma landing page de alta qualidade (seguindo o padrão EEC da CAE Việt Nam) a partir de informações fornecidas pelo usuário. Todo o processo é executado pela Antigravity — o usuário só precisa responder às perguntas.
Saída final:
index.html+styles.css— landing page completa, responsiva, com animaçõesgoogle-apps-script.js— backend que recebe dados do formulário → grava no Google Sheets → envia e-mail de notificação- Instruções passo a passo para implantar no Cloudflare Pages
Arquitetura da Página EEC (Blueprint Padrão)
1. NAV — fixa, desfoca ao rolar, logo + links + botão CTA
2. HERO — tela cheia, gradiente vermelho, partículas, título + subtítulo + 2 botões
3. BARRA DE ESTATÍSTICAS — 4 números de destaque, contador animado
4. POR QUE NÓS — 6 cartões de recursos com efeitos de hover (3 colunas)
5. INSTRUTOR (opcional) — incorporação do YouTube Short + credenciais
6. CURSOS — 3 cursos, cartão em destaque no meio, caixa de preço
7. LINHA DO TEMPO — roteiro de N semanas em formato de grade
8. DEPOIMENTOS — 3 cartões de avaliação com estrelas
9. FAQ — acordeão expandir/recolher
10. CTA + FORMULÁRIO — seção com gradiente, formulário de inscrição → Google Sheets + e-mail
11. RODAPÉ — 3 colunas: marca, cursos, contato
PROCESSO (DEVE SER EXECUTADO EM ORDEM)
FASE 0: Varredura e Contexto (SEMPRE EXECUTAR PRIMEIRO)
Antes de perguntar qualquer coisa, verifique o ambiente e procure por contexto anterior:
-
Verifique se o Mem0 está disponível:
- Tente chamar
search_memorycom a consulta:"preferência landing page cor fonte domínio" - Se a ferramenta NÃO existir / retornar erro → ignore completamente, vá para a Fase 1 imediatamente, não notifique o usuário sobre o erro
- Se a ferramenta existir e encontrar algo → informe: "Eu lembro que da última vez você usou [cor X / fonte Y / domínio Z]. Desta vez, mantém ou muda?"
- Se a ferramenta existir mas não encontrar nada → prossiga para a Fase 1 normalmente
- Tente chamar
-
Salve o novo contexto (se o Mem0 estiver disponível) — depois que o usuário confirmar todos os 7 grupos, chame
add_memory:Landing page [nome da campanha]: cor=[hex], fonte=Be Vietnam Pro, domínio=[domínio], e-mail=[e-mail], planilha=[link da planilha]- Se o Mem0 não estiver disponível → ignore esta etapa, não afeta o resultado
Princípio de design: Mem0 é um recurso complementar (aprimoramento progressivo), não uma dependência obrigatória. A skill deve funcionar perfeitamente em máquinas sem Mem0.
FASE 1: Coleta de Informações (Perguntar um grupo de cada vez, aguardar resposta)
⚠️ IMPORTANTE: Pergunte UM GRUPO de cada vez. Não pergunte tudo de uma vez. Depois que o usuário responder a um grupo, pergunte o próximo.
Grupo A — Marca e Cores
Pergunte:
Para criar a landing page, preciso de algumas informações básicas primeiro.
**Grupo 1: Marca**
1. Qual é o nome da marca/centro? (Ex: CAE Việt Nam, Centro ABC...)
2. URL do logotipo PNG (ou diga "não tem" para usar texto como alternativa)
3. Qual cor principal você gostaria de usar?
- 🔴 Vermelho CAE (como a página EEC) — #8F1A1A + dourado #FEC46F
- 🔵 Azul marinho profissional — #1A3A5C + ciano #00C9FF
- 🟢 Verde fresco — #0D6E3F + dourado #FFD700
- ✏️ Quero inserir outra cor (forneça o código hex)
4. Nome de domínio pretendido? (Ex: uudai.tentruongtoi.com ou "ainda não tenho")
Grupo B — Conteúdo do Hero
Após receber o Grupo A, pergunte:
**Grupo 2: Seção do Topo (Hero Section)**
1. Qual título principal você quer exibir? (Ex: "Bolsa de Estudos 100% em Chinês Acadêmico")
2. Qual slogan pequeno acima do título? (Ex: "Programa Experimental — Vagas Limitadas")
3. Uma breve descrição (1-2 frases) abaixo do título?
4. Texto do botão CTA principal? (Ex: "📝 Inscreva-se agora", "🎓 Receba a bolsa")
5. Existem 4 números de estatísticas que você gostaria de exibir? (Ex: 3 turmas, 100% gratuito, 8 semanas, 15 alunos/turma)
Grupo C — Pontos Fortes e Cursos
Após receber o Grupo B, pergunte:
**Grupo 3: Pontos Fortes e Produtos**
1. Liste 3-6 pontos fortes seus (cada um com: ícone emoji, título curto, descrição de 1-2 frases)
Ex: 🎓 Programa licenciado | Licenciado por parceiros internacionais...
2. Liste 1-3 cursos/pacotes de serviços (cada pacote com):
- Nome do curso
- Badge pequeno (Ex: "Online · 8 semanas", "Presencial · Hanói")
- 3-4 recursos em destaque
- Preço original (para ser riscado)
- Preço promocional / "100% GRÁTIS" / porcentagem de desconto
- Observação (Ex: "Apenas 15 vagas")
- Qual curso é o "mais destacado"?
Grupo D — Roteiro e Instrutor
Após receber o Grupo C, pergunte:
**Grupo 4: Conteúdo Adicional**
1. Existe um roteiro de estudo por semanas? (Se sim, liste N semanas com os nomes dos tópicos)
2. Existe algum instrutor/especialista que você queira apresentar?
- Nome, cargo
- Link do vídeo no YouTube (opcional)
- 3 certificações/realizações notáveis
3. Existem 3 depoimentos de clientes?
(Nome abreviado, nome completo, função, conteúdo da citação)
Grupo E — FAQ e Contato
Após receber o Grupo D, pergunte:
**Grupo 5: FAQ e Contato**
1. Liste 5-7 perguntas frequentes e suas respostas?
2. Informações de contato:
- Endereço do escritório
- Telefone/Zalo
- E-mail
- URL da página do Facebook
3. Direitos autorais no rodapé: "© 2025 [Nome da Organização]"
Grupo F — Formulário e Backend
Após receber o Grupo E, pergunte:
**Grupo 6: Formulário de Inscrição e Conexão de Dados**
1. Quais campos o formulário precisa coletar?
- [x] Nome completo (obrigatório)
- [x] Telefone (obrigatório)
- [ ] E-mail
- [ ] Endereço / Cidade/Estado
- [ ] Caixa de seleção para escolher o curso
- [ ] Área de texto para observações
- [ ] Outro campo?
2. Qual e-mail receberá a notificação quando alguém se inscrever?
(Ex: [email protected])
3. Qual assunto do e-mail de notificação você gostaria de usar?
(Ex: "🔔 Nova inscrição da Landing Page!")
4. Por favor, envie o link da Planilha Google onde você deseja salvar os dados das inscrições.
(Eu criarei o script de acordo com os campos do formulário acima e depois instruirei você a executá-lo nessa Planilha)
⚠️ Depois que o usuário enviar o link da Planilha → PARE e execute a FASE 2 imediatamente.
Grupo G — Implantação no Cloudflare
Após receber o Grupo F, pergunte:
**Grupo 7: Informações de Implantação (última etapa)**
1. Qual é o seu Cloudflare Account ID?
(Entre em dash.cloudflare.com → selecione a conta → veja a URL: cloudflare.com/ACCOUNT_ID)
2. Qual é o seu Cloudflare API Token?
(Entre em Meu Perfil → API Tokens → Criar Token → use o modelo "Edit Cloudflare Pages")
3. Qual nome do projeto no Cloudflare Pages? (letras minúsculas, hífen, Ex: minha-landing-2025)
4. Domínio personalizado que deseja atribuir? (Ex: uudai.dominio.com ou "não precisa")
FASE 1.5 — VISÃO 10 ESTRELAS ⭐ (OBRIGATÓRIO antes de gerar)
"Não projete para milhões de pessoas. Projete para que UMA PESSOA tenha a experiência mais incrível que já teve." — Garry Tan
Pare e responda a estas 4 perguntas ANTES de escrever uma linha de código:
-
O título "crava" o prego?
- Leia o título em 3 segundos: o cliente sabe imediatamente que é para ele?
- Se não for forte → aplique a fórmula de copy desta skill para reescrever
-
Esta página tem algo INESQUECÍVEL?
- Um número impressionante? Uma promessa ousada? Um benefício inesperado?
- Ex: "Aprenda 100% grátis — Apenas 15 vagas" → claro, escasso, ação imediata
-
Qual ponto fraco mortal esta landing page pode ter?
- Formulário com muitos campos? Hero sem prova social? CTA fraco?
- Identifique e corrija imediatamente no design
-
Se Steve Jobs revisasse esta página, o que ele cortaria?
- Remova tudo que não serve ao objetivo único: inscrever-se
Saída: Anote a Visão na resposta antes de continuar:
🎯 VISÃO 10 ESTRELAS:
- Ponto forte único: [..]
- Título final: [..]
- 1 coisa inesquecível: [..]
- Já removido: [..]
REGRA DO DESAFIO DO FUNDADOR (Aplicada no Portão da Visão)
"Atue como CEO — a missão é desafiar a mediocridade, não reconhecê-la."
Se o usuário fornecer um título fraco (genérico, sem público-alvo claro, sem benefício específico), NÃO aceite imediatamente. Em vez disso:
⚡ Modo Fundador:
O título "[título do usuário]" ainda é genérico. Proponho 3 alternativas mais fortes:
[A] [Benefício específico] — [número/tempo] — [público-alvo claro]
Ex: "Aprenda chinês acadêmico 100% grátis — Apenas 15 vagas"
[B] [Isca de pergunta] + [resultado surpreendente]
Ex: "Seu filho estuda chinês por 8 semanas — mais confiante que alunos internacionais?"
[C] [Promessa ousada] + [evidência]
Ex: "Sem progresso após 4 aulas — reembolso 100%, sem perguntas"
Qual direção você prefere, ou quer que eu reescreva de outra forma?
Quando desafiar: Título sem pelo menos 2 dos 3 elementos: (1) público-alvo claro, (2) benefício específico, (3) número/compromisso.
FASE 2: Criar o Google Apps Script (Backend)
Gatilho: Usuário enviou o link da Planilha Google (Grupo F.4).
Passo 1 — Gerar script personalizado:
Com base no template em templates/google-apps-script.js, crie um script personalizado de acordo com o formulário da landing page:
- Preencha
NOTIFICATION_EMAIL= e-mail do Grupo F.2 - Preencha
EMAIL_SUBJECT= assunto do Grupo F.3 - Preencha
CAMPAIGN_NAME= nome da campanha do Grupo A.1 - Atualize a função
writeToSheet()para ter o número correto de colunas correspondentes aos campos do formulário do Grupo F.1 - Atualize a função
doPost()para analisar corretamente ose.parameterde acordo com os campos selecionados
Passo 2 — Bloco de código para o usuário copiar:
Após gerar, exiba TODO o código em um único bloco da seguinte forma:
✅ Eu já criei o script para sua Planilha Google!
Aqui está o código que você precisa copiar e colar na Planilha:
[BLOCO DE CÓDIGO]
📋 INSTRUÇÕES PARA EXECUTAR NA SUA PLANILHA GOOGLE (5 passos):
① Abra a Planilha Google que você acabou de enviar o link → Vá ao menu Extensions → Apps Script
(Ou clique no link da Planilha e encontre o menu Extensions na barra superior)
② Apague todo o código padrão no editor (Ctrl+A → Delete)
③ Cole todo o código que criei acima (Ctrl+V)
④ Pressione Ctrl+S para salvar → Dê ao projeto o nome "Landing Page Handler" → OK
⑤ Implante o script:
• Clique no botão "Deploy" (canto superior direito) → "New deployment"
• Em "Type": selecione "Web app"
• Em "Execute as": selecione "Me (seu e-mail)"
• Em "Who has access": selecione "Anyone"
• Clique em "Deploy" → O Google solicitará permissões → Clique em "Authorize access" → Selecione a conta Google
• Copie a URL longa que aparecer (formato: https://script.google.com/macros/s/.../exec)
📌 Depois de obter essa URL, cole-a aqui para que eu a coloque na landing page.
Passo 3 — Aguarde a confirmação do usuário sobre a URL SHEETS_ENDPOINT antes de prosseguir para a FASE 3.
FASE 3: Gerar o HTML da Landing Page
Com base em todas as informações coletadas, crie o arquivo index.html completo:
Estrutura do arquivo a ser criado:
- Um único arquivo
index.html(CSS inline na tag<style>, NÃO crie arquivos separados) - JavaScript de envio de formulário inline na tag
<script> - Sem dependência de frameworks, apenas HTML/CSS/JS vanilla
- Totalmente responsivo (mobile-first)
- Use Be Vietnam Pro (carregue do Google Fonts CDN) — suporte completo a acentos vietnamitas, substituindo Inter/Montserrat
Design seguindo o padrão EEC:
- Esquema de cores do Grupo A.3
- Todas as seções do blueprint
- Se o usuário não fornecer instrutor → remova essa seção
- Se não houver depoimentos → remova essa seção
- Se não houver linha do tempo → remova essa seção
Padrão de envio de formulário (DEVE usar iframe oculto — para evitar CORS):
const SHEETS_ENDPOINT = 'URL_GAS_DO_USUARIO'; // Preencha com a URL do Passo 2
const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);
// Ao enviar: crie um formulário oculto, faça POST para o endpoint GAS, direcione para o iframe oculto
// Não use fetch() — o POST nativo do formulário não é bloqueado por CORS
Backup localStorage:
// Sempre faça backup no localStorage antes de enviar
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));
UI Otimista + Resiliência do GAS (OBRIGATÓRIO):
// 1. Exiba o sucesso IMEDIATAMENTE — não aguarde a resposta do GAS
function submitForm(data) {
// Backup no localStorage primeiro
backupToLocal(data);
// Exiba a mensagem de sucesso imediatamente (otimista)
showSuccessMessage();
// Envie para o GAS em segundo plano — não bloqueie a UI
submitToGAS(data).catch(() => {
// GAS falhou, mas o localStorage já tem os dados → repetição silenciosa
scheduleRetry(data);
});
}
// 2. Repetição automática se o GAS falhar
function scheduleRetry(data, attempt = 1) {
if (attempt > 3) return; // Desiste após 3 tentativas
setTimeout(() => {
submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
}, attempt * 3000); // 3s, 6s, 9s
}
// 3. Timeout do GAS de 10s (não faça o usuário esperar indefinidamente)
async function submitToGAS(data) {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 10000);
try {
// Use fetch com mode no-cors (GAS não retorna corpo de resposta)
await fetch(SHEETS_ENDPOINT, {
method: 'POST', mode: 'no-cors',
body: new URLSearchParams(data),
signal: controller.signal
});
} finally {
clearTimeout(timeout);
}
}
Nota: O modo
no-corscomfetch+URLSearchParamsé uma alternativa ao iframe oculto, não sendo bloqueado por CORS. Use um dos dois dependendo do contexto.
FASE 3.5 — VERIFICAÇÃO NO NAVEGADOR (Antes de implantar)
Gatilho: O arquivo index.html foi criado.
Use a ferramenta do navegador para verificar antes de avisar o usuário:
- Abra o arquivo no navegador (ou servidor local)
- Verificação responsiva:
- Mobile 375px: menu não quebra, formulário cabe na tela, texto não é cortado
- Desktop 1440px: não muito largo, layout equilibrado
- Verificação de UX:
- Botão CTA visível acima da dobra sem precisar rolar
- Envio do formulário: preencha dados de teste → verifique se não há erros no console
- Acordeão do FAQ abre/fecha corretamente
- Rolagem suave, sem solavancos
- Verificação visual:
- Cores corretas conforme a paleta escolhida
- Fonte carregada corretamente (Be Vietnam Pro)
- Nenhum texto placeholder restante
- Captura de tela e relatório: Tire screenshots do desktop e mobile, envie para o usuário visualizar
⚠️ DEVE PASSAR POR TODA esta lista de verificação antes de executar a FASE 3.6 de Refinamento e a FASE 4 de Implantação.
FASE 3.6 — PASSADA DE REFINAMENTO (Polimento)
Após o usuário confirmar que o conteúdo está OK, execute uma rodada de polimento:
- Micro-animações: Adicione
fade-inao rolar para cada seção (IntersectionObserver) - Efeitos de hover: Leve escala no botão ao passar o mouse (
transform: scale(1.03)) - Pulso do CTA: O botão principal de inscrição tem uma animação de pulso sutil para atrair a atenção
- Animação do contador: Os números das estatísticas (3 turmas, 500+ alunos) contam para cima ao entrar na viewport
- Feedback do formulário: Exiba o estado de carregamento ao enviar, mensagem de sucesso após o envio
- Desfoque da navegação: Ao rolar para baixo, a navegação tem um fundo com desfoque (
backdrop-filter: blur(10px))
FASE 4: Implantar no Cloudflare Pages
Gatilho: Todas as fases anteriores concluídas com sucesso.
Passo 1 — Criar o diretório do projeto:
mkdir -p ~/landing-deploy
cd ~/landing-deploy
Passo 2 — Salvar o conteúdo do site:
Crie/atualize o arquivo index.html com o código final gerado na Fase 3.6.
Passo 3 — Instalar a CLI Wrangler (se não estiver instalada):
# Verificar se npm está instalado
npm --version || echo "Instale o Node.js primeiro: https://nodejs.org"
# Instalar wrangler globalmente
npm install -g wrangler
# Verificar instalação
wrangler --version
Passo 4 — Autenticar o Wrangler:
wrangler login
→ Será aberta uma janela do navegador. Autorize o Wrangler a acessar sua conta Cloudflare.
Passo 5 — Criar e implantar o projeto:
# Criar um novo projeto Cloudflare Pages (apenas na primeira vez)
wrangler pages project create [NOME_DO_PROJETO] --production-branch main
# Implantar os arquivos
wrangler pages deploy . --project-name [NOME_DO_PROJETO]
# Se quiser atualizar uma implantação existente
# wrangler pages deploy . --project-name [NOME_DO_PROJETO] --branch main
Substitua [NOME_DO_PROJETO] pelo nome do projeto fornecido no Grupo G.3.
Passo 6 — Configurar o domínio personalizado (opcional, se fornecido no Grupo G.4):
wrangler pages domain add [NOME_DO_PROJETO] [DOMÍNIO_PERSONALIZADO]
Passo 7 — Confirmar a implantação:
Forneça ao usuário o URL de implantação e um resumo:
✅ IMPLANTAÇÃO CONCLUÍDA COM SUCESSO!
🌐 URL de produção: https://[NOME_DO_PROJETO].pages.dev
🔗 Domínio personalizado: https://[DOMÍNIO_PERSONALIZADO] (se configurado)
📋 Resumo do projeto:
- Nome da campanha: [Nome]
- Cor principal: [Cor]
- Total de seções: [Número]
- Backend: Google Sheets conectado ✅
- Notificações por e-mail: [E-mail] ✅
📌 PRÓXIMOS PASSOS:
1. Teste o formulário de inscrição uma vez para garantir que os dados cheguem à Planilha
2. Verifique se o e-mail de notificação chega na caixa de entrada
3. Se estiver tudo ok, compartilhe o URL com seu público!
Nota: Guia de referência do Wrangler Pages: https://developers.cloudflare.com/pages/get-started/wrangler-configuration/