Curso 07 · Aula 3 de 3

Prompt simplificado para site sem pastas de blog

Objetivo da aula

Gerar um site institucional completo com blog em página única, sem necessidade de pastas individuais para cada artigo.

Este prompt cria um site premium semelhante ao da aula anterior, mas com uma estrutura de blog simplificada.

Em vez de criar pastas individuais para cada artigo (blog-1, blog-2, blog-3...), ele utiliza:

  • blog.html — página principal com todos os artigos listados;
  • artigo.html — página modelo para um artigo completo.

Essa estrutura é mais simples de manter e ideal para clientes que não precisam de um blog extenso.

Como usar:

  1. Copie o prompt abaixo.
  2. Substitua todas as variáveis entre colchetes.
  3. Cole na Claude e aguarde a geração dos arquivos.
Prompt simplificado — usar na Claude
Crie um site institucional completo, hiper moderno, responsivo e altamente persuasivo para uma empresa do segmento [NICHO DA EMPRESA].
O principal objetivo do site é gerar contatos comerciais e levar o visitante a clicar no botão do WhatsApp para solicitar orçamento, atendimento ou mais informações.

1. Informações da empresa

Utilize os dados abaixo em todo o site:

- Nome da empresa: [NOME DA EMPRESA]
- Segmento: [NICHO DA EMPRESA]
- Cidade ou região de atendimento: [CIDADE OU REGIÃO]
- WhatsApp: [NÚMERO COM DDD]
- Link do WhatsApp: https://wa.me/55[DDD+NÚMERO]
- Mensagem automática do WhatsApp: Olá! Encontrei o site da [NOME DA EMPRESA] e gostaria de solicitar mais informações.
- E-mail: [E-MAIL]
- Instagram: [LINK DO INSTAGRAM OU REMOVER CAMPO]
- Endereço: [ENDEREÇO OU REMOVER CAMPO]
- Horário de atendimento: [HORÁRIO]
- Diferencial principal: [PRINCIPAL DIFERENCIAL]
- Serviços oferecidos: [LISTAR SERVIÇOS]

2. Logo e identidade visual

Existe uma pasta chamada images ou imagens no projeto.
Analise os arquivos existentes nessa pasta e identifique a logo da empresa.
Utilize automaticamente as cores predominantes da logo para criar toda a identidade visual do portal, incluindo: cor principal, cor secundária, cor de destaque, cores dos botões, ícones, bordas, gradientes, efeitos de iluminação, elementos decorativos e detalhes do rodapé.
Não altere a logo.
A logo deve aparecer no cabeçalho e no rodapé, com tamanho proporcional e boa visibilidade.
Caso existam imagens adicionais na pasta, utilize-as de maneira estratégica nas seções do site. Não invente arquivos inexistentes.

3. Estilo visual

Crie um layout premium, moderno e visualmente impactante, evitando aparência de template genérico.
Utilize:

- background criativo relacionado ao nicho [NICHO DA EMPRESA];
- overlays escuros ou degradês sobre imagens para garantir leitura adequada;
- efeitos sutis de iluminação;
- gradientes alinhados às cores da logo;
- cards modernos;
- sombras suaves;
- bordas arredondadas;
- ícones coerentes;
- elementos com transparência e efeito glassmorphism;
- animações suaves ao rolar a página;
- transições elegantes;
- botão flutuante de WhatsApp;
- chamadas para ação em pontos estratégicos;
- alto contraste nos textos;
- excelente experiência em celulares.

O site deve transmitir profissionalismo, confiança e desejo imediato de entrar em contato.
Não exagere nas animações. O carregamento deve continuar rápido.

4. Estrutura técnica

Crie o projeto utilizando apenas HTML5, CSS3 e JavaScript puro. Não utilize frameworks obrigatórios.
Organize os arquivos da seguinte forma:

/
├── index.html
├── servicos.html
├── sobre.html
├── blog.html
├── artigo.html
├── contato.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── arquivos existentes

O código deve estar limpo, comentado, organizado e pronto para hospedagem.
Utilize componentes visuais consistentes em todas as páginas, mantendo o mesmo cabeçalho, rodapé, botões e padrão de cores.

5. Cabeçalho

Crie um cabeçalho moderno, fixo ao rolar a página, contendo:

- logo à esquerda;
- menu central ou alinhado à direita;
- links para Início, Serviços, Sobre, Blog e Contato;
- botão destacado: "Falar no WhatsApp";
- menu responsivo para celular;
- efeito visual discreto quando o usuário rolar a página.

