GPH
Site da metodologia GPH, com teste de perfil comportamental gratuito, acesso por conta e artigos sobre liderança e gestão de pessoas.
- Endereço
- gphcomportamental.com.br
- Setor
- Desenvolvimento humano e análise comportamental para empresas
- Escopo
- Copy, estrutura, interface, animações e desenvolvimento, dentro da identidade visual do cliente.
- Stack
- Next.js · React · Tailwind CSS · Vercel
- Capturas
- Atualizado em


Preview completo
Role dentro de cada janela para percorrer a página como ela está no ar. Capturas de .


O site da GPH, Gestão de Potenciais Humanos, metodologia de mapeamento comportamental do Ecossistema Duda Cansi. Escrevemos, desenhamos e desenvolvemos uma página inicial em narrativa única que conduz a um teste de perfil gratuito, com acesso por conta e uma seção de artigos.
Contexto
O GPH se apresenta como uma metodologia brasileira que organiza a forma como as pessoas pensam, decidem e reagem em nove potenciais, cada um com uma potência e um sabotador. A porta de entrada é um teste gratuito de 12 perguntas, com resultado na hora. A partir dele, o site apresenta dois formatos de formação: a Imersão GPH Líderes, presencial, e o GPH Online, em aulas ao vivo. O público declarado é quem decide sobre pessoas: empresários, gestores, profissionais de RH, autônomos e times comerciais.
Como foi pensado
Desenhamos a página inicial como uma sequência de nove seções que alterna fundo azul-escuro e fundo claro, dentro da identidade da GPH. A ordem acompanha quem ainda não conhece o método: promessa e teste no topo, depois público, método, depoimentos, o que se desenvolve além do teste, criador, ecossistema, perguntas frequentes e, por fim, os dois formatos de formação. O botão dourado “Fazer o teste gratuito” aparece em cinco seções; o contato com a equipe entra como alternativa secundária, em contorno. A confiança vem de depoimentos com nome e cargo, dos números informados pelo próprio GPH, das credenciais do criador e do vínculo com o ecossistema. Nos títulos, o trecho-chave ganha o dourado; rótulos e numerações usam uma fonte mono espaçada. No celular, as grades viram listas, os depoimentos passam a um carrossel horizontal e o menu se recolhe em um botão.

O que foi feito
Desenvolvemos o site em Next.js, publicado na Vercel. Além da página inicial, há uma seção de artigos organizados por categoria; a página de artigo traz índice com âncoras, links para outros textos, sugestões de leitura e um bloco que leva ao teste. O acesso ao teste tem layout próprio: alterna entre criar conta e entrar, pede nome, e-mail, WhatsApp e senha, exige o aceite dos termos e fica fora da indexação. O cabeçalho é fixo e ganha fundo translúcido ao rolar, as seções entram com animação durante a rolagem e as perguntas frequentes funcionam em acordeão. Os contatos saem por WhatsApp com mensagem pré-preenchida, por e-mail e, para a imersão, por um formulário externo. A página declara dados estruturados e imagem de compartilhamento.

Destaques
- Teste gratuito de 12 perguntas como porta de entrada, chamado em cinco seções da página inicial.
- Acesso ao teste com criação de conta e login, em layout próprio e fora da indexação.
- Seção de artigos por categoria; a página de artigo tem índice por âncoras e chamada para o teste.
- Depoimentos em três colunas no desktop e em carrossel horizontal com encaixe no celular.
- Cabeçalho fixo que ganha fundo translúcido ao rolar e perguntas frequentes em acordeão.
Desempenho medido
Celular
- Performance
- 94
- Acessibilidade
- 100
- Boas práticas
- 100
- SEO
- 100
Performance entre 92 e 95 nas 5 execuçõesLCP 2,9 s · CLS 0 · TBT 23 ms
Computador
- Performance
- 99
- Acessibilidade
- 100
- Boas práticas
- 100
- SEO
- 100
Performance entre 97 e 100 nas 5 execuçõesLCP 0,6 s · CLS 0 · TBT 87 ms
Fonte: PageSpeed Insights (Lighthouse 13.4.1), mediana de 5 execuções independentes por dispositivo, .
Site não é vitrine.É parte da operação.
Conte o que a empresa precisa comunicar e para onde o visitante deve ir. Começamos pela estrutura, antes da primeira tela.