- Category
- Front-end / Next.js / Motion
- Role
- Design and front-end development
- Year
- 2026
- Tools
- Next.js · React · TypeScript · Tailwind CSS · Framer Motion · Lenis
Next.jsTypeScriptFramer MotionAccessibility

01
The brief
Built as a front-end assessment and deliberately front-end only: no backend, database or payments. The booking wizard says so on its final screen.
02
What it does
- 01Five pages: home, a filterable services menu, artist profiles, a journal and booking
- 02Home page with a video hero, a word-by-word manifesto and a lookbook that moves sideways as you scroll
- 03Five-step booking flow (service, artist, date and time, details, confirmation) with an add-to-calendar file
- 04Form errors are announced and focus moves to the first field that needs attention
- 05Each breakpoint laid out on its own terms: swipe gallery, tap accordion and a full-screen menu on phones
- 06Skip link, focus-trapped menu, correct ARIA state and full keyboard support; reduced motion respected throughout
- 07Typed content in data files, next/image and next/font, and a hero video compressed to about 1 MB
03
In numbers
5pages
5booking steps
07Fee Management System
Monthly fee calculation for KickBlast Judo
