Raised Panel Dark Footer Block for React

The slug keeps its old name so existing links keep working. The block never forces a dark scope: in a light theme the card is a lighter surface on a slightly deeper shell, and in a dark theme both are dark. The lift comes from the card's ring and shadow and the shell's tint, so it holds in every preset.

Edit the arrays at the top of the file: GROUPS (each a title and its links) and LEGAL. Every link is a plain anchor with href="#": point each at its page, or swap the anchor for your router's link.

The block is a footer element: placed at the end of the page, outside main, it is the page's content-info landmark. The link groups sit in a nav labelled Footer, each group a small h2 over a list, and the policy links are a list named Legal. Every link shows the theme's focus ring when reached by keyboard.

The brand line stacks (the wordmark, then the sentence), the card holds the groups two by two, and the legal row stacks with the copyright above the policy links. 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.