SaaS Feature Bento Grid
Bento grid of product features: two large visual tiles + four compact tiles, one message per tile.
Component code: FeatureBento.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer for a SaaS landing page. Build a bento features grid where every tile carries exactly one idea and one visual.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
6-cell bento on a 4-col grid: tile A spans 2x2 (hero visual, mini UI mock), tile B spans 2x1 (chart visual), tiles C–F 1x1 (icon + line). Section header above: eyebrow, H2, subhead. Tiles are rounded-3xl cards with a subtle inner border and a soft radial highlight at the top edge.
TYPOGRAPHY
Typography
H2: clamp(1.9rem, 4vw, 2.75rem)/600. Tile title: 1.05rem/600. Tile body: 0.9rem muted leading 1.55.
COLOR TOKENS
Color Tokens
--background: 0 0% 100%; --card: 240 20% 99%; --foreground: 240 20% 10%; --primary: 250 80% 60%; --muted-foreground: 240 10% 45%; --border: 240 15% 90%.
SPACING
Spacing
Grid gap 1rem; tile padding 1.5rem; section padding 6rem/4rem; container max-w-6xl.
ANIMATION
Animation
Tiles rise with stagger on scroll into view; hero tile's mini UI has a slow looping float (translateY ±4px, 6s). Hover: border darkens one step, no scale. Reduced motion disables loop.
RESPONSIVE
Responsive
<md: single column stack, hero tile first, all visuals keep 16/10 crop.
SAMPLE COPY
Sample Copy
H2: "Everything a small team needs, nothing it doesn't."
Tiles: "Automations — Rules that run while you sleep"; "Analytics — Answers, not dashboards"; "Integrations — 40+ tools in one click"; "Permissions — Roles down to the field"; "Audit log — Every change, who, when"; "Backups — Hourly, one-click restore".