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
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.
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.
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:
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 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.
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.
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.
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.
Every component is hand-built: Avatar, Badge, Button (5 variants, 3 sizes, loading state), Card, Drawer, Dropdown, EmptyState, ErrorState, Input, Modal, Progress, Select, Skeleton, Tabs, Textarea, Toast, Toggle, Tooltip.
Framer Motion drives everything with centralized animation variants in lib/motion.ts:
fadeUp, stagger, scaleIn, fadeIn, slideInRightprefers-reduced-motion supportAll 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.
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.
Built with excellence in mind
Optimized for speed & scalability
Battle-tested with real users
Responsive across all devices
Maintainable & well-documented
Explore other projects
I built a multi-tenant SaaS platform for dairy business management as a TurboRepo monorepo with API, web dashboard, and mobile app, featuring super admin management, tenant isolation, SMS notifications, and shared packages across all applications.
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.
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