Escola de condução Demonstration project
Escola Farol — friendly driving school website with lesson booking
A road-sign-inspired website for a driving school in Monte Abraão: sign-shaped pricing cards per licence category, a working lesson scheduler (theory or driving → weekday → time slot), an honest process timeline instead of invented pass rates, and a bilingual PT/EN interface.
feitura.pt/demo/escola-farol — Live
We run a small driving school in Monte Abraão and most of our students find us on their phones. We want a site that feels as friendly as our classroom: clear prices for B, A2 and AM licences, a simple way to book a code or driving lesson online, and absolutely no fake '98% pass rate' claims — just an honest explanation of how getting a licence actually works. Some of our students are foreign residents, so it should also read well in English.
What's inside
- Working lesson scheduler: theory or driving → day of the week → time slot → contact, with slots that adapt to the lesson type and Saturdays
- Sign-shaped pricing cards for categories B, A2 and AM — blue mandatory circle, red ring and warning triangle
- Pay-in-full / 3 interest-free instalments toggle that recalculates every price
- Six-step 'the process' timeline drawn as a road with a dashed centreline, from enrolment to licence
- 'No invented pass rates' honesty block — a crossed-out 98% sign instead of fake statistics
- Instructor profiles with IMT certificate numbers and initials avatars, no stock photos
- Keyboard-friendly FAQ accordion covering duration, total cost, instalments and exam retakes
- Full PT/EN bilingual dictionary with a toggle in the site navigation
- Lighthouse-at-the-end-of-the-road hero illustration drawn entirely in inline SVG
Build log
- Design system from road-sign vocabulary: sky blue + signal red palette, licence-plate eyebrow chips in mono, contrast audit
- Hero with the lighthouse-and-road SVG scene, bilingual dictionary structure and PT/EN toggle wired through the whole page
- Sign-shaped pricing cards for B/A2/AM with the instalments toggle, plus the six-step road-line process timeline
- Four-step lesson scheduler with type-aware time slots, validation and demo-sink confirmation; instructors and FAQ accordion
- Responsive recomposition at 768/1100px, focus states, aria on every control, reduced-motion pass and final QA on a real phone
Stack
- Laravel
- Inertia.js
- Vue.js
- TypeScript
- Tailwind CSS
Lighthouse
90
Performance
100
Accessibility
100
Best practices
100
SEO