Call To Action Cell Footer Block for React

Edit the title and the line in the card, the label of the Shine Button and its href. The button is the only primary control in the footer: keep any second action out of the card, or make it a link in a link group. The card's drawing is three entries in the FLOW array at the top of the file (an icon, an id and a tone): swap the icons for your own steps, and keep the first one filled.

A closing call-to-action section is its own block above the footer, with a large centred headline. Here the offer is part of the footer's grid: it sits in a column beside the links, has a card-sized title and no band of its own, and the page still ends on links and a legal row. Use it when the page has no closing section, or when you want a quieter second ask.

The block is a footer, so it is the page's content-info landmark. The three link groups are in a nav labelled Footer, each with an h2 over a list; the card has its own h2. The drawing is hidden from assistive technology because it only decorates the title, and the policy links form a list named Legal.

It is a real link styled as the Shine Button. The button renders an anchor through render, with nativeButton off. Point href at your sign-up page.

The brand and the groups come first (the groups two by two, then the third on its own), so the navigation is on the first screen; a rule separates them from the card, and a second rule from the legal row. The card keeps its full width and the button stays on one line 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.