Cursor prompt for a bento grid section

In this repo, add a bento grid section to the landing page for a project management SaaS. Before writing code, open the landing page file and two existing section components to learn the local conventions — container component, spacing scale, heading levels, card primitives — and match them.

Placement and safety:
- New file: src/components/sections/BentoFeatures.tsx, or this repo's equivalent section folder; follow what you find.
- Insert its import and render call immediately after the hero in the page file. Do not renumber, restyle, or re-space any neighboring section; the only page-file change is one import and one JSX line.
- Reuse the repo's Card or Panel primitive for cells if one exists; otherwise define a single local Cell subcomponent inside the new file.

The grid — 4 columns, six cells, one claim per cell, gap taken from the repo's spacing scale (default 16px):
- One 2x2 anchor: the capability that best explains why engineering managers at startups picks a project management SaaS over the incumbent, with a media placeholder sized to the cell.
- One 2x1: a horizontal before/after strip — the old way struck through, the a project management SaaS way beside it.
- Two 1x1 stats: different units, each a number plus a caption under six words.
- One 1x1 quote with attribution.
- One 1x1 action card linking out, labelled "start a free trial" — built from the repo's own link or button component.

Above the grid: an overline plus an H2 under nine words, using the same heading component sibling sections use, 48px above the grid. Section vertical padding equals whatever the neighboring sections use — read it, don't invent it.

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: 2 columns at tablet with the anchor spanning both, 1 column on phones with the anchor first and the action card last.

Run the dev server and verify: (1) git diff touches only the new file and two lines of the page file, (2) sections above and below sit at unchanged offsets — compare screenshots if unsure, (3) all six cells render with no grid holes at three breakpoints, (4) the action card uses the repo's own interactive component.