Sibling Products Footer Block for React

Edit the APPS array at the top of the file: each entry is a name, a one-line description and a glyph, a stroked path in a 24 by 24 box drawn in the tile. Point each tile's link (href="#") at the app's page. Three apps plus the title cell fill four columns from lg; with a different count change lg:grid-cols-4 to match.

Yes. Each tile is one anchor holding the mark, the name and the line, so the whole cell is the target and a screen reader reads the app's name and line as the link's text. The tile tints on hover and shows the theme's focus ring inside its edge when reached by keyboard.

The block is a footer element. The links sit in one nav labelled Footer (with a hidden h2). The shelf has an h2 ("Also from Stanmore") and each app is a link containing an h3 with its name. The mark and the arrow are hidden from assistive technology.

No. They are three small generic drawings, tally strokes, a page and broadcast arcs, in the foreground tone on a muted tile. Replace the glyph paths with your own, or put an image in the tile.

The brand and the link row stack, wrapping onto a second line if needed, then the four cells stack one above another, then the legal band. Nothing scrolls sideways at 320 pixels.