Split Stat Overlay Hero Block for React

Edit STATS at the top of the file. Each card has a label, a value as you want it shown ($48.2K), a change and a direction, up or down, which picks the trend arrow. place holds the card's position classes and the side it slides in from, with a delay-* for the stagger, so you can move a card or swap two by editing that string. The dashboard's own rows live in ACCOUNTS and its chart in SERIES.

The block keeps colour for its one action, so the badges are outline badges and the arrow says which way each figure went: revenue and users up, churn down. If a figure moves the wrong way, say so in the badge's text. The card's content is only read visually: put the figures in the copy as well if they matter to your pitch.

Yes. Load the figures on the server and pass them in place of STATS: the cards only read value, change and direction. To roll a figure to its new value when it updates, put our Sliding Number in place of the value text, and render the real value first so the card never counts up from zero.

It reads the announcement link, the h1, the paragraph, the three checklist items and the two links. The dashboard and its floating cards are an illustration of the product, so the whole visual is hidden from screen readers and out of the tab order with aria-hidden and inert. Say the figures in the copy too if they carry your pitch.

The copy fades and rises in, the dashboard fades and settles in just after it, then the three cards slide in one by one: Revenue from above, Users from the start side, Churn from below. It's all CSS transitions on first paint, with no animation library, and the Users card comes from the opposite side in a right-to-left page. With reduced motion on, everything appears in place.

The two columns stack below the lg breakpoint, with the dashboard under the copy and a rule between them. The cards hang over the frame's edges by a few pixels, which the padding around it absorbs, so they're never clipped, and below sm the third account row is dropped so the chart keeps its height. Nothing scrolls sideways down to 320 px, and the Shine Button ends within the first screen.