Build a SaaS Landing Page That Converts (Next.js + Tailwind — Full Code)

#nextjs #tailwindcss #webdev #saas

Your landing page is your first impression. Here is the exact structure for a high-converting SaaS page with Next.js and Tailwind CSS.

The structure

Nav (logo + CTA)
Hero (headline + gradient text + dual CTA + social proof)
Code preview (terminal mockup)
Features (6 cards with icons)
Pricing (3 tiers, middle highlighted)
Final CTA
Footer

The Hero

<section className="max-w-4xl mx-auto px-4 pt-24 pb-16 text-center">
  <div className="inline-flex items-center gap-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-1.5 text-sm text-blue-400 mb-6">
    <Zap className="w-3.5 h-3.5" />
    Ship in days, not months
  </div>
  <h1 className="text-5xl font-bold tracking-tight leading-[1.1] mb-6">
    The SaaS starter kit<br />
    <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
      you wish you had
    </span>
  </h1>
  <p className="text-lg text-zinc-400 max-w-2xl mx-auto mb-8">
    Stop wiring up auth, billing, and email for the 10th time.
  </p>
  <div className="flex items-center justify-center gap-4">
    <Link href="/register" className="bg-white text-zinc-900 px-6 py-3 rounded-lg font-medium">Start building</Link>
    <a href="#" className="border border-zinc-700 text-zinc-300 px-6 py-3 rounded-lg">View on GitHub</a>
  </div>
</section>

Key decisions: gradient text on the hook phrase, badge for novelty, dual CTAs, social proof immediately below.

Pricing Section

Three tiers. Middle one highlighted. Always.

{/* Pro plan — the one you want people to pick */}
<div className="border-2 border-blue-500/50 bg-blue-500/5 relative">
  <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">POPULAR</span>
  {/* plan content */}
</div>

Why three tiers: Free reduces friction. Pro (highlighted) is your target. Enterprise anchors and makes Pro look reasonable.

Background gradient

.hero-gradient {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), transparent);
}

Subtle radial gradient behind the hero adds depth without being distracting.

Terminal mockup

<div className="rounded-xl border border-zinc-800 bg-zinc-900/80 overflow-hidden shadow-2xl">
  <div className="flex items-center gap-2 px-4 py-3 border-b border-zinc-800">
    <div className="w-3 h-3 rounded-full bg-zinc-700" />
    <div className="w-3 h-3 rounded-full bg-zinc-700" />
    <div className="w-3 h-3 rounded-full bg-zinc-700" />
  </div>
  <pre className="p-6 text-sm font-mono">
    <span className="text-zinc-500">$</span> <span className="text-green-400">git clone</span> repo.git\n
    <span className="text-zinc-500">$</span> <span className="text-green-400">npm run dev</span>\n
    <span className="text-green-400">Ready in 2.1s</span>
  </pre>
</div>