SaaS Landing Page
SaaS product marketing site: hero, features, bento grid, social proof, pricing, CTA.
Install
npx webberui@latest add "https://webberui.com/r/saas-landing.en.json?t=<install token>"The whole page lands in app/templates/saas-landing/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav Bar and Hero
A sticky glassmorphic nav bar over a gradient-headline hero, with a mock product board window, floating notification cards, and a customer logo marquee.
hero - 2
Bento Feature Grid
A six-cell bento grid covering smart boards, the AI automation engine, real-time collaboration, enterprise-grade security, and 200+ integrations.
features - 3
Product in Context
Three alternating left-right text-and-image blocks with parallax window mock-ups, showing planning, automation, and analytics in use.
product - 4
Numbers and Customer Reviews
A four-figure stat band that counts up on entry, plus four five-star customer review cards for social proof.
testimonial - 5
Pricing Plans
Starter, Pro, and Enterprise plan cards with a monthly/annual toggle and rolling price digits.
pricing - 6
FAQ
Five accordion questions with smooth height animation on expand and collapse, plus a contact-the-team link.
faq - 7
Call to Action
A call-to-action banner on a blue-purple gradient, pointing visitors to a free trial or a product demo booking.
cta - 8
Footer
A multi-column link footer with brand blurb, social links, copyright, and a system status indicator.
footer
SaaS Landing Page is a React SaaS landing page template: a hero with a product UI mock, a logo marquee, a bento feature grid, alternating feature rows, numbers and testimonials, pricing, FAQ and a call-to-action. It is built with Next.js App Router, Tailwind CSS and Motion.
When to use it
- Homepage for a SaaS product
- Feature and pricing page for a B2B tool
- Marketing page for a new product launch
- Landing page for a workflow or automation product
What to change after installing
- The product name is the `BRAND` constant at the top of page.tsx (default Flowbase), and the gradients are in `gradText` and `gradBg`.
- The hero product screen is `AppDashboardMock`, and the feature visuals are `TimelineMock`, `AutomationMock` and `AnalyticsMock`; replace them with screenshots of your product.
- Plans are the `plans` array inside the `Pricing` component; each has a monthly and a yearly amount tied to the toggle above the cards.
- Bento cell, testimonial and FAQ copy is written directly in the `BentoGrid`, `Testimonials` and `FAQ` components; edit each block with your content.
Included in these starter kits
A kit packs this template together with the components it needs, an SEO skeleton and the form fields a Taiwanese storefront has to collect — all behind a single install command.
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →