Centered Floating Feature Cards Hero Block for React

Each card is a small component at the top of the file (UptimeCard, IncidentCard, OnCallCard, LatencyCard) and a list item in the ul. The list item places it from xl with logical offsets such as xl:start-10 xl:top-24, so a card on the start side moves to the right in right-to-left languages, and its starting: classes are the corner it drifts in from, mirrored with rtl:. Keep each card under 16rem wide: the copy column is 36rem and the cards sit in the margins beside it.

Below xl the list stops floating its cards (xl:contents) and lays them out as a grid under the action: two columns from sm, one on a phone, and on a phone only the uptime and incident cards, so the first screen keeps the headline and the Shine Button. Everything reads at 320px with no horizontal scrolling.

No. They're a decorative list marked aria-hidden, since the subtitle already says what the product does and the cards hold nothing to click. The headline is the page's one h1, the announcement and both calls to action are links named by their text, and the avatar row is hidden too, as the sentence beside it carries the count. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

It's CSS. Tailwind's starting: variant (@starting-style) sets where each card starts: transparent and about 20px out toward its own corner. A transition on opacity and translate brings it to rest when it first renders, staggered after the centered copy has faded up. With reduced motion, motion-reduce:transition-none removes the transitions and everything renders in place. The block has no state and runs no script, and the cards don't move after they arrive.

It's a band inside the column that draws its top rule with Guides (rules="top", marks="top", no sides) rather than a border, so the + marks land exactly on the crossing with the side rails. Edit the MEMBERS array for the avatars (an image src and the initials shown while it loads) and the sentence beside them. Only show photos of people who agreed to it, and keep the count true.

Use floating cards when the headline should stay the clear focus and the product can be sampled in a few small, believable widgets that show it at work. Use a feature grid or bento hero when each feature needs a sentence of its own and visitors should be able to scan and compare them.