GPH

Site da metodologia GPH, com teste de perfil comportamental gratuito, acesso por conta e artigos sobre liderança e gestão de pessoas.

  • Site institucional
  • Desenvolvimento humano
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
Topo do site da GPH no desktop: fundo azul-escuro, título “Seu melhor resultado não está em fazer mais. Está em entender como as pessoas funcionam.” com o trecho final em dourado, botão “Fazer o teste gratuito” e quatro etiquetas sobre o teste.
Topo do site da GPH no celular, com logo, botão de menu, título centralizado com trecho em dourado, botão “Fazer o teste gratuito” e etiquetas empilhadas.

Preview completo

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

Página inicial completa da GPH no desktop, com seções alternando fundo azul-escuro e claro: para quem é, o que é o GPH, depoimentos, resultados além do teste, criador do método, ecossistema, perguntas frequentes, próximo passo e rodapé.
Desktop · 1440 pxPágina inicial completa.
Página inicial da GPH no celular em coluna única, com seções empilhadas, depoimentos em carrossel horizontal e perguntas frequentes em acordeão, até os dois caminhos de formação; o rodapé ficou fora do recorte.
Celular · 390 pxDo topo aos dois caminhos de formação.

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.

Seção “Feito para quem decide sobre pessoas”: bloco escuro dedicado a empresários e donos de negócio, quatro perfis numerados de I a IV e botão para o teste gratuito.
Para quem é: o público principal em destaque e quatro perfis numerados.

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.

Seção “O teste mostra o seu mapa”: quatro competências numeradas em cartões que alternam escuro e claro, faixa “Prova de entrega” com três números e dois botões, teste gratuito e conversa com a equipe.
O que se desenvolve além do teste, com os dois caminhos de contato.

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.