דף נחיתה לאפליקציית הרגלים

Build a "Vitals Habit App Landing" React component.

CONCEPT: A landing page for a habit-tracking app for people who hate habit trackers. It should feel soft, toy-like and encouraging.

LAYOUT & CONTENT:
- Nav: clay pill containing logo 'vitals', links Features / Stories / Pricing, and a 'Get the app' clay button.
- Hero: headline 'Tiny habits. Big squish.' ('Big squish.' in coral), a coral 'Try free for 14 days' clay button with '₪14.90 a month after', and a clay phone showing a progress ring and four habit bubbles (Drink water 6/8, 10 min walk, Read 5 pages 2/5, Stretch).
- Habits: 'Four habits. Pick one. Seriously, just one.' and four circular clay bubbles of different sizes (Water, Steps, Sleep, Calm) arranged as a loose, slightly rotated cluster, not a grid of equal cards.
- Month: a 28-day calendar where completed days are inflated mint bubbles and missed days are pressed-in dimples; a live count '20 of 28 days this month'. No streak counter.
- Stories: three testimonial clay cards in an uneven 1.4 / 1 / 1 grid, avatars made of pastel clay circles, names with Israeli cities.
- Download: App Store / Google Play clay buttons; footer.

INTERACTIONS & MOTION:
- Habit bubbles in the phone are buttons (aria-pressed): tapping inflates one (scale 1.04, clay shadow, check icon) or presses it back in; the ring and the percentage recompute on a spring (stiffness 60, damping 14). The phone floats 12px on a 5s loop.
- Calendar days toggle the same way and pop in once with a 15ms stagger from scale 0.6 (never from 0).
- Cluster bubbles grow to 1.06 and straighten on hover, squash to 0.94 on press.
- Clay buttons deflate on press (scale 0.94, smaller shadow) and wobble back (damping 9).

DESIGN SYSTEM — Claymorphism:
- Warm cream ground #FFF3E6; coral #FF8A6B (darker #E8603F for text), mint #9FE6C5, butter #FFE07A, sky #A9D8FF; ink #2B2350. No lilac or purple gradients.
- Inflated shapes: big radii, an outer shadow tinted warm (rgba(150,90,40,0.18)), inner light top-left and inner ink shade bottom-right; unfinished states are inset dimples.
- Fredoka 600/700 for everything; friendly, round.

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 SVG attributes only. Respect prefers-reduced-motion via useReducedMotion().
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum.
- 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, tabular numerals for times and numbers.

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.