Build a SaaS Marketing Site

Step-by-step tutorial to create a complete SaaS marketing website with Pagesmith. Landing page, features, pricing, and documentation.

Build a complete SaaS marketing site in about 30 minutes. You’ll create a homepage, features page, pricing page, and basic documentation — all optimized for SEO and ready for production.

What You’ll Build

Homepage with hero, features overview, testimonials, and CTA
Features page with detailed feature explanations
Pricing page with tiered plans and FAQ
Docs section for getting started guides
Blog ready for content marketing
Legal pages (Privacy, Terms)

Prerequisites

Pagesmith account (free tier works)
Your SaaS product name, tagline, and key features
Optional: logo and brand colors

Step 1: Generate Your Base Site

Create a new project with this prompt:

Create a marketing website for [Your Product Name], a [what it does].

Target audience: [who uses it]
Key value proposition: [main benefit]

Include:
- Homepage with hero, features grid (6 features), testimonials (3),
  and final CTA section
- Features page with detailed explanations
- Pricing page with 3 tiers (Free, Pro, Enterprise)
- About page
- Contact page with form

Design: Modern, clean, professional. Primary color: [your color].
Use a gradient hero section. Include a sticky header with logo
and navigation.

Example:

Create a marketing website for FocusFlow, a time-blocking app
for remote teams.

Target audience: Remote workers and distributed teams
Key value proposition: Ship more with less context switching

Include:
- Homepage with hero, features grid (6 features), testimonials (3),
  and final CTA section
- Features page with detailed explanations
- Pricing page with 3 tiers (Free, Pro, Enterprise)
- About page
- Contact page with form

Design: Modern, clean, professional. Primary color: indigo-600.
Use a gradient hero section. Include a sticky header with logo
and navigation.

Wait for the AI to generate your site. This creates the complete structure with all pages.

Step 2: Refine the Homepage

Your homepage is your most important page. Refine each section.

Hero Section

Update the hero section:
- Headline: "Stop Context Switching. Start Shipping."
- Subheadline: "FocusFlow helps remote teams protect deep work
  time with smart time-blocking that syncs across the team."
- Primary CTA: "Start Free Trial" linking to /signup
- Secondary CTA: "Watch Demo" linking to #demo-video
- Add a hero image placeholder on the right side

Features Grid

Update the 6 features:
1. Smart Time Blocking - AI suggests optimal focus blocks
2. Team Calendar Sync - See when teammates are in focus mode
3. Slack Integration - Auto-update status during focus time
4. Analytics Dashboard - Track focus hours and interruptions
5. Meeting-Free Zones - Protect team-wide focus time
6. Mobile App - Block distractions on all devices

Use appropriate icons for each feature.

Testimonials

Add 3 testimonials:
1. "Our team's shipping velocity increased 40% after adopting
   FocusFlow. The meeting-free zones are game-changing."
   - Sarah Chen, CTO at RemoteFirst

2. "Finally, a tool that respects deep work. My team loves
   the Slack integration."
   - Marcus Johnson, Engineering Lead at Distributed.io

3. "We cut our meeting time in half and doubled our output.
   FocusFlow pays for itself."
   - Lisa Park, Founder at ShipFast

Add professional-looking avatar placeholders.

Final CTA

Update the final CTA section:
- Headline: "Ready to protect your team's focus?"
- Subheadline: "Join 2,000+ teams shipping faster with FocusFlow"
- Button: "Start Your Free Trial"
- Add a subtle background gradient

Step 3: Build the Features Page

Expand your features with detailed explanations:

Create a detailed features page with these sections:

Hero:
- Headline: "Features built for deep work"
- Subheadline: "Everything you need to protect focus time"

For each of the 6 features, create a detailed section with:
- Feature name and icon
- 2-3 paragraph explanation
- Screenshot placeholder
- List of sub-features

Alternate the layout: image-left, image-right, image-left, etc.

Step 4: Create the Pricing Page

Build a conversion-optimized pricing page:

Create the pricing page with:

Hero:
- Headline: "Simple, transparent pricing"
- Subheadline: "Start free, upgrade when you need more"
- Toggle for monthly/annual (20% discount annual)

