Category Grid Tab-Filtered Logos Block for React

Edit CUSTOMERS at the top of the file: each entry is a group (growers, coops or advisers), an icon (any Lucide icon), a name and a style, the index of one of the logo styles in STYLES. A tab shows the customers of its group, and the All tab shows ALL, a hand-picked spread. Keep every group at eight, so each tab fills the wall and no cell is empty, and add a tab by adding an entry to TABS and a group of eight.

The pills are a real tab list named "Customer type": the arrow keys move between tabs (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each panel is a list named "Customers" whose items read as the company names; the icons are hidden from assistive technology. Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.

Every tab's wall is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves. Panels that aren't open are not in the page's accessibility tree twice.

Replace the icon and name in Wordmark with the company's logo, at about the same height for all of them (h-6 to h-8). An inline svg drawn in currentColor, with role="img" and an aria-label, keeps the muted colour and the hover. The names here are fictional placeholders.

The pills sit in a row you scroll sideways, so four tabs fit at 320 pixels, and the wall becomes two columns of four rows; the cells keep their hairlines and nothing scrolls the page sideways.

The header, the tabs and the wall fade up once when the page loads, and each logo's colour eases on hover. Switching tabs swaps the wall at once, with no animation. With reduced motion the entrance and the hover transitions are off.