Vibe With Yoga
Hatha yoga and breathwork studio site, rebuilt around a three-step class booking flow that ends in WhatsApp.
Visit live site ↗
- Role
- Redesign, design & build
- Type
- Studio website + booking flow
- Stack
- Astro · Tailwind · Lenis · WebGL · WhatsApp
- Live at
- vibewithyoga.com ↗
(01)The problem
Students had to scroll through the whole site to find a class, a time and a price, and a 3-second loader plus a 15.8 MB hero video slowed the first visit on phones.
(02)Approach · key decisions
01
Book from the first screen
A quick class picker sits in the hero: pick a class and you are in the booking flow in one tap.
02
Prices and timings up front
Every class card shows its price and selectable batch timings, so nobody has to ask before choosing.
03
WhatsApp as checkout
/book runs class → batch → details with a live summary and inline validation, then opens a pre-filled WhatsApp message to the teacher (with a fallback link).
04
Fast on a phone
Removed the blocking loader, self-hosted the fonts and re-encoded the hero video. A sticky Book bar stays on mobile.
(03)What's inside
The build.
- Video hero with a quick class picker
- Class cards with selectable batch timings and offer prices
- Three-step booking explainer, trainer section, student stories marquee, FAQ, blog
- Lenis smooth scroll, split-text reveals, spotlight cards, WebGL silk footer panel
- All prices, batches and the WhatsApp number in one data file
Mobile · 390px
Desktop · 1440px
(04)Outcome
- ✓ Shipped
Hero video 15.8 MB → 0.57 MB
- ✓ Shipped
3-second blocking loader removed
- ✓ Shipped
Live on a custom domain
What I learned
For local services, the fastest path to a conversation is the whole product.
Next project →
ShopatLLMs
