irfanfaraaz/website-builder

Website Builder — Modificação de Template + Deploy no Netlify

Objetivo

Receber uma breve descrição do que o usuário deseja e produzir uma landing page impressionante e pronta para produção, modificando um template existente e testado — e não construindo do zero. Em seguida, publicá-la ao vivo no Netlify e retornar a URL.

Entradas

• Nome da marca: Nome da empresa/projeto
• Tese central: Uma frase sobre o que é (ou uma URL para verificar)
• Vibe/estética: Qualquer direção (ex.: "escuro e tecnológico", "luxo clínico", "brutalista")
• Objetivo de conversão: Qual deve ser o CTA (padrão: agendar uma chamada)

Localização do Template

O template base está em website-template/ na raiz do workspace. É um site completo e funcional em React + Vite + Tailwind v3 + GSAP com:

Estrutura

website-template/
├── src/
│   ├── App.jsx              # Layout raiz (importa todas as seções)
│   ├── index.css            # Importações do Tailwind, overlay de ruído, scrollbar
│   ├── main.jsx             # Ponto de entrada
│   └── components/
│       ├── Navbar.jsx        # Nav flutuante, reativo ao scroll
│       ├── Hero.jsx          # Hero de viewport completa, imagem de fundo, revelação de texto GSAP
│       ├── Features.jsx      # Seção de fundo claro com 3 micro-UI interativas
│       ├── DiagnosticShuffler.jsx  # Widget de cartões empilhados com rotação automática
│       ├── TelemetryTypewriter.jsx # Widget de máquina de escrever estilo terminal
│       ├── AdaptiveRegimen.jsx     # Seletor de calendário com cursor animado
│       ├── Philosophy.jsx    # Fundo parallax, revelação de texto palavra por palavra
│       ├── Protocol.jsx      # Cartões de scroll empilhados (pinagem GSAP ScrollTrigger)
│       ├── Membership.jsx    # Tabela de preços com 3 níveis e efeitos hover
│       └── Footer.jsx        # Rodapé escuro com colunas
├── tailwind.config.js        # Tokens de cor, fontes, border-radius
├── postcss.config.js         # PostCSS padrão + autoprefixer
├── vite.config.js            # Vite + plugin React
├── package.json              # React 19, GSAP, Lucide, Tailwind v3
└── index.html

Stack Tecnológica (NÃO ALTERAR)

• React 19 + Vite 7
• Tailwind CSS v3 (usa tailwind.config.js + diretivas @tailwind — NÃO v4)
• GSAP 3 com ScrollTrigger
• Ícones Lucide React
• PostCSS + Autoprefixer

Sistema de Design (em tailwind.config.js)

colors:
  moss: '#070707'      — acento preto profundo
  clay: '#0026FF'      — azul tech primário
  cream: '#EAEAEA'     — texto off-white
  charcoal: '#070707'  — fundo escuro primário

fonts:
  sans: Plus Jakarta Sans, Outfit
  serif: Cormorant Garamond
  mono: monospace do sistema

Processo

Passo 1: Copiar o Template

cp -R website-template/ nome-do-site/
cd nome-do-site
rm -rf node_modules
npm install

Passo 2: Personalizar para a Marca

Modifique estes arquivos — NÃO reestruture ou reescreva do zero:

1. tailwind.config.js — Altere os tokens de cor (moss, clay, cream, charcoal) e as fontes para combinar com a estética da marca. Os nomes das classes permanecem os mesmos, apenas os valores hexadecimais mudam.

2. index.css — Atualize a URL de importação do Google Fonts para corresponder às novas escolhas de fonte.

3. index.html — Atualize <title>.

4. Texto dos componentes — Localize e substitua textos específicos da marca em cada componente:

   • Navbar.jsx — Nome da marca, links de navegação, texto do botão CTA
   • Hero.jsx — Título principal, subtítulo, tagline, URL da imagem de fundo
   • Features.jsx — Cabeçalho da seção, subtítulo
   • DiagnosticShuffler.jsx — Títulos dos cartões, valores, tendências (tornar relevantes para a marca)
   • TelemetryTypewriter.jsx — Array de mensagens de digitação, rótulos de status
   • AdaptiveRegimen.jsx — Rótulos do widget, texto do botão
   • Philosophy.jsx — As duas afirmações contrastantes, rótulos da seção, imagem de fundo
   • Protocol.jsx — Títulos das etapas, descrições, cabeçalho da seção
   • Membership.jsx — Nomes dos níveis, preços, recursos, descrições (ou substitua por uma seção de CTA se não for necessário)
   • Footer.jsx — Nome da marca, tagline, colunas de links, direitos autorais

5. Imagens Unsplash — Substitua URLs de imagens de fundo em Hero.jsx e Philosophy.jsx por imagens que combinem com a marca. Use o formato https://images.unsplash.com/photo-ID?w=2000&q=80.

Passo 3: Build e Deploy

npm run build
npx netlify-cli deploy --prod --dir=dist --create-site nome-do-site

Se o site já estiver vinculado ao Netlify:

npm run build
npx netlify-cli deploy --prod --dir=dist

Nota: O comando interativo sites:create trava em ambientes não TTY. Sempre use a flag --create-site.

Passo 4: Retornar a URL ao Vivo

O que NÃO Fazer

