| name | hero-section-designer |
| description | Design high-converting hero sections that combine compelling visuals, Dan Kennedy copy, and clear CTAs. This skill should be used when building above-fold sections for landing pages, optimizing hero areas, or creating impactful first impressions. The hero section is where 80% of conversion decisions start. |
Hero Section Designer
This skill provides frameworks for creating above-fold hero sections that combine imagery, copy, and CTAs into high-converting first impressions.
When to Use
- Building landing page hero sections
- Optimizing above-fold content
- Redesigning page headers for better conversion
- Creating impactful first impressions
- Combining visuals with Dan Kennedy copy
Why Hero Sections Matter
- 80% of visitors never scroll past the fold
- Hero section has ~3 seconds to capture attention
- First impression determines bounce vs engage
- Must answer: "What is this? Is it for me? What do I do?"
Hero Section Anatomy
Essential Components
┌────────────────────────────────────────────────────┐
│ [Logo/Nav - minimal, non-distracting] │
├────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────┐ ┌────────────────────┐ │
│ │ │ │ │ │
│ │ HEADLINE │ │ HERO IMAGE │ │
│ │ Subheadline │ │ or Video │ │
│ │ │ │ │ │
│ │ [CTA BUTTON] │ │ │ │
│ │ │ │ │ │
│ │ Trust Element │ │ │ │
│ │ │ │ │ │
│ └──────────────────────┘ └────────────────────┘ │
│ │
└────────────────────────────────────────────────────┘
Component Hierarchy
| Priority | Element | Purpose |
|---|
| 1 | Headline | Capture attention, communicate value |
| 2 | CTA Button | Clear action to take |
| 3 | Subheadline | Support/clarify headline |
| 4 | Hero Visual | Reinforce message, create emotion |
| 5 | Trust Element | Reduce hesitation |
Hero Layout Patterns
Pattern 1: Split Hero (50/50)
Best for: Lead generation, SaaS, professional services
┌─────────────────────────────────────────┐
│ [Text Left] │ [Image Right] │
│ │ │
│ Headline │ Product shot, │
│ Subheadline │ illustration, │
│ CTA Button │ or dashboard │
│ Trust badges │ │
└─────────────────────────────────────────┘
Pattern 2: Centered Hero
Best for: Single product focus, strong visual identity
┌─────────────────────────────────────────┐
│ [Background Image/Video] │
│ │
│ Centered Headline │
│ Centered Subheadline │
│ [CTA BUTTON] │
│ Trust element │
└─────────────────────────────────────────┘
Pattern 3: Product Showcase
Best for: SaaS, software products
┌─────────────────────────────────────────┐
│ Headline centered │
│ Subheadline │
│ [CTA] [Secondary] │
│ │
│ ┌───────────────────────────────────┐ │
│ │ Large Product Screenshot │ │
│ │ with Browser Frame │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘
Headline Framework (Dan Kennedy)
Headline Formulas for Heroes
-
Benefit + Specificity
- "Generate 47 Qualified Leads in 30 Days"
-
Question + Pain Point
- "Tired of Leads That Never Convert?"
-
How To + Desired Outcome
- "How to Fill Your Pipeline Without Cold Calling"
-
Secret/Hidden + Benefit
- "The Lead Generation Secret Top Agencies Don't Share"
-
Proof + Promise
- "Join 5,000+ Agencies Getting Consistent Leads"
Subheadline Support
The subheadline should:
- Clarify the headline
- Add the "how" or "why"
- Address secondary objection
- Keep it to 1-2 sentences max
Formula: "[How it works] so you can [benefit] without [pain point]"
CTA Button Guidelines
Button Copy Hierarchy
| Strength | Example | Use When |
|---|
| Highest | "Get My Free Strategy" | Lead gen, free offer |
| High | "Start Free Trial" | SaaS, no commitment |
| Medium | "Learn More" | Complex product |
| Low | "Submit" | Never use this |
CTA Design Rules
- Size: Large enough to be unmissable (48px+ height)
- Color: High contrast from background
- Position: Below headline, above fold
- Spacing: Generous whitespace around button
- Text: Action verb + benefit (6 words max)
Supporting Microcopy
Add reassurance below button:
- "No credit card required"
- "Free 14-day trial"
- "Takes 30 seconds"
- "Join 5,000+ companies"
Hero Image Guidelines
Image Selection Criteria
| Do | Don't |
|---|
| Product in use | Generic stock photos |
| Real results/dashboards | Handshake images |
| Relevant to offer | Unrelated decorative |
| Professional quality | Low resolution |
| Supports the message | Distracts from CTA |
Quick Image Prompts (fal.ai)
Product Dashboard:
Modern laptop displaying professional dashboard with growth charts, clean desk, soft lighting, blue (#2563eb) accents, product photography style
Abstract Success:
Abstract visualization of growth, upward flowing geometric shapes, gradient navy to bright blue, dark background, modern 3D render
Mobile Hero Optimization
Mobile-Specific Rules
- Headline: Max 8 words
- CTA: Full-width button, 48px+ height
- Image: Below text or background
- Trust: Single element, not multiple badges
- Spacing: Generous padding, no cramping
Mobile Layout
┌──────────────────┐
│ Headline │
│ (shorter) │
│ Subheadline │
│ [FULL CTA BTN] │
│ Single trust │
│ ┌────────────┐ │
│ │ Image │ │
│ └────────────┘ │
└──────────────────┘
Hero Audit Checklist
Must-Have Elements
Conversion Optimizers
Implementation Workflow
Step 1: Define the Offer
- What's the primary action?
- What does the visitor get?
- What's the value proposition?
Step 2: Write the Copy
- Apply Dan Kennedy headline formulas
- Write subheadline for support
- Create CTA button text
- Add microcopy for reassurance
Step 3: Select Visual Approach
- Choose layout pattern
- Generate or select hero image
- Ensure visual supports message
Step 4: Build and Test
- Implement with shadcn/ui components
- Test mobile responsiveness
- Check load time
- Preview with Playwright
Integration with Other Skills
This skill works with:
- dan-kennedy-copywriter - Headlines and CTA copy
- brand-image-generator - Hero image creation
- mobile-ux-auditor - Mobile optimization
- landing-page-auditor - Above-fold scoring
Reference Materials
For hero layout patterns and code examples, consult:
references/hero-patterns.md - Visual layouts with component structure
