Oficina auto Demonstration project
Oficina Prumo — independent car garage
An industrial, safety-yellow site for a multi-brand garage in Agualva-Cacém: a four-step booking flow, a transparent EUR price table with category filters, and a repair-status tracker styled like a diagnostic report.
feitura.pt/demo/oficina-prumo — Live
An independent garage in Agualva-Cacém lives off word of mouth but loses bookings to the phone. It needs a site that earns trust fast — a public price list with real EUR values, the 2-year warranty in writing, an online booking flow (service, car and plate, day, contact) and a way for customers to check the status of a repair without calling the counter.
What's inside
- Industrial identity: asphalt gray, safety yellow and hazard-stripe dividers with heavy uppercase Archivo display type
- Custom SVG hero: line-art car on a two-post lift with a plumb line as the brand signature
- Four-step booking flow (service, vehicle and PT-style plate input, weekday picker, contact) with per-step validation and inline demo confirmation
- Transparent price table for 12 common jobs with EUR values, VAT note and category filter chips
- Repair-status tracker: plate lookup, five-stage stepper and a mono work-order log styled like a diagnostic report
- Trust strip covering the written 2-year warranty, fixed quotes and EU Reg. 461/2010 manufacturer-warranty protection
- Fully bilingual PT/EN with an accessible toggle synced to the demo bar
- Self-hosted variable fonts and inline SVG only — zero external requests
- AA contrast, 44px+ touch targets, reduced-motion support and semantic markup throughout
Build log
- Art direction and tokens: asphalt/safety-yellow palette, hazard stripes, heavy uppercase display type and mono data styles
- Header, bilingual dictionary and language toggle; hero with custom SVG lift composition and trust strip
- Services grid with custom line icons and the filterable EUR price table in diagnostic-report style
- Four-step booking flow: state machine, weekday generation, plate validation and demo confirmation summary
- Repair-status tracker with plate lookup, five-stage stepper and work-order log; about section and footer
- PT-PT copy pass, accessibility audit (contrast, touch targets, reduced motion) and mobile polish at 375px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO