About this block

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.

When to use

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

• Nothing; it leads the page. Like the other heroes in the collection it ships standalone, so pair it with a navbar above

After

• A logo cloud to widen the trust signal the avatar row started
• A feature section for visitors who want detail before they commit an email

What you can display

The obvious fit is a free trial signup for a SaaS product. A few other ways to use the frame:

• A waitlist. Swap the submit label for "Join the waitlist", drop the company field, and let the avatar row show who is already in line.
• A beta program. Gate an early access build behind the form and use the benefit lines to set expectations about stability and feedback.
• An event registration. Collect a name and work email for a webinar or launch event, with the benefits listing date, length, and replay access.

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.