Bento Grid Features Block for React

Each feature is a Cell in the list at the bottom of the file, with its title, its one-sentence description, a size and its drawing as the child. The sizes live in SHAPES: lead takes four of six columns and two rows on a desktop and both columns on a tablet, tile takes two columns, and wide takes four with its text beside the drawing. Cells fill the grid in order, so keep a lead, three tiles and a wide cell (or another set whose spans add up to six per row): a hole would show the border colour behind the cells.

Each drawing is a small component (LiveBoard, PullRequest, Burndown, TriageRule, TypedSdk) built from plain elements, Lucide icons and one inline SVG chart, with its content in typed constants at the top of the file: LANES, PULL, CHECKS, RULE, CODE and FIELDS. The cycle's figures are derived from CYCLE, so the lane counts, the burndown and its "open of" total always agree. Swap the constants for your own product's screens, or replace a component with a drawing of your own; keep it decorative, as these are.

Yes. Every surface and line is a theme token: windows on bg-card with a border, lanes on bg-muted, mock buttons and the teammate who is dragging in bg-foreground with text-background, and the burndown in foreground tones. Nothing in the drawings uses your primary colour, so the Shine Button stays the one primary element, and the section is light on a light page and dark on a dark one in every preset.

The cells share hairlines: the list is a grid with a one-pixel gap over your border colour, and every cell sits on the page background, so each line is drawn once. The grid runs from rail to rail of the page column (max-w-6xl), whose rails and top rule come from Guides, so the block lines up with its neighbours in a stack. A second Guides draws the band's top rule with a plus on each rail. The band ends the block: the column has no bottom padding and the band no bottom rule, because the next block's top rule is its foot, so two lines never sit a few pixels apart.

The section's heading is an h2 and the features are the items of a list, each with an h3 and its sentence. The drawings are decoration: each one is aria-hidden and inert, so nothing in them is read out or takes focus, and the heading and sentence beside each drawing say what it shows. The only control is the Shine Button, a real link with a visible focus ring. In a right-to-left page the board mirrors like any interface, while code, branch names and the chart stay left to right. The button renders the link it's given with render, with nativeButton={false}.

Below the md breakpoint every cell takes the full row, the text first and the drawing under it. The board and the editor drop to a fixed, shorter height and fade out at their foot, and the board runs off the cell's edge, so a phone shows its first lanes instead of shrinking it. The header and the board fade up once when the page loads, with CSS transitions; with reduced motion they simply appear, and nothing else moves.