Blocks
7 blocks for a SaaS landing page
A SaaS landing page has to start a trial, not list features. Seven categories, the order between pricing and social proof, the toggle and logo faults and the real catalogue counts.
Key points
- Seven categories for a SaaS landing page, but the trial starts at pricing.
- The monthly/annual toggle must change the price, not only the label.
- Forty-one pricing blocks, nearly all built for three plans.
A SaaS landing page has to start a trial, not list features. The catalogue indexes 51 hero blocks, 53 feature, 41 pricing, 50 testimonial, 74 logo, 24 faq and 27 cta, read on 2026-11-01: seven categories for a sales page.
The numbers are per-category counts, measured the same day on the public pages. The richest category is logo with 74 blocks, the thinnest of the seven is faq with 24: the catalogue holds more logo strips than objection answers, and that says where the manual work will land.
What the page has to do
Whoever lands on a SaaS page has not yet decided the problem is serious: the page has to say a shortcut exists and that trying it costs little. It has to show the product in use, not a generic mockup, state the price and what happens after the trial. An interactive demo beats three paragraphs of features, provided it loads in under two seconds.
- A measurable result in the title, not “the all-in-one platform”.
- Three features, each with proof it works.
- Price with explicit billing period and what ends after the trial.
- One CTA, repeated with the same verb across the page.
The order of the blocks
| Section | Role on the page | Blocks available |
|---|---|---|
| hero | promise one result in one line | 51 |
| feature | explain how it works | 53 |
| pricing | make the cost clear | 41 |
| testimonial | bring in the voice of a paying user | 50 |
| logo | show who already trusts you | 74 |
| faq | close the objections | 24 |
| cta | start the trial | 27 |
Hero, feature, logo, testimonial, pricing, faq, cta. Logos sit high because they cost little space and build trust at once, but they go before the features only when they are recognisable clients in the sector. Pricing comes after social proof: asking a price from someone who has not yet seen anyone paying works worse. FAQ and CTA close, and the final CTA repeats the verb of the first.
The blocks to start from
The tables list block, registry, files and category. The 2-file pricing is a three-column grid without a toggle: you add the monthly and annual switch, and it must drive the real price. The 5-file testimonial includes a slider, often an obstacle on a landing page: three static quotes read better than six rotating ones.
Hero blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Feature blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
| Feature 02 - Three Columns Feature with Icons | Shadcn Space | 3 | feature |
Pricing blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Pricing 01 - Startup Pricing Plans | Shadcn Space | 2 | pricing |
| Pricing 02 - Scalable Pricing Table | Shadcn Space | 2 | pricing |
Testimonial blocks
| Block | Registry | File | Category |
|---|---|---|---|
| Testimonial 02 - Testimonial Slider Showcase | Shadcn Space | 5 | testimonial |
| Feature 01 - Feature with Testimonials | Shadcn Space | 3 | feature |
What breaks in production
The first fault is the price toggle: it changes the figure on screen but the link still points at the monthly plan, so the customer pays more than they read. The second is the greyscale logo strip: half the marks turn unreadable, and an unreadable logo is worse than no logo. The third is a feature grid built for six items and filled with three.
- A toggle that does not update the checkout link: the monthly plan gets paid.
- Grey logos under a 3:1 ratio: unreadable on mobile.
- Invented testimonials: the first real customer notices.
- A CTA with four different verbs: nobody recalls what happens after the click.
curl "https://ui.eneawork.it/api/blocks/category/pricing?limit=10"
The call returns ten pricing blocks with source and files: it shows how many assume three plans and how many four, and how many include the toggle. With 41 blocks in the category, the difference between a 2-file and a 6-file block is almost always the number of billing-period states.
A limit to declare
The 41 pricing blocks are mostly three-plan grids with a static figure. Five-plan comparisons, annual saving computation and per-seat prices computed on the fly stay outside: selling by usage or by seat means rewriting the table, not only the copy.
In the catalogue: pricing block, SaaS hero and all blocks. The guides: pricing tables in 10 minutes, measured heroes and copy-paste or headless.
Frequently asked questions
How many sections does a SaaS landing page really need?
Seven are enough: hero, features, logos, testimonials, pricing, FAQ and CTA. Every extra section pushes pricing further down, and pricing is where the visitor finds out whether the product is affordable.
Do client logos go before or after the features?
Before, but only when they are marks the visitor recognises in their sector. A strip of unknown names takes the same height and convinces nobody: three quotes with role and company do better in that case.
How should the monthly and annual toggle work?
It changes the figure, the period and the checkout link, and shows the saving in absolute figures. If only the “per month” label changes, the customer reaches payment with an amount different from what they read and asks for a refund.
Should the free trial sit on the page or inside pricing?
Inside pricing, as a line under the recommended plan, with the length in days and what is needed to start. A “try for free” button with no length and no requirements produces signups that stop at the first form field.
Is an interactive demo better than a screenshot?
The demo, when it weighs under 200 KB and starts without login. A large screenshot convinces less but does not break; a slow demo loses more visits than it wins, so it loads after the first paint.