Two Columns Hero Block for React

Replace DeploymentsPage with your image: an img with className="absolute inset-0 size-full rounded-xl border object-cover object-top" and an alt that says what the screenshot shows. Keep the frame's box (it holds the height, so nothing shifts while the image loads) and remove aria-hidden from the cell, which is there only because the drawing is decorative. To keep the drawing instead, edit PIPELINE and DEPLOYS at the top of the file.

All three are links to #: point them at your release notes, sign-up and documentation. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}. The Shine Button's light is its own ::before, so it works as a link on every target and sweeps once when the pointer arrives or the button takes focus.

The headline is the page's one h1. The pill and both calls to action are links, each named by its text, and the checklist is a list. The check marks, the status dot and the whole drawing are hidden from assistive technology, since they add nothing the text doesn't say.

Guides draws them. The top rule bleeds to the viewport's edges with + marks on the two crossings; the divider is the second column's lg:border-s with a + mark where it meets that rule; and the drawing sits in its own frame, Guides extend="sm" marks="corners". Below the lg breakpoint the columns stack and a Guides rule with + marks separates them instead of the divider.

The two columns sit side by side from the lg breakpoint and stack below it, the copy first and the drawing under it, at 288 px tall. Below sm the headline drops its forced line break and wraps, balanced, at text-4xl, and the calls to action wrap onto a second line when the row is too narrow. The first button ends about 500 px down a phone's first screen.

Keep the copy first in the markup and give the drawing's cell lg:col-start-1 lg:row-start-1, so it sits on the start side on wide screens while a keyboard and a screen reader still meet the copy first. Then move lg:border-s and the marks="start" Guides from the drawing's cell to the copy's. Hero Video Player is built this way. Don't use lg:order-first: it changes the visual order but not the reading order.

Use the two columns when you have a strong visual, a screenshot, a demo or an illustration, to show beside the copy. Use a centered hero when the headline is the main selling point and there's no visual, or when you want a simpler, more focused first screen.