Prompt premium para site completo 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]
- Serviço principal: [SERVIÇO PRINCIPAL]
- 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 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;
- 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;
- JavaScript puro.

Não utilize frameworks obrigatórios.
Organize os arquivos da seguinte forma:

/
├── index.html
├── servicos.html
├── sobre.html
├── contato.html
├── blog/
│   ├── index.html
│   ├── blog-1/
│   │   └── index.html
│   ├── blog-2/
│   │   └── index.html
│   ├── blog-3/
│   │   └── index.html
│   ├── blog-4/
│   │   └── index.html
│   ├── blog-5/
│   │   └── index.html
│   └── blog-6/
│       └── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── arquivos existentes

A pasta blog será a área central de conteúdos do site.
O arquivo blog/index.html deve funcionar como a página principal do blog, exibindo todos os artigos cadastrados.
Cada artigo deve possuir sua própria pasta independente:

/blog/blog-1/index.html
/blog/blog-2/index.html
/blog/blog-3/index.html

Essa estrutura deverá permitir que novos artigos sejam adicionados futuramente de maneira simples, apenas criando novas pastas:

/blog/blog-7/index.html
/blog/blog-8/index.html
/blog/blog-9/index.html

Não coloque todos os artigos dentro de um único arquivo HTML.
Cada página de artigo deve funcionar individualmente e possuir sua própria URL amigável.
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.

O link do menu "Blog" deve direcionar para: /blog/

6. Página inicial — index.html

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

Hero principal

Crie uma primeira dobra extremamente persuasiva, com:

- título forte relacionado ao serviço;
- subtítulo objetivo;
- fundo chamativo e criativo relacionado ao nicho;
- overlay para facilitar a leitura;
- botão principal: "Solicitar orçamento pelo WhatsApp";
- botão secundário: "Conhecer serviços";
- pequena mensagem de confiança, como atendimento rápido ou orçamento sem compromisso.

Exemplo de estrutura para o título:
"[SERVIÇO PRINCIPAL] com qualidade, agilidade e atendimento especializado em [REGIÃO]"

Indicadores de confiança

Inclua uma faixa com quatro destaques:

- atendimento rápido;
- profissionais qualificados;
- orçamento facilitado;
- atendimento em [REGIÃO].

Serviços principais

Crie cards modernos para os principais serviços informados.
Cada card deve possuir:

- ícone;
- nome do serviço;
- descrição curta;
- botão "Solicitar orçamento".

Por que escolher a empresa

Crie uma seção destacando os principais diferenciais:

- experiência;
- atendimento personalizado;
- agilidade;
- qualidade;
- compromisso;
- suporte pelo WhatsApp.

Seção visual de conversão

Adicione uma seção com background diferenciado, overlay e chamada forte para contato imediato.
Exemplo: "Precisa de [SERVIÇO PRINCIPAL]? Fale agora com nossa equipe."
Inclua um botão grande para WhatsApp.

Como funciona

Crie uma seção simples em três passos:

1. Entre em contato pelo WhatsApp.
2. Informe o serviço necessário.
3. Receba atendimento e orçamento.

Depoimentos

Inclua inicialmente três depoimentos genéricos, claramente identificados no código para futura substituição pelo administrador.

Perguntas frequentes

Crie uma seção de FAQ com perguntas relacionadas ao nicho e respostas curtas.
Use efeito de abrir e fechar com JavaScript.

Blog em destaque

Exiba três cards de artigos genéricos com imagem, título, resumo, data e botão "Ler artigo".
Os botões devem direcionar para:

/blog/blog-1/
/blog/blog-2/
/blog/blog-3/

Inclua também um botão: "Ver todos os artigos"
Esse botão deve direcionar para: /blog/

CTA final

Finalize a página com uma chamada forte para contato pelo WhatsApp.

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

Crie uma página completa com:

- banner interno com título;
- texto introdutório;
- cards detalhados para cada serviço;
- benefícios;
- diferenciais;
- botão de WhatsApp em cada serviço;
- CTA final.

Cada serviço deve possuir uma descrição clara e persuasiva.

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

Crie uma página institucional com:

- banner interno;
- apresentação da empresa;
- história genérica editável;
- missão;
- visão;
- valores;
- diferenciais;
- região atendida;
- CTA para WhatsApp.

O texto deve ser profissional, mas deixar comentários no HTML indicando onde o administrador poderá personalizar as informações.

9. Página principal do blog — blog/index.html

Crie uma área de blog moderna, organizada e preparada para receber novos conteúdos futuramente.
A página deve possuir:

- banner interno;
- título principal;
- texto introdutório;
- campo visual de busca;
- filtro visual por categorias;
- cards de artigos com imagem, título, resumo, data, categoria e botão "Ler artigo";
- paginação visual preparada para futuras páginas;
- CTA para WhatsApp ao final.

Crie inicialmente seis cards de artigos relacionados ao nicho [NICHO DA EMPRESA].
Cada card deve direcionar para uma página individual:

/blog/blog-1/
/blog/blog-2/
/blog/blog-3/
/blog/blog-4/
/blog/blog-5/
/blog/blog-6/

Os textos devem ajudar no SEO local e demonstrar autoridade.

10. Estrutura individual dos artigos

