Creche Demonstration project
Ninho — a nursery website parents can trust
A calm, trust-first website for a nursery and preschool in Belas: rooms with honest ratios and capacities, an hour-by-hour day, transparent fee ranges and a four-step visit booking flow that works on any phone.
feitura.pt/demo/ninho — Live
We run a small nursery and preschool in Belas, from 4 months to 5 years old. Parents choosing a creche are anxious — they want to know exactly who cares for their child, what a day looks like, what it costs and whether it is safe, before they ever call us. We need a website that answers all of that calmly and lets them book a guided visit in under a minute, without feeling like a childish cartoon site.
What's inside
- Four-step visit booking flow (child's age → room → day and time → contact) with age-based room suggestion
- Rooms grid with honest capacities, adult–child ratios and the lead teacher of each room
- "A day at Ninho" hour-by-hour timeline, switchable per room
- Transparent monthly fee table with EUR ranges and a family co-payment note
- Weekly menu browser with per-day lunch and snack, cooked in-house
- Safety section: access control, pick-up log, evacuation drills and paediatric first aid
- Team section with credentials and initials avatars — no stock photos
- Fully bilingual PT/EN with a persistent toggle in the navigation
- Calm geometric identity — sun and nest arcs in SVG, no childish clipart
Build log
- Design system: warm white + muted sun yellow + soft slate, generous type scale, sun-and-nest SVG motif, contrast audit
- Hero, trust strip and rooms grid with capacities, ratios and lead teachers; bilingual dictionary wired from the start
- Four-step visit booking flow with age-based room suggestion, per-step validation and demo-sink confirmation
- Hour-by-hour day timeline per room, team with credentials, fee table with co-payment note and weekly menu browser
- Safety and food sections, footer with licence and NIF, accessibility pass (landmarks, focus states, reduced motion) and mobile QA at 375px
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
94
Performance
97
Accessibility
100
Best practices
100
SEO