Agile - Next.js + Sanity SaaS Marketing Site Template

A premium Next.js + Sanity template for SaaS marketing sites — every section (hero, features, pricing, testimonials, FAQ, blog, changelog) is fully content-managed from Sanity Studio, so you can launch a polished SaaS site without touching code for content updates.

✨ Features

• Full page-builder system build pages from reusable, content-managed sections:
  • Hero (standard, mascot-style, pricing hero, feature list hero)
  • Feature Grid, Feature Cards, Feature Breakdown, Feature Accordion, Feature Insights, Feature Overview, Feature Integration
  • Pricing Table
  • Testimonials & Quotes
  • Brands / Logo strip
  • Users Count / Social Proof
  • Social Links
• Blog with rich content editing via Sanity's Portable Text (images, quotes, lists)
• Changelog page for product updates
• FAQ section
• Contact form with email delivery (via Resend)
• Newsletter subscribe form
• Built with Chakra UI for a themeable, accessible component system
• Git hooks via Husky for consistent commit workflow
• Fully typed where it matters (TypeScript for schemas, forms, and key components)

🧱 Tech Stack

Frontend framework - Next.js (App Router)

CMS - Sanity Studio v3

UI library - Chakra UI

Styling - SCSS + Chakra theme - Content editing

Portable Text - (@portabletext/react)

Email - Resend

Monorepo structure

frontend/ + studio/

📁 Project Structure

.
├── frontend/ # Next.js marketing site
│ ├── app/ # App Router pages & layouts
│ ├── components/ # UI components, organized by section/page
│ ├── screens/ # Page-level screen components
│ ├── theme/ # Chakra UI theme customization
│ ├── styles/ # Global SCSS
│ └── public/ # Static assets
│
└── studio/ # Sanity Studio (CMS)
├── schemaTypes/ # All content schemas
│ └── sections/ # Page-builder section schemas
└── sanity.config.ts

✅ Prerequisites

• Node.js 18+
• A Sanity.io account (free tier works)
• A Resend account (for the contact form emails) — optional if you skip that feature

🚀 Getting Started

1. Install dependencies

This is a monorepo install dependencies in both the frontend and studio folders.

cd studio
npm install # or pnpm install

cd ../frontend
npm install

2. Set up your Sanity project

If you don't already have a Sanity project:

cd studio
npx sanity init

This will create a new project and give you a Project ID and Dataset name (usually production) — you'll need both in the next step.

3. Configure environment variables

Create a .env.local file in both frontend/ and studio/.

studio/.env.local

SANITY_STUDIO_PROJECT_ID=your_project_id
SANITY_STUDIO_DATASET=production
SANITY_STUDIO_API_VERSION=date
SANITY_STUDIO_USE_CDN=true

frontend/.env.local

NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_API_VERSION=date
CONTACT_EMAIL=yourcontactemail
RESEND_API_KEY=
RESEND_FROM_EMAIL=yourcompanyemail resend integrated
SITE_URL=http://www.yourdomain.com

# Optional only needed if using the contact form
RESEND_API_KEY=your_resend_api_key

⚠️ Double check your actual variable names against frontend/.env.local and studio/.env.local if you're migrating from an existing project — the values above are the standard convention but may differ slightly in your setup.

4. Run the development servers

Open two terminals or you can run from the root:

# Root Folder
cd agile
npm run dev

# Terminal 1 — Sanity Studio
cd studio
npm run dev

# Terminal 2 — Next.js frontend
cd frontend
npm run dev

• Studio will be available at http://localhost:3333
• Frontend will be available at http://localhost:3000

5. Add your content

Open the Studio, create a Site Settings document, and start building pages using the section-based page builder. Each page can mix and match the available sections (hero, features, pricing, testimonials, etc.) in any order.

🎨 Customization

• Theme — colors, typography, and component styles live in frontend/theme/
• Sections — to add a new page-builder section, create a schema in studio/schemaTypes/sections/, register it in studio/schemaTypes/index.ts, and add a matching React component in frontend/components/
• Global styles — frontend/styles/globals.scss

📄 License

Agile is a premium template. Purchasing a license grants you the right to use this template for your own project(s) or client work, per the terms of your purchase (Sanity Marketplace or direct purchase). Redistribution, resale, or sublicensing of the template itself (as a template/starter) is not permitted.

See your purchase confirmation for full license terms.

💬 Support

Questions or issues? Reach out via shohag4y@gmail.com

Built by Rayso Studio. For questions or issues, open a GitHub issue or reach out via the studio website.