Esmalte — the dental clinic with prices on the wall

What's inside

• Porcelain-and-mint design system with glazed-tile motifs and a smile-curve section divider — no photography
• Three before/after smile comparisons in hand-drawn SVG with a draggable, keyboard-accessible clip-path slider
• Full public price list styled as a mono-type receipt wall, grouped by specialty with tabular numerals
• "Esmalte plan" toggle that recalculates every price live at −15% and marks cleanings as included
• Three-step first-visit flow: reason tiles with SVG icons, next 10 weekdays with deterministic availability, SMS-confirm summary
• A dedicated dental-fear section: no drill on day one, a hand signal to stop, conscious sedation
• Persistent pain-emergency banner with tap-to-call and same-day hours
• Geometric SVG portraits for the sibling duo — specialty, licence number and one human line each
• Bilingual PT/EN copy, WCAG-minded focus states, reduced motion and 44 px touch targets throughout

Build log

1. 01Art direction — porcelain/mint/blush tokens, glazed-tile hero studies, smile-curve divider and brand mark
2. 02Stylised smile illustration system: teeth geometry, stains, crooked and chipped variants in inline SVG
3. 03Before/after comparison slider — pointer capture, keyboard slider role, clip-path reveal for the three cases
4. 04Receipt-wall price table with full PT-PT copy and the live −15% Esmalte-plan recalculation
5. 05Three-step booking flow with deterministic weekday availability, fear-of-the-dentist and insurers sections
6. 06Testimonials, footer, tablet/desktop recomposition and the accessibility pass — contrast, focus, reduced motion