BUILD
- Build a complete Bento marketing-and-product homepage as an unequal board. Not a single card, not an isolated navbar, not a Dark UI sidebar shell, not tabs.
- Domain from Use on: Dashboards and Marketing share one twelve-column disk.
STYLE
- Bento: unequal tiles, tight gap, one hero cell
- Ground #F5F5F7. White tiles, 16px radius, hairline rgba(29,29,31,0.08), gap 8px
- Type #1D1D1F, mute #6E6E73. Primary CTA #0071E3. Metric numbers may use #00C2B3. Plus Jakarta Sans. No Inter
LAYOUT
- Full-width nav as a tile: wordmark North, separate Product / Board / Pricing, search, Get started
- Container max-width 1200px, 12 columns, 8px gap
- Finished board homepage: split hero cell + visual, three feature tiles, mosaic (one large + two stacked), three-column footer tile. This IS the board.
SECTIONS
1. Hero cell: "Unequal tiles. One hero cell." plus a product visual tile
2. Three feature tiles: Uptime 99.9%, Boards, One price
3. Mosaic: Board home (lead) + Marketing disk + Pricing tile
4. Three-column footer: Product / Pricing / Legal
INTERACTION
- Hover: 1px #1D1D1F rule on the hovered tile. No lift, no large shadow
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Do not output one generic rounded card. Do not use a dashboard sidebar. Do not output only a headline plus two empty cells
- Gap stays 8px. No 24px marketing gutters that dissolve the board
MOTION
- First paint: stagger the tiles ~100ms. Once. Not on every scroll pass.
- Hover: border and background, 140ms ease-out. Tiles do not float.
- No scroll-driven tile choreography; the grid should already read as a grid.
- prefers-reduced-motion: render the grid fully, no stagger.