Barbearia Demonstration project
Navalha — neighbourhood barbershop with chair booking
A vintage-modern one-pager for a Massamá barbershop: cream, bottle-green and copper, a classic price board with dotted leaders, three barbers with monogram portraits, a working barber-service-time booking flow and a stamped loyalty card — no photography, all CSS and inline SVG.
feitura.pt/demo/navalha — Live
A three-chair barbershop in Massamá wants to stop taking bookings over the phone. The site has to feel like the shop — old-school craft, hot towels, good conversation — carry the full price board, introduce the three barbers, let a client pick barber, service and time from the phone, and still shout that walk-ins are welcome. Regulars keep a stamped loyalty card: nine cuts, the tenth is free.
What's inside
- Cream, bottle-green and copper design system built entirely in scoped CSS — zero photography
- Serif display headlines with mono price tags for a vintage-modern voice
- Classic barber-board price list with dotted leaders, four categories and durations
- Three-step chair booking: barber, service, then day and time with taken-slot states
- Closed-day logic (Sundays and Mondays) baked into the date picker
- Team section with copper monogram portraits that pre-select the barber in the booking flow
- Interactive stamped loyalty card in inline SVG — nine cuts, the tenth free
- Walk-ins-welcome marquee strip with hours and address, paused under reduced motion
- Fully bilingual PT/EN with a native toggle, AA contrast and 44 px touch targets
Build log
- Art direction and tokens — cream/green/copper palette, serif display scale, razor and monogram SVG studies, hero composition
- Price board with dotted leaders and full PT-PT service copy, team section, walk-ins marquee strip
- Booking flow state machine — barber, service, day and time slots with availability and closed days, confirmation form
- Loyalty card SVG with interactive stamps, EN locale pass, contrast and touch-target audit, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
96
Accessibility
100
Best practices
100
SEO