Bento Mixed Widgets Hero Block for React

Everything is data at the top of the file. PAYMENTS_TODAY is the stat, in thousands, written with one decimal (24.8K). MERCHANTS holds each avatar's initials, VOLUME the sparkline's eight points, and TESTIMONIAL the quote, its author and their role. Each widget is a plain relative box with its own Guides, so a different mix (two stats, a chart and a quote) is a matter of swapping one widget's contents.

Pass your number to CountingNumber instead of PAYMENTS_TODAY: it renders the value for screen readers at once and counts up to it on load, and a new value counts on from the one showing. The sparkline draws VOLUME in a 100 by 40 box where 0 is the top, so scale your series into that range before you build the paths. Update the change figures and the hidden "in the last 7 days" text with them.

The headline is the page's one h1, and the pill and both calls to action are links. The stat is a description list, Payments today: 24.8 thousand, +12.4% this week, and the counting number gives screen readers its final value, never the numbers on the way. The avatars are decoration, hidden, and the sentence under them carries the claim. The sparkline is hidden too, and its change is said in words: +38% in the last 7 days. The quote is a figure with a blockquote and a caption naming its author.

The two sides stack below lg: the pitch first, with both actions on the first screen, then the widgets under a rule that runs the width of the page column. The widgets keep a two-column grid, the stat and the avatars side by side and the sparkline and the quote across both, so nothing scrolls sideways down to 320 px.

With Guides, the same component that draws the page rails. Each widget has extend="sm", so its lines run a little past its corners, and a + on its start corner; the widgets sit 1.5rem apart so the overshoots never touch. The divider is the widgets' side with lg:border-s, and a Guides with only a start mark puts the + where it meets the top rule.

Use mixed widgets when you have several real proof points (a headline metric, social proof, growth and a customer quote) that each deserve a cell next to the pitch. Use the bento grid hero when the product is visual first and every tile should show a view of it.