---
id: seed:copy-patterns/course-info-product
title: Online course / info product landing page copy patterns
source_type: seed_copy
priority: hot
---

Online courses, cohort programs, ebooks, and one-off info products all share a conversion challenge: the visitor is buying a future version of themselves, not a finished thing. Copy must paint that transformation specifically. Generic "Learn X" copy is the kiss of death.

**Hero patterns:**

- *Transformation-led*: "Go from junior dev to senior in 12 weeks."
- *Specific outcome*: "Ship your first SaaS in 90 days."
- *Authority + niche*: "How I write essays that millions read — taught by Tim Urban."
- *Reframe the painful status quo*: "Stop guessing at React. Build the mental model."

The hero MUST name (1) the target audience, (2) the specific outcome, (3) the time horizon. If you can't fit all three in the headline, split into headline + subhead — but all three must be visible above-the-fold.

```html
<section data-amb-section="hero" class="hero-section">
  <div class="container">
    <div class="hero-content">
      <span class="hero-eyebrow">Cohort #7 · Starts May 20</span>
      <h1 class="hero-title">{transformation, audience-targeted}</h1>
      <p class="hero-description">{the mechanism — what you'll actually do for 12 weeks}</p>
      <div class="hero-actions">
        <a class="cta-button" href="#enroll">Enroll — $1,200</a>
        <a class="hero-link" href="#curriculum">See the curriculum</a>
      </div>
      <p class="hero-meta">42 of 60 seats filled · Cohort begins May 20</p>
    </div>
    <div class="hero-instructor-card">
      <img class="hero-instructor-photo" src="https://placehold.co/120x120" alt="Instructor" />
      <div class="hero-instructor-meta">
        <p class="hero-instructor-name">Taught by Sarah Drasner</p>
        <p class="hero-instructor-role">Ex-Director of Engineering, Netlify</p>
      </div>
    </div>
  </div>
</section>
```

*Animation Pattern (The Authority Reveal):*
- **Scroll-Triggered Curriculum Unfurl:** Week-by-week curriculum boxes drop into view in sequence as the user scrolls into the curriculum section. GSAP ScrollTrigger with stagger of 0.08s and y-offset of 24px — establishes scroll rhythm without feeling theatrical.
- **Animated Highlighter on Outcomes:** Key outcome phrases ("ship a real SaaS", "land a senior role") have a yellow `<mark>` background that paints in left-to-right via `background-size: 0% 100% → 100% 100%` transition when scrolled into view. Mimics a human reader highlighting the important bits.
- **Live Cohort Counter:** "42 of 60 seats filled" updates from a live API (or a static number) and increments with a slot-machine-style number flip on scroll-in. Only use if numbers are REAL — fake counters destroy credibility.

**Curriculum / "What you'll learn" section:**

The longest section on the page. Visitors need to see exactly what's inside before paying $X00–$X,000. Use a week-by-week accordion or a card grid where each card is one module.

```html
<section data-amb-section="curriculum" class="curriculum-section">
  <div class="container">
    <h2 class="curriculum-title">12 weeks. 12 outcomes. 1 finished project.</h2>
    <p class="curriculum-subtitle">By Friday of each week, you'll have shipped something. No homework. No theory-only weeks.</p>
    <ol class="curriculum-weeks">
      <li class="curriculum-week">
        <span class="curriculum-week-number">01</span>
        <div class="curriculum-week-body">
          <h3 class="curriculum-week-title">Idea validation</h3>
          <p class="curriculum-week-outcome">Outcome: a written one-pager + 5 user interviews booked</p>
          <ul class="curriculum-week-bullets">
            <li>How to find your first 10 customers BEFORE writing code</li>
            <li>The 4-question interview script</li>
          </ul>
        </div>
      </li>
    </ol>
  </div>
</section>
```

Each week card MUST carry a specific outcome ("by Friday you'll have X done"). Outcomes beat content lists every time — visitors don't care that you teach 12 topics; they care what they'll OWN at the end of week 12.

**Instructor authority section:**

A dedicated section for the instructor's credibility. Photo + bio + proof of expertise. The proof matters more than the bio — show the work, not the resume.

- **Photo:** professional but human. Studio headshots with white backgrounds read as stocky; environmental portraits work better.
- **One-line credentials:** "Ex-Director of Engineering at Netlify. Built the SVG animation library that 800k devs use weekly."
- **Three proof items:** writing the visitor has read, products they built, talks at conferences the visitor's heard of.
- **Twitter/LinkedIn follower count IF it's huge** (>50k) — otherwise skip.

