אתר מלון בוטיק יוקרתי

Build a "Nocturne Hotel Website" React component.

CONCEPT: A one-page website for a 24-room boutique hotel in an old printing house. It should feel like an evening: quiet, dark, expensive, unhurried.

LAYOUT & CONTENT:
- Nav: wordmark 'NOCTURNE' centered; links Rooms, Dining, Spa, Journal left and right; a 'Reserve' outline button.
- Hero (two columns): left, 'Stay up / late.' in Bodoni italic 9rem, subline ('Pick a window.') and two CTAs; right, a 520px line drawing of the printing-house facade ('IMPRIMERIE 1931' on the pediment, an arched door) with 24 arched windows in a 6x4 grid, a few already lit.
- Suites: three tall cards (Atelier, Press Room, Rooftop Loft), each a dark plate with the suite's floor plan in 1.2px gold line art, size in m², price per night, 'View suite'.
- Dining: split section, left text about the bar 'The Composing Room', right an ivory cocktail card typeset in Bodoni (three drinks with ingredients and prices) and a vertical caption.
- Quote: one large italic guest quote with the guest's city.
- Reservation band: check-in / check-out / guests fields inline and 'Check availability' button.
- Footer: address, phone, newsletter line, small links.

INTERACTIONS & MOTION:
- Hero headline lines rise from y 100% inside masks, 0.12s stagger, 1.1s ease [0.22,1,0.36,1].
- Facade: hovering or focusing a window (each a real button) lights it in warm gold (0.35s) and a small card below swaps in the room number, name and nightly price.
- Suite cards lift 8px on a spring and their plan redraws with pathLength 0 to 1 (1.2s, cubic-bezier(0.77, 0, 0.175, 1)).
- The cocktail card sits rotated -4° with a slight rotateX; 'Unfold tonight's menu' straightens it on a spring and reveals the kitchen line with an animated height.
- Nav links get a champagne hairline that grows from the left on hover (0.25s ease-out).
- Sections fade up as they enter the viewport (whileInView, once).

DESIGN SYSTEM — Luxury Noir:
- Near-black #0E0D0B, champagne #CBB68B, ivory #EFE9DD. No gradients except soft vignettes on image placeholders, no glow.
- Bodoni Moda for display (italic for accents), tiny uppercase labels tracked 0.35em.
- Huge margins, 1px champagne hairlines, nothing crowded.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.