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
- Navigation header
- Hero with headline and CTA
- Features grid (6 features)
- Pricing table (3 tiers)
- Testimonials
- FAQ section
- Final CTA
- Footer
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:
- Mode: Dark
- Color Palette: Blue
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:
- Compelling hero with dual CTAs
- 6 feature cards with icons
- 3-tier pricing with popular badge
- Social proof logos
- 3 testimonials
- 5 FAQ items
- Strong final CTA
-
Fully responsive design
-
Connect Domain Use your own domain