Como criar um site profissional com Elementor, MCP e IA (passo a passo com os prompts)

Você vai me ajudar a escrever a copy completa de um site institucional para um profissional da saúde emocional (psicólogo, psicanalista ou terapeuta).

PASSO 1. FORMULÁRIO DE ENTREVISTA
Antes de escrever qualquer texto, sua primeira resposta deve ser um formulário interativo que eu preencha direto na tela. Não escreva a copy e não faça as perguntas em texto corrido.

Como montar o formulário:
- Use o recurso de visual interativo (widget HTML) ou um artifact com formulário
- Visual limpo, campos grandes, fácil de preencher no celular
- Divida em 4 blocos com título: Identificação, Atendimento, Contato e Conteúdo
- Cada campo com um exemplo cinza dentro (placeholder) mostrando como preencher
- Ao lado de cada campo, uma caixinha "Não sei, sugira para mim"
- No final, um botão "Enviar respostas" que manda todas as respostas para o chat como uma mensagem minha, organizadas por bloco e com o número de cada pergunta
- Campos marcados como "Não sei" ou deixados em branco devem ser enviados como "SUGERIR"

Campos do formulário:

Bloco 1. Identificação
1. Nome do profissional como deve aparecer no site (texto)
2. Profissão e número do registro no conselho (texto, ex.: Psicóloga, CRP 04/00000)
3. Abordagem de trabalho (texto, ex.: psicanálise, TCC, terapia sistêmica)
4. Público atendido (caixas de seleção: adultos, adolescentes, crianças, casais, famílias, idosos, mais campo "Outro")

Bloco 2. Atendimento
5. Cidade e endereço do consultório (texto, ex.: Rua X, 123, sala 4, Bairro Y, Uberlândia/MG)
6. Modalidades (opção única: presencial, online, as duas)
7. Duração média e frequência das sessões (texto, ex.: 50 minutos, uma vez por semana)
8. Plataforma do atendimento online (opção única: Google Meet, Zoom, WhatsApp, Outra)

Bloco 3. Contato
9. WhatsApp com DDD (texto)
10. E-mail profissional (texto)
11. Instagram, Facebook e LinkedIn (três campos de link, todos opcionais)

Bloco 4. Conteúdo
12. Demandas que mais atende, de 5 a 9 (caixas de seleção com ansiedade, depressão, autoestima, luto, relacionamentos, estresse e burnout, traumas, conflitos familiares, autoconhecimento, crises de pânico, mais campo "Outras")
13. Formação, cursos e tempo de experiência (texto longo)
14. Uma frase que resume como o profissional enxerga o próprio trabalho (texto)
15. Tom do texto (opção única: acolhedor e sóbrio, próximo e leve, mais técnico)
16. Três temas de artigo para o blog (três campos de texto)

Se não for possível exibir um formulário interativo neste ambiente, avise em uma frase e faça a entrevista em texto: um bloco por mensagem, esperando minha resposta antes de seguir.

PASSO 2. RESUMO
Quando eu enviar as respostas:
- Para cada item marcado como SUGERIR, proponha uma opção coerente com o restante das respostas e sinalize com "(sugestão)"
- Dados de contato, endereço e registro nunca devem ser inventados; se faltarem, use [PREENCHER]
- Mostre um resumo de tudo o que entendeu e pergunte se pode escrever a copy

