Luxe

Luxe is a single-page experience built around a multi-step modal booking flow. Booking state — selected room, dates, guest count, and extras — is managed in a single useReducer, with each modal step reading from and writing to that shared state atom. Framer Motion's AnimatePresence handles cross-fades between booking steps, with a directional slide animation that moves each step out left and the next in from the right — matching the directional expectation of a linear multi-step flow.

Typography is handled with Playfair Display serif (loaded via next/font) for all headings and a custom sans-serif for body copy, with line-height and letter-spacing tuned specifically for premium hospitality brand copy. Gold accents (#D4AF37) are applied as CSS custom properties so they remain consistent across both themes without duplicating utility classes. In dark mode the background shifts to deep navy while the gold is retained at full opacity — a deliberate brand decision to maintain the luxury feel in both light and dark contexts.

Room category filtering uses Framer Motion's layout animation — when a category is selected, unmatched cards animate out with a scale-and-fade while matched cards reflow into the new grid position using layout transitions. The booking confirmation screen generates a reference number client-side using a seeded hash of the room slug and selected date, so the same combination always produces the same reference — a small detail that makes the demo feel like a real system.