Split Layout Feature Badges Hero Block for React

Edit the FEATURES array at the top of the file. Each entry is a label, a one-line description and a Lucide icon component, rendered as a row of the ruled list with an icon tile, a label and the description. The rows share the panel's height, so four to six keep it about as tall as the copy beside it; for more, use the numbered feature list hero.

Yes. Each row is a plain li, so wrap its label and description in an <a href="/docs/encryption"> and stretch the link over the row with after:absolute after:inset-0 (the row is already relative), and the whole row is one link named by its label and description. Add a focus style such as has-focus-visible:bg-muted to the row, and keep the descriptions short, since a screen reader reads the whole row as the link's name. It works the same way on every target.

The headline is the page's one h1. The five rows are a list, so a screen reader announces "list, 5 items" and reads each label with its description. The icons and the status dot in the badge are hidden from assistive technology, and the badge is plain text, not a link, so it isn't a tab stop. The only tab stops are the two calls to action.

It's CSS: starting: styles (@starting-style) start each part transparent and slightly offset, and a transition brings it to rest when it first renders. The copy rises; the rows slide in from the end side, 60 ms apart, which is the right in a left-to-right page and the left in a right-to-left one (rtl:starting:-translate-x-2). With reduced motion there's no transition, so everything renders at rest at once.

Below the lg breakpoint the two halves stack: the copy first, with both buttons on the first screen, then the feature panel with a rule above it. The divider and its marks are dropped, the headline steps down to text-4xl, the calls to action wrap onto a second row when they don't fit, and each description wraps rather than being cut off, down to 320px.

Use badges for four to six features that each need a short description next to the headline, read top to bottom. Use feature cards when three pillars each deserve a few sentences, and a checklist when the features are one-line yes-or-no capabilities.