landing-page

Landing Page

A landing page is a sales conversation, not a brochure. You have 5 seconds to communicate what the product does and why it matters. This skill gives you the structure and copy for every section.

Core Principles

• A landing page has ONE goal. Everything serves that goal or gets cut.
• Structure follows the buyer's internal monologue: "What is this?" -> "Is it for me?" -> "How does it work?" -> "Can I trust it?" -> "What do I do next?"
• Above the fold is the most valuable real estate on the internet.
• Long pages can outperform short pages — IF every section earns its place.

---

Workflow

Landing Page Build:
- [ ] Define the ONE goal (signup, waitlist, demo request)
- [ ] Write the hero section (headline + subheadline + CTA)
- [ ] Plan sections in scroll order
- [ ] Write copy for each section
- [ ] Build the page
- [ ] Test on mobile
- [ ] Add analytics tracking (see analytics skill)

---

Section-by-Section Build

Hero (Above the Fold)

The hero has 5 elements. Get these right and the rest is easier.

1. Headline — State the outcome, not the product.
   • Be specific: "Cut your deploy time from 45 minutes to 45 seconds"
   • Not: "Deploy faster"
2. Subheadline — Add the "how" or a second benefit.
3. Primary CTA — High contrast, specific action text. "Start building free" not "Get started."
4. Visual — Product screenshot, short demo, or animated illustration. Show the product in action.
5. Social proof bar — Logo strip or metric: "Trusted by 15,000+ teams"

Tell AI:

Write the hero section for our landing page:
- Product: [what it does, one sentence]
- Audience: [who it's for]
- Main benefit: [the #1 outcome users get]
- Social proof: [number of users, notable customers, or key metric]

Give me:
- 3 headline options (under 10 words each, outcome-focused)
- Subheadline for each (adds "how" or second benefit)
- Primary CTA button text + anxiety reducer below it
- Social proof line
Pick the strongest option and explain why.

How It Works

Exactly 3 steps. Cognitive simplicity.

Format: [Number/Icon] + [Short title] + [One sentence]

Example:

1. Connect your repo — Link your GitHub in one click.
2. Configure your pipeline — Our AI suggests the optimal setup.
3. Ship with confidence — Deploy automatically on every push.

Feature Sections

Alternate layout: text-left/image-right, then text-right/image-left.

Each feature: [Eyebrow label] + [Benefit headline] + [2-3 sentence description] + [Screenshot]

Lead with benefit, not feature name:

• BAD: "Advanced Analytics Dashboard"
• GOOD: "Know exactly what's working — and what's not"

Testimonials

• Include: Name, title, company, headshot.
• Quote should mention: a specific result, a before/after, or an emotional reaction.
  • GOOD: "We cut onboarding from 2 weeks to 2 days. New hires actually thank us now." — Sarah Chen, VP Eng @ Acme
  • BAD: "Great product, really love it!" — J.S.
• Place near objection points (security testimonial near pricing, etc.)

FAQ

Must answer for any SaaS:

1. "Is there a free plan / trial?"
2. "How long does setup take?"
3. "Can I cancel anytime?"
4. "Is my data secure?"
5. "What integrations do you support?"
6. One or two product-specific questions.

Final CTA

Repeat the primary CTA with a slightly different angle. Different headline, same action.

---

Full Page Build

Tell AI:

Build a landing page for our SaaS product:
- Product: [what it does]
- Audience: [who it's for]
- Main benefit: [#1 outcome]
- Features: [list 3-4 key features]
- Social proof: [logos, metrics, testimonials you have]
- CTA: [what you want visitors to do — signup, waitlist, demo]

Use this section order:
1. Hero (headline, subheadline, CTA, social proof bar)
2. Problem agitation (articulate the pain they're feeling)
3. How it works (3 steps)
4. Feature sections (3-4, alternating layout with screenshots)
5. Testimonials (use placeholders if I don't have real ones yet)
6. Pricing preview or "See plans" CTA
7. FAQ (6-8 questions)
8. Final CTA (different angle, same action)

Make it responsive. Use [Tailwind / our existing design system].
If I'm using Lovable: keep the prompt focused on what the user sees, not implementation details.

---

Improving an Existing Page

Tell AI:

Review our landing page at [URL or file path] and improve it:
- Check: Is the headline outcome-focused or feature-focused?
- Check: Is there a clear single CTA above the fold?
- Check: Does social proof appear early?
- Check: Does the page follow the buyer's monologue
  (What is this → Is it for me → How does it work → Can I trust it → What do I do)?
- Rewrite any weak sections
- Add missing sections (FAQ, testimonials, final CTA)

---

Performance Requirements

• Load time: <2 seconds on 3G
• LCP (Largest Contentful Paint): <2.5 seconds
• No layout shift on load (CLS <0.1)
• Lazy load everything below the fold
• Hero image/video optimized aggressively

---

Common Mistakes

Mistake	Fix
No clear CTA above the fold	One high-contrast button with specific action text
Feature-focused headline	State the outcome the user gets, not what the product does
"Get started" or "Learn more" CTAs	Be specific: "Create your first dashboard"
No social proof	Add logos, user count, or testimonial — even one helps
Missing FAQ section	Answer the 5-6 questions every buyer has
Desktop-only design	50%+ of traffic is mobile. Test there first.
Trying to say everything	One page, one goal, one audience. Cut the rest.

---

Related Skills

• copywriting — Write stronger headlines, CTAs, and microcopy
• conversion — CRO techniques for higher signup rates
• seo — Make the landing page rank for target keywords
• brand-identity-generator — Establish visual identity before building
• beautify — Make the page look intentionally designed