Deixe este site com a sua cara — em uma tarde.
Tudo o que você precisa está nesta página: escolha um dos seis visuais, coloque sua marca em um único arquivo de configuração, edite todo o resto com o Claude Code e hospede grátis no Cloudflare Pages. Sem pipelines de build para aprender, sem CMS, sem conta mensal de hospedagem.
Essa é a jornada completa — cada passo tem sua própria seção abaixo, em ordem.
Início rápidoRode o site no seu computador
Duas coisas para instalar uma única vez, depois quatro comandos para copiar e colar. Dez minutos, sem programar.
Nunca usou um terminal? Comece aqui
O terminal é só uma janela onde você digita um comando e aperta Enter — é tudo o que você vai fazer. Abra com Cmd+Espaço → digite "Terminal" no Mac, ou pelo menu Iniciar → "PowerShell" no Windows.
Primeiro instale o Node.js (o motor que roda as ferramentas do site): acesse nodejs.org, clique no grande botão verde LTS e siga o instalador como em qualquer outro aplicativo.
Depois aponte o terminal para a pasta deste projeto: digite cd (com um espaço), arraste a pasta do projeto do Finder/Explorer para a janela do terminal e aperte Enter. Agora rode os comandos abaixo, uma linha de cada vez:
npm install # uma vez — instala tudo o que o site precisa npm run dev # abre uma prévia ao vivo → http://localhost:5173 npm run build # empacota o site pronto na pasta dist/ npm run preview # confere essa versão final localmente
Deixe o npm run dev rodando enquanto edita — cada alteração aparece no navegador na hora, como editar um Google Docs.
Seis visuais, uma palavraEscolha sua variante
O modelo vem com seis identidades visuais completas — fontes, cores, estilos de cartão e fundos diferentes. Clique em qualquer captura abaixo para ver o site inteiro nesse visual (abre uma prévia ao vivo — nada muda até você escolher). Depois troque de verdade mudando UMA palavra em src/brand.config.ts:
theme: "original", // "original" | "nebula" | "bloom" | "ember" | "tidal"
Clique para visualizar ao vivo ↗Cartões de vidro fosco sobre uma grade em movimento lento com granulado de filme. Destaque verde vibrante, títulos em Space Grotesk.
theme: "original"Visualizar ao vivo ↗
Clique para visualizar ao vivo ↗Índigo e violeta em cartões sólidos elevados com um brilho violeta suave — visual moderno de aplicativo. Títulos em Sora, fundo com esferas, sem grade.
theme: "nebula"Visualizar ao vivo ↗
Clique para visualizar ao vivo ↗Rosa e fúcsia com títulos serifados em Fraunces sobre cartões suaves de papel — cantos bem arredondados, sombras pastel, fundo com brilho quente. Boutique e editorial.
theme: "bloom"Visualizar ao vivo ↗
Clique para visualizar ao vivo ↗Âmbar e laranja com títulos em Bricolage Grotesque sobre cartões planos de bordas marcantes — brilhos quentes, um toque de granulado. Ousado e enérgico.
theme: "ember"Visualizar ao vivo ↗
Clique para visualizar ao vivo ↗Azul-céu e ciano em Manrope sobre cartões nítidos de borda fina — sombras justas, cantos retos, um único brilho no topo. Minimalista e focado no produto.
theme: "tidal"Visualizar ao vivo ↗
Clique para visualizar ao vivo ↗Minimalismo em preto e branco — Inter em tudo, botões quase pretos, bordas cinza finas, zero decoração. O visual Linear/Notion.
theme: "mono"Visualizar ao vivo ↗Todo tema também funciona com a cor da sua marca — defina os seis tons em brand.config.ts → colors e eles substituem a cor de destaque padrão do tema. Quer mais um visual? Copie um objeto de tema em src/themes.ts e ajuste.
…e seis layouts de página inicial
Independentemente do visual, você pode mudar do que a página inicial é composta — quais seções aparecem, em que ordem e como o topo abre. A mesma troca de uma palavra: homeLayout: "classic". Qualquer layout funciona com qualquer tema.
A história completa: topo grande com a caixa de entrada animada, depois por que é diferente, como funciona, recursos e preços.
homeLayout: "classic"Visualizar ao vivo ↗A página longa: todas as seções — comparação, passos, setores, recursos, integrações, um CTA no meio — antes dos preços. Para tráfego frio que precisa ser convencido.
homeLayout: "story"Visualizar ao vivo ↗Focado no produto: texto à esquerda + demo de chat ao vivo à direita, recursos primeiro, setores e comparação depois.
homeLayout: "split"Visualizar ao vivo ↗Mostre, não conte: como funciona logo após o topo, depois setores, recursos e um CTA no meio antes da comparação.
homeLayout: "demo"Visualizar ao vivo ↗Uma página de conversão para tráfego pago: vídeo de vendas no topo (hero.videoId — um espaço reservado estilizado até você defini-lo), como funciona, setores, preços cedo, dúvidas, pronto.
homeLayout: "vsl"Visualizar ao vivo ↗Uma página enxuta: topo mínimo (sem demo), canais e ferramentas, recursos, preços, dúvidas. Para públicos aquecidos que só precisam do essencial.
homeLayout: "compact"Visualizar ao vivo ↗Um arquivoColoque sua marca
Tudo o que o cliente vê — nome, textos, preços, dúvidas, páginas jurídicas — vem de src/brand.config.ts. Ele é bem comentado; leia de cima a baixo uma vez e você conhecerá o site inteiro.
Identidade e textos
Defina brandName, domínio, URL do app e e-mail de suporte, depois passe por cada seção (topo, planos de preço, dúvidas…). Procure no projeto o texto YourBrand se achar que deixou passar algo.
Logo e imagens
Coloque seus arquivos em public/brand/: logo.svg, favicon.svg e og.svg (a imagem de compartilhamento nas redes). Qualquer formato funciona — atualize os caminhos na configuração se usar .png.
Páginas jurídicas
Termos e Privacidade são gerados a partir dos blocos legalEntity, legalJurisdiction e infrastructure da configuração. Tudo entre [COLCHETES] DEVE ser substituído antes de publicar — e peça a um advogado que revise as duas páginas.
Os depoimentos vêm vazios
De propósito. Adicione apenas depoimentos seus, com permissão — nunca reutilize os de outra pessoa. Deixe a lista vazia e a seção inteira se esconde sozinha.
Edição com IAEdite qualquer coisa com o Claude Code
O Claude Code é o agente de programação com IA da Anthropic que roda no seu terminal. Este projeto já vem configurado para ele: o Claude já conhece a estrutura, as regras e as armadilhas do modelo, então você pode mudar qualquer coisa descrevendo em linguagem natural — sem programar.
npm install -g @anthropic-ai/claude-code # instale uma vez cd caminho/para/este-projeto claude # inicie dentro do projeto
O que já vem pronto para você
CLAUDE.md — o briefing do projeto que o Claude lê automaticamente: arquitetura, onde fica cada tipo de alteração e o que não mexer.
.claude/skills/ — fluxos guiados que você chama pelo nome: /rebrand (entrevista → sua marca inteira preenchida), /theme (trocar ou criar variantes) e /deploy (build + publicação no Cloudflare Pages).
Pedidos que funcionam
É só descrever a alteração:
"Mude a marca deste site para AcmeReply, domínio acmereply.com, cor da marca #7c3aed"
"Adicione um quarto plano chamado Agency a $297/mês"
"Reescreva o topo para um público de clínicas odontológicas"
"Troque o tema para tidal e deixe o FAQ com seis perguntas"
Depois de fazer uma alteração, o Claude roda npm run build para confirmar que nada quebrou — essa é a rede de segurança; se o build falhar, o site não é publicado quebrado.
Controle de versãoColoque no GitHub
O Git dá a você um histórico para desfazer cada alteração; o GitHub guarda esse histórico on-line e é de onde o Cloudflare Pages publica. Configuração única, cinco minutos.
# 1. uma vez: instale o git (git-scm.com) e crie uma conta grátis no github.com # 2. na pasta do projeto — inicie o histórico e crie o primeiro registro git init git add . git commit -m "Meu site — versão inicial" # 3. crie um repositório PRIVADO no GitHub e envie # (mais fácil: instale a CLI do GitHub em cli.github.com e depois) gh auth login gh repo create my-site --private --source=. --push
Rotina do dia a dia
Depois de cada sessão de edição:
git add . git commit -m "o que mudou" git push
Só isso. Cada commit é um ponto de restauração, e cada push dispara uma nova publicação se você conectar o Cloudflare Pages ao repositório (próxima seção).
Sem terminal? Sem problema
O GitHub Desktop (desktop.github.com) faz tudo isso com botões: File → Add local repository, depois "Publish repository" (mantenha "private" marcado), e então Commit + Push após cada alteração. O Claude Code também pode rodar os comandos git para você — é só pedir "faça commit e push das minhas alterações".
Hospedagem grátisHospede grátis no Cloudflare Pages
O Cloudflare Pages serve sites estáticos como este em uma CDN global, de graça — banda ilimitada, SSL grátis e domínios personalizados incluídos. Duas formas de publicar:
A) Conectar o GitHub (recomendado)
1. dash.cloudflare.com → crie uma conta grátis → Workers & Pages → Create → Pages → "Connect to Git".
2. Autorize o GitHub e escolha seu repositório.
3. Configurações de build — framework preset None, comando de build npm run build, pasta de saída dist.
4. Publique. Você ganha um endereço *.pages.dev grátis, e cada git push publica automaticamente a nova versão.
B) Envio direto
Sem precisar do GitHub — faça o build localmente e envie a pasta dist/:
npm run build npx wrangler pages project create my-site npx wrangler pages deploy dist --project-name=my-site
(Ou arraste e solte a pasta dist no painel: Create → Pages → "Upload assets".)
Domínio personalizado
No seu projeto do Pages → Custom domains → "Set up a domain". Se o seu domínio já usa o DNS da Cloudflare, é um clique; caso contrário, a Cloudflare mostra o registro CNAME exato para adicionar no seu registrador. O SSL é automático. Configure yourbrand.com e www, e lembre-se de colocar o endereço final em brand.config.ts → siteUrl e refazer o build para que as tags canonical/OG batam.
Indo alémEstá no ar — agora evolua
Textos de funil
Precisa de anúncios, uma página de captura ou uma sequência de e-mails para trazer tráfego para cá? Peça ao Claude Code — ele lê toda a sua configuração de marca, então "escreva 5 ângulos de anúncio e uma sequência de 3 e-mails de follow-up alinhados a esta landing page" volta com a cara da sua marca.
Mantenha atualizado
Atualize preços, respostas das dúvidas e capturas de tela conforme sua oferta evolui — é uma edição na configuração + push. Páginas de preço desatualizadas perdem vendas em silêncio.
Antes de lançar
Checklist: nenhum [COLCHETE] sobrando, jurídico revisado, seu link real do WhatsApp em whatsAppLink, og.svg mostra sua marca, e siteUrl corresponde ao seu domínio real.