BUILD
- Build a complete Gradient campaign / product landing homepage. Not a card, not an isolated navbar, not a page-wide wash, not tabs.
- Domain from Use on: Landings first; Pricing is a section on white, not a separate site.
STYLE
- Gradient: two stops, an angle, on the hero only
- Hero stage ONLY: linear-gradient(120deg, #0071E3 0%, #00C2B3 100%). Type on the wash is white
- Below the hero: #FFFFFF, type #1D1D1F, mute #6E6E73, hairline rgba(29,29,31,0.12), 12px radius on feature and price cards
- Hero CTA: white fill, type #0071E3. Plus Jakarta Sans. No Inter
LAYOUT
- Nav sits ON the gradient hero: North, separate Product / Pricing / Docs, search, Get started (white pill)
- Centered container max-width 1120px, 12 columns, 24px gutter
- Finished campaign home: split hero on the wash, then white feature trio, mosaic, three-column footer. Gradient stops at the hero.
SECTIONS
1. Gradient hero: "Two stops. One angle." plus a 120° visual tile. CTA Get started
2. Three white feature columns: Ship / Measure / Price
3. Mosaic: Campaign landing (lead) + Pricing + Docs
4. Three-column white footer: Product / Pricing / Legal
INTERACTION
- Hover lifts the white CTA and white cards 2px. The gradient never gains a third stop
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia, rainbow, extra stops. No Inter. No emoji icons
- Do not paint the whole page with the gradient. Do not put body copy on the wash
- Do not output only a headline plus two empty cells on a full-bleed slash
MOTION
- Flowing gradient: 8s linear loop on background-position, or transform where possible.
- Hover: gradient opacity only, 160ms. Do not re-tint the whole surface.
- Never animate two gradients at once; it muddies both.
- prefers-reduced-motion: static gradient.