PASSO 3. ESTRUTURA DA COPY (nesta ordem)
1. Menu: Home, Sobre, Atendimento, Blog, Dúvidas
2. Hero: linha de apoio com nome e profissão, título curto (até 9 palavras) que valide o que a pessoa sente, subtítulo com o público e as principais dores, botão "Agendar uma conversa", microtexto com cidade e modalidades e uma faixa com 8 palavras-chave curtas
3. Identificação: título em duas frases mostrando o que a pessoa aparenta por fora e o que sente por dentro, um parágrafo, 8 sintomas curtos em formato de etiqueta, uma frase de acolhimento e o botão
4. Como funciona: título, subtítulo e 4 etapas (título curto e 1 frase cada)
5. Demandas: título "Como posso te ajudar?", subtítulo e um card por demanda com título e 1 frase
6. Sobre: título, 3 parágrafos curtos em primeira pessoa, lista de abordagem e lista de modalidades
7. Formas de atendimento: bloco presencial (texto, endereço e como funciona) e bloco online (texto e como funciona)
8. Motivos para começar: 4 motivos com título e 1 frase
9. Blog: título da seção e 3 artigos com categoria, título e resumo de 1 frase
10. Dúvidas frequentes: 7 perguntas com respostas curtas (primeira sessão, o que falar, só para crise, modalidade, duração, frequência, valores e horários)
11. Chamada final: título, parágrafo e botão "Falar com [nome] no WhatsApp"
12. Rodapé: nome, profissão, registro, cidade e links
13. SEO: title da página (até 60 caracteres) e meta description (até 155 caracteres)

REGRAS
- Português do Brasil, frases curtas e palavras que qualquer pessoa entende
- Sem promessa de cura ou de resultado, sem depoimentos de pacientes e sem preço no site, respeitando as regras de publicidade do conselho da profissão
- Sem travessão e sem frases de efeito exageradas
- Use exatamente os dados que eu passar; quando faltar algum, escreva [PREENCHER] no lugar
- Entregue cada seção com o nome em negrito para eu copiar com facilidade

Você vai escrever a copy completa de um site institucional para um psicólogo. Os dados do profissional já estão abaixo, então não faça perguntas: escreva a copy direto, usando exatamente estas informações.

DADOS DO PROFISSIONAL

Identificação
1. André Vieira
2. Psicólogo, CRP 04/00000
3. Psicanálise
4. Adultos, homens e mulheres

Atendimento
5. Uberlândia, MG. Rua Exemplo, 123, Sala 402, Bairro Jardim Acolher
6. Presencial e online
7. Sessões de aproximadamente 1 hora, com frequência combinada com cada paciente (na maioria das vezes, semanal)
8. Google Meet

Contato
9. (34) 99999-0000
10. contato@andrevieirapsicologo.com.br
11. Instagram: instagram.com/andrevieira.psi e Facebook: facebook.com/andrevieira.psi

Conteúdo
12. Ansiedade e crises de pânico; relacionamentos e dependência emocional; autoestima e autoconfiança; traumas e feridas emocionais; estresse, sobrecarga e burnout; tristeza profunda e depressão; transições de vida e recomeços; autoconhecimento; desenvolvimento pessoal
13. Graduação em Psicologia, especialização em teoria psicanalítica e mais de 10 anos de atendimento clínico com adultos
14. Cada pessoa vive suas questões de um jeito. Meu trabalho é oferecer uma escuta profissional para investigar aquilo que produz sofrimento, conflito ou repetição.
15. Acolhedor e sóbrio
16. Quando procurar um psicólogo? Sinais de que você precisa de terapia; Autoestima em reconstrução: o papel da terapia; Terapia online funciona? Como é o atendimento a distância

ESTRUTURA DA COPY (nesta ordem)
1. Menu: Home, Sobre, Atendimento, Blog, Dúvidas
2. Hero: linha de apoio com nome e profissão, título curto (até 9 palavras) que valide o que a pessoa sente, subtítulo com o público e as principais dores, botão "Agendar uma conversa", microtexto com cidade e modalidades e uma faixa com 8 palavras-chave curtas
3. Identificação: título em duas frases mostrando o que a pessoa aparenta por fora e o que sente por dentro, um parágrafo, 8 sintomas curtos em formato de etiqueta, uma frase de acolhimento e o botão
4. Como funciona: título, subtítulo e 4 etapas (título curto e 1 frase cada)
5. Demandas: título "Como posso te ajudar?", subtítulo e um card por demanda com título e 1 frase
6. Sobre: título, 3 parágrafos curtos em primeira pessoa, lista de abordagem e lista de modalidades
7. Formas de atendimento: bloco presencial (texto, endereço e como funciona) e bloco online (texto e como funciona)
8. Motivos para começar: 4 motivos com título e 1 frase
9. Blog: título da seção e 3 artigos com categoria, título e resumo de 1 frase
10. Dúvidas frequentes: 7 perguntas com respostas curtas (primeira sessão, o que falar, só para crise, modalidade, duração, frequência, valores e horários)
11. Chamada final: título, parágrafo e botão "Falar com [nome] no WhatsApp"
12. Rodapé: nome, profissão, registro, cidade e links
13. SEO: title da página (até 60 caracteres) e meta description (até 155 caracteres)

