Three Row Footer Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your mailing-list provider: email holds the address.

The form has noValidate. On submit, problemWith checks that something was typed and that it has an @ and a domain; the message replaces the helper line under the field, the field gets aria-invalid, and focus stays on it. Typing clears the message.

Below md the four groups become an accordion, one open at a time, the first open to start; from md they are plain columns. Both are the same links in a nav labelled Footer, and only one is shown at a time, so a screen reader meets one landmark. The panels use the browser's hidden-until-found, so the links stay findable with the browser's own page search.

Each icon is a link with a screen-reader-only name and a tooltip that shows the same name on hover and keyboard focus. The glyphs are generic, not brand logos: swap the icon and the href in SOCIAL.

The form fades out and a status region takes its place at the same height: a check, "You are subscribed", the address and a "Use another address" button. The region takes focus when it appears, and the button brings back an empty form with focus in the field.

The brand comes first, then the accordion, then the newsletter with its field and button on one row, then the legal band with the copyright, the policy links and the icons. Nothing scrolls sideways at 320 pixels.