Team Mielle
Uma landing page que apresenta o método de uma personal trainer e leva a primeira conversa para o WhatsApp.
- Categoria
- Landing page
- Nicho
- Personal trainer
- Ano
- 2026
- Papel
- Arquitetura de conteúdo, interface, tratamento de imagens e desenvolvimento front-end.
Contexto
Stéfane Mielle é personal trainer e bacharel em Educação Física. Atende presencialmente e online, com treinos personalizados para emagrecimento, condicionamento e hipertrofia, sob a marca Team Mielle.
Objetivo
Mostrar que o treino é personalizado e que iniciantes são bem-vindos, e fazer da conversa pelo WhatsApp o próximo passo.
Tecnologias
- HTML
- CSS
- JavaScript
- Node.js
- Sharp
- Vercel
O desafio
Quem procura uma personal quer saber se ela é a pessoa certa antes de mandar mensagem. Sem depoimentos nem resultados para mostrar, a confiança precisava vir do método, da formação e da presença da própria Stéfane.
A página abre com a Stéfane e as credenciais, explica por que personalizar, mostra o método em quatro etapas, separa presencial e online e apresenta os objetivos. Depois vêm a Stéfane em primeira pessoa, o que esperar do acompanhamento e as dúvidas, e a página fecha com a chamada para o WhatsApp.
Direção visual
O conceito é Força com direção. Preto, grafite, branco e fotografia ocupam a maior parte da tela, e o verde conduz a atenção e a conversão. O neon é usado como sinal, uma palavra por bloco, como evolução no título do hero. Todas as fotos passam pelo mesmo tratamento, com contraste alto e sombras puxadas para o verde, para se fundirem ao fundo preto.
- Verde#22C55E, botões e indicadores
- Neon#39FF88, um trecho de impacto por bloco
- Preto#070A08, fundo principal
- TítulosBebas Neue
- Subtítulos e botõesSora
- TextoInter
Implementação
Página estática em HTML, CSS e JavaScript, sem framework, com tokens em CSS custom properties e uma folha de estilo por grupo de seções. WhatsApp e Instagram ficam em um arquivo de configuração. Publicada na Vercel.
- Script em Node.js com Sharp trata as fotos e gera AVIF, WebP e JPG, com origem e licença de cada imagem registradas
- Botões de contato lidos da configuração: sem número, levam ao Instagram; sem os dois, não aparecem
- Barra de WhatsApp no celular que só aparece quando nenhum outro botão de contato, o FAQ ou o rodapé estão na tela
- FAQ com respostas no HTML, que a busca do navegador encontra e abre
- Menu mobile com foco preso, fechamento por Esc e conteúdo de fundo inerte
Sem promessa de atalho
Sites de personal trainer costumam prometer resultado. Este só afirma o que a Stéfane pode sustentar.
- Sem depoimentos, antes e depois, preços ou número de alunos
- Cenas de treino vêm de bancos de imagem ou de uma imagem gerada por IA, e ninguém nelas é apresentado como aluna
- Faixa de credenciais com botão de pausa, parada quando o movimento reduzido está ativo
- Imagem de compartilhamento abaixo de 300 KB, o limite do WhatsApp
O que este case não afirma
- Apresentado como protótipo publicado. Não há métricas de contato publicadas.
- Domínio próprio, local do atendimento presencial e preços ainda não foram definidos.
- O repositório não é público.