Estúdio de yoga Demonstration project
Respira — yoga & pilates studio with a live weekly timetable
A calm, mirror-free studio site for Campo de Ourique: a breathing guide in the hero, a six-day timetable with real spot counts and a booking sheet, five disciplines with an honest intensity scale, and prices with no small print.
feitura.com/demo/respira — Live
A small yoga and pilates studio in Lisbon wants a site that feels like its room — morning light, cork mats, no mirrors — and that gets a nervous first-timer to book a class without calling. The timetable has to be the product: real places left, beginner-friendly classes clearly marked, booking in under a minute on a phone.
What's inside
- Interactive breathing guide as the hero — three 4-4-6 cycles with a phase label, honouring reduced-motion preferences
- Six-day timetable with discipline and level filters, real spot counts, low-availability and full states, and a waiting list
- Booking sheet with inline validation, a first-time checkbox that reveals what to expect, and a confirmed state — front-end only
- Day tabs on phones, six-column week on desktop, from the same data
- Five disciplines with hand-drawn single-stroke glyphs and a five-dot intensity scale with named levels
- Prices, first-class offer and reception hours set in a mono/serif type system — no photography anywhere
- Bilingual PT/EN with a header toggle; skip link, focus rings, escape-to-close dialog, tabular numerals
Build log
- Art direction — mist/pine/cork tokens, old-style serif display, breathing-guide studies
- Hero with the breathing guide; phase timer, reduced-motion fallback, header and language toggle
- Timetable data model, filters, day tabs vs. week grid, spot states
- Booking sheet with validation and first-time flow; disciplines, prices, first-visit sequence
- Studio, simplified map, FAQ, bilingual copy pass, 375px and keyboard checks
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript