DevPulse — Next.js Developer Analytics Suite Template

DevPulse is a premium Next.js analytics dashboard template built for developers and indie hackers who want a production-ready alternative to tools like Mixpanel or PostHog. It ships with a fully designed marketing landing page and a complete internal dashboard — event tracking, funnel analysis, session replay, and a real-time activity feed — all wired up to a clean, dark-mode-only design system built on Tailwind CSS v4 and shadcn/ui. Whether you're building a SaaS analytics product, an internal metrics tool, or a client-facing data platform, DevPulse gives you the UI foundation to move fast without starting from scratch. Every section of this Next.js SaaS template has been crafted with conversion and visual impact in mind. The marketing landing page includes an animated dashboard mockup in the hero, a features grid, a step-by-step how-it-works section, social proof testimonials, a full pricing table with a collapsible comparison matrix, and a high-converting final CTA — all powered by Framer Motion scroll animations and a consistent cyan-on-dark design language. The dashboard itself covers six internal pages: Overview with recharts area and bar charts, Events with a sortable filterable table, Funnels with animated step bars and drop-off indicators, Sessions with an expandable row detail view, Realtime with a live-simulated event feed, and Settings with six tabbed sections covering API keys, team management, billing, notifications, and security. Built entirely with TypeScript, the template enforces strict type safety across all components, config files, and metadata helpers. All site content lives in a single lib/config.tsx file — headlines, nav links, pricing plans, feature lists, dashboard copy — making it trivial to white-label or adapt to any niche. SEO is handled through a layered lib/metadata.ts with global metadata, per-page static exports, and dynamic generateMetadata helpers for project, funnel, and session detail pages. No hardcoded styles, no inline style=, no arbitrary values — every color, gradient, glow, and radius references a CSS custom property defined in globals.css.