Value proposition is clear within 5 seconds

Visitors form a first impression in under 5 seconds, and the hero section is the only content most of them will read before deciding whether to stay or leave. If the hero shows only a product name or an abstract tagline — no description of what the product does or who it helps — the visitor has no way to self-qualify. They cannot determine relevance, so they leave. This is the single highest-leverage piece of marketing content on the site: everything downstream depends on the visitor understanding the offer. An unclear hero turns every other marketing investment (ads, SEO, referrals) into wasted spend.

Write a headline that names what the product does, and a sub-headline that names who it is for and what outcome they get. Keep headline + sub-headline under 20 words combined. The test: can a stranger read the hero and answer "what is this, is it for me, and what do I get?" in one reading?

Reliable patterns:

"[Product] is the [category] for [audience] that [outcome]"
→ "Zipper is the billing tool for solo founders that closes invoices in one click"

"[Verb] your [problem] with [product]"
→ "Stop losing leads with Pipetrack"

"The [adjective] way to [outcome]"
→ "The fastest way to deploy your API without touching a server"

In a Next.js App Router project, the hero lives in app/page.tsx or a HeroSection component imported from components/. If route groups are in use ((marketing)/page.tsx), confirm a plain app/page.tsx does not shadow it. Edit the rendered text directly — do not add invisible metadata; the copy must appear in the visible DOM above the fold.