MkSaaS Pages Module

Every SaaS needs the same handful of pages: a landing page that converts, a pricing page that's clear, legal pages that keep you compliant, and a contact form that actually works. Building these from scratch for every project is tedious, and the results are often inconsistent. MkSaaS ships all of them pre-built, designed to work together, and ready to customize.

This article covers what's included in the pages module, how the pages are organized, and how to make them your own.

Why Choose MkSaaS Pages Module?

These pages aren't placeholder wireframes — they're production-ready with real design work, responsive layouts, and i18n baked in:

• 🎨 Beautiful Design - All pages are carefully designed, providing a consistent and modern user experience
• 🚀 Out of the Box - No need to develop from scratch, use directly to quickly launch
• 📄 Fully Featured - Covers various page needs including marketing, legal, user interaction, and more
• 🔧 Easy to Customize - Based on MDX and React components, can easily customize content and styles
• 🌍 Multi-language Support - Built-in internationalization support for easily creating multi-language pages
• 🔍 SEO Optimized - Built-in SEO optimization features to improve search engine rankings

Core Features Explained

1. Landing Page

Your landing page is where first impressions happen. A slow or confusing one kills conversions before users even see your product. MkSaaS includes a landing page with a clear visual hierarchy, prominent CTAs, and fast load times.

Key Features:

• Beautiful Design - Carefully designed visual hierarchy that attracts user attention
• High Conversion Rate - Optimized layout and CTA buttons to improve user conversion
• Brand Customization - Can easily customize colors, fonts, content, etc., to match your brand style
• Responsive Design - Perfect adaptation to various devices, providing excellent browsing experience
• Performance Optimized - Optimized loading speed ensuring quick content presentation

You can experience the complete landing page effect at the demo site, seeing how beautiful design attracts users and guides conversion.

2. Pricing Page

The pricing page is where buying decisions happen — or don't. If users can't quickly understand what they get at each tier, they leave. MkSaaS gives you a pricing page with a comparison table, FAQ section, and clear CTAs, all driven by a single config file.

Key Features:

• Pricing Table - Clear pricing table displaying features and prices of different plans
• FAQ Section - Built-in FAQ section answering user questions about pricing
• Configurable Customization - Can easily customize pricing plans and feature lists through configuration files
• Visual Comparison - Clear visual comparison helping users choose the most suitable plan
• CTA Optimization - Optimized call-to-action buttons guiding users to complete purchases

You can experience the complete pricing page functionality at the demo site, seeing how clear pricing display promotes user conversion.

3. About Page

People buy from people, not faceless companies. An about page that tells your story — why you built this, what you believe in — builds the kind of trust that a feature list can't. MkSaaS includes a clean about page template you can fill with your own narrative.

Key Features:

• Company Introduction - Display company background, mission, and vision
• Product Story - Tell the product's development journey and core philosophy
• Brand Customization - Can easily customize content to match your brand story
• Visual Design - Beautiful visual design enhancing brand image

You can experience the complete about page effect at the demo site, seeing how storytelling content builds user trust.

4. Contact Page

When a user wants to reach you, friction is your enemy. A working contact form with email notifications means you never miss a lead or a support request. MkSaaS wires this up end-to-end: form, validation, and email delivery via Resend.

Key Features:

• Contact Form - Complete contact form collecting user information and messages
• Email Notifications - You'll receive email notifications after users submit messages
• Form Validation - Built-in form validation ensuring data accuracy
• User Experience - Friendly user interface reducing user operation difficulty

You can experience the complete contact page functionality at the demo site, seeing how convenient contact methods improve user satisfaction.

5. Legal Pages

You need a privacy policy, terms of service, and cookie policy before you launch. Getting sued or fined because you skipped these isn't a good look. MkSaaS includes all three as MDX files you can edit with your specific terms.

Key Features:

• Privacy Policy - Detailed privacy policy page explaining how user data is handled
• Terms of Service - Complete terms of service page clarifying usage rules and terms
• Cookie Policy - Cookie usage policy page complying with GDPR and other regulatory requirements
• MDX Format - Based on MDX format, can easily edit and update content
• Multi-language Support - Supports creating different legal page versions for different languages

Included Pages:

• Privacy Policy - Detailed explanation of data collection, usage, and protection policies
• Terms of Service - Clear service usage rules and user responsibilities
• Cookie Policy - Explanation of cookie usage methods and purposes

You can view the actual effects of these legal pages at the demo site, they provide necessary legal protection for your SaaS application.

6. Changelog