REGRAS
- Português do Brasil, frases curtas e palavras que qualquer pessoa entende
- Sem promessa de cura ou de resultado, sem depoimentos de pacientes e sem preço no site, respeitando as regras de publicidade do conselho da profissão
- Sem travessão e sem frases de efeito exageradas
- Use exatamente os dados que eu passar; quando faltar algum, escreva [PREENCHER] no lugar
- Entregue cada seção com o nome em negrito para eu copiar com facilidade

Crie a logo de um psicólogo chamado André Vieira.

Monograma com as iniciais AV entrelaçadas em traço fino e elegante. Ao lado do monograma, o nome em letras maiúsculas com espaçamento largo e, embaixo do nome, a palavra "PSICÓLOGO" em tamanho menor, separada por duas linhas finas.

Cor dourada (#986A28) com leve brilho metálico. Fundo transparente, formato horizontal, alta resolução, sem sombra e sem nenhum outro elemento.

Depois, gere uma segunda versão só com o monograma, em formato quadrado, para usar como ícone do site e foto de perfil.

Fotografia profissional de um psicólogo de aproximadamente 50 anos, cabelo grisalho e barba grisalha aparada, em pé, de braços cruzados e sorriso leve, usando blazer azul-marinho e camisa branca. Ele está dentro de um consultório elegante à meia-luz, com estante de madeira iluminada, luminárias de luz quente, plantas e um quadro abstrato em tons de dourado.

A pessoa fica no lado direito da imagem. O lado esquerdo fica mais escuro e com espaço livre para o texto do site.

Formato horizontal 16:9 (1920x1080), luz quente, tons de marrom e dourado, aparência de foto real.

Ilustração no estilo desenho a lápis com aquarela suave de duas pessoas, uma mulher e um homem, sentados de cabeça baixa com a mão na testa. De cada cabeça saem linhas embaraçadas que representam pensamentos confusos.

Uma divisão diagonal separa os dois. Tons de bege e cinza quente, fundo claro que se desfaz em manchas de aquarela nas bordas. Formato quadrado, sem nenhum texto.

Mesma pessoa da imagem anexada (o psicólogo André Vieira), sentada em uma poltrona de madeira clara com as pernas cruzadas, roupa social leve (blazer azul-marinho, camisa branca e calça bege), em um consultório claro com piso de madeira, luz natural quente vinda da janela e plantas ao fundo.

A pessoa fica no lado esquerdo. O lado direito fica livre e levemente desfocado, para receber os cards de texto do site.

Formato horizontal 16:9 (1920x1080), aparência de foto real.

Mesma pessoa da imagem anexada (o psicólogo André Vieira), retrato de meio corpo, olhando para a câmera com expressão serena, blazer azul-marinho, fundo de consultório desfocado em tons de bege e madeira, luz suave e quente. Formato vertical 4:5, aparência de foto real.

Crie 3 imagens editoriais horizontais 16:9 para as capas dos artigos do blog de um psicólogo, uma de cada vez:

1. "Quando procurar um psicólogo? Sinais de que você precisa de terapia": uma pessoa sentada perto da janela, de costas, olhando para fora, em um ambiente calmo
2. "Autoestima em reconstrução: o papel da terapia": um espelho redondo com moldura de madeira refletindo luz suave, com um vaso de planta ao lado
3. "Terapia online funciona? Como é o atendimento a distância": um notebook aberto sobre uma mesa de madeira, com uma xícara de chá e um caderno

Em todas: cena serena, tons de bege, marrom e dourado, luz natural quente, aparência de foto real, sem texto e sem rostos em close.

Com base na copy acima, crie o site assim: um site institucional de uma página, em um único arquivo HTML com o CSS e o JavaScript dentro do mesmo arquivo, usando a copy exatamente como está.

IDENTIDADE VISUAL
- Paleta: café escuro #39281E (topo, rodapé e textos), dourado #986A28 (botões e destaques), areia #F4E6D4 e #FAEEE0 (fundos claros) e vinho #3A1A22 (seção de demandas e chamada final)
- Fontes do Google Fonts: Lora nos títulos (com uma ou duas palavras em negrito no título do hero) e Outfit nos textos
- Botões em formato de pílula com gradiente dourado e ícones de linha fina
- Visual sóbrio, acolhedor e elegante, com bastante espaço entre os elementos

ESTRUTURA
1. Topo fixo escuro: logo à esquerda, menu, ícones redondos dourados de Instagram, Facebook e WhatsApp, e menu sanduíche no celular
2. Hero com a imagem hero.webp de fundo, texto à esquerda, botão para o WhatsApp e uma faixa de palavras-chave passando em loop na parte de baixo
3. Identificação: imagem pensamentos.png à esquerda; texto, etiquetas e botão à direita
4. Como funciona: título centralizado e a foto poltrona.webp em largura total, com os 4 cards translúcidos sobre o lado direito
5. Demandas: fundo vinho e cards em grade de 3 colunas, cada um com ícone
6. Sobre: foto sobre.webp e duas caixas, Abordagem e Modalidades
7. Formas de atendimento com abas Presencial e Online
8. Motivos para começar: 4 cards numerados
9. Blog: 3 cards de artigo com imagem
10. Dúvidas frequentes em acordeon
11. Chamada final escura com botão do WhatsApp
12. Rodapé e botão flutuante do WhatsApp fixo no canto inferior direito

PARTE TÉCNICA
- Todos os botões de agendar abrem https://wa.me/5534999990000 com a mensagem pronta: "Olá, vim pelo site e gostaria de agendar uma conversa"
- As imagens ficam na pasta assets/ com estes nomes: logo.png, hero.webp, pensamentos.png, poltrona.webp, sobre.webp, blog-1.webp, blog-2.webp e blog-3.webp
- Site totalmente responsivo, com rolagem suave e uma animação discreta de entrada nas seções
- Title e meta description da copy dentro do head

No celular, o título do hero está quebrando em muitas linhas. Diminua a fonte só no celular.

Troque a imagem da seção Sobre pela que estou enviando agora.

Os cards de demandas estão com alturas diferentes. Deixe todos com a mesma altura.

O texto sobre a foto do hero está difícil de ler. Escureça um pouco o lado esquerdo da foto.

Confira se todos os botões de agendar levam para o WhatsApp com a mensagem pronta.

Use a conexão MCP com o meu WordPress para recriar, dentro do Elementor, o site que está no arquivo HTML anexado.

ANTES DE COMEÇAR
1. Confirme que consegue acessar o meu site e me diga a versão do WordPress e do Elementor
2. Envie para a Biblioteca de Mídia todas as imagens que anexei, mantendo os nomes, e use as URLs novas no lugar dos caminhos da pasta assets/
3. Cadastre no Kit do Elementor as cores globais (#39281E, #986A28, #F4E6D4, #FAEEE0 e #3A1A22) e as fontes globais (Lora nos títulos e Outfit nos textos)

COMO MONTAR
- Crie uma página chamada "Home" com o layout Elementor Tela Cheia
- Recrie cada seção do HTML como um container do Elementor, na mesma ordem, usando os widgets nativos (Título, Editor de Texto, Imagem, Botão, Ícone, Acordeon e Abas)
- Não coloque o site inteiro dentro de um widget HTML; use o widget HTML só no que o Elementor não faz sozinho, como a faixa de palavras passando em loop
- Copie os textos exatamente como estão no HTML
- Ajuste o responsivo de tablet e celular em cada container
- Se o Elementor Pro estiver ativo, crie o cabeçalho e o rodapé pelo Theme Builder; se não estiver, mantenha os dois dentro da página
- Coloque o botão flutuante do WhatsApp
- Defina a página Home como página inicial em Configurações > Leitura

NO FINAL
Me envie o link da página e uma lista do que ficou diferente do HTML original, para eu revisar.