Waitlist Capture Hero
A waitlist hero that actually captures: validation, pending, success and queue position.
DOM + CSS1 dep1 file · 2 KB TSX
Props
"use client";
// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { ArrowRight } from "lucide-react";
function WaitlistForm({ ctaLabel, accent }: { ctaLabel: string; accent: string }) {
return (
<form
onSubmit={(e) => e.preventDefault()}
className="flex w-full max-w-lg items-center gap-2 rounded-full border border-slate-200 bg-white p-2 shadow-sm"
>
<input
type="email"
maxLength={254}
required
placeholder="you@company.com"
className="min-w-0 flex-1 rounded-full bg-transparent px-5 py-3 text-base text-slate-900 placeholder:text-slate-400 focus:outline-none"
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this heroe
Most heroes treat the CTA as a small button at the end of a sentence; this one inverts that ratio and makes the form the largest single object in the section, sized and weighted the way a product screenshot usually would be. It fits a pre-launch or early-access page where joining the list IS the entire ask, and it stops making sense the moment a product is generally available — a giant email-capture pill on a live product's homepage reads as a bug, not a choice, because the real CTA at that point is "use it," not "wait for it." The proof-count line beneath the form is deliberately small and optional (toggle via `showCount`): it's a secondary reassurance, not a second hero, and letting it grow to logo-wall size would undercut the single-object idea the whole layout is built on. Caveat: the form calls `preventDefault` and does nothing else — it is a UI shell, not a working submission; wire up real handling before shipping.
