אתר מאויר כמו ספר ילדים למאפיית לילה

Build a "Night Oven Bakery Website" React component.

CONCEPT: The website of a tiny night bakery in Haifa's German Colony that bakes from 4 am and opens at 7. It should feel like opening a picture book at bedtime: illustrated, warm and a little funny, never childish or clip-art.

LAYOUT & CONTENT:
- Nav (72px, night blue): moon icon + 'The Night Oven' in a soft serif, links The night / Shelf / Challah / Visit, a butter-outlined basket pill that counts loaves put aside.
- Hero (700px): a full-bleed SVG night scene: twinkling four-point stars, a crescent moon, two rolling hills, a small bakery house with a tomato roof, a lit butter-yellow window, a green arched door, chimney smoke puffs, a black cat with butter eyes on the roof, a loaf-shaped sign swinging from a bracket, two cypresses and tiny far-off houses on the back hill. Left-aligned headline 'We bake while Haifa sleeps.' (5.4rem), one sentence, a butter pill 'Pre-order for Friday' and an underlined 'See the shelf' link. A handwritten note near the house: 'psst, tap the window'.
- 'How a loaf happens, from dark to doorstep': four picture-book panels of different widths with thick navy outlines and pastel grounds: 04:00 The oven wakes (mixing bowl), 05:30 Shaping (hands and dough), 06:40 Into the fire (oven with loaves), 07:00 Door open (green door with an 'Open' sign). Big serif times, a title and one line each.
- 'This morning's shelf': five SVG loaves (country sourdough, six-strand challah, chocolate babka, za'atar baguette, seeded rye) standing on a drawn wooden shelf.
- Friday challah: a headline 'Friday challah sells out by eight.' beside a butter-yellow ticket form with punched side notches: name field, loaves stepper (1-6), pickup time segmented radios (07:00 / 09:00 / 11:00), and a navy 'Reserve 2 challahs' button.
- Visit: a hand-drawn map (streets as soft strokes, the sea as a pale band, a dotted tomato route from the station to a heart pin, handwritten labels) next to the address, walking directions and an hours list (Saturday: 'Asleep').
- Footer: night blue with an endpaper pattern of tiny loaves and stars, 'The end.' in 6rem serif, a handwritten line, small print.

INTERACTIONS & MOTION:
- Hero parallax: on pointer move, the moon drifts against the cursor (26px) while hills and house move with it at 8 / 22 / 34px depths, all through springs (stiffness 60, damping 18). Stars twinkle on staggered 2.4-4.5s loops; smoke puffs rise and fade every 6s.
- Clicking the window (a real button with aria-pressed) toggles the light. The hanging sign swings ±4° on a 3.2s loop from its top edge (transform-origin 50% 0).
- Panels fade up 24px with cubic-bezier(0.23, 1, 0.32, 1), 80ms stagger, once.
- Shelf: hover or focus lifts a loaf 22px with a 3° tilt (spring stiffness 320, damping 16) and pops a handwritten paper tag above it (spring duration 0.35, bounce 0.25; exit 120ms). Clicking puts the loaf aside and the nav basket bumps (scale 1 to 1.15 to 1 in 300ms).
- Form: the stepper number drops in from -8px on change; submit shows an inline handwritten confirmation 'Saved. See you Friday at 09:00.'
- The map route draws itself with pathLength when it scrolls into view (1.8s ease-in-out).

DESIGN SYSTEM — Storybook:
- Night #1C2650 (also the text colour), paper #F6EEDF, tomato #E2553B, butter #F3C04F, crust #B86F36, door green #2E7D6B; pastel panel grounds #DCE3F2, #F8D9C9, #F6E2B0, #D7E7D9.
- Young Serif for headings, Figtree for UI and body, Caveat only for handwritten tags and notes.
- Illustrations: flat fills, 3-4px navy outlines, round caps, no gradients. 28px radius on panels and cards, pills for buttons. A 7% fractal-noise grain over the page for a printed-paper feel.

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 and clip-path only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Every illustration has aria-hidden or a real aria-label; the parallax, twinkle and smoke loops stop under reduced motion.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow label above every heading.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, text contrast at least 4.5:1, 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.