skills-ws/skills/page-cro/references/hero-section-pattern-library.md

87 agent skills for AI coding assistants — marketing, growth, web3, dev, design & operations. Built for OpenClaw, Claude Code, Cursor, and Codex.

## Contents

- 🎨 Hero Section Pattern Library
- Pattern 1: Problem-Solution Hero
- Pattern 2: Outcome-Driven Hero

## 🎨 Hero Section Pattern Library

### Pattern 1: Problem-Solution Hero
```html
<section class="hero hero-problem-solution">
  <div class="container">
    <div class="hero-content">
      <!-- Problem hook -->
      <h1 class="hero-headline">
        Tired of Landing Pages That Don't Convert?
      </h1>
      
      <!-- Solution introduction. Use a TRUE, specific proof point — not a generic
           "double your X in 30 days" promise you can't guarantee for every visitor. -->
      <p class="hero-subheadline">
        Our 100-point CRO framework — used by [# real clients] to find and fix
        their biggest conversion leaks.
      </p>
      
      <!-- Outcome-focused CTA -->
      <button class="cta-primary">
        Get My Free CRO Audit
      </button>
      
      <!-- Immediate social proof. Show a REAL, recent, attributable result, framed
           as one client's outcome — never a fabricated or "typical" headline number
           (a "+127%" hero stat is selling, not testing; see the expectations note up top). -->
      <div class="result-preview">
        <span>Recent client result:</span>
        <strong>[Actual measured lift, e.g. "+18% trial signups (95% CI +6%–+30%)"]</strong>
      </div>
    </div>
  </div>
</section>
```

### Pattern 2: Outcome-Driven Hero
```html
<section class="hero hero-outcome-driven">
  <div class="container">
    <div class="hero-split">
      <div class="hero-content">
        <!-- Specific outcome promise -->
        <h1 class="hero-headline">
          Generate $10K More Revenue This Month
        </h1>
        
        <!-- Method preview -->
        <p class="hero-subheadline">
          Using our proven 5-step conversion optimization system 
          that's worked for 2,000+ businesses.
        </p>
        
        <!-- Risk-free trial -->
        <button class="cta-primary">
          Start 30-Day Free Trial
        </button>
        
        <!-- Guarantee statement -->
        <p class="guarantee">
          💰 Money-back guarantee if you don't see results
        </p>
      </div>
      
      <!-- Visual proof -->
      <div class="hero-visual">
        <img src="revenue-chart.png" alt="Revenue increase chart" />
      </div>
    </div>
  </div>
</section>
```