Pular para o conteúdo
Menu
← 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.

Ver o site no ar Ver a estrutura ↓

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

  1. Ver o site no ar ↗

Role dentro da moldura: é o site real, a correr dentro da Babrand.

Próximo trabalho

Quer um projeto assim para o seu negócio?

Vamos conversar ↗