hero-page

name	hero-page
description	Hero section design and implementation. Above-the-fold UX, CTAs, headlines, visual hierarchy for landing pages.

Hero Page Patterns

The first screen a user sees. Make it count.

---

1. Hero Anatomy

┌─────────────────────────────────────────┐
│  Navbar                                 │
├─────────────────────────────────────────┤
│                                         │
│  [Eyebrow label]                        │
│  H1: Main Value Proposition             │
│  Subheadline supporting copy            │
│                                         │
│  [Primary CTA]  [Secondary CTA]         │
│                                         │
│  Social proof (logos / avatars / stars) │
│                                         │
│  Hero visual (image / video / 3D / UI)  │
│                                         │
└─────────────────────────────────────────┘

---

2. Headline Formulas

Formula	Example
Outcome	"Ship features 10× faster"
Problem → Solution	"Stop losing customers. Start retaining them."
Who + What	"The CRM built for remote sales teams"
Superlative	"The fastest way to build internal tools"
Question	"What if your deployment took 30 seconds?"

Copywriting Rules

• Lead with outcome, not feature
• One idea per headline
• Under 10 words is ideal
• Sub-headline expands with HOW

---

3. CTA Hierarchy