Signup Hero
A split hero pairing a headline, lede, and check marked benefits with an inline signup card of labeled fields, Google sign in, and a terms line.
A split hero pairing a headline, lede, and check marked benefits with an inline signup card of labeled fields, Google sign in, and a terms line.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Signup Hero puts the form where the promise is. The left column carries the
headline, a one line lede, three check marked benefit lines, and a small
overlapping avatar row for social proof. The right column is an inline signup
card on the collection's bg-card panel: labeled work email and company name
fields, a full width primary button, a hairline divider, a Google sign in
button with a drawn G mark, and a short terms line. The section fills the
viewport with min-h-screen so both columns centre in the fold.
The form is static markup with visible labels rather than input placeholders,
so it stays a server component and wires straight into whatever action or
handler your app uses. The benefits live in a small string array, the avatar
row draws from the shared avatar art in components/ui/avatars, and the G mark
is a stroke based inline SVG, so nothing here depends on an external image.
Reach for this hero when the product is self serve and the fastest path to value is an account, not a demo. It suits free tier developer tools, workflow automation, and team utilities where a visitor arriving from a comparison post or an ad is ready to try the product immediately, and every extra click before the form costs signups. The benefit lines do the reassurance work a longer page would normally handle, so keep them concrete: plan limits, setup time, and compliance.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a free trial signup for a SaaS product. A few other ways to use the frame:
Tip: keep the card to two fields. Every field you add here measurably cuts conversions; anything else you need can be asked for inside the product after signup.