Metric Tiles Hero Block for React

Edit METRICS at the top of the file: each tile has a value, a label, a detail, the line that says where or when the figure comes from ("Last 365 days"), and a trend of twelve bar heights in percent, the last one being now. Values are text, so units and suffixes stay as you write them (99.99%, 12ms, 4.2B), in tabular digits. To show live figures, fetch them from your monitoring and pass them in: they render as text, so they're right on the first paint and for screen readers.

They're claims, so they're shown as they are: a count from zero shows wrong values for a moment and makes visitors wait for the real one. The tiles fade in one after another instead, and with reduced motion they're simply there. For a count-up, Counting Number counts to each value as it scrolls into view, while screen readers read the final value.

It shows a status in words with a dot that pulses, from Status Pulse Text: change its text and variant (warning for a degraded service, destructive for an outage) from your status data. The pill is an Announcement with the status role, so when the text changes, screen readers hear it politely; the dot is decoration and the words carry the meaning. It isn't a link, since View status page already goes there.

Deploy to the edge is the one main action, a Shine Button: a band of light sweeps across it once when the pointer arrives or it takes focus. View status page is an outline button. Both are links (href="#"); point them at your sign-up page and your status page. Each button renders the link it's given with render, with nativeButton={false}.

The tiles are a description list: each label comes first, then its figure and its detail, as in "Uptime SLA, 99.99%, Last 365 days", even though the figure shows on top. The bar trend is decoration, hidden from assistive tech. The headline is the page's h1, the pulse stops with reduced motion while the dot stays, and every text keeps WCAG AA contrast in light and dark.

The tiles sit two by two and spread to one row of four from the lg breakpoint; below sm the bar trends are left out so each cell stays short. The headline steps down to text-4xl, the two buttons sit under the text instead of beside it, and each figure keeps its order in a right-to-left layout.