Write Landing

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

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

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

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

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

{/* 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>

    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Product screenshot or demo */}
      </div>
    </div>
  </div>
</section>

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Title: "{Frustrating situation}"
Description: "You {specific scenario}. But {consequence}. And {escalation}."

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Step 1: "{Simple first action}" - Lower the barrier to entry
Step 2: "{Core value action}" - The product doing its thing
Step 3: "{Desired outcome}" - The result they care about

Feature: {What it does}
Benefit: So you can {outcome the user cares about}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5 star icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} at {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo bar */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Trusted by leading companies
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Customer logos */}
      </div>
    </div>
  </div>
</section>