Split Layout Numbered Feature List Hero Block for React

Edit the FEATURES array at the top of the file: each entry is a title of two to four words, a one-line description and the number shown beside it ("01"). Keep the numbers in step with the order, since they're only the visible label: the ordered list numbers the items for screen readers itself. Five to seven features keep the list about as tall as the copy beside it.

With our Guides component, solid hairlines and + marks only. The section's column draws the two side rails and the top rule, which runs to the edges of the viewport so stacked blocks join up. The end column adds the divider with lg:border-s and a mark where it meets the top rule, and the list draws its own corner marks, so the rows' rules end exactly at the divider and the right rail. Below lg the divider is replaced by a rule across the column with its own marks.

The headline is the page's one h1, and "Six things you stop building" is an h2 above an ordered list, so a screen reader announces a list of six and can jump to it by heading. The visible numbers are hidden from assistive technology, so "01" isn't read on top of the list's own numbering, and each feature is read as its title and description. The announcement is a single link named by its full sentence, and the status dot and arrow are hidden.

The Shine Button is the one filled control: a sweep of light crosses it once on hover and focus, and rests with reduced motion. Set its href and text, and name where it goes ("Start building"). The second action is an outline Button for the quieter path to the docs. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Below the lg breakpoint the halves stack: the copy first, then the list under a ruled band. The descriptions hide below sm, leaving six one-line rows, and the headline steps down to text-4xl. The calls to action and the trust points wrap, and the announcement shortens its text with an ellipsis if it runs out of room, down to 320px.

Use the list for five to seven features whose names and one-line descriptions speak for themselves, where a compact, scannable column beside the headline beats visual weight. Use feature cards for three pillars that each need an icon and a few sentences, and a steps hero when the numbers mean an order the visitor follows.