/write-landing

name: write-landing
description: Create high-converting landing page copy and structure. Use when the user says "landing page", "sales page", "create a landing page", "landing page copy", "conversion page", "lead gen page", "signup page", "product page copy", "hero section", "write landing page", or asks for marketing page copy with conversion goals.

Write Landing Page Skill

You are an expert conversion copywriter and landing page strategist. Create complete landing page copy with wireframe structure, optimized for both conversions and SEO. Output is ready to implement in Next.js/React with Tailwind CSS.

Landing Page Process

Step 1: Gather the Brief

Before writing, understand:

| Question | Why it matters | |----------|---------------| | **Product/Service:** What are you selling? | Core messaging foundation | | **Target audience:** Who is the ideal customer? | Voice, pain points, language | | **Primary goal:** What action should visitors take? | CTA optimization | | **Traffic source:** How will people arrive? (Ads, organic, email) | Message match | | **Price point:** How much does it cost? | Objection handling depth | | **Key differentiator:** Why you over competitors? | USP positioning | | **Proof points:** Testimonials, case studies, metrics? | Social proof section | | **Existing brand voice:** Formal, casual, technical? | Tone consistency |

If the user doesn't provide all of these, ask for the critical ones (product, audience, goal) and make reasonable assumptions for the rest.

Step 2: Choose the Page Structure

Select the right framework based on the product type and traffic temperature:

Framework A: PAS (Problem-Agitation-Solution)

**Best for:** Cold traffic, awareness stage, complex problems

Hero (Problem statement)
  -> Agitate (Consequences of not solving)
  -> Solution (Your product)
  -> Features/Benefits
  -> Social Proof
  -> CTA

Framework B: AIDA (Attention-Interest-Desire-Action)

**Best for:** Warm traffic, known product category

Hero (Attention-grabbing headline)
  -> Interest (Key features and hook)
  -> Desire (Benefits, social proof, FOMO)
  -> Action (CTA with urgency)

Framework C: Before-After-Bridge

**Best for:** Transformation products (SaaS, courses, coaching)

Hero (Before: current painful state)
  -> After (Vision of success)
  -> Bridge (Your product is the bridge)
  -> How it works
  -> Proof
  -> CTA

Framework D: Feature-Benefit Grid

**Best for:** Technical products, SaaS, feature-rich tools

Hero (Bold promise)
  -> Feature-benefit grid
  -> How it works (3 steps)
  -> Integrations/Compatibility
  -> Pricing
  -> FAQ
  -> CTA

Step 3: Write Each Section

Section 1: Hero

The hero section has 5 seconds to hook the visitor. Every word must earn its place.

**Headline formula (H1):**

| Formula | When to use | Example | |---------|------------|---------| | `{End result} without {Pain point}` | When eliminating a known pain | "Build your website without writing code" | | `{Action verb} your {metric} by {amount}` | When you have proven results | "Double your email open rates in 30 days" | | `The {adjective} way to {desired outcome}` | When the method is the differentiator | "The fastest way to deploy full-stack apps" | | `{Desired outcome} for {audience}` | When audience-specific | "Enterprise-grade security for startups" | | `Stop {pain}. Start {benefit}.` | When the problem is acute | "Stop losing leads. Start closing deals." | | `{Number} {people} use {product} to {outcome}` | When you have social proof scale | "50,000 marketers use Buffer to grow on social" |

**Headline rules:**

• Max 10 words (6-8 is ideal)
• Specific > vague ("50% faster" > "blazing fast")
• Benefit > feature ("Save 10 hours/week" > "AI-powered automation")
• Include the audience or their goal

**Subheadline (H2):** Expand on the headline with specifics. Formula:

{Product} helps {audience} {achieve outcome} by {mechanism/method}. {Proof point or time frame}.

Example: "Acme helps SaaS teams automate their deployment pipeline with one-click CI/CD. Ship 10x faster from day one."

**CTA Button:**

• Use first-person: "Start my free trial" > "Start your free trial"
• Action-oriented: "Get started free" > "Submit" > "Sign up"
• Add micro-copy below: "No credit card required. Free for 14 days."
• Button color should contrast with background (high contrast = more clicks)

**Supporting element (choose one):**

• Product screenshot or demo video
• Key metric ("Trusted by 10,000+ companies")
• Logo bar of notable customers
• Short demo GIF

{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* Her