Oficina auto Projeto de demonstração
Oficina Prumo — oficina auto independente
Um site industrial em amarelo de segurança para uma oficina multimarca em Agualva-Cacém: marcação em quatro passos, tabela de preços transparente com filtros por categoria e consulta do estado da reparação com estética de relatório de diagnóstico.
feitura.pt/demo/oficina-prumo — Ao vivo
Uma oficina independente em Agualva-Cacém vive do passa-palavra mas perde marcações ao telefone. Precisa de um site que gere confiança depressa — tabela de preços pública com valores reais em euros, garantia de 2 anos por escrito, marcação online (serviço, viatura e matrícula, dia, contacto) e uma forma de os clientes consultarem o estado da reparação sem ligar para o balcão.
O que está lá dentro
- Identidade industrial: cinza asfalto, amarelo de segurança e faixas de perigo com tipografia Archivo pesada em caixa alta
- Hero em SVG à medida: viatura em traço sobre elevador de duas colunas com um fio de prumo como assinatura da marca
- Marcação em quatro passos (serviço, viatura com matrícula ao estilo PT, dias úteis, contacto) com validação por passo e confirmação inline de demonstração
- Tabela de preços transparente para 12 serviços comuns com valores em euros, nota de IVA e filtros por categoria
- Consulta do estado da reparação: pesquisa por matrícula, stepper de cinco fases e registo mono da ordem de serviço em estética de relatório de diagnóstico
- Faixa de confiança com garantia escrita de 2 anos, orçamento fechado e manutenção da garantia do fabricante (Reg. UE 461/2010)
- Totalmente bilingue PT/EN com toggle acessível sincronizado com a barra de demonstração
- Fontes variáveis self-hosted e SVG inline apenas — zero pedidos externos
- Contraste AA, alvos de toque de 44px+, suporte a reduced-motion e HTML semântico em todo o site
Registo de construção
- Direção de arte e tokens: paleta asfalto/amarelo de segurança, faixas de perigo, tipografia pesada em caixa alta e estilos mono para dados
- Cabeçalho, dicionário bilingue e toggle de idioma; hero com composição SVG do elevador e faixa de confiança
- Grelha de serviços com ícones de traço à medida e tabela de preços em euros filtrável, em estilo de relatório de diagnóstico
- Fluxo de marcação em quatro passos: máquina de estados, geração de dias úteis, validação de matrícula e resumo de confirmação de demonstração
- Consulta do estado da reparação com pesquisa por matrícula, stepper de cinco fases e registo da ordem de serviço; secção sobre a oficina e rodapé
- Revisão de copy em PT-PT, auditoria de acessibilidade (contraste, alvos de toque, reduced-motion) e polimento mobile a 375px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO