Integration Directory Footer Block for React

Edit the CATEGORIES array at the top of the file: each entry is a title and four names. The tile shows each name's first letter, so there is nothing else to draw; swap it for the integration's own logo if you have one. Point each link (href="#") at its page and update the "All 140 integrations" count and link in the header row.

A footer directory of real logos would need each one's brand artwork and permission. A tile with the name's first letter looks the same for every entry, stays crisp at 24 pixels, and works in light and dark themes. The names are text, so nothing depends on the picture.

The block is a footer element. The links sit in one nav labelled Footer, each group with an h2. The directory has its own h2 ("Integration directory"), each category an h3 over a list of links, so a screen reader can jump between categories by heading. The monogram tiles are hidden from assistive technology.

The brand and the link groups (two across, the third full width) stack, then the four category cells sit two by two with names short enough to stay on one line at 320 pixels, then the legal band. Nothing scrolls sideways.

Cells that share a hairline read as one directory, where separate bordered cards would double every edge. The band's lines come from the same Guides spine as the rest of the page, so the cells run from rail to rail and the legal band's top rule closes them.