HF Team — Assessoria Esportiva
Site de assessoria de corrida com ranking configurável e identidade própria
O desafio
Henrique Ferreira é treinador formado em Educação Física e maratonista sub3, com mais de 24 alunos e um grupo ativo de WhatsApp. O que ele não tinha era um lugar próprio na internet: toda a operação vivia no Instagram, e todo contato novo dependia de alguém encontrar o perfil.
O risco de comunicação era claro e ia nos dois sentidos. Um site que só falasse de maratona sub3 afastaria quem nunca correu; um site genérico de personal jogaria fora a maior credencial que ele tem. O produto precisava caber os dois públicos na mesma página sem diluir nenhum dos dois.
A saída foi organizar tudo em torno de uma frase que já era dele: "do zero aos 42 km com estratégia". Ela deixa de ser slogan e vira estrutura — uma régua de percurso que começa no hero e reaparece na jornada, nos públicos atendidos, na barra de progresso de leitura e no rodapé.
Resultados
O que eu fiz
Identidade construída a partir do uniforme
Em vez de inventar uma paleta, li os materiais oficiais: a logo é um cronômetro com um play no centro, e a camiseta é preta no peito dissolvendo em verde vivo na barra. Esse degradê virou o token central do tema e estrutura o site inteiro. O play da logo reaparece como botão do vídeo da maratona e como mostrador da seção de avaliação.
Ranking com regra fora do componente
Quatro métricas — melhor tempo, melhor pace, evolução em segundos por quilômetro e volume acumulado — cruzadas com distância, período, sexo, faixa etária e tipo de resultado. O componente escolhe filtros e desenha; toda a classificação vive num módulo próprio, testável e trocável.
Categorias como configuração, não como código
Cada prova define suas próprias faixas etárias, e a regra de idade varia entre "idade no dia da largada" e "idade completada no ano". As duas estão implementadas e a tabela inteira troca por uma constante. Peso ficou de fora da classificação de propósito: existe no perfil do atleta como dado de evolução e o módulo de ranking nunca o lê.
Nada de dado inventado
Preço, cidade, resultado de aluno e depoimento não podiam ser fabricados. Onde faltava informação, o campo nasceu nulo e a interface se adapta — os CTAs caem no Instagram enquanto não houver WhatsApp, e o ranking de demonstração se anuncia como exemplo através de um interruptor único.
Galeria
Decisões técnicas
Animação em CSS, JavaScript só no gatilho
A revelação de conteúdo é uma classe CSS; o React apenas decide quando aplicá-la, via IntersectionObserver e classList — sem estado, porque são dezenas de elementos por página. Se a hidratação falhar, uma animação de segurança revela tudo depois de 2,4 s. Conteúdo nunca depende de JavaScript para existir.
Movimento reduzido levado a sério
Num site cujo tema é velocidade, `prefers-reduced-motion` é a regra mais importante do CSS. Ela zera animação e transição globalmente, e cada efeito ainda repete a checagem por segurança.
Contraste medido, não estimado
O botão primário é verde com texto preto porque branco sobre o verde da marca dá 3,4:1 e reprova em AA — preto dá 11,6:1. Durante a verificação, o cinza de apoio também reprovou (3,9:1) e foi clareado. O pior par do site hoje é 5,2:1.
Duas armadilhas que custaram tempo
Crase dentro de template literal de styled-component encerra a string e derruba o build apontando para o meio de um comentário. E `1fr` numa troca responsiva para uma coluna deixa o celular rolar para o lado, porque `1fr` é `minmax(auto, 1fr)`: o conteúdo com largura mínima maior faz a grade crescer. As entradas laterais também criavam rolagem horizontal, resolvida com `overflow-x: clip` — `clip`, e não `hidden`, para não virar contêiner de rolagem e quebrar o `position: sticky`.
Preparado para virar plataforma sem ser uma
Os contratos da futura área do aluno já estão declarados — atleta, resultado, treino executado, ponto de evolução — e cada arquivo de dados tem o formato exato do que uma API devolveria. Trocar objeto declarado à mão por objeto vindo de `fetch` não muda JSX nenhum. Nada disso foi implementado: o MVP é institucional de propósito.
É o projeto em que arquitetura e direção de arte foram decididas juntas, e não uma depois da outra. A régua 0 → 42,195 km é ao mesmo tempo o argumento de venda do cliente, o eixo visual da página e a estrutura dos dados — planos, públicos e distâncias do ranking usam a mesma escala. Reaproveitar a arquitetura do Portal Studway liberou tempo para investir exatamente onde este projeto precisava ser melhor: o acabamento visual.