Centered Feature Badges Row Hero Block for React

Edit HIGHLIGHTS at the top of the file: each badge is a Lucide icon and a short label. They render as our Badge with variant="secondary", size="lg" and pill, so they follow the theme's secondary colours in light and dark. Keep four badges: the band is a four-column grid from lg and two by two below it, and another count leaves an empty cell. Labels of up to four words fit a cell at 320px.

The sketch is DeploymentPreview, a small component at the top of the file; edit LOG, DETAILS and REGIONS to show your own product's words. For a screenshot or a video, replace the window inside the panel with an img (or a video) with className="size-full object-cover object-top" and a real alt text, and keep the frame's Guides. The sketch is decoration: it's aria-hidden and inert, so screen readers skip it and nothing in it can be focused.

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, with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the badge band is a grid gap-px border-y bg-border of bg-background cells, with <Guides marks="corners" rules="none" sides={false} /> putting a plus where its hairlines meet the rails, and the deployment 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 page's one h1. The pill and both calls to action are links, each named by its text. The badges are a list named Platform highlights, so a screen reader announces four items and reads each label; the badges' icons, the status dot and the pill's arrow are hidden. The sketch of the platform is hidden too; if you swap it for a real image, give that image its own alt.

Yes: render each badge as a link and point it at the page that explains the feature. Keep the list, and put one link in each list item. On Base UI, pass render={<a href="/features/edge" />} to the Badge. As a link, the badge shows its focus ring to keyboard users.

Below the sm breakpoint the headline wraps, balanced, at text-4xl, the pill truncates its second half, and the two calls to action sit side by side or wrap. The Shine Button is on the first screen, and the badge band, two by two, follows it. The sketch is 20rem tall on phones and puts the build log first, cropping at its faded bottom edge, its region chips fade out at the end, and nothing scrolls sideways down to 320 px.