A section-by-section blueprint for a SaaS landing page. Copy the skeleton, swap the copy.
Page structure#
| Order | Section | Key classes |
|---|---|---|
| 1 | Navbar | sticky top-0 backdrop-blur border-b |
| 2 | Hero + CTA pair | py-24 text-center gradient-text |
| 3 | Logo wall | flex flex-wrap opacity-60 grayscale |
| 4 | Features grid | grid sm:grid-cols-2 lg:grid-cols-3 gap-8 |
| 5 | Product shot | rounded-2xl border shadow-2xl |
| 6 | Pricing trio | grid md:grid-cols-3 border-2 border-blue-600 |
| 7 | Testimonials | grid md:grid-cols-3 rounded-2xl border |
| 8 | FAQ accordion | max-w-2xl divide-y details/summary |
| 9 | Closing CTA | rounded-3xl bg-slate-900 py-16 |
| 10 | Mega footer | grid sm:grid-cols-2 lg:grid-cols-5 |
Skeleton#
<body class="bg-white text-slate-900">
<header class="sticky top-0 z-40 border-b bg-white/80 backdrop-blur">navbar</header>
<main>
<section class="py-24">SaaS hero</section>
<section class="border-y bg-slate-50 py-16">proof / features</section>
<section class="py-16">detail grid</section>
<section class="bg-slate-900 py-16 text-white text-center">conversion CTA</section>
</main>
<footer class="border-t py-12">footer columns</footer>
</body>Conversion notes#
- Above-the-fold CTA within one scroll on mobile
- One primary conversion per page — everything else supports it
- Social proof before the first form
- Every image earns its bytes: compress, lazy-load below the fold
- Section rhythm alternates surface colors to mark progress
Related#
blueprints/index|All blueprints · recipes/index|Recipes · tutorials/index|Tutorials