| 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)
- Eyebrow / badge (optional) — "v1.0 live", "Now in beta", "Backed by Y Combinator"
- Headline (H1) — one sentence, value-prop forward
- Subhead — one paragraph explaining the value-prop and unique angle
- Primary CTA + secondary CTA — one solid + one ghost
- 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.
