אתר לבית בד משפחתי עם פחית תלת־ממד

Build a "Gat & Daughters Olive Oil Website" React component.

CONCEPT: The shop of a family olive press in the Lower Galilee that sells three single-grove oils in tins. The page is built around one tactile object: a 500 ml tin you can grab and spin. Packaging-design energy: huge condensed type, three bold tin colours, the feel of a product you want to hold.

LAYOUT & CONTENT:
- Nav (72px, stone ground): wordmark 'GAT & DAUGHTERS' in condensed display + 'Olive press, Galilee', links Oils / Harvest / Press visits / Stockists, an outlined 'Bag (0)' pill.
- Hero (820px): three stacked lines 'PRESSED / THE DAY IT'S / PICKED.' at 10.5rem in a condensed 800 face, the middle line indented and in oxblood. On the right, overlapping the type, a CSS 3D tin (radius 128px, height 320px). Bottom-left: one sentence about the press and a dark pill button 'Add Early Harvest to bag' with the price in a tin-coloured chip. Bottom-right: a radiogroup of three oil cards, each with a tiny tin swatch, name and price.
- Marquee band (oxblood): 'PICKED 06:10', 'PRESSED 11:40', 'IN THE TIN 15:00', 'HARVEST 2026' at 4.2rem, alternating solid yellow and outlined, separated by little olive shapes.
- 'Nine hours, branch to tin.': four steps on a horizontal oxblood rail, each a 140px circle with a line drawing (branch with olives, washing tub, mill wheel, tin), a big time, a title and one line.
- Taste: a full-width section painted in the selected oil's tin colour: tabs for the three oils, the oil name at 7.5rem, a tasting note and pairing, and three pill-shaped bars (Fruity, Bitter, Peppery) out of 10.
- Press visits: an SVG illustration of olive-tree rows and a small oxblood press house beside 'COME PRESS WITH US.', a paragraph (₪120 a person, kids free), Friday date chips (one full and struck through), a people stepper and an oxblood 'Book 2 places, ₪240' button with places left below.
- Footer (oxblood): 'GAT & DAUGHTERS' across the full width at 15rem in yellow, then address, press hours and email.

THE TIN (the signature):
- Build a cylinder from 36 facets: each facet is a div of width 2πR/36 (+1px overlap), rotateY(i * 10deg) translateZ(R), backface-visibility hidden, overflow hidden, holding the full label (width 2πR) shifted left by i facet widths, so the label wraps seamlessly. The scene has perspective 1300px and rotateX(-13deg) so the top lid shows; the lid is a radial-gradient disk (rotateX(90deg)) with a pull ring.
- The label: front panel with 'GAT & DAUGHTERS', an olive-branch SVG, 'GAT' at 7.5rem and 'EARLY HARVEST / EXTRA VIRGIN 500 ML'; a back panel with tasting copy and storage note; a barcode-like stripe block with batch and picking date; darker rim bands top and bottom.
- Lighting is a fixed, non-rotating gradient overlay on the cylinder's silhouette (dark edges, one soft highlight stripe at 30%), so the metal reads as round while the label turns underneath it. A soft elliptical shadow sits under the tin.
- Motion: an idle turn of 12°/s from useAnimationFrame; pointer drag (with pointer capture) turns it 0.45° per px, and on release the measured velocity carries on and decays (×0.94 per frame). Choosing an oil repaints the label (300ms colour transition) and kicks the spin.

INTERACTIONS & MOTION:
- Hero lines rise out of a mask on load (y 100% to 0, 0.9s, cubic-bezier(0.23, 1, 0.32, 1), 90ms stagger).
- Oil cards: the mini tin lifts 4px on hover; selecting sets aria-checked and syncs the Taste section.
- Marquee loops linearly over 22s.
- Timeline: the rail scales in from the left (1.8s, cubic-bezier(0.77, 0, 0.175, 1)) and each drawing traces itself with pathLength, 350ms apart, once in view.
- Taste: the section background crossfades (400ms) to the selected tin colour; the name and note swap with AnimatePresence (enter 350ms from 16px below, exit 150ms); bars are scaleX on a spring (stiffness 140, damping 20).
- Buttons press to scale 0.97 in 150ms.

DESIGN SYSTEM — Tactile Pack:
- Stone #ECE5D3, olive black #1D1F12, oxblood #7E1F14, tin yellow #F2C230, olive green #4F5E22, warm greys #3C3A2E / #5E5A49.
- Bricolage Grotesque for everything: display at wdth 75 and weight 800 in uppercase, body at normal width 400-600.
- Pills for controls, 16-28px radii for cards, no drop shadows except the tin's floor shadow, no gradients except the tin's lighting.

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 colour only. Respect prefers-reduced-motion via useReducedMotion() (no idle spin, no marquee, no mask reveal; drag still works).
- The tin has role="img" and an aria-label that says it can be dragged; touch-action none on it only.
- 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.