FlowMind — AI Workflow Automation SaaS Template

FlowMind is a production-ready Next.js 15 SaaS template built for developers launching an AI workflow automation product without starting from zero. It ships with a high-converting landing page, four fully interactive interior pages, a single content config file, and a complete SEO setup. Whether you're building a Zapier alternative, an AI agent platform, or a business process automation tool, FlowMind gives you a battle-tested foundation that communicates credibility from the first scroll. The four interior pages are real, interactive interfaces — not static mockups. The workflow builder features a visual canvas with execution states and a node detail panel. The logs dashboard includes live counters, filterable tables, and animated step progress bars. The integrations catalog renders brand-colored app cards with live search and filters. The automations gallery adds sorting, preview modals, and category color coding. Every interaction is animated with Motion, built on Tailwind CSS v4, shadcn/ui, and TypeScript — no hardcoded values, no magic numbers. All site content lives in a single config.tsx file, so customizing for your brand takes under an hour. FlowMind is designed for developers building in the no-code automation, AI agent, and SaaS tooling space — one of the fastest-growing categories in B2B software. You get all landing page sections, a navbar with mega-menu, all four interior pages, a typed metadata system with JSON-LD structured data, and a detailed README with setup and customization guide. If you've been searching for a Next.js AI template, a SaaS dashboard starter, or a Next.js 15 automation template — FlowMind is built exactly for that.

Stack

| Tech | Version | |---|---| | Next.js | 15+ (App Router) | | Tailwind CSS | v4 | | shadcn/ui | latest | | TypeScript | 5+ | | Motion | (motion/react) | | Lucide React | latest |

Project structure

flowmind/
├── app/
│   ├── layout.tsx              # Root layout — you build this
│   ├── page.tsx                # Landing page — you build this
│   ├── globals.tsx             # Tailwind v4 theme, oklch color palette, reusable gradients
│   ├── automations/
│   │   ├──   ClientAutomations.tsx # Client component 
│   │   └── page.tsx            # Template gallery with filters + preview modal
│   ├── integrations/
│   │   ├──  ClientIntegrations.tsx # Client component 
│   │   └── page.tsx            # Integration catalog with category filter
│   ├── logs/
│   │   ├──   ClientLogs.tsx # Client component 
│   │   └── page.tsx            # Execution logs dashboard
│   └── workflows/
│       ├──   ClientWorkflows.tsx # Client component 
│       └── page.tsx            # Visual workflow builder (canvas)
├── components/
│   └── sections/
│       ├── Navbar.tsx            # Sticky glass navbar with mega-menu
│       └── Footer.tsx            # Footer with link columns + social icons              
│   └── sections/
│       ├── hero.tsx            # Hero with animated node graph + workflow preview
│       ├── how-it-works.tsx    # 3-step process with animated connectors
│       ├── features.tsx        # 9-card feature grid
│       ├── integrations.tsx    # Marquee strip + filterable integration grid
│       ├── pricing.tsx         # 3-plan pricing with billing toggle + FAQ accordion
│       ├── testimonials.tsx    # 3 testimonial cards + aggregate rating strip
│       └── cta-final.tsx       # Closing CTA with dramatic background
├── lib/
│   └── metadata.ts             # SEO helpers: baseMetadata, generateMetadata, JSON-LD
│   └── config.tsx                  # All site content (SEO, nav, hero, features, etc.)
└── └── utils.ts
                

Quick start

1. Create a new Next.js project

npx create-next-app@latest flowmind --typescript --tailwind --app
cd flowmind

2. Install dependencies

# shadcn/ui
npx shadcn@latest init

# shadcn components used in the template
npx shadcn@latest add button input badge separator select table tooltip
npx shadcn@latest add navigation-menu dropdown-menu accordion avatar

# Motion (Framer Motion v11+)
npm install motion

# Lucide icons
npm install lucide-react

# tw-animate-css (used in globals)
npm install tw-animate-css

3. Copy template files

Drop the template files into your project preserving the folder structure above.

4. Set up globals.css

Replace the contents of app/globals.css with the provided globals.css. This includes:

• The full oklch dark-mode color palette
• Reusable gradient and glow CSS variables
• Tailwind v4 @theme inline block

