Split Headline Grid Logos Block for React Aria

Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering (the name's type) and a mark (where the icon sits: before the name, after it, above it, in a ring or knocked out of a square). Keep six: the grid is full at three across by two down and at two across by three down, so no cell is left empty and no gap shows the border colour. The names are fictional placeholders for your own customers.

The page column is the grid and carries no padding of its own: each side pads itself, so the divider starts at the top rule instead of below an empty band. A + mark sits where they cross. Below lg the divider is replaced by a rule with + marks between the copy and the grid.

Both are links (href="#"): point Read the case studies at your stories and See pricing at your pricing page. The first is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus. Each button renders a link when it has an href.

The layout mirrors: the copy stays at the start of the line and the grid at the end, and the divider follows. Each wordmark keeps its own direction, as a logo would.

The copy comes first at a smaller size, with the two buttons wrapping onto separate rows when they don't fit side by side. Then a rule with + marks and the six customers two across, each cell at least 96 pixels tall. Nothing scrolls sideways at 320 pixels.

The copy and the grid fade up once when the page loads, with CSS transitions, and a wordmark's colour eases on hover. With reduced motion every transition is off and the section simply appears.