Waitlist Signup Hero Block for React

The request is simulated in submit: once the address passes the check, state goes to "loading" and a timer (LATENCY, 1.2 seconds) sets it to "done". Replace the timer with a request to your endpoint or your email provider's API, keep "loading" while it runs and set "done" when it succeeds. If it fails, set state back to "idle" and put the message in error: it shows under the field like a validation error. The timer is cleared if the hero unmounts first; cancel a real request there too.

The form and the confirmation sit in the same grid cell, both always rendered. The one not shown is invisible (hidden from view, from the keyboard and from screen readers alike) and faded out, so the card is always as tall as the taller of the two and the band below never jumps. The swap is a short fade and scale, which reduced motion turns into an instant change.

The field has a visually hidden label, "Work email", and autoComplete="email", so browsers offer the visitor's address. A missing or malformed address shows its message under the field, marks the input invalid and returns focus to it. While the request runs, the button keeps its name and is disabled, and the field turns read-only. When it succeeds, focus moves to the confirmation's heading, "You're on the list", so it's read aloud and the keyboard carries on from there instead of from the top of the page. The page's h1 is the headline; the card's heading is an h2. The label's htmlFor, the input's id and its aria-describedby link them, from one useId.

The count is text in the sentence beside the avatars, so render it from your data where the page is built. Format it with a fixed locale, such as Intl.NumberFormat("en-US"), so the server and the browser print the same digits, or round it ("3,200+"), which reads as well and doesn't need updating after every signup. The avatars are decorative: they're hidden from screen readers and their images have an empty alt, since the sentence carries the meaning.

Below the lg breakpoint the copy comes first and the card under it, full width, and the card drops its one-line description so the field and the button stay on the first screen. The three feature cells stack below the md breakpoint, divided by hairlines, and sit in a row above it. An error message wraps under the field, and the confirmation fits in the room the form leaves.

Use a waitlist before the product is open: the count and the features coming at launch give visitors a reason to leave their address now. Once people can sign up and use the product straight away, switch to a sign-up hero that asks for an account, or a newsletter form for ongoing updates.