Checklist Hero Block for React

Edit CAPABILITIES at the top of the file: each capability has a title and a description. Eight cells fill two rows of four; keep a multiple of four so the grid ends flush, or six for rows of three after changing lg:grid-cols-4 to lg:grid-cols-3. The cells share one-pixel gaps painted in the border colour, so no cell has its own border and a longer description only makes its row taller.

Edit PLAN: name titles the card, currency is the sign shown before the number, amount the number and covers the line under it. The price stays left to right in a right-to-left page, and screen readers hear "per month" where the card shows "/month". Change the "Cancel anytime" line in the card to your own terms, and point the buttons at your trial and your docs.

A shell with a faint tint (bg-muted/50, p-1.5) and + marks on its corners holds a raised panel (bg-card, a soft shadow and a faint ring). Emphasis comes from that structure, not from a coloured fill, so primary stays on the one Shine Button. In a light theme the tinted shell is what lifts the panel off the page.

Yes. It's a list named "Included in every plan", so screen readers announce eight items, each read as its title (an h2) and description, with the decorative ticks hidden. The headline is the page's h1. With reduced motion nothing fades in, the grid included.

The text comes first with the Shine Button on the first screen, then the price card, then the cells as compact rows with the tick beside the text. The headline steps down from text-6xl to text-4xl. The whole hero is about two screens tall on a phone.

Use the checklist when the message is "it's all included": many short items, each a fact a buyer ticks off, under a single plan and price. Use a feature cards hero when a few features each need an icon, a headline and more explanation to land.