Icon Tile Grid Footer Block for React

Edit TILES at the top of the file: each tile is an href, an icon (any Lucide icon), a label and a note, the one line under the name. Six fill the three-by-two grid; with a different count the last row of the grid will be short, so keep to a multiple of two on phones and of three from md. Every tile is an anchor with href="#".

The hairlines are the grid's gaps showing its border colour, so a translucent tint on a tile would let that colour through and darken the tile's edge. The tint is a solid mix of your muted colour and the page background, so it follows every theme. The tiles aren't positioned, so the rails and rules stay on top.

The block is a footer element, the page's content-info landmark when placed outside main. The tiles are a list in a nav labelled Footer, with a visually hidden h2 naming it. Each tile is one link whose name is its label followed by its line, and the icon and the arrow are hidden from assistive technology. The policy links are a list named Legal.

Every tile is over 100 pixels tall, a large touch target, and the arrow is only an extra: on a touch screen it never shows, and a keyboard user sees it with the focus ring when the tile has focus.

Below lg the brand cell spans the page, then the tiles sit two across (three across from md), and the legal band's copyright sits above the policy links. Tile text wraps rather than truncates. Nothing scrolls sideways at 320 pixels.