Cabeleireiro Demonstration project
Madeixa — the colour studio that diagnoses before it quotes
An editorial-beauty site for a colour-specialist hair studio in Cedofeita, Porto: a five-step colour diagnosis that ends in an honest price bracket and the right colourist, a live shade map that recolours an SVG strand fan, and an appointment-only booking flow with a running receipt — no photography, all gradients and inline SVG.
feitura.pt/demo/madeixa — Live
Three colourists in Cedofeita, known for balayage and colour correction, live off Instagram but lose the booking moment: DMs pile up, prices are a mystery and corrections arrive as surprises. They want the opposite of "DM us a photo" — a proper online diagnosis that triages the case, outputs an honest price bracket with the reasons written down, assigns the right colourist and hands the client a booked chair. Appointment only, and proud of it.
What's inside
- Editorial-beauty design system — warm porcelain, espresso ink, burnished copper and a sage note; a flowing strand ribbon as the recurring motif, zero pink-salon clichés
- Photography replaced by hair-light panels: CSS radial and conic gradients in copper, caramel and ash tones
- Five-step colour diagnosis with progress dots: goal tiles, hair length and state, chemical history and six tone swatches
- Diagnosis result with an honest price bracket, expected duration, the assigned colourist and an expandable "why this bracket" note with the pricing reasons spelled out
- One-tap handoff from diagnosis to booking — service and recommended colourist pre-selected and shown as receipt lines
- Interactive shade map: ten shade chips in a keyboard-navigable radiogroup that live-recolour an SVG strand fan, each with tone family, upkeep level and starting price
- Receipt-style price list grouped in four categories — brackets where honest, fixed where possible, with a free 15-minute diagnosis highlight row
- Appointment-only booking: colourist cards, next ten open days with Sundays and Mondays closed, deterministic slot availability and a prep-note confirmation
- Bilingual PT/EN copy, WCAG-minded focus states, reduced motion and 44 px touch targets throughout
Build log
- Art direction — porcelain/espresso/copper tokens, strand-ribbon SVG studies, hair-light gradient panels and the hero composition
- Colour-diagnosis engine: honest bracket rules per goal, length, state and chemical history, plus colourist assignment
- Five quiz screens with progress dots, tone swatches and the result card with the expandable why-this-bracket note
- Shade map — ten-shade keyboard radiogroup live-recolouring the SVG strand fan, receipt price list with the free-diagnosis row
- Booking flow with deterministic availability, closed Sundays and Mondays, the running receipt and the diagnosis handoff
- Correction process, colourists, testimonials, products shelf, EN locale pass and the accessibility audit — contrast, focus, reduced motion
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
98
Accessibility
100
Best practices
100
SEO