landing-page-optimization

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