Link Columns Footer Block for React

Edit the three arrays at the top of the file: GROUPS (each a title and its links), SOCIAL (an icon, a label and an href) and LEGAL. Every link is a plain anchor with href="#": point each at its page, or swap the anchor for your router's link. Four groups of five fit the grid; three or five groups work too, with the column count changed to match.

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, so a screen reader can jump between groups by heading and hears how many links each one holds. The social links and the policy links are lists named Follow Pintail and Legal. Every link shows the theme's focus ring when reached by keyboard.

The icon set the blocks use has no brand logos, and a row of unlabelled glyphs leaves people guessing where each one goes. Each link shows a neutral glyph and the network's name, which is also its accessible name. To use the networks' own marks, replace the icon in SOCIAL with your brand icons and keep the label.

The footer uses the same spine as every block: the page column, the two side rails and one top rule with + marks where it meets them. Placed under any other block, that rule is the only line between the two. The footer keeps its own bottom padding and draws no rule under the legal row, because it is the end of the page.

The brand column comes first, then a rule, then the four groups two by two, then the legal row with the copyright above the policy links. From md the groups sit in one row of four, and from lg the brand column moves beside them behind the divider, with the copyright and the policy links side by side under them. 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.