Docs › Step-by-step tutorials

Build a SaaS Landing Page

Create a professional SaaS product landing page with hero, features, pricing, testimonials, FAQ, and CTA sections. This tutorial takes about 15-20 minutes.

What You’ll Build

Create the Website

Step 1: Enter your prompt

In the AI Prompt Builder, enter a detailed description:

Modern SaaS landing page for TaskFlow, a project management
tool for remote teams.

Hero: Headline "Manage Projects Smarter" with product screenshot
mockup and "Start Free Trial" button.

Features: 6 key features - Task boards, Time tracking, Team chat,
File sharing, Automations, Integrations.

Pricing: Free ($0, 5 users), Pro ($12/user, unlimited),
Enterprise (custom, SSO).

Testimonials: 3 customer quotes from tech companies.

FAQ: 5 common questions about the product.

Final CTA: "Ready to get started?" with trial button.

Dark mode with blue accent color.

Step 2: Add AI tools

Click the (+) button and add:

Step 3: Generate

Select single-page and click submit. Wait 30-60 seconds for generation.

Refine the Design

Open your website in the editor and use the AI Chat to polish each section.

Step 1: Enhance the hero

Update the hero section:
- Make headline larger (text-5xl to text-6xl)
- Add subheadline: "Collaborate seamlessly with your remote team.
  Track progress, hit deadlines, deliver on time."
- Add secondary button "Watch Demo" with outline style

Step 2: Improve features

Update the features section:
- Add icons to each feature card
- Make the grid 3 columns on desktop, 2 on tablet, 1 on mobile
- Add subtle hover animation to cards

Step 3: Polish pricing

Update the pricing section:
- Add "Most Popular" badge to Pro tier
- Include feature list under each tier:
  Free: 5 users, 3 projects, basic features
  Pro: Unlimited users, unlimited projects, integrations, priority support
  Enterprise: Everything in Pro + SSO, dedicated support, custom integrations
- Make Pro tier visually prominent

Step 4: Add social proof

Add a logo bar section above testimonials showing
"Trusted by teams at" with 6 company logos

Step 5: Update FAQ

Update FAQ with these questions:
1. How does the free trial work?
2. Can I cancel anytime?
3. Do you offer discounts for nonprofits?
4. How secure is my data?
5. Can I import from other tools?

Step 6: Strengthen final CTA

Update the final CTA section:
- Larger headline
- Add urgency: "Join 10,000+ teams already using TaskFlow"
- Two buttons: "Start Free Trial" and "Schedule Demo"

Preview and Publish

Step 1: Test responsiveness

Click Preview mode and test desktop, tablet, and mobile views. Make sure everything looks good on all screen sizes.

Step 2: Check functionality

Verify all links and buttons work correctly. Test the navigation menu.

Step 3: Publish

Click Publish to make your landing page live.

Result

You now have a professional SaaS landing page with: