Site institucional para agência de marketing com portfólio filtrável no WordPress via WPGraphQL, likes sem login sincronizados com o CMS e formulário animado de candidatura em múltiplas etapas.
DesignAgência Ade!
↗ Ver projeto ao vivo
01
Visão Geral
A Agência Ade! é uma agência de marketing e comunicação em Ponta Grossa que precisava de um site institucional para apresentar portfólio, equipe e serviços — e que servisse também como canal de recrutamento. O projeto reúne as seções essenciais (Home, Sobre, Contato, Portfólio, Blog) com portfólio filtrável por segmento e formulário Trabalhe Conosco em múltiplas etapas animado.
O projeto foi desenvolvido com Next.js, React e TypeScript, estilizado com Tailwind CSS e animações em Motion.js. O conteúdo — portfólio, blog e dados institucionais — é gerenciado no WordPress via WPGraphQL, com rotas customizadas em PHP para likes e envio de formulários. Formulários validados com Zod e React Hook Form. Hospedagem na Vercel.
02
Desafio
O site precisava ir além do institucional: portfólio com filtros por categoria e segmento alimentado pelo WordPress, formulário Trabalhe Conosco em múltiplas etapas com validação e animações entre steps, e sistema de likes em projetos e posts do blog sem login — com totais visíveis no painel do CMS.
Na prática, cada frente tinha um obstáculo distinto. O portfólio exigia listagem dinâmica sem hardcode no front. O formulário não podia perder dados nem criar fricção ao trocar de etapa. Os likes precisavam persistir entre visitas, impedir contagem dupla e sincronizar com o back-end sem cadastro de usuário nem API pesada por sessão.
03
Solução
Estruturei a camada de dados com WPGraphQL: portfólio, blog e páginas institucionais vêm do WordPress em queries tipadas, e a página de portfólio monta filtros e categorias a partir do schema — sem duplicar conteúdo no Next.js.
No Trabalhe Conosco, React Hook Form com Zod valida cada step antes de avançar; Motion.js cuida das transições entre etapas e o envio final passa por rota PHP no CMS. Para os likes, uma rota PHP customizada incrementa o contador no banco; no front, LocalStorage registra os itens já curtidos, evitando duplicidade após recarregar. Os totais refletem no painel do WordPress — funcionalidade leve, sem autenticação e com engajamento consultável pela equipe no backoffice.