belviskhoremk 801c4c028f feat: add step progress indicator and animated transitions to Book
Adds StepProgress component showing 4 labeled booking steps (Service,
Date & Time, Contact, Confirmed) and wires it into Book.tsx alongside
framer-motion AnimatePresence/motion.div step transitions.

Deviates from literal brief in two ways, both to avoid known issues:
- Guards the transition with useReducedMotion() (duration: 0 when
  prefers-reduced-motion is set), matching the fix pattern already
  applied to Home.tsx and Shop.tsx after prior review round-trips.
- Drops AnimatePresence's mode="wait" in favor of the default (sync)
  mode: with mode="wait", the incoming step's DOM doesn't mount until
  the outgoing step's exit animation finishes, which broke existing
  synchronous Testing Library queries in Book.test.tsx (real 250ms
  exit animations in jsdom, no fake timers). Sync mode mounts the new
  step immediately while both fade, preserving test synchronicity.

Also updates Book.test.tsx's confirmation assertion since the old
"You're booked!" heading is gone (page now always shows the shared
"Book an Appointment" heading and StepProgress; only the body swaps).
2026-08-03 23:11:29 +00:00

Braids by Mira

Public marketing site for Braids by Mira — landing page, product showcase, booking flow, and salon policies.

Scripts

  • npm run dev — start the local dev server
  • npm test (or npx vitest run) — run the test suite
  • npm run build — type-check and build for production
  • npm run lint — run ESLint
Description
No description provided
Readme 3.9 MiB
Languages
TypeScript 77.5%
PLpgSQL 14.6%
CSS 7.1%
HTML 0.5%
JavaScript 0.3%