Centered Inline Email Signup Hero Block for React

submit checks the field with the browser's own validation (checkValidity), sets state to loading and starts a timer that stands in for the request: after 1.5 seconds it sets state to done. Replace the timer with a call to your own endpoint, set done when it succeeds, and on a failure set state back to idle and error to a message. The timer is cleared if the hero goes away first, so a late answer never updates a block that's gone.

The form has noValidate, so the browser's own bubble never shows. submit asks the form whether it's valid, and an empty field or an address without an @ and a domain shows your message under the field, marks the field invalid and sends focus back to it. Typing clears the message. This only catches typos: your provider confirms the address is real.

The field is named Work email (the label is visually hidden, the placeholder is only an example), and its error message is read with it. While the request runs, the button keeps its name and reports itself busy. When the confirmation replaces the form, its heading takes focus, so the reader says "You're on the list" instead of dropping the visitor at the top of the page. The avatars are hidden from assistive technology; the sentence beside them carries the claim.

The box is a tinted div with a Guides layer on it: four solid hairlines that overshoot the corners by 0.5rem (extend="sm") and a + mark on each corner (marks="corners"). The lines are the same hairlines as the page's rails, so the block matches the others in a stack. Remove the Guides for a plain tinted box, or change extend to md for longer crop marks.

Below the sm breakpoint the field and the button stack, each the width of the frame, and the headline wraps, balanced, at text-4xl. The avatars and the trust points wrap and stay centered. The button is on the first screen with room to spare.

Use an inline signup when one field is enough to get started: the shorter the ask, the more people finish it. Use a multi-step wizard when you need several fields that fall into groups, or a plan choice, before the visitor is in.