5. Build your layout and landing page

The two files you need to create yourself:

app/layout.tsx — import fonts, apply baseMetadata, and wrap children with <Navbar /> and <Footer />:

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { baseMetadata } from "@/lib/metadata";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import "./globals.css";

const fontSans = Geist({ subsets: ["latin"], variable: "--font-sans" });
const fontMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" });

export const metadata: Metadata = baseMetadata;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <body className={`${fontSans.variable} ${fontMono.variable} antialiased`}>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}

app/page.tsx — compose the landing sections:

import { Hero }          from "@/components/sections/hero";
import { HowItWorks }    from "@/components/sections/how-it-works";
import { Features }      from "@/components/sections/features";
import { Integrations }  from "@/components/sections/integrations";
import { Pricing }       from "@/components/sections/pricing";
import { Testimonials }  from "@/components/sections/testimonials";
import { CTAFinal }      from "@/components/sections/cta-final";

export default function HomePage() {
  return (
    <main>
      <Hero />
      <HowItWorks />
      <Features />
      <Integrations />
      <Pricing />
      <Testimonials />
      <CTAFinal />
    </main>
  );
}

6. Add SEO to interior pages

Since app/workflows/page.tsx and others are "use client" components, create a separate server component wrapper to export metadata:

// app/workflows/layout.tsx  (server component — no "use client")
import { generateMetadata } from "@/lib/metadata";
export const metadata = generateMetadata("workflows");
export default function Layout({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

Repeat for logs, integrations, and automations.

Customization

Change brand name, colors, and content

Everything lives in config.tsx. Open it and update:

• SITE — name, URL, tagline, email, OG image path
• HERO — headline, subheadline, badge text, CTAs
• FEATURES — add, remove, or reorder feature cards
• PRICING_PLANS — prices, features list, limits
• INTEGRATIONS — add new integrations with name, icon, color, category, status
• TESTIMONIALS — swap quotes, names, companies

Change the color palette

Open globals.css. The key variables are in :root:

--accent:  oklch(0.82 0.22 135);  /* lime green — the star color */
--primary: oklch(0.55 0.2 255);   /* electric blue */
--background: oklch(0.1 0.01 260); /* deep dark background */

Adjust the hue (third value) to shift the entire palette. For example, changing 135 → 270 shifts accent from lime to violet.

Add a new integration

In config.tsx, add an entry to INTEGRATIONS:

{
  id: "stripe",
  name: "Stripe",
  description: "Trigger workflows on payments, subscriptions, and invoices.",
  category: "Finance",
  icon: CreditCard,          // any lucide-react icon
  status: "available",       // "connected" | "available" | "coming_soon"
  popular: true,
  color: "oklch(0.65 0.18 270)",
},

Add a new automation template

In config.tsx, add an entry to AUTOMATION_TEMPLATES:

{
  id: "my-template",
  title: "Stripe payment → Slack alert",
  description: "Get notified on Slack whenever a new payment is received in Stripe.",
  category: "Finance",
  apps: ["Stripe", "Slack"],
  steps: 2,
  usedBy: 0,
},

SEO setup

Global metadata

// app/layout.tsx
export { baseMetadata as metadata } from "@/lib/metadata";

Per-page metadata (via layout wrapper)

// app/logs/layout.tsx
import { generateMetadata } from "@/lib/metadata";
export const metadata = generateMetadata("logs");

JSON-LD structured data

Add to your root layout.tsx inside <head> or as an inline script:

import { organizationJsonLd, softwareApplicationJsonLd } from "@/lib/metadata";

// Inside <body> or a server component:
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareApplicationJsonLd()) }}
/>

Notes

• Dark mode only. The template uses oklch variables scoped to :root with no light mode variant. Adding light mode requires duplicating the :root block inside a .light class or @media (prefers-color-scheme: light).
• "use client" pages. All four interior pages are client components (they use state and motion). To export metadata from them, use a server layout wrapper as shown above.
• No style={} except dynamic values. Gradient glows using runtime-computed colors (e.g. integration.color) use inline style — everything else uses Tailwind utilities and CSS variables.
• Fonts. The template references --font-sans and --font-geist-mono CSS variables. These are expected to come from next/font/google in your layout as shown above.