Crie seis artigos iniciais completos, cada um em sua própria pasta:

/blog/blog-1/index.html
/blog/blog-2/index.html
/blog/blog-3/index.html
/blog/blog-4/index.html
/blog/blog-5/index.html
/blog/blog-6/index.html

Cada página de artigo deve possuir:

- título exclusivo;
- meta title próprio;
- meta description própria;
- data;
- categoria;
- imagem de capa;
- introdução;
- subtítulos;
- parágrafos bem organizados;
- lista de dicas;
- CTA no meio do artigo;
- CTA no final;
- botão visual de compartilhamento;
- três artigos relacionados;
- botão para voltar ao blog;
- botão flutuante de WhatsApp;
- cabeçalho e rodapé completos.

Os artigos devem ser genéricos, mas coerentes com o nicho [NICHO DA EMPRESA].
Utilize uma estrutura fácil de duplicar para criar novos artigos futuramente.

11. Modelo para novos artigos

Dentro do código, adicione comentários explicando como cadastrar um novo artigo.
O processo deverá ser simples:

1. Duplicar uma pasta de artigo existente.
2. Renomear a pasta seguindo a sequência: blog-7, blog-8, blog-9.
3. Alterar o conteúdo do arquivo index.html.
4. Adicionar o novo card na página: /blog/index.html.
5. Atualizar a seção de artigos relacionados, caso necessário.

Inclua comentários claros no HTML, como:

<!-- PARA ADICIONAR UM NOVO ARTIGO:
1. Duplique uma pasta existente dentro de /blog/
2. Renomeie a pasta para blog-X
3. Edite o index.html interno
4. Adicione um novo card em /blog/index.html
-->

12. Links relativos da pasta blog

Garanta que todos os links funcionem corretamente, inclusive dentro das páginas localizadas nas subpastas do blog.
Nas páginas dos artigos, utilize caminhos relativos corretos para acessar arquivos compartilhados.
Exemplo:

<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/script.js"></script>
<img src="../../images/nome-da-imagem.jpg" alt="Descrição">

Para retornar à página inicial a partir de um artigo:
<a href="../../index.html">Início</a>

Para retornar ao blog:
<a href="../index.html">Blog</a>

Para acessar um artigo relacionado:
<a href="../blog-2/">Ler artigo</a>

Revise todos os caminhos antes de finalizar o projeto.

13. Página de contato — contato.html

Crie uma página de contato com:

- 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 preenchidos para o WhatsApp;
- mapa apenas se houver endereço informado;
- CTA final.

O formulário não precisa de backend. Utilize JavaScript para montar a mensagem e abrir o WhatsApp automaticamente.

14. WhatsApp

O WhatsApp deve ser o principal canal de conversão do site.
Adicione:

- botão no cabeçalho;
- botão no hero;
- botões nos cards de serviços;
- botão nas seções de CTA;
- botão na página de contato;
- botão flutuante fixo no canto inferior direito;
- botão no meio dos artigos;
- botão ao final dos artigos.

Todos os botões devem abrir o WhatsApp com mensagem automática personalizada.
O botão flutuante deve possuir animação discreta para chamar atenção sem incomodar.

15. SEO

Configure o SEO básico em todas as páginas:

- 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;
- dados estruturados básicos de negócio local quando aplicável.

Utilize termos relacionados a:

- [NICHO DA EMPRESA];
- [SERVIÇO PRINCIPAL];
- [CIDADE OU REGIÃO];
- orçamento;
- atendimento;
- empresa especializada.

Cada artigo do blog deve possuir:

- título próprio;
- descrição própria;
- palavra-chave principal;
- subtítulos coerentes;
- links internos;
- CTA para contato;
- estrutura preparada para indexação no Google.

16. Rodapé

Crie um rodapé completo contendo:

- 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;
- chamada para contato.

17. Regras importantes

- Não utilize textos genéricos excessivamente artificiais.
- Não utilize Lorem Ipsum.
- Não crie informações falsas específicas, como anos de experiência, números de clientes ou avaliações.
- Deixe comentários no código onde o administrador deverá personalizar informações.
- Garanta excelente visualização em celular, tablet e desktop.
- Verifique se todos os links funcionam.
- Garanta que o menu mobile funcione.
- Garanta que o FAQ funcione.
- Garanta que o formulário abra corretamente o WhatsApp.
- Utilize as imagens existentes na pasta sempre que possível.
- Não remova arquivos existentes da pasta.
- Não crie dependências desnecessárias.
- Não coloque todos os artigos em uma única página.
- Cada artigo deve possuir sua própria pasta e seu próprio arquivo index.html.
- Entregue todos os arquivos completos.

18. Resultado esperado

Entregue um site visualmente premium, moderno, rápido, organizado e pronto para publicação.
O visitante deve entender rapidamente:

1. qual serviço é oferecido;
2. qual região é atendida;
3. quais são os diferenciais;
4. como entrar em contato;
5. onde clicar para falar pelo WhatsApp.

A estrutura do blog deve estar preparada para crescimento contínuo, permitindo a criação de dezenas ou centenas de artigos futuramente sem comprometer a organização do portal.
Comece analisando a pasta de imagens e depois crie todos os arquivos completos do projeto.