Three pricing tiers in a card layout:

Free:
- $0/month
- Up to 5 team members
- Basic time blocking
- Slack integration
- 7-day history
- CTA: "Get Started"

Pro ($12/user/month):
- Everything in Free
- Unlimited team size
- Advanced analytics
- Meeting-free zones
- Calendar integrations
- Priority support
- CTA: "Start Free Trial" (highlighted as recommended)

Enterprise (Custom):
- Everything in Pro
- SSO/SAML
- Admin controls
- Dedicated support
- Custom integrations
- SLA guarantee
- CTA: "Contact Sales"

Add an FAQ section below with 6 common questions.

Step 5: Add Documentation

Create a docs section for user onboarding:

Create a /docs section with:

Overview page (/docs):
- Getting started guide
- Links to main doc sections

Documentation pages:
1. /docs/getting-started - Account setup and first time-block
2. /docs/time-blocking - How to create and manage focus blocks
3. /docs/team-settings - Setting up your team
4. /docs/integrations - Connecting Slack, Calendar, etc.

Use a sidebar navigation layout for docs pages.
Each doc should have:
- Clear headings (h2, h3)
- Step-by-step instructions
- Code/config examples where relevant

Step 6: Set Up Blog Structure

Prepare for content marketing:

Create a /blog section with:

Blog listing page (/blog):
- Grid of blog post cards
- Categories filter
- Pagination

Blog post template with:
- Featured image
- Title, date, author
- Reading time
- Content area
- Related posts at bottom
- Social share buttons

Create 2 placeholder posts:
1. "Why Context Switching Kills Productivity"
2. "How to Implement Team-Wide Focus Time"

Step 7: Add Legal Pages

Essential legal pages:

Create these legal pages:
- /privacy - Privacy Policy
- /terms - Terms of Service

Use standard legal page layout with:
- Last updated date
- Table of contents
- Clear section headings
- Professional formatting

Step 8: Configure SEO

Optimize for search engines:

Update SEO settings for all pages:

Homepage:
- Title: "FocusFlow | Time Blocking for Remote Teams"
- Description: "Help your remote team ship faster with smart
  time-blocking. Sync focus time across the team, integrate
  with Slack, and protect deep work."

Features:
- Title: "Features | FocusFlow"
- Description: "Smart time blocking, team calendar sync, Slack
  integration, analytics, and more. Built for remote teams."

Pricing:
- Title: "Pricing | FocusFlow"
- Description: "Simple pricing starting at $0. Free for small
  teams, Pro for growing teams, Enterprise for large organizations."

Add Open Graph images for each page.
Generate a sitemap.xml and robots.txt.

Step 9: Add Analytics & Forms

Contact Form

Make the contact form functional:
- Name, Email, Company, Message fields
- On submit, store in database
- Show success message
- Send notification email (optional)

Analytics

Add analytics script placeholder in the head:
<!-- Add your analytics script here -->

After publishing, add your actual analytics code (Google Analytics, Plausible, etc.) through the code editor.

Step 10: Publish Your Site

Click Publish to deploy
Test all pages and links
Check mobile responsiveness
Verify forms work

Add Custom Domain

Go to Settings → Domains
Add your domain (e.g., focusflow.com)
Add DNS records:
- CNAME: www → your-project.pagesmith.site
- A record: @ → provided IP
Wait for SSL (automatic, usually < 5 minutes)

Tips for SaaS Sites

Above the Fold

Your hero section should answer three questions:

What is this? (Clear headline)
Who is it for? (Target audience)
What do I do next? (Clear CTA)

Add trust indicators:

Customer logos
Testimonials with real names/companies
Usage statistics (“2,000+ teams”)
Security badges if relevant

Loading Speed

SaaS buyers expect fast sites. Pagesmith’s SSG approach helps, but also:

Optimize images (use WebP)
Limit animations
Keep hero section lightweight

Blog for SEO

Plan content around keywords your audience searches:

“[Problem] solutions”
“How to [achieve outcome]”
“[Your category] comparison”

Next Steps

SEO Best Practices — Improve your search rankings
Custom Domains — Full domain setup guide
Article Editor — Add blog content easily