801c4c028ffd17ddd9efb3232705764c4f145e28
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).
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 servernpm test(ornpx vitest run) — run the test suitenpm run build— type-check and build for productionnpm run lint— run ESLint
Description
Languages
TypeScript
77.5%
PLpgSQL
14.6%
CSS
7.1%
HTML
0.5%
JavaScript
0.3%