Centered Feature Cards Grid Hero Block for React

Each cell is a FeatureCell with a Feature (DATABASE, EDGE or WORKFLOW: a title, a one- or two-sentence description and a Lucide icon component) and its vignette as the child. The cells stretch to the tallest one in the row, so descriptions of different lengths still line up. For four pillars, add a Feature, a vignette and a FeatureCell, and change the grid to md:grid-cols-2 lg:grid-cols-4.

The headline is the page's one h1, and each cell title is an h2 under it, so the outline has no gap and a screen reader can jump from pillar to pillar by heading. The cells are a list of three, the icons and the vignettes are hidden from assistive technology (the title and description say everything they show), and the announcement pill is a single link named by its full sentence.

Wrap the title's text in a link and stretch it over the cell: <a className="after:absolute after:inset-0" href="/database">. The cell is already relative; add a focus style such as has-focus-visible:bg-muted to it. The whole cell becomes clickable, while the link stays one tab stop named by the title, and it works the same way on every target.

Yes. They use only your theme's tokens: bg-background cells with hairlines in the border colour, a vignette panel that mixes --muted into the background, and text-muted-foreground descriptions, in light and dark. The vignettes are greyscale, so the primary colour stays on the one button. Change the vignettes to show your own features; each is a small component at the top of the file.

It's CSS. Each part has starting: styles (@starting-style) that start it transparent and a few pixels low, and a transition that brings it to rest when it first renders: the pill, headline, subtitle and buttons in turn, then the three cells 70 ms apart. With reduced motion there's no transition, so everything renders at rest at once, and the server-rendered HTML animates the same way.

The cells stack in one column below the md breakpoint and sit three across from there. On a phone the vignettes are shorter, so the page isn't a long scroll, and the buttons are on the first screen. The headline wraps, balanced, at text-4xl, the calls to action wrap onto centred rows, and the pill keeps "What’s new" and shortens the rest with an ellipsis when it runs out of room, down to 320px.