A production-ready, modern SaaS website template built with Next.js 16+ and Tailwind CSS. Includes 20 pages covering marketing, product, company, blog, auth, and legal. Designed for founders and teams who want to launch a professional website quickly without writing code from scratch.
What's Included
20 Pre-Built Pages
Category Pages Core Homepage, Login, Signup, Forgot Password (3-step flow) Product Features, Pricing (with comparison table), Integrations, Changelog Company About, Careers, Press, Contact Content Blog listing, Blog article template Legal Privacy Policy, Terms of Service, Cookie Policy, Licenses
Every page is fully responsive and ready to customize with your content.
30+ Reusable Components
UI Components
Button (3 variants × 3 sizes)
Card, Badge, Container
SectionHeading, SectionChip
ScrollReveal (scroll-triggered animations)
Divider
Layout Components
Navbar with dropdown menus and mobile accordion
Footer with 4-column layout and social links
Section Components
Hero (3 design variants: A, B, C)
Features (3 design variants)
Testimonials (auto-scrolling slider)
Pricing (monthly/annual toggle)
FAQ (animated accordion)
CTA (3 design variants)
TrustBar (company logos)
FeatureShowcase (alternating left/right blocks)
Mix and match variants to create a unique look without starting from scratch.
Tech Stack
Technology Version Purpose Next.js 16+ React framework with App Router React 19 UI library TypeScript 5 Type-safe development Tailwind CSS 4 Utility-first styling Framer Motion 12 Smooth animations ESLint 9 Code quality
Design System
Colors
The template uses a cohesive color palette with CSS custom properties for easy customization:
Primary Accent: Sky blue (#0EA5E9) for buttons, links, and highlights
Background: Warm off-white (#fafaf9) for a softer feel
Foreground: Slate (#0f172a) for readable text
Muted: Slate-500 (#64748B) for secondary content
Borders: Subtle slate (#E2E8F0)
Dark mode is built-in and automatically adapts based on system preferences.
Typography
Headings: Figtree (modern, geometric sans-serif from Google Fonts)
Body: System font stack for optimal performance
Letter-spacing: Tight tracking on headings for a polished look
Key Features
Interactive Elements
Sticky navigation with hover dropdowns (desktop) and smooth mobile menu
Pricing toggle between monthly and annual billing (with discount badge)
FAQ accordion with smooth animations
Blog category filtering
Job listings filtered by department
Password visibility toggle on auth pages
Auto-advancing verification code inputs
Animations
Scroll-triggered fade-up animations on all sections
Staggered animations for grid layouts
Hover effects on cards and buttons
Testimonial auto-scroll slider with fade edges
Gradient text on select headings
Responsive Design
Mobile-first approach
Hamburger menu on tablets and mobile
Adaptive layouts for all screen sizes
Touch-friendly button sizes
Recommended Integrations
The template includes UI for these features but needs backend services to function:
Authentication: Memberstack
The login, signup, and forgot-password pages are designed for Memberstack integration.
What Memberstack handles:
User authentication (email/password + social logins)
Password reset emails
Member management dashboard
Subscription/plan management (Stripe integration)
Protected pages and gated content
Forms: Formspark
The contact page is ready for Formspark integration.
What Formspark handles:
Form submission storage
Email notifications
Spam protection
File uploads
Webhooks
Content: Sanity CMS
The blog pages are structured for Sanity integration.
What Sanity handles:
Content editing dashboard
Blog post management
Media library
Real-time collaboration
Project Structure
app/
├── layout.tsx # Global wrapper (fonts, metadata)
├── page.tsx # Homepage
├── globals.css # Design tokens + Tailwind
├── login/page.tsx # Authentication pages
├── signup/page.tsx
├── forgot-password/page.tsx
├── features/page.tsx # Product pages
├── pricing/page.tsx
├── integrations/page.tsx
├── changelog/page.tsx
├── about/page.tsx # Company pages
├── careers/page.tsx
├── press/page.tsx
├── contact/page.tsx
├── blog/page.tsx # Content pages
├── blog/[slug]/page.tsx
├── privacy/page.tsx # Legal pages
├── terms/page.tsx
├── cookies/page.tsx
└── licenses/page.tsx
components/
├── ui/ # Reusable UI elements
├── layout/ # Navbar, Footer
└── sections/ # Page sections (Hero, Features, etc.)
public/ # Static assets (images, icons)
What You Can Build
This template is ideal for:
SaaS product launches
B2B marketing websites
Developer tools marketing
Subscription service sites
Product documentation + marketing
Startup landing pages
Less suited for:
E-commerce (no product catalog)
Community forums
Complex web applications
Customization
Easy to Change
Brand name: Update in Navbar and Footer components
Colors: Modify CSS variables in globals.css
Content: Edit text directly in page files
Pricing plans: Update the plans array in the Pricing component
FAQ questions: Modify the FAQ array
Team members: Update the About page
Job listings: Edit the Careers page
Component Variants
Each major section (Hero, Features, Testimonials, CTA) includes multiple design variants. Swap between them by changing a single import to dramatically change your site's look.
What's Included vs. What You'll Need
Included Not Included (Add Yourself) 20 pre-built pages Backend API 30+ components Authentication logic (use Memberstack) Complete design system Database/CMS (use Sanity) Dark mode support Email sending (use Formspark) Responsive layouts Payment processing (use Stripe) Smooth animations User management Form structures Legal page templates
Getting Started
Open Ship Studio
Create a new project using this template
Use the visual editor to customize content, colors, and components
Preview your changes in real-time
Export or deploy when ready
Why This Template?
Production-Ready: Not a prototype—every page is complete and polished
Modern Stack: Next.js 16+ App Router, React 19, Tailwind CSS 4
Animation-First: Framer Motion animations throughout for a premium feel
Multiple Variants: 3+ design options for key sections
Legal Coverage: Privacy, terms, cookies, and licenses pages included
Integration-Ready: Designed to work with Memberstack, Formspark, and Sanity
Dark Mode: Built-in support with automatic system detection
Accessible: Semantic HTML and keyboard navigation support
Summary
The Ship Studio SaaS Template gives you everything you need to launch a professional SaaS website. With 20 complete pages, 30+ reusable components, a polished design system, and built-in animations, you can go from idea to live site faster than building from scratch.
Perfect for founders, startups, and teams who want to focus on their product—not their website code.
Built with Ship Studio