hero-section-designer

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

1. Benefit + Specificity

   • "Generate 47 Qualified Leads in 30 Days"

2. Question + Pain Point

   • "Tired of Leads That Never Convert?"

3. How To + Desired Outcome

   • "How to Fill Your Pipeline Without Cold Calling"

4. Secret/Hidden + Benefit

   • "The Lead Generation Secret Top Agencies Don't Share"

5. 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

• Clear, benefit-driven headline
• Visible CTA without scrolling
• Supporting visual (image/video)
• At least one trust element
• Mobile-optimized layout

Conversion Optimizers

• Specificity in headline (numbers, timeframes)
• CTA uses action verb + benefit
• Microcopy reduces friction
• Visual supports message
• Page loads in under 3 seconds

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