Centered Radial Gradient Stats Hero Block for React

The glow is one radial-gradient on an aria-hidden layer at the top of the section, so it runs the full width of the page. It mixes var(--foreground) into transparent with color-mix(in oklab, …) at 11%, which reads as a soft shade in a light theme and a soft light in a dark one. Raise or lower the percentage to change the strength, and change ellipse 55% 80% at 50% 0% to change its size and where it is anchored. The glow is monochrome on purpose: the theme's primary color is kept for the one main action. Use the tokens as they are: the theme's colors are oklch values, so hsl(var(--foreground)) would be an invalid color and draw nothing.

Edit the STATS array: each entry is a value, shown as written (38, 99.99%, 11 s) in tabular figures, and a label under it. The band is a description list in three equal columns with divide-x, so the dividers follow the layout in right-to-left languages, while each value stays left to right (dir="ltr"). Its top rule and the two + marks come from a Guides layer, not a border, so they land exactly on the crossing with the rails. The figures in the demo are samples: swap in numbers you can stand behind. On a phone the three columns stay in a row, with the labels wrapping onto two lines.

Edit the MEMBERS array: each avatar is an image src and the initials its AvatarFallback shows while the image loads, or if it fails. AvatarGroup overlaps them and rings each one in the page's background color so they stay apart. Only show photos of people who agreed to it. The row is hidden from screen readers, since the sentence beside it carries the claim, so update the number in that sentence too.

Yes. The headline is the page's one h1. The glow is decorative and hidden from assistive technology, and it's light enough that the copy and the stat labels keep at least 4.5:1 contrast in every theme. The announcement and both calls to action are links, each named by its text, and the stats are a description list, so each figure is read with its label. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

It's CSS. Each part starts transparent and 12px low through Tailwind's starting: variant (@starting-style), and a transition brings it to rest when it first renders: the announcement, then the headline, the sentence, the buttons, the avatar row and the stats band, each a little later. The Shine Button's light only moves on hover, focus or press, and with reduced motion it fades in where it stands. With reduced motion, motion-reduce:transition-none removes the entrance and everything renders at rest. The block has no state and runs no script.

Use the gradient when you want a quiet lift of light behind the headline, with proof underneath, and no artwork. Use a line grid hero when you want a technical texture, and a split hero when you have a product screenshot to show beside the copy.