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.
Critical because visitors who cannot understand the offer within 5 seconds leave before seeing any other content — an unclear value proposition above the fold disqualifies the hero from doing its one job.
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.
ID: marketing-content-quality.value-proposition.value-prop-above-fold
Severity: critical
What to look for: Count all relevant instances and enumerate each. Examine the home page hero section component. Look for a headline and supporting text that communicates what the product does and who it is for. The value proposition should be visible without scrolling on a typical desktop viewport (above the fold). Check for a headline element (<h1> or prominent heading), a sub-headline or descriptor, and optionally a brief explanation.
Pass criteria: The home page hero contains a clear statement of what the product does (not just a product name) and implies or states who it is for. The statement is positioned above the fold. A partial or placeholder implementation does not count as pass.
Fail criteria: The hero section contains only a product name or tagline with no explanation of what the product does, or the primary explanatory text is below the fold requiring the user to scroll before understanding the offering, or the hero section is entirely a placeholder.
Skip (N/A) when: The project has no home page or landing page (API-only project). Signal: no app/page.tsx, no pages/index.*, no index route detected.
Detail on fail: Describe what is present versus what is missing. Example: "Hero headline is only the product name 'Acme' with no descriptor. No sub-headline or supporting copy explains what Acme does." or "Hero section is placeholder text: 'Your headline here' and 'Your subheading here'"
Remediation: Visitors decide within seconds whether your site is relevant to them. If the hero only shows your product name, they have no way to make that decision.
Write a headline that completes one of these patterns:
Then add a one-sentence sub-headline that clarifies who this is for and what they get. Keep the combination to under 20 words total.
If you are unsure what your value proposition is, ask yourself: "What does my product do, for whom, and what result do they get?" That answer is your hero copy.
Review the configuration in src/ or app/ directory for implementation patterns.
Cross-reference: For optimizing conversion from your value proposition, the Marketing Site Conversion Optimization Audit covers CTAs, landing page flow, and persuasion structure in depth.