*Animation Pattern (The Receipts Wall):*
- **Tweet/Quote Embeds With Origin:** Real screenshots of tweets, GitHub stars, or press mentions about the instructor. Each one has the source URL on hover. Don't fake these.
- **Achievement Counter Scroll-In:** Numbers like "12 conference talks", "200K+ readers", "8 years of teaching" animate from 0 → final value over 1.5s when scrolled into view. Use easeOutQuart so the final value lands softly.

**Testimonials from past cohorts:**

The strongest section by ROI. Each testimonial card should carry:
- Photo (real, not stock)
- Name + role at time of taking the course + company
- Specific outcome ("Got a senior role at Vercel 6 weeks after completing")
- 1–2 sentence quote with concrete language

Never lead a testimonial with "Loved it!" — open with the outcome.

**Pricing / "Is this for you" gate:**

Don't just show the price. Frame WHO it's for and WHO it's not for. Filtering bad fits is more profitable than maximizing impressions.

```html
<section data-amb-section="fit-gate" class="fit-gate-section">
  <div class="container">
    <div class="fit-gate-columns">
      <div class="fit-gate-column fit-gate-column--yes">
        <h3 class="fit-gate-title">This is for you if…</h3>
        <ul class="fit-gate-list">
          <li>You've shipped at least one production app</li>
          <li>You want a senior-track role in the next 12 months</li>
          <li>You can commit 6 hours / week, including a 2-hour live call</li>
        </ul>
      </div>
      <div class="fit-gate-column fit-gate-column--no">
        <h3 class="fit-gate-title">This is NOT for you if…</h3>
        <ul class="fit-gate-list">
          <li>You're still learning your first framework</li>
          <li>You want passive video lectures with no homework</li>
          <li>You prefer self-paced — this cohort meets live</li>
        </ul>
      </div>
    </div>
  </div>
</section>
```

**Risk-reducers near the CTA:**

- "14-day full refund — no questions asked"
- "Money-back if you don't ship by week 8"
- "Pay in 3 installments — no fees"

Whichever applies. Place the reducer as small secondary text directly under the enroll button.

**FAQ — must address objections, not features:**

- "Can I do this with a full-time job?"
- "What if I miss a live call?"
- "Do I get a certificate?" (answer honestly — for most courses, "no, but you get the project")
- "What if I'm not technical enough?" (the filtering gate above already answered this; reaffirm)
- "Is there a payment plan?"

**Final CTA section:**

Repeats the hero CTA at the bottom of the page with one update: re-emphasize the scarcity if it's real ("18 seats remaining"). One button, oversized, contrasting background.

**What to omit:**
- Vague "modules" that don't name a deliverable. If you can't promise "by Friday you'll have done X," don't list it.
- Stock photos of laptops on desks. Use real screenshots of past student work instead.
- Marketing language like "transformative" or "life-changing." Specific outcomes ("got hired", "shipped my SaaS") beat adjectives every time.
- Comparison tables vs. other courses. Mostly negative-signal; visitors discount stacked comparisons.

### Technical Performance Guardrails

| Metric / Rule | Target Limit | Tech Solution |
| :--- | :--- | :--- |
| **Conversion-page LCP** | < 2.0 s on 4G | Inline above-the-fold CSS. Defer all testimonial images via `loading="lazy"`. Use AVIF for instructor photos. |
| **Time-to-CTA** | < 1.5 s visually stable | Render the enroll button as plain HTML, never inject via JS. A button that pops in late costs conversions. |
| **Form abandonment** | < 25 % | If checkout is on a different page, prefetch it on hero CTA hover. Use `<link rel="prefetch">`. |
| **Reduced motion** | Respect `prefers-reduced-motion` | Disable curriculum-unfurl, counter slot-machine, and highlighter paint. Show the content statically. |

### What to Omit (Animation perspective)
* **Scroll-jacking on a long sales page.** Visitors need to scan-skim, not be held hostage. Native scroll always wins on conversion pages.
* **Auto-playing video testimonials.** Sound-on autoplay is a trust-killer. Use poster frame + click-to-play.
* **Animated price reveal.** The price must be visible the instant the section enters the viewport. Hiding it behind a 1.5s reveal animation triggers "they're hiding something" suspicion.
