hero-section-anatomy

name	hero-section-anatomy
description	Use when designing a marketing hero section. Covers the canonical structure (badge, headline, sub, CTAs, trust strip), modern hero patterns, hero copywriting, hero imagery decisions, and the difference between converting heros and pretty ones.

Hero Section Anatomy

The hero is the most important section. It does 80% of the conversion work.

Canonical structure (top to bottom)

1. Eyebrow / badge (optional) — "v1.0 live", "Now in beta", "Backed by Y Combinator"
2. Headline (H1) — one sentence, value-prop forward
3. Subhead — one paragraph explaining the value-prop and unique angle
4. Primary CTA + secondary CTA — one solid + one ghost
5. Trust strip — 4–6 inline trust signals (✓ no card, ✓ money-back, ✓ self-serve cancel)

Below that, optional: product screenshot, hero video, customer-logo bar.

Headline patterns that work

Pattern	Example
Strikethrough anchor	"Stop paying $130K. Hire the AI Safety Director for $79."
Outcome-led	"Cut your CSA score 30% in 12 months."
Pain-led	"Compliance shouldn't take your evenings."
Comparison	"What you'd hire from JJ Keller, but $79/month and 10x smarter."

Avoid: "AI-powered platform for X" (generic). "Revolutionary compliance solution" (puffery).

Subhead rules

• One sentence, max two
• Names what the product IS (not what it does)
• Names who it's for
• Avoids buzzwords

Hero CTAs

• Primary CTA = solid, gradient or filled accent
• Secondary CTA = ghost / outline
• Same row, primary on left
• Both should be < 4 words

Trust strip patterns

Inline checks with single short claims. Best at 4-6 items in a single row: "✓ No card required · ✓ 30-day money-back · ✓ Self-serve cancel · ✓ Apache 2.0 corpus"

Hero imagery decisions

Approach	When to use
No image (text + CTA only)	When the brand is the product (AIPU, Notion early)
Product screenshot	When the UI is impressive at a glance
Abstract illustration	When the product is hard to show (AI/compliance/infra)
Hero video (no sound autoplay)	When motion tells the story (drag-and-drop, swipe)
Customer-logo bar	When you have 5+ recognizable customer brands

Common mistakes

• Headline + 4-sentence subhead → user gives up
• Three CTAs in hero → splits attention, halves conversion
• Hero video auto-playing sound → close-tab event
• Trust strip below the fold → wasted
• "Get started" CTA without context → user doesn't know what's next

Where this fits in X3 Compass

X3 Compass hero uses strikethrough $130K → $79, gradient headline, one-paragraph subhead, primary + secondary CTAs, 6-item trust grid below.