landing-page-optimization

What this skill does

# Landing Page Optimization

## Workspace Context

Read bootstrap context before asking questions: `strategy/brand.md` for brand, audience, offer, channels, tools, constraints, and metrics; `about/me.md` for personal voice; `content/ideas.md` and `content/calendar.md` for content planning. Use legacy product-marketing context files only as fallback. Save generated drafts to `content/<platform>/drafts/YYYY-MM-DD_short-topic-slug.md`, and route durable learnings back to `strategy/brand.md`, `about/me.md`, or `content/ideas.md`.

## Operating Contract

This skill is self-contained for its frontmatter scope: use its local instructions, references, scripts, and assets as the playbook; ask only for missing task-specific inputs; hand off to adjacent skills instead of expanding scope; and return an actionable artifact, decision, plan, draft, or diagnostic.



Build, write, and optimize high-converting landing pages combining proven copy frameworks, the 11-essential-elements structure, and a clear creation workflow.

---

## 1. Copy Framework

### Gather Before Writing

Collect these inputs before drafting any copy:
- Product/service name and core value proposition
- Target audience and their primary pain point
- Key differentiator vs alternatives
- Desired visitor action (CTA goal)
- Available social proof (testimonials, stats, logos)

### Choose a Framework

| Framework | When to Use |
|-----------|-------------|
| **PAS** (Problem → Agitate → Solution) | Strong pain point, emotional product |
| **AIDA** (Attention → Interest → Desire → Action) | General purpose, awareness campaigns |
| **StoryBrand** (Hero → Guide → Plan → CTA → Success) | Brand narrative, relationship-driven sales |

### Section Copy Guide

**Hero** — Value prop in ≤10 words; subheadline adds specificity; CTA + 1 trust signal above fold.

Headline formulas:
- `[Achieve outcome] without [pain point]`
- `The [adjective] way to [desired result]`
- `Stop [bad thing]. Start [good thing].`

**Problem** — Name the pain in the audience's language; 2–3 specific scenarios; emotional, not clinical.

**Solution** — How the product solves it; 3–5 features written as benefits ("saves 2 hrs/day" not "automated scheduling").

**How It Works** — 3–4 steps, each with a clear action verb; close with CTA.

**Social Proof** — Testimonial template: `"[Specific result]..." — Name, Title, Company`. Aim for 4–6 testimonials; include stats and logos if available.

**Pricing** — Highlight recommended plan; include guarantee copy; one CTA per plan card.

**FAQ** — 5–10 objection-handling questions; cover pricing, refunds, technical requirements, comparison to alternatives.

**Final CTA** — Repeat the primary CTA; add urgency or risk-reversal ("Cancel anytime", "30-day guarantee"); larger and more dramatic than hero CTA.

### CTA Copy Rules
- Start with an action verb
- Be specific: "Start My Free Trial" > "Submit"
- First-person phrasing often converts better ("Get My Guide")
- Avoid: "Click Here", "Learn More", "Submit"

### Copy Best Practices
- Active voice, present tense; benefits before features
- Specific numbers over vague claims ("saves 2 hours" not "saves time")
- Short sentences; scannable with headers and bullets
- Address objections before the reader voices them
- Multiple CTAs (same action) throughout — not multiple competing actions

---

## 2. Design Principles (11 Essential Elements)

Every landing page needs all 11 elements. See `references/11-essential-elements.md` for full detail on each.

| # | Element | Conversion Purpose | Design Note |
|---|---------|-------------------|-------------|
| 1 | URL | SEO slug with keywords | — |
| 2 | Header/Logo | Brand trust, navigation | Sticky with blur-on-scroll |
| 3 | Hero Title + Subtitle | Clear value prop, H1 with keywords | Distinctive display font, 4–6rem |
| 4 | Primary CTA | Hero conversion | Contrasting color, micro-interaction on hover |
| 5 | Social Proof | Credibility, reduce hesitation | Animated counts, overlapping avatars |
| 6 | Images/Videos | Product demonstration | Device mockups or demo video; no stock photos |
| 7 | Benefits/Features | Justify the purchase | 3–6 items with icons; benefits-first copy |
| 8 | Testimonials | Peer validation | 4–6 with photo + name + role; specific results |
| 9 | FAQ | Objection removal | Accordion; 5–10 questions |
| 10 | Final CTA | Second conversion chance | Full-width section; urgency elements |
| 11 | Footer | Trust + legal | Contact info, privacy policy, social links |

### Aesthetic Direction

Pick ONE direction and execute it consistently:

| Direction | Feel | Suits |
|-----------|------|-------|
| Minimalist | Clean whitespace, monochromatic | Premium SaaS, professional services |
| Bold/Maximalist | Rich layers, vivid colors | Creative agencies, consumer brands |
| Retro-Futuristic | Geometric, neon, monospace | Dev tools, gaming, tech startups |
| Organic | Soft shapes, earth tones | Wellness, food, sustainability |
| Editorial | Strong type hierarchy, asymmetric grids | Media, content platforms |

**Avoid**: purple gradients on white (overused AI aesthetic), perfectly symmetric layouts on every section, stock photos of people pointing at laptops, default yellow stars.

### Tech Stack (when building)

Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI

Build order: Design system → SEO metadata → Header → Hero (with animations) → Media → Benefits → Testimonials → FAQ → Final CTA → Footer.

See `references/component-examples.md` for production-ready ShadCN component implementations.

---

## 3. Creation Workflow

Follow this sequence for any landing page project:

**Step 1 — Define the Goal**
- Single conversion action (one CTA target)
- Audience segment this page serves
- Traffic source (ad, email, organic) — shapes tone and assumed context

**Step 2 — Structure First**
Use the full 11-element structure. Resist shortcutting: pages missing Social Proof or FAQ consistently underperform.

**Step 3 — Write Copy**
Apply the Copy Framework (§1). Write hero copy first — if the value prop isn't clear in 10 words, clarify the offer before continuing.

**Step 4 — Design**
Choose aesthetic direction, define design system (fonts, colors, motion), then build section by section.

**Step 5 — Optimize**
- Above the fold: value prop + CTA + one trust signal visible without scrolling
- Multiple CTAs with identical action (not competing goals)
- Minimal form fields; reduce every friction point
- Mobile-first; test on real devices
- Performance: LCP <2.5s, CLS <0.1, no layout shifts

**Step 6 — Launch Checklist**
- [ ] Headline is benefit-focused, specific, ≤10 words
- [ ] Single primary CTA throughout
- [ ] Social proof present and specific
- [ ] Mobile responsive
- [ ] Page loads <3s
- [ ] Trust signals visible above fold
- [ ] FAQ covers top 5 objections
- [ ] Analytics tracking configured

---

## References

- `references/11-essential-elements.md` — Detailed breakdown of each element with implementation guidance and good/bad examples
- `references/component-examples.md` — Production-ready ShadCN UI components for Hero, Benefits, Testimonials, FAQ, Final CTA, and Footer sections