Saúde Demonstration project
Clínica Aurora — accessible family clinic website
An accessibility-first website for a family clinic in Massamá: AAA-leaning contrast, oversized type, a thumb-zone booking CTA and a three-step appointment request flow that anyone can complete.
feitura.pt/demo/clinica-aurora — Live
A family dental and medical clinic in Massamá serves patients from age 0 to 90 — many of them elderly, anxious, or low-vision. They need a website their entire patient base can actually use: legible without glasses, navigable by keyboard and screen reader, with an appointment request that takes under a minute on a phone.
What's inside
- Three-step appointment request flow (specialty → preferred day → contact) with inline validation
- Booking CTA fixed in the mobile thumb zone, always one tap away
- Specialties grid with hand-drawn inline SVG icons that pre-fill the booking form
- 18px+ body type, AAA-leaning contrast and visible focus states on every control
- Semantic landmarks, skip link, aria-live confirmations and a keyboard-friendly FAQ accordion
- Team section with registration numbers and initials avatars — no stock photos
- Opening hours, transit directions and step-free access details for reduced mobility
- prefers-reduced-motion respected across all animation and smooth scrolling
Build log
- Design system: calm teal + warm neutrals, type scale at 18px base, contrast audit
- Hero, trust strip and specialties grid; drew the inline SVG icon set
- Three-step booking flow with per-step validation and demo sink confirmation
- Team, FAQ accordion (details/summary) and hours + access section with SVG map
- Accessibility pass: landmarks, skip link, focus states, aria-live, keyboard walkthrough
- Responsive recomposition at 768/1100px, thumb-zone CTA, reduced-motion and final QA
Stack
- Laravel
- Inertia.js
- Vue.js
- TypeScript
- Tailwind CSS
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO