I built a premium SaaS template for an AI workflow automation platform — featuring a complete marketing site with 9 pages, a full application dashboard with 9 management views, visual automation builder, documentation system with block-based content, and a command palette
Direct ClientPersonal ProjectJanuary 2026
Tech Stack
Next.js
TypeScript
Tailwind CSS v4
Framer Motion
SaaS Template
AI Platform
Dashboard
Dark Mode
Glassmorphism
Why Build a SaaS Template?
After building e-commerce templates, I wanted to tackle the SaaS space. AI automation tools are everywhere right now — Zapier, Make, n8n, Temporal — but their marketing sites and dashboards often feel either too corporate or too developer-focused. I wanted to create a template that felt premium and approachable, something a startup could deploy as their public-facing product website and internal dashboard shell.
NeuraFlow isn't a real AI platform — it's the UI layer that any AI/automation startup would need. Every SaaS needs a marketing site, documentation, pricing page, and an app dashboard. Building those from scratch takes weeks. This template gives that head start.
The Dark-Mode-First Approach
Most templates treat dark mode as an afterthought — build the light version, then add .dark: variants. NeuraFlow flips this. The primary experience is dark, with light mode as the alternative.
The dark surface isn't just black — it's #0a0a0f, a very slightly blue-shifted near-black that feels richer on screen. Combined with indigo brand colors (#6366f1), neon accents (cyan #00f0ff, purple #a855f7, pink #ec4899), and glass-morphism effects, the aesthetic lands somewhere between a premium developer tool and a sci-fi interface.
Glassmorphism That Actually Works
Glass effects look great in Figma mockups and terrible in production — unless you're careful. NeuraFlow uses backdrop-blur-xl on navigation and cards selectively. The .glass class layers:
Background with alpha transparency
Backdrop blur for depth
Subtle border for definition
No performance-killing large blur areas
https://neuraflow-one.vercel.app
The header blurs on scroll, cards float with glass borders, and modals use glass overlays. It's restrained enough to work on low-end hardware.
The Marketing Site
The marketing section follows a proven SaaS conversion flow:
Homepage — Hero with gradient mesh background and floating orbs, trust logos of partner companies, feature showcase (8 capabilities), testimonial carousel, pricing comparison (Starter $0 / Pro $49 / Enterprise $199), FAQ accordion, and CTA section.
Pricing Page — Detailed tier comparison with feature matrices. Starter for individuals, Pro for teams, Enterprise for scale.
Documentation — 6 doc articles (Getting Started, Workflow Builder, Triggers & Events, Integrations, Security, API Reference) rendered from block-based content. Each doc has typed content blocks — heading, paragraph, code, callout, image, list — that render dynamically.
Changelog — Release timeline showing 6 versions (1.8.0 to 2.4.0) with typed changes (added, improved, fixed, removed).
About, Contact, Privacy, Terms — Standard pages with consistent styling.
The Application Dashboard
This is where most SaaS templates fall short — the actual app UI. NeuraFlow includes:
Dashboard — KPI cards (total workflows, success rate, runs this month, alerts), recent execution runs, and notification feed.
Projects — 10 mock projects with status indicators and performance metrics. Individual project detail pages.
Automations — A visual automation builder showing trigger → condition → action flows. This is the marquee feature — it demonstrates how complex UI components can be composed.
Runs — Execution history table with status filtering (success, failed, running, queued). Real-time status badges.
Alerts — Alert rule configuration with enable/disable toggles, threshold settings, and notification channels.
Team — Team member management with invite modal and role assignment.
Billing — Plan comparison, usage meters (API calls, workflows, storage, team members), and invoice history with 8 entries.
Settings — Account settings with profile form, notification preferences, and workspace configuration.
Command Palette (Cmd/Ctrl+K)
A spotlight-style command palette accessible globally. It searches across navigation, projects, and actions — giving power users instant access to any feature. This is one of those details that separates a template from a product.
Typography That Commands
The font pairing is deliberate: Syne for display headings — a bold, geometric display face that screams "tech product" — and Space Grotesk for body text — clean, legible, with just enough personality. The combination feels like a tool built by engineers who care about design.
All content lives in 7 static JSON files: site.json, marketing.json, app.json, billing.json, docs.json, changelog.json, and legal.json. Zero hardcoded strings in components — everything is data-driven, making the template easy to customize for any brand.
Accessibility-First
Skip-to-content link, ARIA labels everywhere, focus-visible rings, 44×44px minimum touch targets, keyboard navigation through all interactive elements, and useFocusTrap for modals.
Tech Stack Used
Next.js 15 (App Router)
TypeScript (Strict Mode)
Tailwind CSS v4
Framer Motion 11 (Animations + Page Transitions)
Lucide React (Icons)
Space Grotesk + Syne (Google Fonts)
React Context (Theme, Toast, CommandPalette)
Static JSON Data Layer
Unsplash Dynamic Images
Key Features Delivered
Dark-mode-first SaaS template with glassmorphism design language
Complete marketing site (homepage, pricing, docs, changelog, about, contact, legal)
Full application dashboard with 9 management views
I rebuilt my brass manufacturing corporate website from scratch — new brand identity, modernized color system, static export optimization, local product photography, and cleaner URL architecture.
Next.jsReact 19TypeScript+6
BrassCraft Industries
I built a production-grade corporate website for a brass component manufacturer and exporter based in Jamnagar, Gujarat. Fully static, zero-backend architecture with a custom design token system, 55+ product catalog with detailed specifications