*Build a SaaS Landing Page — chapter 3 of 6.* Headline, sub, CTA pair, social proof.

What you will build#

Hero with gradient text and CTA pair.

Step by step#

example
html
<section class="py-24 text-center">
  <h1 class="text-5xl md:text-6xl font-bold tracking-tight">Ship faster with <span class="gradient-text">Acme</span></h1>
  <p class="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">The platform for teams that move.</p>
  <div class="mt-10 flex gap-4 justify-center">
    <a class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold shadow-lg">Start free</a>
    <a class="px-6 py-3 border rounded-xl font-semibold">Live demo</a>
  </div>
</section>

Why it works#

Centered heroes convert; gradient-text adds brand without images.

Try it yourself#

  • Swap to split hero (text left, image right)
  • Add logo row below
  • A/B two headlines

Series navigation#

tutorials/index|All tutorials · tutorials/saas-landing/navbar|← The navbar · tutorials/saas-landing/features|Features grid →