Two Column About Block for React

Edit METRICS at the top of the file: each has a label, a detail, a value (a number, rolled by Sliding Number) and an optional suffix such as "%" or " min". The rows divide the column's height evenly on wide screens, so six rows fill a column of about that height; with fewer or more, change lg:grid-rows-6 to match.

Sliding Number shows zeros until it scrolls into view, then rolls each digit to its place once. It writes the final value as visually hidden text next to the rolling digits, so a screen reader hears "18,400" and never the zeros or the digits in between. A number with a suffix is wrapped in a bdi element, so a unit stays attached to it in a right-to-left layout.

It is one description list: each label is a term with two descriptions, the number and the detail, so it reads "Ports served, 140, across 38 countries". The heading is the section's h2 and the prose are plain paragraphs. The rules between the rows are drawn by a decorative layer hidden from assistive technology.

The heading steps down to text-3xl, the prose follows, and under a rule the six figures stack, label and detail at the start and the number at the end of each row. Nothing scrolls sideways at 320 pixels.

The heading and prose fade up once on load, and the numbers roll up once on view. With reduced motion everything appears at once and the digits show their final value.