Lavagem automóvel Projeto de demonstração
Lustro — detalhe automóvel com o preço montado antes de marcar
Um site garagem-à-noite para uma lavagem à mão e detalhe em Braga: escolha o serviço, o tamanho do carro e os extras, veja o preço, o tempo e o brilho de um carro desenhado responder, escolha uma hora na box e marque com a matrícula. Fotos à entrada, limites honestos do polimento e água reciclada são promessas escritas na página.
feitura.com/demo/lustro — Ao vivo
As lavagens perdem confiança à porta — 'é mais porque é SUV'. Esta quer todos os fatores do preço na página, uma hora que é mesmo do cliente, e os pequenos sinais de honestidade (fotos à entrada, o que o polimento não resolve) que fazem as pessoas voltar.
O que está lá dentro
- Construtor de serviço: quatro pacotes × três tamanhos (com multiplicadores visíveis) × quatro extras, cada um com preço e tempo; total e duração em tempo real
- Um carro desenhado cujas linhas de brilho e medidor respondem ao pacote e extras escolhidos — sem fotografia
- Horas nas boxes por dia com contagem de boxes livres e estados de cheio; o botão de marcar só acorda com uma hora
- Folha de marcação que leva pacote, tamanho, extras, hora e preço; campo de matrícula validado no formato português; só front-end
- Lista de 'inclui' que muda com o pacote; processo em três passos; promessas (refazer na hora, 70 % de água reciclada)
- Display leve, largo e espaçado sobre preto-fosco com um único acento lime de sinalização; mono para preços e horas
- Bilingue PT/EN, diálogo fechável com Escape, gestão de foco, alvos de 44 px, movimento reduzido respeitado
Registo de construção
- Direção de arte — preto-fosco, grafite, cromado, lime de sinalização; display leve e espaçado; desenho do carro
- Modelo de preços: pacotes, multiplicadores de tamanho, extras, tempos; medidor de brilho
- Horas nas boxes e marcação condicionada; folha com validação da matrícula
- Processo, promessas, localização e mapa
- FAQ, revisão do texto bilingue, verificações de teclado e a 375px
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript