אתר בית קפה בסגנון באוהאוס

Build a "Café Bauhaus Website" React component.

CONCEPT: The website of a neighbourhood café and roastery in a 1930s white-city building. It should read like a Bauhaus exhibition poster that sells coffee.

LAYOUT & CONTENT:
- Nav: circle logo + 'CAFÉ BAUHAUS', links Menu / Beans / Visit, red 'Order ahead' square button.
- Hero: left headline 'FORM / FOLLOWS / COFFEE' stacked; right a 3x3 geometric composition (a cup made of a half-disc and a circle among other shapes) with a 'Tap the poster' caption and the current angle.
- Menu: 6 tiles in a grid (Espresso, Flat white, Cortado, Filter, Cardamom bun, Shakshuka toast) each with a shape icon, price and short note.
- Hours: each weekday as a horizontal bar in the grid with times.
- Beans: three bags as tall rectangles in primary colors with origin and tasting notes.
- Visit: address in Tel Aviv's White City, a geometric map made of squares, and a 'Get directions' link; footer.

INTERACTIONS & MOTION:
- Headline words rise out of masks on load (spring 160/20, 100ms stagger).
- Hero shapes rotate in 90° steps when the poster (a real button) is clicked (spring stiffness 260 damping 16).
- Bean bags lift 14px on hover.
- Menu tiles: the shape inside spins 180° on hover.
- Hour bars grow from 0 to their width when the section enters view.

DESIGN SYSTEM — Bauhaus:
- Off-white #F3EEE3, black #111, red #E63322, blue #1F4E9E, yellow #F6C21B.
- Only circles, squares, half- and quarter-circles; strict grid; bold diagonals allowed once.
- Syne 800 uppercase for display, Inter Tight for body.

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.