| name | hero-section-anatomy |
| description | Use when designing the opening hero of a marketing page. The hero communicates brand + value + action in the first scroll.
|
Hero Section Anatomy
Hero anatomy: brand position, headline (8-15 words), supporting body (1-2 sentences), primary CTA, optional visual. Restraint over kitchen-sink.
Hero structure
From top to bottom:
- Brand mark / logo (top-left or top-center)
- Eyebrow text or page sigil ('01 / 06')
- Headline (h1, 8-15 words, brand voice)
- Supporting subhead (1-2 sentences, brand promise)
- Primary CTA (single, dominant action)
- Secondary CTA (optional, text-only)
- Hero visual (right or below — image, illustration, demo loop)
Hero headline writing
Strong headline patterns:
- 'Verb the noun' ('Grade your card before submitting')
- 'Problem statement → solution' ('AI grades your cards in 30 seconds')
- 'What we do + why it matters' ('CardPrepAI: pre-grade your collection without leaving home')
- 'Single bold claim' ('The most accurate AI card grader')
Hero CTAs
Primary: 1-3 words, action-first ('Begin', 'Get started', 'See pricing')
Secondary: optional, text-only with arrow ('Learn more →', 'View pricing')
NEVER 3 equal-weight CTAs. Hierarchy matters.
Where this fits in the X3 empire
Hero design rule for every CardPrepAI marketing page.
