SaaS Link Cells Footer Block for React

Edit GROUPS at the top of the file: each group is a title and its links, and a link is an href and a label, with an optional note (the description) and badge (its text). Any link can carry them, not only the first; keep to one or two per cell so the plain links still read as a list. Every link is an anchor with href="#", so point each at its page or swap the anchor for your router's link.

Yes. They are the outline Badge: a hairline and your theme's text colour on the page background, so the contrast holds in light and dark and in any preset. Nothing is a fixed colour, and the badge never uses the primary colour, which stays free for your buttons.

The block is a footer element, the page's content-info landmark when placed outside main. The three cells sit in a nav labelled Footer, each with a small h2 over its list, so a screen reader can jump between groups by heading. A link with a description reads as one link: its label, its badge and its description are announced together. The policy links are a list named Legal.

It is the Guides component's overshoot: each cell draws its own four hairlines, extended a little beyond the corners with a + on the top-start one, so the three cells read as separate sheets on one drawing. The cells sit eight units apart so neighbouring lines never touch, and the group is inset from the page rails for the same reason.

Below md the three cells stack, one per row, each at the full width with its lines inside the page rails, and the legal band's copyright sits above the policy links. The descriptions wrap rather than truncate. From md the cells sit three across. Nothing scrolls sideways at 320 pixels.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server's when the page was built or rendered.