All templates
Templates/SaaS & Product
The classic for software products. A dashboard hero shows the product right away, logos and testimonials build trust, features and numbers make the case, pricing and FAQ close it out.
SaaS & Software9 Sections
The finished page to scroll through, switchable between desktop, tablet and mobile.
Page structure
These sections make up the page above, in exactly this order. Copy each as a separate file into ./components and assemble them with the snippet below.
- 1Product Hero DashboardProduct hero with dashboard preview
- 2Logo MarqueeCustomer logos as a trust anchor
- 3Feature Grid SectionFeatures for the team workflow
- 4Comparison HighlightBefore and after: less back-and-forth
- 5Testimonial SectionVoices from product teams
- 6Pricing Scale CardsPricing with clear plans
- 7Faq SectionCommon questions as an accordion
- 8Gradient Blur CTAClosing CTA with a gradient
- 9Footer SectionFooter with links and newsletter
Composition
Copy the sections below as separate files into ./components and assemble the page with this snippet.
import { ProductHeroDashboard } from "./components/ProductHeroDashboard";
import { LogoMarquee } from "./components/LogoMarquee";
import { FeatureGridSection } from "./components/FeatureGridSection";
import { ComparisonHighlight } from "./components/ComparisonHighlight";
import { TestimonialSection } from "./components/TestimonialSection";
import { PricingScaleCards } from "./components/PricingScaleCards";
import { FaqSection } from "./components/FaqSection";
import { GradientBlurCTA } from "./components/GradientBlurCTA";
import { FooterSection } from "./components/FooterSection";
export default function SaasProduktPage() {
return (
<main>
<ProductHeroDashboard />
<LogoMarquee />
<FeatureGridSection />
<ComparisonHighlight />
<TestimonialSection />
<PricingScaleCards />
<FaqSection />
<GradientBlurCTA />
<FooterSection />
</main>
);
}
FAQ
Frequently asked questions
A curated landing page made of matching library sections in a sensible order from hero to footer. You copy the sections one by one and assemble them with the composition snippet.
Didn't find your question? We're happy to help.
Get in touch