← Trabalhos
CMS · Car Service
Landing page para uma oficina automóvel em Braga. Linguagem editorial de cinema, fotografia ao pôr do sol a toda a largura, creme quente com tinta azulada e marcação direta pelo WhatsApp.
- Segmento
- Oficina automóvel
- Entrega
- Landing page
- Origem
- Projeto conceito
- Ano
- 2026
- Tecnologia
- Astro, Tailwind CSS, GSAP
Projeto conceito: o negócio é fictício, criado para explorar o segmento. O design e o código são reais.
O desafio
Ir à oficina é, para muita gente, um momento de desconfiança: não se sabe o que vai ser feito nem quanto vai custar. A CMS queria mostrar o contrário, uma oficina calma, transparente e com padrão de concessionário, sem cair no visual de chapa e graxa.
A solução
- Linguagem de cinema. Inspirada em marcas de aviação: fotografia ao pôr do sol a toda a largura, vista do lugar do condutor, e o texto pousado direto na imagem, sem caixas.
- Duas cores fazem tudo. Creme quente e tinta azulada; o azul elétrico da marca aparece só na faixa da campanha e no cartão promocional.
- Títulos grandes e leves. Tipo display em peso médio, a escala enorme, em vez de negrito.
- Experiência de scroll (GSAP). A estrada assenta e o título sobe palavra a palavra; ao rolar, a foto aproxima-se e o texto afasta-se. As fotos abrem como uma janela de cantos redondos, com paralaxe por dentro, e os números contam ao aparecer. Tudo parado para quem prefere menos movimento.
- Ações em contorno. Nenhum botão cheio: pílulas com contorno azul que se mantêm discretas sobre a fotografia.
- Logótipo em vetor. A marca enviada foi redesenhada em SVG, a cores sobre o creme e monocromática sobre a foto.
- Marcação pelo WhatsApp. Nome, matrícula, serviço e dia; a mensagem segue pronta para a oficina.
- Contactos genéricos de Braga.
O que uma oficina real ganharia
- Clientes que chegam já a confiar: preços à vista, processo em quatro passos e garantia explicada.
- Marcações com a matrícula e o serviço, sem telefonemas de ida e volta.
- Uma imagem que a separa das oficinas de bairro sem perder a proximidade.
A estrutura
A landing numa folha
Role dentro da moldura: é o site real, a correr dentro da Babrand.