• NÃO reescreva os componentes do zero. O template funciona. Modifique apenas cópia, cores e imagens.
• NÃO mude para Tailwind v4. O template usa v3 com tailwind.config.js. Mantenha-o.
• NÃO remova as micro-UI interativas (DiagnosticShuffler, TelemetryTypewriter, AdaptiveRegimen). Elas são o diferencial visual. Adapte o conteúdo delas para a marca.
• NÃO altere o layout estrutural (transições de seção arredondadas, cartões de scroll empilhados, seção de filosofia parallax). São esses elementos que fazem o site parecer bom.
• NÃO adicione novas dependências npm a menos que seja absolutamente necessário.

Folha de Dicas de Personalização

Alterando a Vibe

A estética inteira muda alterando 4 tokens de cor em tailwind.config.js:

Vibe	charcoal (fundo)	clay (acento)	cream (texto)	moss (acento escuro)
Tech Blue (padrão)	#070707	#0026FF	#EAEAEA	#070707
Luxo Dourado	#070707	#C9A84C	#F5F0E8	#0A0A0A
Neon Cyber	#0A0A0A	#00FFD1	#E0E0E0	#0A0A0A
Branco Clínico	#FAFAFA	#2563EB	#1A1A1A	#F5F5F5
Terracota Orgânico	#1A1410	#CC5833	#F2F0E9	#2E4036
Esmeralda Conteúdo	#090909	#10B981	#F0F0F0	#0A0A0A

Se o Cliente Não Precisa de Preços

Substitua o conteúdo de Membership.jsx por uma seção de CTA de largura total (mantenha o arquivo do componente, apenas altere seu JSX).

Exemplo Prático: 1SecondCopy (serviço de redação SEO)

Esta é a referência padrão-ouro para a profundidade das modificações necessárias. O conteúdo textual de cada componente muda, mas nenhuma alteração estrutural/de layout é feita.

Cores (tailwind.config.js)

moss: '#0A0A0A', clay: '#10B981', cream: '#F0F0F0', charcoal: '#090909'

Alterações componente por componente

Componente	O que mudou	O que permaneceu igual
Navbar.jsx	Marca → "1SECONDCOPY_", links → Processo/Plataforma/Preços, CTA → "Começar"	Nav flutuante, desfoque ao scroll, hambúrguer mobile
Hero.jsx	Título → "Palavras que Ranqueiam.", tagline → "Redação de Conteúdo, com um Toque Especial", subtítulo sobre escritores do top 1%, fundo Unsplash → tema de escrita	Revelação de texto GSAP, layout, sobreposições gradientes
Features.jsx	Cabeçalho → "Seu Centro de Comando de Conteúdo", subtítulo sobre dashboards em tempo real	Grade de 3 micro-UI, estrutura da seção
DiagnosticShuffler.jsx	Cartões → "Velocidade de Conteúdo: 48 artigos", "Posição Média SERP: #4.2", "Tempo de Entrega: 2.1 dias", rótulo → "Analytics de Conteúdo"	Animação de rotação automática, estrutura do cartão
TelemetryTypewriter.jsx	Mensagens → etapas do pipeline de conteúdo ("Pesquisando palavras-chave alvo...", "Combinando escritor ao brief..."), rótulos → "Fila ao Vivo", estatísticas → "Na Fila: 3 briefs" / "Entrega Média: 2.1 dias"	Efeito de máquina de escrever, estilo terminal
AdaptiveRegimen.jsx	Rótulo → "Agendador de Conteúdo", cabeçalho → "Selecione o Dia de Publicação", botão → "Enviar", cor GSAP → #10B981	Grade de calendário, cursor animado, chips de data
Philosophy.jsx	Jeito Antigo → "Contrate freelancers. Gerencie revisões. Reze para ranquear." vs Jeito Novo → "Envie um brief. Receba conteúdo SEO que converte.", fundo Unsplash trocado	Parallax de scroll, revelação palavra por palavra, layout
Protocol.jsx	Etapas → "Brief & Pesquisa" / "Redação Especializada" / "SEO & Entrega", cabeçalho → "O Processo.", descrição sobre o fluxo de trabalho deles	Cartões de scroll empilhados, pinagem GSAP, gráficos SVG
Membership.jsx	Níveis → Starter $0.09/palavra, Bulk $0.08/palavra, Enterprise Personalizado, todos os recursos reescritos para serviço de conteúdo	Grade de 3 colunas, efeitos hover, selo popular
Footer.jsx	Marca → "1SECONDCOPY_", tagline → "Conteúdo SEO sob demanda", colunas → Serviços/Empresa, status → "Escritores Online"	Layout, animação de ponto piscante, direitos autorais

Conclusão principal

~200 linhas de alterações de texto em 10 arquivos. Nenhuma alteração de layout, animação ou estrutural. O site parece completamente diferente porque cores + conteúdo fazem todo o trabalho pesado.

Ambiente

Requer:

• Node.js 18+
• npx netlify-cli (instala automaticamente)
• Conta Netlify autenticada via netlify login

Configuração Inicial

Antes de executar, verifique se o workspace possui um arquivo .gitignore. Se não tiver, assuma que o usuário é novo nesta skill. Nesse caso:

1. Pergunte ao usuário se esta é a primeira vez que ele executa esta skill
2. Se sim, oriente-o sobre como funciona e o que ele precisa configurar (chaves de API, variáveis de ambiente, dependências, etc.)
3. Avise que o Nick deseja tudo de bom para ele!