Curso 07 · Aula 1 de 3

Prompt principal para criação do portal

Objetivo da aula

Gerar o site institucional completo do cliente com um único prompt detalhado.

Prompt
Crie um site institucional completo, moderno, profissional e responsivo para uma empresa.

O objetivo principal é converter visitantes em contatos pelo WhatsApp.

==================================================
1. DADOS DA EMPRESA
==================================================

Nome da empresa: [NOME DA EMPRESA]

Segmento: [NICHO]

Cidade principal: [CIDADE]

Regiões atendidas: [LISTAR CIDADES, BAIRROS OU REGIÕES]

WhatsApp: [NÚMERO COMPLETO COM 55 + DDD + TELEFONE]

Instagram: [LINK OU INFORMAR QUE NÃO POSSUI]

Telefone adicional: [NÚMERO OU INFORMAR QUE NÃO POSSUI]

Endereço: [ENDEREÇO OU INFORMAR QUE NÃO DEVE APARECER]

Horário de atendimento: [HORÁRIO]

Serviço principal: [SERVIÇO PRINCIPAL]

Serviços oferecidos:
[LISTAR SERVIÇOS]

Diferenciais:
[LISTAR DIFERENCIAIS]

Apresentação da empresa:
[COLE O TEXTO OU INFORME QUE NÃO FOI FORNECIDO]

Formas de pagamento:
[INFORMAR OU OMITIR]

==================================================
2. OBJETIVO DO SITE
==================================================

O site deve:

- transmitir confiança;
- apresentar os serviços claramente;
- facilitar o contato;
- destacar o botão do WhatsApp;
- funcionar perfeitamente no celular;
- possuir aparência profissional;
- ser organizado para publicação no Netlify;
- possuir estrutura preparada para crescimento futuro do blog;
- utilizar linguagem comercial objetiva;
- incentivar o visitante a solicitar orçamento.

==================================================
3. TECNOLOGIA
==================================================

Utilize somente:

- HTML;
- CSS;
- JavaScript puro.

Não utilize:

- React;
- Vue;
- Angular;
- frameworks;
- banco de dados;
- bibliotecas externas desnecessárias;
- instalação de pacotes;
- dependências complexas.

O site precisa funcionar ao abrir diretamente o arquivo index.html no navegador.

==================================================
4. ESTRUTURA OBRIGATÓRIA
==================================================

Crie os seguintes arquivos:

index.html
404.html
robots.txt
sitemap.xml
README.txt
css/style.css
js/script.js
blog/index.html

Utilize as seguintes imagens:

img/logo.png
img/favicon.png
img/capa.webp
img/sobre.webp
img/servico-01.webp
img/servico-02.webp
img/servico-03.webp

==================================================
5. IDENTIDADE VISUAL
==================================================

Cores principais:

[COR PRINCIPAL]
[COR SECUNDÁRIA]
[COR DE DESTAQUE]

Utilize obrigatoriamente:

img/logo.png

Use a logomarca no menu superior e no rodapé.

Utilize:

img/favicon.png

como favicon do site.

==================================================
6. MENU SUPERIOR
==================================================

Crie um menu moderno com:

- Início
- Serviços
- Sobre
- Regiões atendidas
- Diferenciais
- Perguntas frequentes
- Blog
- Contato

No celular, utilize menu responsivo.

Inclua um botão destacado:

Solicitar orçamento

==================================================
7. SEÇÃO PRINCIPAL
==================================================

Utilize:

img/capa.webp

Crie uma seção principal moderna com overlay escuro ou degradê.

Inclua:

- título persuasivo;
- subtítulo objetivo;
- botão principal para WhatsApp;
- botão secundário para visualizar serviços;
- texto relacionado à cidade ou região;
- destaque visual profissional.

==================================================
8. SERVIÇOS
==================================================

Crie uma seção com cards profissionais.

Utilize as imagens:

img/servico-01.webp
img/servico-02.webp
img/servico-03.webp

Apresente os serviços:

