חנות טיפוח אורגנית

Build a "Bloom & Root Skincare Shop" React component.

CONCEPT: The homepage of a small-batch botanical skincare brand that sells refillable bottles. Calm, warm, tactile; it should make you want to touch the products.

LAYOUT & CONTENT:
- Announcement bar: 'Free refills shipping over $40'.
- Nav: logo 'bloom & root' lowercase, links Shop / Rituals / Refill / Journal, bag icon with count.
- Hero: headline 'Rooted in slow rituals.' with morphing sage and clay blobs and a product bottle drawn in CSS.
- Bestsellers: a 'My skin is anything / dry / oily / sensitive' pill picker and 4 product cards (Oat Milk Cleanser, Rose Hip Oil, Clay Mask, Night Balm) with a labelled CSS bottle, price, size and an 'Add to bag' button.
- Ingredients story: split section with a sage blob holding a line drawing of the selected ingredient (oat stalk, rose hip, clay shards), and three ingredient rows with origins.
- Reviews: three review cards with stars and first names.
- Refill band: moss background, 'Refill, don't rebuy. Save 20%.' with a pill CTA.
- Footer: newsletter, links, B-Corp-like badge circle.

INTERACTIONS & MOTION:
- Blobs morph between three SVG paths on 8–10s loops and rotate slowly.
- Add to bag: button morphs to a check and the bag count bounces (spring stiffness 500 damping 12).
- Skin picker: a moss pill slides between options (layoutId); products that don't suit fade to 35% and shrink to 0.97.
- Ingredient rows (hover, focus, click) swap the drawing, which traces itself with pathLength over 1s.
- Product cards lift 6px and tilt -1.5° on hover.

DESIGN SYSTEM — Organic Earth:
- Bone #F7F3EA, sage #A3B18A, moss #3A5A40, clay #DDA15E, blush #EFC7B3.
- Soft morphing blobs, rounded pills, generous radius, calm breathing motion.
- DM Serif Display headings (italic accents), DM Sans 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.