v0 prompt for a bento grid section

In v0, build a bento grid section for a project management SaaS — a features-and-stats mosaic that slots into an existing landing page between the hero and pricing. Generate two components: <BentoSection /> and a reusable <BentoCard /> taking colSpan and rowSpan props, with shadcn Card as the base.

Section header first: a short overline label, then an H2 of at most eight words framing the value for engineering managers at startups, with mb-12 below it.

The grid: 4 columns on desktop, gap-4, exactly six cells — one idea per cell, never two:
1. Flagship cell, 2x2: the single most differentiating capability of a project management SaaS, with a mini visual placeholder and two lines of copy.
2. Stat cell, 1x1: one quantified outcome — a number worth bragging about — with a five-word caption.
3. Stat cell, 1x1: a second, different metric; never repeat the first cell's unit.
4. Workflow cell, 2x1 wide: how a project management SaaS fits into the day of engineering managers at startups, expressed as a three-step inline flow.
5. Quote cell, 1x1: one customer sentence with a name-and-role line.
6. Action cell, 1x1: a see-it-live card whose link is labelled "start a free trial", visually quieter than the flagship cell.

Cell interiors: p-6, content top-aligned, caption text last. Section rhythm: py-24 outer, grid rows sized so 1x1 cells stay near square.

Visual direction:
Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else.

Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge.
Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy.
Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission.

Responsive: at md collapse to 2 columns with the flagship cell spanning both and rowspans released; below sm, single column ordered flagship, stats, workflow, quote, action.

After building, check that: (1) the grid has no empty holes at 1440, 768, and 375 widths, (2) every cell contains exactly one idea and one point of emphasis, (3) the two stat cells use different units, (4) the action cell's link carries the CTA label, (5) card borders align along consistent grid lines. If one cell misses, regenerate that card alone by referencing its number in this list.