Reverse Split News List Hero Block for React

Edit the UPDATES array at the top of the file: each update is a version, a label and the href it links to. Three to four rows read best; past that the list pushes the calls to action toward the bottom of the first screen on a laptop. Each row is one real a the width of the list, at least 40px tall, with its version in a monospaced column, its label underlined on hover and an arrow that nudges forward; it's ringed when it has keyboard focus, and the rows are divided by hairlines rather than boxed.

Replace <AssistantWindow /> with an img (or your framework's image component) positioned the same way, for example className="absolute end-10 top-14 w-[calc(100%-5rem)] rounded-xl border shadow-sm", and keep the mask on its wrapper so the bottom fades into the section. Remove aria-hidden from the cell and give the image an alt that says what the screenshot shows. Load it eagerly: it's above the fold.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges (the section's overflow-x-clip stops it there), with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the divider is the copy's lg:border-s with Guides marks="start" rules="none" sides={false} for the plus where it meets the top rule, and the illustration sits in Guides extend="sm" marks="corners", a frame of hairlines that run 0.5rem past its corners with a plus on each. Every line is solid and is the theme's border colour, so it follows any preset.

The headline is the block's one h1, and Latest updates is an h2 over a list of three links, so a screen reader announces a list of three items and reads each link by its version and label: the arrows are hidden. The announcement pill is a single link whose name is its full sentence, and both calls to action are links named by their text. The illustration and the lines are decoration, hidden from assistive technology, with nothing in them to focus.

The two halves stack below the lg breakpoint, copy first and the illustration under it, with a ruled line between them; from lg the illustration moves to the start side. On a phone the illustration drops the document and keeps the sidebar and the assistant, cropped at the start edge. The headline drops its forced line break below sm, the pill truncates its second half, and the calls to action wrap onto a second line when the row runs out of room, down to 320px. The Shine Button is on the first screen of a phone.

It's a Status dot in its default variant, the foreground colour, to mark news rather than a state. For a launch or a live release, give it variant="success", or warning for a deprecation notice. The dot is decorative and hidden from screen readers, so put anything it means into the pill's text as well.