Estudo de caso 02 · Site de lançamento
Ladeira
O site de lançamento de uma e-bike urbana inventada, com um configurador de reserva que funciona.
- Papel
- Produto, marca, design e front-end
- Data
- Novembro de 2026
- Stack
- Astro, TypeScript, GSAP (ScrollTrigger, SplitText), Cloudflare Pages
- Links
- Demo ao vivo Código
O problema
Belo Horizonte é feita de morros, e o morro é o primeiro motivo que as pessoas dão para não ir de bicicleta ao trabalho. A Ladeira L1 é uma e-bike vendida com uma promessa só: a subida deixa de importar. A página de lançamento precisa tornar essa promessa crível com números e, na mesma página, receber uma reserva de R$ 300.
Ela responde às vagas que pedem um site de marketing com animação feita em código. Aqui a animação de rolagem foi especificada e construída pela mesma pessoa, funciona em 390 px, e a página se lê igual com a animação desligada.
Veja funcionando
Três coisas para testar:
- 01
Role até a subida. A página para enquanto você sobe a Rua do Morro Alto, 63 m em 600 m, e o painel divide o esforço entre as suas pernas e o motor.
- 02
Coloque a autonomia no modo Climb, rota íngreme e 120 kg, e veja os km e os dias de trajeto caírem.
- 03
Reserve uma bike. Depois abra a página com
?state=failedpara ver um pagamento recusado que guarda as suas escolhas.
Como foi feito
Especificação
O produto, os números e um nome conferido livre na web e no endereço.
Marca
Três direções lado a lado, uma mantida.
Protótipo
Três rodadas de layout, até cada seção copiar a composição de um concorrente com fotos do produto.
Fotos
Fotos gratuitas de uma marca real, com o logo retocado nas 13.
Construção
A stack de produção, com os modelos de subida, autonomia e tamanho sob testes unitários.
Verificação
Cada estado renderizado em 1440 e 390 px com checagem de acessibilidade, incluindo o movimento reduzido.
Escala
16
seções em uma página, mais a página 404.
24
estados verificados em duas larguras, 48 renderizações.
3
direções de marca e 3 rodadas de layout (desenho vetorial, vídeo de fundo, fotos do produto), em 5 rodadas de revisão.
13
fotos retocadas, geradas em 49 arquivos WebP responsivos.
26
ícones desenhados para o produto.
2 h 24
da decisão de fazê-la à especificação aprovada, e depois cerca de 2 h de construção.
O que deu errado e o que eu mudei
A especificação aprovada prometia 110 km de autonomia no modo Eco no plano, e o modelo de autonomia da mesma especificação dava 83 km. O protótipo nunca mostrou a diferença, porque a ferramenta de autonomia só exibia o próprio resultado e nada o colocava ao lado do número da manchete.
O primeiro teste unitário que escrevi para o modelo afirmava a manchete e falhou. Outras duas promessas também discordavam do modelo: 40 km no modo Climb numa rota com morros, e os "40 a 110 km" da tabela de especificações. Mantive as promessas e mudei o modelo. Eco, Tour e Climb agora usam 4,9, 6,2 e 7,7 Wh/km, que dão 110 km numa ponta e 40 km na outra, e um teste amarra cada promessa ao modelo.
Limites e próximos passos
- A reserva e a newsletter são simuladas no navegador. Nada é cobrado nem enviado, e não há contas.
- As fotos mostram a bike de outra marca sem o logo, então o configurador oferece os dois quadros que essas fotos mostram em vez de cores de pintura.
- A página está só em inglês.