6. Página inicial — index.html

A página inicial deve conter as seguintes seções:

Hero principal com título forte, subtítulo objetivo, fundo chamativo com overlay, botão principal "Solicitar orçamento pelo WhatsApp", botão secundário "Conhecer serviços" e mensagem de confiança.

Indicadores de confiança com quatro destaques: atendimento rápido, profissionais qualificados, orçamento facilitado e atendimento em [REGIÃO].

Serviços principais com cards modernos contendo ícone, nome do serviço, descrição curta e botão "Solicitar orçamento".

Por que escolher a empresa com seção de diferenciais: experiência, atendimento personalizado, agilidade, qualidade, compromisso e suporte pelo WhatsApp.

Seção visual de conversão com background diferenciado, overlay e chamada forte para contato imediato. Botão grande para WhatsApp.

Como funciona em três passos: entre em contato pelo WhatsApp, informe o serviço necessário, receba atendimento e orçamento.

Depoimentos com três depoimentos genéricos, identificados no código para substituição futura.

Perguntas frequentes com FAQ e efeito de abrir e fechar com JavaScript.

Blog em destaque com três cards de artigos genéricos com imagem, título, resumo, data e botão "Ler artigo". Botão para acessar todos os artigos.

CTA final com chamada forte para contato pelo WhatsApp.

7. Página de serviços — servicos.html

Banner interno, texto introdutório, cards detalhados para cada serviço, benefícios, diferenciais, botão de WhatsApp em cada serviço e CTA final. Cada serviço deve possuir descrição clara e persuasiva.

8. Página sobre a empresa — sobre.html

Banner interno, apresentação da empresa, história genérica editável, missão, visão, valores, diferenciais, região atendida e CTA para WhatsApp. Deixar comentários no HTML indicando onde personalizar.

9. Página de blog — blog.html

Banner interno, campo visual de busca, categorias, cards de artigos com título, resumo, imagem, data, categoria e botão "Ler artigo", paginação visual. Crie inicialmente seis artigos genéricos relacionados ao nicho [NICHO DA EMPRESA]. Os textos devem ajudar no SEO local e demonstrar autoridade.

10. Página interna de artigo — artigo.html

Título, data, categoria, imagem de capa, introdução, subtítulos, parágrafos, lista de dicas, CTA no meio do artigo, CTA no final, botão de compartilhamento visual e artigos relacionados. Insira um artigo genérico completo relacionado ao nicho. Utilize uma estrutura fácil de duplicar para criar novos artigos.

11. Página de contato — contato.html

Banner interno, WhatsApp em destaque, telefone, e-mail, horário de atendimento, região atendida, formulário visual com nome, telefone, serviço desejado e mensagem. Botão de envio direcionando os dados para o WhatsApp via JavaScript. Mapa apenas se houver endereço informado. CTA final.

12. WhatsApp

Botão no cabeçalho, no hero, nos cards de serviços, nas seções de CTA, na página de contato e botão flutuante fixo no canto inferior direito. Todos os botões devem abrir o WhatsApp com mensagem automática personalizada. O botão flutuante deve possuir animação discreta.

13. SEO

Title específico, meta description, palavras-chave relacionadas ao nicho e à região, Open Graph, headings organizados, URLs internas corretas, textos alternativos nas imagens, conteúdo semântico e dados estruturados básicos de negócio local quando aplicável.

14. Rodapé

Logo, descrição curta, menu rápido, serviços, WhatsApp, e-mail, região atendida, horário, direitos autorais, link para política de privacidade e chamada para contato.

15. Regras importantes

Não utilize textos genéricos excessivamente artificiais. Não utilize Lorem Ipsum. Não crie informações falsas. Deixe comentários no código onde personalizar. Garanta excelente visualização em celular, tablet e desktop. Verifique todos os links, menu mobile, FAQ e formulário. Utilize as imagens existentes na pasta. Não remova arquivos existentes. Entregue todos os arquivos completos.

16. Resultado esperado

Entregue um site visualmente premium, moderno, rápido, organizado e pronto para publicação.
O visitante deve entender rapidamente: qual serviço é oferecido, qual região é atendida, quais são os diferenciais, como entrar em contato e onde clicar para falar pelo WhatsApp.
Comece analisando a pasta de imagens e depois crie todos os arquivos completos do projeto.
Terminou esta aula? Marque como concluída para salvar seu progresso.