Pessoas que procuram atendimento psicanalítico on-line e querem conhecer a profissional antes de agendar.
Problema
A profissional tinha um site em WordPress. A nova versão precisava transmitir acolhimento e sigilo, funcionar bem no celular e levar ao agendamento com o menor número de passos.
28/03/2026
Versão inicial em Next.js com apresentação, serviços, como funciona, perguntas frequentes e chamada para agendamento.
05/08/2026
Revisão: fotos do site antigo substituídas por imagens locais, seções simplificadas, favicon e imagem de compartilhamento com a foto da profissional.
02 / Papel
Minha responsabilidade
Liderança e direção
Decidi eliminar a dependência do domínio do site antigo, trazendo as fotos para o próprio projeto.
Defini o WhatsApp como canal de agendamento, com botão flutuante presente em toda a página.
Execução técnica direta
Estruturei o site em Next.js 16 (App Router), React 19 e TypeScript, com componentes por seção (Header, Hero, About, Services, HowItWorks, CTA, Footer).
Configurei metadados, Open Graph com imagem pública da profissional e ícones em vários tamanhos.
Publiquei o site em servidor próprio com nginx como proxy reverso e HTTPS.
03 / Arquitetura
Arquitetura documentada
Página única em Next.js com App Router, pré-renderizada no build e servida pelo processo Next.js atrás de nginx. Não há backend nem formulário: todas as chamadas levam ao WhatsApp.
Arquitetura do site de Arlene Zerbini
Visitante
Navegador
WhatsApp
Servidor próprio
nginx + HTTPS
Next.js 16
Página pré-renderizada
Ativos
Fotos locais
Ícones e OG
Conexões
O navegador acessa o site por HTTPS no nginx.
O nginx encaminha ao processo Next.js, que entrega a página pré-renderizada.
Fotos e ícones são servidos do próprio projeto.
Os botões de agendamento abrem o WhatsApp.
Camadas e tecnologias
Frontend
Next.js 16.2, React 19.2, TypeScript e Tailwind CSS 4, com estilos majoritariamente inline e paleta própria (tons de sálvia e areia). Componentes por seção e botão flutuante de WhatsApp com aria-label.
SEO
Título, descrição e Open Graph pela Metadata API, com locale pt_BR e imagem de compartilhamento hospedada no próprio domínio; favicons de 16 e 32 px e ícone Apple. Atributo lang pt-BR. Não há sitemap, robots.txt nem dados estruturados.
Desempenho
Três fotos JPEG locais exibidas com a tag img e object-fit. Fontes Cormorant Garamond e Inter importadas do Google Fonts no CSS global, com display swap.
Implantação
Servidor próprio com nginx como proxy reverso para o processo Next.js e HTTPS. A página é servida a partir do cache de pré-renderização do Next.js.
04 / Decisões
Decisões técnicas e compromissos
01
Fotos hospedadas no próprio projeto
Problema
A primeira versão exibia fotos a partir do site antigo da profissional, o que deixava as imagens sujeitas a um domínio fora do controle do projeto.
Decisão
Copiar as fotos para public/images, escolher uma imagem por função (hero, retrato principal, contexto de trabalho) e usar URL pública própria na imagem de compartilhamento.
Motivo
O site passa a depender apenas do próprio domínio, e a prévia em redes sociais deixa de quebrar.
Compromisso
As fotos são servidas no tamanho original, sem otimização automática por next/image.
Aprendizado
Ativos de terceiros, mesmo do próprio cliente, devem ser incorporados ao projeto antes da publicação.
02
Página única com um único caminho de ação
Problema
Em atendimento terapêutico, cada etapa extra entre o interesse e o contato reduz a chance de agendamento.
Decisão
Organizar o conteúdo em uma página com apresentação, serviços e etapas do atendimento, e repetir o agendamento pelo WhatsApp no hero, na chamada final e no botão flutuante.
Motivo
Mantém o site simples de manter e coerente com a forma como a profissional já agenda.
Compromisso
Sem páginas por tema, o site tem menos portas de entrada em buscadores.
05 / Evidências
Resultados e próximos passos
Resultados e evidências
Site de página única entregue em domínio próprio por HTTPS, servido pré-renderizado, com agendamento pelo WhatsApp em três pontos da página.
Próximos passos
Próximo passo: gerar sitemap, robots.txt e dados estruturados de profissional.
Fotos servidas no tamanho original; próximo passo é convertê-las para formatos modernos com tamanhos responsivos.
Fontes carregadas por importação no CSS, que atrasa a primeira renderização em comparação com next/font.
Próximo passo: adicionar análise de acesso para medir os cliques no agendamento.
