Build a landing page
The standard marketing page, assembled from the catalog. Work down the list and you have a complete, responsive landing page — the same running order the SaaS Landing Page template uses.
Take all 8 at once
npx hoverlab add navbar-simple hero-centered logo-cloud bento-features testimonial-grid pricing-tiers faq-accordion footer-megaOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-landing-page.jsonThis path is a published registry item — one name that pulls in all 8 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
A way around the site before there is a reason to stay. Put it first so the page has a frame to sit in.
- 2
The one sentence most visitors will read. Centered works when there is no product screenshot yet; use the split hero if you have an interface to show.
Or: Split Hero with Product Panel, Hero with Browser Frame, Waitlist Hero with Email Capture
- 3
Proof immediately after the claim. Someone else already decided this was fine, which is what buys attention for the next section.
- 4
Now that they are still reading, what it actually does. The asymmetric grid lets one feature be visibly the main one.
- 5
Proof from people rather than from you — and it goes before the price, because it is what makes the number look reasonable.
- 6
The number, before they have to hunt for it. A page that hides pricing reads as expensive.
- 7
The objections the price just created, answered in the visitor’s own words. This is the highest-leverage section on the page and the one most sites skip.
- 8
Every other page on the site. It is also the only place every page links to every section, which is what lets a crawler reach the rest of you.
When you are done
Swap the copy, then take the SaaS Landing Page template if you would rather start from the assembled version.