Users want to know your product is actively maintained. A changelog that shows regular updates — new features, bug fixes, improvements — signals momentum. MkSaaS auto-generates the changelog list from individual MDX files, sorted by date.

Key Features:

• Version Management - Each release version has an independent MDX file
• Version Details - Detailed version information including new features, improvements, and fixes
• Automatic Sorting - Automatically sorted by date, latest version displayed first
• Beautiful Display - Beautiful version card design enhancing reading experience
• SEO Optimization - Optimized SEO settings improving search engine visibility

You can experience the complete changelog functionality at the demo site, seeing how version release information is displayed.

Page System Architecture

Page Organization

MkSaaS's page system uses a clear directory structure:

• Legal Pages - Stored in content/pages directory, rendered through (legal) route
• Marketing Pages - Rendered through (pages) route, including about, contact, and other pages
• Changelog - Stored in content/changelog directory, automatically generates list pages

Routing System

MkSaaS provides a flexible routing system supporting:

• Protected Routes - Pages that require user login to access
• Public Routes - Pages accessible to all users
• Redirect Rules - Smart redirect rules improving user experience
• Multi-language Routes - Supports multi-language routes providing localized experience for users in different regions

Page Customization Methods

MkSaaS supports two page customization methods:

1. MDX-based Pages - For content-rich but simple interaction pages, use MDX format
2. Component-based Pages - For pages requiring complex interactions, use React components

Advanced Features

SEO Optimization

Every page in MkSaaS gets proper SEO treatment automatically. You set the title, description, and OG image in the frontmatter or page config, and the framework handles the rest:

• Metadata Management - Each page supports custom title, description, and image
• Structured Data - Automatically generates JSON-LD structured data so Google understands your page content
• URL Optimization - Clean, human-readable URLs without trailing slashes or unnecessary parameters
• Canonical Links - Prevents duplicate content penalties when the same page is reachable via multiple URLs
• Open Graph - Links shared on Twitter, LinkedIn, or Slack show proper preview cards with your title and image

Multi-language Support

Adding a new language to any page follows the same pattern — create a .zh.mdx (or other locale) file alongside the original, and the routing takes care of the rest:

• File Naming Convention - Use .zh.mdx suffix to create Chinese versions
• Automatic Routing - Automatically displays corresponding language version based on user language preference
• Content Synchronization - Different language versions can share the same metadata
• Translation Management - Use translation files to manage page text content

Performance Optimization

Pages are statically generated at build time by default, which means they load fast without any server-side computation on each request:

• Static Generation - Based on Next.js static generation, providing extremely fast loading speeds
• Code Splitting - Each page only loads the JavaScript it actually needs, keeping bundles small
• Image Optimization - Next.js Image component handles responsive sizing, format conversion, and lazy loading automatically
• Caching Strategy - Static assets are cached aggressively with proper cache headers

Real-world Application Scenarios

The MkSaaS pages module is suitable for various SaaS application scenarios:

• Product Showcase - Use landing pages to showcase product features and value propositions
• User Conversion - Use pricing pages to guide users to choose suitable plans and complete purchases
• Brand Building - Use about pages to tell brand stories and build user trust
• User Support - Use contact pages to collect user feedback and questions
• Compliant Operation - Use legal pages to meet regulatory requirements and protect user rights
• Product Updates - Use changelog to showcase product progress to users

Integration with Other Modules

The pages don't exist in isolation — they're wired into the rest of the MkSaaS stack:

• Authentication - Protected pages check Better Auth sessions server-side, so unauthenticated users get redirected to login without a flash of private content
• Payment System - The pricing page's "Subscribe" buttons trigger Stripe checkout sessions directly through server actions — no extra API glue needed
• Email System - Contact form submissions go through Resend, using the same localized React Email templates as the rest of the app
• Analytics System - Every page automatically loads your configured analytics tools (Google Analytics, Plausible, etc.) in production
• Component System - All pages pull from the same Radix UI + Tailwind component library, so buttons, cards, and typography stay consistent

Summary

The pages module saves you from the most tedious part of launching a SaaS: building the same landing page, pricing page, legal pages, and contact form you've built a dozen times before. Everything is already styled, responsive, translated, and SEO-optimized.

What this means in practice:

• Quick Launch - No need to start from scratch, use directly to quickly launch
• Maintain Consistency - Unified design language ensuring consistent page styles
• Improve Conversion - Optimized page design improving user conversion rates
• Compliant Operation - Complete legal pages meeting regulatory requirements

Get Started:

• View the online demo to experience the complete page effects
• Read the Pages Documentation to learn detailed configuration and usage methods
• Explore the MkSaaS Template to learn more about features

---