Hero — Centred with email form

A narrow centred hero with an inline email form, a hint and overlapping avatars. Use it to lead with one signup task without a large image.

ReactHTML

1440 × 900

Open in new tab

Component.tsx31 lines

export default function HeroCenteredForm() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the signup invitation</p>
          <h1 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">Headline that introduces the main benefit</h1>
          <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that explains what readers will receive and why they should join.</p>
          <form action="#" method="get" className="mx-auto mt-10 max-w-xl">
            <label htmlFor="hero-centered-form-email" className="sr-only">Email</label>
            <div className="flex flex-col gap-3 sm:flex-row">
              <input id="hero-centered-form-email" name="email" type="email" autoComplete="email" required placeholder="name@example.com" aria-describedby="hero-centered-form-hint" className="h-11 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 min-w-0 sm:flex-1" />
              <button type="submit" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 shrink-0">Join waitlist</button>
            </div>
            <p id="hero-centered-form-hint" className="mt-3 text-sm text-neutral-500">Hint that sets expectations for email updates and privacy.</p>
          </form>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <div className="flex -space-x-2">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-white bg-neutral-200 text-xs font-medium text-neutral-600">AR</span>
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-white bg-neutral-200 text-xs font-medium text-neutral-600">JC</span>
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-white bg-neutral-200 text-xs font-medium text-neutral-600">MP</span>
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-white bg-neutral-200 text-xs font-medium text-neutral-600">SK</span>
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full border border-white bg-neutral-200 text-xs font-medium text-neutral-600">TL</span>
            </div>
            <p className="text-sm text-neutral-500">Join 1,284 people on the waitlist</p>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a waitlist or an early-access opening. Choose cta-email-signup for a shorter signup band later in the page. Variations: remove the avatar group, use a subscriber count, or replace the hint with a privacy link.
Hierarchy: The display headline is 36px, 48px at 640px and 60px at 1024px, semibold with tracking-tight and balanced wrapping. Read eyebrow, h1, 18px lede, email form and social proof. Slots: eyebrow 6 words, title 10, lede 25, hint 15, proof line 10. The Email label is visually hidden and the input is connected to the hint. Avatar initials are decorative; the proof sentence supplies context.
Responsive: Below 640px email and submit stack full width; at 640px they share a row and avatars sit beside the proof text. The proof group wraps centrally if needed. At 640px and 1024px the display headline increases to 48px and 60px.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. The content is max-w-2xl 672px and centered. A max-w-xl 576px form follows the lede by 40px, with a 12px row gap and 12px to its hint. Five 32px avatars overlap by 8px in a flex row, 32px below the form, beside a proof line.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. The 44px email input has a neutral-300 border and rounded-md radius. The native required email field supplies browser validation. No open, selected or disabled states are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                           Eyebrow                            │
│                Headline for the main outcome                 │
│                       Supporting lede                        │
│                                                              │
│            [Email address       ] [Join waitlist]            │
│                       Email form hint                        │
│                                                              │
│               (AR)(JC)(MP)(SK)(TL)  Proof line               │
└──────────────────────────────────────────────────────────────┘

View all

Hero — Announcement rail and wide pitch
Layout tags: sidebar,numbers,spacious
Hero — Bento tiles
Layout tags: bento,media,compact
Hero — Centred search bar
Layout tags: centered,form,row

Hero — Centred with email form

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar