Centered Email Capture Form Hero Block for React

The submit handler checks the address, then sets the block to sending and, after a timer that stands in for the request, to done. Replace the timer with the call to your service's API, or your own endpoint, and set done when it answers. If it fails, set the phase back to idle and put the service's message in the error, and it shows under the field like a validation message.

The form has noValidate, so the browser's own bubbles stay out and the block checks the address itself, with a pattern that wants something, an @ and a domain with a dot. An empty field says Enter your email address, and a malformed one asks for a valid address with an example. The message clears as soon as you type, and the field is marked invalid until then.

The field has a label, Email address, that's read but not shown, and its error is tied to it, so the field reads as invalid with the message. A failed submit moves focus to the field. While sending, the button keeps its name, shows a spinner and can't be pressed twice, and a polite live region says Subscribing. When it's done, focus moves to the confirmation, which is read out, so focus never falls back to the top of the page. The avatars are decoration and hidden; the count beside them is real text.

Fetch the count from your email service where the page is built, cache it, and render it in place of 12,437, with your locale's number format. The five avatars are initials of recent subscribers: swap in their photos with AvatarImage, keeping AvatarFallback for anyone without one.

Below the sm breakpoint the Subscribe button goes under the field, at full width, and the proof row stacks: the avatars and the count, then the free-forever line. The headline drops its forced line break and wraps balanced at text-4xl. An error pushes only the content below it down, never the button sideways.

Use this centered hero when the email list is the page's one goal and the form should hold all the attention. Use a split signup hero when you also have a product image or screenshot to show beside the form.