import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence, useInView } from "motion/react"; import { ArrowRight, TrendingUp, BarChart3, Activity, Zap, Shield, Globe, ChevronRight, Play, Sun, Moon, Layers, Database, Cpu, Users, DollarSign, Eye, Clock, Sparkles, } from "lucide-react"; import { Container } from "@/components/ui/container"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, BarChart, Bar, Cell, } from "recharts"; const chartData = [ { name: "Jan", revenue: 4200, users: 240, sessions: 1800 }, { name: "Feb", revenue: 5800, users: 320, sessions: 2400 }, { name: "Mar", revenue: 4900, users: 290, sessions: 2100 }, { name: "Apr", revenue: 7200, users: 410, sessions: 3200 }, { name: "May", revenue: 8100, users: 520, sessions: 3800 }, { name: "Jun", revenue: 9400, users: 610, sessions: 4500 }, { name: "Jul", revenue: 11200, users: 740, sessions: 5200 }, { name: "Aug", revenue: 10800, users: 690, sessions: 4900 }, { name: "Sep", revenue: 13500, users: 850, sessions: 6100 }, { name: "Oct", revenue: 14200, users: 920, sessions: 6800 }, { name: "Nov", revenue: 16800, users: 1100, sessions: 7900 }, { name: "Dec", revenue: 19200, users: 1340, sessions: 9200 }, ]; const barData = [ { name: "Direct", value: 45, color: "var(--chart-1)" }, { name: "Organic", value: 32, color: "var(--chart-2)" }, { name: "Referral", value: 18, color: "var(--chart-3)" }, { name: "Social", value: 12, color: "var(--chart-4)" }, ]; const insights = [ { icon: DollarSign, label: "Revenue", value: "$19.2K", change: "+24.5%", up: true }, { icon: Users, label: "Active Users", value: "1,340", change: "+18.2%", up: true }, { icon: Eye, label: "Page Views", value: "9.2K", change: "+31.7%", up: true }, { icon: Clock, label: "Avg. Session", value: "4m 32s", change: "+12.1%", up: true }, ]; function AnimatedCounter({ target, duration = 2 }: { target: number; duration?: number }) { const [count, setCount] = useState(0); const ref = useRef(null); const inView = useInView(ref, { once: true, margin: "-100px" }); useEffect(() => { if (!inView) return; let start = 0; const startTime = Date.now(); const animate = () => { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / (duration * 1000), 1); const eased = 1 - Math.pow(1 - progress, 3); start = Math.round(eased * target); setCount(start); if (progress < 1) requestAnimationFrame(animate); }; requestAnimationFrame(animate); }, [inView, target, duration]); return {count.toLocaleString()}; } function MiniChart({ data, color, height = 40 }: { data: number[]; color: string; height?: number }) { const max = Math.max(...data); const points = data .map((v, i) => { const x = (i / (data.length - 1)) * 100; const y = 100 - (v / max) * 80 - 10; return `${x},${y}`; }) .join(" "); return ( ); } function FloatingMetricCard({ icon: Icon, label, value, change, delay, miniData }: { icon: React.ElementType; label: string; value: string; change: string; delay: number; miniData: number[]; }) { return (

{label}

{change}

{value}

); } function DashboardPreview() { return ( {/* Glow behind dashboard */}

{/* Browser chrome */}

app.nexusflow.io/dashboard

{/* Dashboard content */}

{/* Top stats row */}

{insights.map((item, i) => (

{item.label}

{item.value}

{item.change}

))}

{/* Main chart area */}

Revenue Overview

Monthly recurring revenue

2026

Traffic Sources

By channel

{barData.map((item) => (

{item.name} {item.value}%

))}

+23.4%

vs last month

); } function ParticleField() { const particles = Array.from({ length: 30 }, (_, i) => ({ id: i, x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 2 + 1, duration: Math.random() * 20 + 15, delay: Math.random() * 10, })); return (

{particles.map((p) => ( ))}

); } function ThemeToggle({ isDark, toggle }: { isDark: boolean; toggle: () => void }) { return ( ); } export default function App() { const [isDark, setIsDark] = useState(true); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const timer = setTimeout(() => setIsLoaded(true), 100); return () => clearTimeout(timer); }, []); useEffect(() => { document.documentElement.classList.toggle("dark", isDark); }, [isDark]); return (

{/* Background gradient mesh */}

{/* Navigation */}

NexusFlow

setIsDark(!isDark)} />

{/* Hero Section */}

{/* Left: Copy */}

Now with AI-powered insights Analytics that{" "} move faster
than your competition Real-time dashboards, predictive analytics, and automated insights — all in one platform built for teams that ship. {/* Social proof */}

{[1, 2, 3, 4, 5].map((n) => (

))}

2,400+ teams already onboard

{/* Right: Dashboard Preview + Floating Cards */}

{/* Floating metric cards */}

{/* Stats Bar */}

{[ { icon: Globe, label: "Countries", value: 140 }, { icon: Database, label: "Data Points", value: 2800000 }, { icon: Cpu, label: "API Requests/day", value: 500000 }, { icon: Shield, label: "Uptime %", value: 99 }, ].map((stat, i) => (

{stat.value > 9999 ? ( ) : ( stat.value )} {stat.label === "Uptime %" && "%"} {stat.label === "Countries" && "+"}

{stat.label}

))}

{/* Features Preview */}

Platform

Everything you need to understand your data

From real-time monitoring to predictive modeling, NexusFlow gives your team superpowers.

{[ { icon: Zap, title: "Real-Time Processing", desc: "Stream and analyze millions of events per second with sub-millisecond latency.", color: "var(--chart-1)", }, { icon: Layers, title: "Custom Dashboards", desc: "Drag-and-drop builder with 40+ chart types. No SQL required.", color: "var(--chart-2)", }, { icon: Sparkles, title: "AI Insights", desc: "Automated anomaly detection and smart recommendations powered by ML.", color: "var(--chart-3)", }, ].map((feature, i) => (

{feature.title}

{feature.desc}

Learn more

))}

{/* CTA */}

Ready to see the full picture?

Join 2,400+ teams using NexusFlow to make smarter, faster decisions. Free for 14 days.

{/* Footer */}

); }

Analytics Dashboard Hero with Kinetic Reveal