Landing page · Next.js

Autista Social

Landing page de uma comunidade em que famílias avaliam profissionais e clínicas do autismo, com narrativa de problema e solução, divulgação do congresso da iniciativa e dados estruturados para busca.

Papel: Desenvolvimento da landing page e implantação em servidor próprio
Organização e período: Maio a junho de 2026
Plataformas: Web (desktop e celular)

Visitar site

Página inicial da Autista Social com o título Quem cuida do seu filho também precisa ser avaliado, botões Ver avaliações gratuitamente e Como funciona e cartões de depoimentos com notas em estrelas. — Página inicial

01 / Contexto

História e problema

Para quem: Mães, pais e responsáveis por pessoas com TEA que procuram terapeutas, clínicas e especialistas, e profissionais da área.
Problema: Famílias escolhem profissionais do autismo com pouca informação comparável. A iniciativa precisava de uma página que explicasse a proposta da comunidade de avaliações, gerasse identificação com o problema e levasse ao cadastro na plataforma.

Maio de 2026
Briefing de estrutura (hero, dor, solução, como funciona, depoimentos, movimento, chamada final, perguntas) e primeira versão da página.
Maio de 2026
Seção do 2º Congresso Autista Social, com datas, local e fotos do evento.
Junho de 2026
Ajustes no hero, na chamada final, na seção de movimento e na navegação (data dos arquivos).

02 / Papel

Minha responsabilidade

Liderança e direção

Traduzi o briefing de conteúdo em uma sequência de seções com chamada para cadastro repetida ao longo da página.
Defini a camada de SEO com metadados completos, dados estruturados e arquivos de rastreamento gerados pela aplicação.

Execução técnica direta

Estruturei a landing em Next.js 16 (App Router), React 19, TypeScript e Tailwind CSS 4, com componentes por seção.
Implementei animações de entrada por rolagem com Framer Motion e perguntas frequentes em acordeão com Radix UI.
Configurei metadados, JSON-LD, robots, sitemap e manifesto web.
Publiquei a página 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 e servida pelo processo Next.js atrás de nginx. Os botões de cadastro levam à plataforma da comunidade, que é um sistema separado.

Arquitetura da landing page Autista Social

Visitante
- Navegador
- Buscadores
Servidor próprio
- nginx + HTTPS
Next.js 16
- Página pré-renderizada
- robots e sitemap
Destino
- Plataforma da comunidade

Conexões

Navegador e buscadores acessam o site por HTTPS no nginx.
O nginx encaminha ao Next.js, que entrega a página, o robots.txt e o sitemap.
As chamadas para cadastro levam à plataforma da comunidade.

Camadas e tecnologias

Frontend: Next.js 16.2, React 19.2, TypeScript e Tailwind CSS 4 com tw-animate-css. Componentes por seção (Navbar, Hero, Pain, Solution, HowItWorks, Testimonials, Congress, Movement, FinalCTA, FAQ, Footer), botão no padrão shadcn com class-variance-authority, acordeão Radix UI e ícones lucide-react.
SEO: metadataBase, modelo de título, descrição, palavras-chave, URL canônica, diretivas de robôs, Open Graph e cartão do Twitter com imagem de 1200 x 630. JSON-LD em grafo com WebSite, Organization, WebPage e FAQPage. robots.txt e sitemap.xml gerados no build. Manifesto web com ícones e cor de tema.
Desempenho e acessibilidade: Fonte Inter por next/font, hospedada com o site. Logos e fotos do congresso em PNG e JPEG com a tag img e texto alternativo. Animações de entrada com Framer Motion acionadas ao entrar na tela.
Implantação: Servidor próprio com nginx como proxy reverso para o processo Next.js, redirecionamento para HTTPS e certificado Let's Encrypt gerenciado pelo Certbot.

04 / Decisões

Decisões técnicas e compromissos

Landing separada da plataforma

Problema: A página de apresentação muda com campanhas e eventos, enquanto a plataforma de avaliações tem outro ciclo de evolução.
Decisão: Manter a landing como projeto próprio, em domínio próprio, com todas as chamadas apontando para o cadastro na plataforma.
Motivo: Permite ajustar texto, seções e SEO sem tocar no sistema de avaliações e sem risco para ele.
Compromisso: Dois domínios e duas implantações para manter; a medição da jornada entre a página e o cadastro exige ferramenta de análise própria.

SEO completo gerado pela aplicação

Problema: O público chega por buscas sobre terapias, especialidades e diagnóstico, e a página precisava ser bem interpretada por buscadores e redes sociais.
Decisão: Usar a Metadata API com URL canônica e Open Graph, gerar robots.txt e sitemap por código e publicar um grafo JSON-LD com a FAQ da página.
Motivo: Mantém metadados e dados estruturados no mesmo código da página, sem arquivos manuais desatualizados.
Compromisso: As perguntas do JSON-LD são escritas à parte do componente de FAQ e podem divergir se só um dos dois for alterado.

05 / Evidências

Resultados e próximos passos

Resultados e evidências

Landing de página única entregue em domínio próprio por HTTPS, com metadados completos, JSON-LD, robots.txt, sitemap.xml e manifesto web gerados pela aplicação.

Próximos passos

Próximo passo: concluir a verificação do Google Search Console nos metadados.
Os depoimentos e indicadores exibidos (por exemplo, número de famílias e de profissionais avaliados) não têm origem documentada no código; próximo passo é documentá-la ou identificá-los como ilustrativos.
Fotos servidas no tamanho original; próximo passo é convertê-las para formatos modernos com tamanhos responsivos.
Próximo passo: adicionar análise de acesso para medir a jornada até o cadastro.

06 / Telas

Galeria

Página inicial em celular

Próximo estudo de caso

Bioo

Todos os projetos