[LISTAR SERVIÇOS]

Cada card deve possuir:

- nome do serviço;
- descrição curta;
- imagem;
- botão para solicitar orçamento;
- link para WhatsApp.

==================================================
9. SOBRE A EMPRESA
==================================================

Utilize:

img/sobre.webp

Crie uma seção institucional.

Use somente informações fornecidas.

Não invente:

- tempo de mercado;
- número de clientes;
- certificações;
- endereço;
- avaliações;
- quantidade de serviços realizados;
- depoimentos.

==================================================
10. REGIÕES ATENDIDAS
==================================================

Crie uma seção organizada com:

[LISTAR REGIÕES]

Inclua uma chamada para ação:

"Consulte atendimento para sua região pelo WhatsApp."

==================================================
11. DIFERENCIAIS
==================================================

Crie cards com ícones simples.

Utilize:

[LISTAR DIFERENCIAIS]

==================================================
12. PERGUNTAS FREQUENTES
==================================================

Crie entre 6 e 10 perguntas frequentes relacionadas ao segmento.

As respostas devem ser objetivas.

Não invente informações específicas da empresa.

Quando necessário, incentive o visitante a confirmar os detalhes pelo WhatsApp.

==================================================
13. WHATSAPP
==================================================

Crie um botão flutuante fixo do WhatsApp visível em todas as páginas.

Crie botões adicionais nas principais seções.

Utilize este formato:

https://wa.me/[NÚMERO COMPLETO]?text=[MENSAGEM CODIFICADA]

Mensagem padrão:

Olá! Acessei o site da [NOME DA EMPRESA] e gostaria de solicitar um orçamento.

Utilize o número:

[NÚMERO COMPLETO]

O botão deve funcionar no celular e no computador.

==================================================
14. BLOG
==================================================

Crie uma chamada para:

blog/index.html

Na página inicial do blog, inclua uma apresentação simples.

Não invente artigos já publicados.

Inclua três sugestões de conteúdos futuros relacionadas ao segmento.

==================================================
15. SEO BÁSICO
==================================================

Inclua:

- title adequado;
- meta description;
- headings organizados;
- textos úteis;
- atributo alt em todas as imagens;
- Open Graph básico;
- favicon;
- robots.txt;
- sitemap.xml;
- HTML semântico;
- linguagem natural;
- palavras relacionadas ao nicho e à cidade;
- links internos;
- URL amigável;
- boa legibilidade;
- carregamento simples.

Evite repetição exagerada de palavras-chave.

==================================================
16. RODAPÉ
==================================================

Inclua:

- logomarca;
- nome da empresa;
- segmento;
- cidade principal;
- regiões atendidas;
- WhatsApp;
- telefone adicional, caso exista;
- Instagram, caso exista;
- horário de atendimento;
- link para blog;
- direitos reservados.

==================================================
17. DESIGN
==================================================

O site deve possuir:

- visual moderno;
- layout limpo;
- boa leitura;
- aparência comercial;
- espaçamento profissional;
- responsividade;
- botões destacados;
- contraste adequado;
- seções bem separadas;
- animações discretas;
- carregamento rápido;
- boa experiência em celular.

==================================================
18. REGRAS IMPORTANTES
==================================================

Não invente informações.

Não crie depoimentos falsos.

Não crie avaliações falsas.

Não invente número de clientes.

Não invente tempo de mercado.

Não invente certificações.

Não invente endereço.

Não invente formas de pagamento.

Quando alguma informação não tiver sido fornecida, omita o conteúdo.

==================================================
19. ENTREGA
==================================================

Entregue todos os arquivos completos.

Para cada arquivo:

1. Informe o nome.
2. Informe a pasta exata.
3. Entregue o código completo.
4. Não entregue apenas trechos.
5. Não omita partes do código.
6. Garanta que os caminhos das imagens estejam corretos.
7. Garanta que o botão do WhatsApp esteja funcionando.
Terminou esta aula? Marque como concluída para salvar seu progresso.