"use client"; import { useEffect, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ArrowRight, Blocks, BookOpen, Bot, Boxes, Briefcase, Building2, Calendar, ChevronDown, Code, Compass, Gauge, GitBranch, Hexagon, KeyRound, Layers, LifeBuoy, LineChart, MessagesSquare, Newspaper, Package, Puzzle, Rocket, ShoppingBag, Terminal, TrendingUp, Users, Webhook, Workflow, Zap, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; type MenuLink = { icon: LucideIcon; title: string; description: string; }; type MenuColumn = { heading: string; links: MenuLink[]; }; type MenuPromo = { icon: LucideIcon; eyebrow: string; title: string; description: string; cta: string; }; type NavItem = { label: string; columns: MenuColumn[]; promo: MenuPromo; }; const EASE = [0.16, 1, 0.3, 1] as const; const NAV_ITEMS: NavItem[] = [ { label: "Product", columns: [ { heading: "Platform", links: [ { icon: Layers, title: "Orchestration", description: "Coordinate agents across every environment", }, { icon: Workflow, title: "Pipelines", description: "Compose multi-step jobs with typed inputs", }, { icon: Gauge, title: "Observability", description: "Trace latency, cost, and tokens in real time", }, ], }, { heading: "Building blocks", links: [ { icon: Boxes, title: "Components", description: "Prebuilt UI primitives ready to drop in", }, { icon: Blocks, title: "Templates", description: "Production starters for common surfaces", }, { icon: Puzzle, title: "Integrations", description: "Connect the tools your team already uses", }, ], }, ], promo: { icon: Zap, eyebrow: "New", title: "Edge runtime v2", description: "Ship globally with 40ms cold starts.", cta: "Read the changelog", }, }, { label: "Solutions", columns: [ { heading: "By team", links: [ { icon: Rocket, title: "Startups", description: "Go from prototype to production in a weekend", }, { icon: Building2, title: "Enterprise", description: "SOC 2 controls, SSO, and audit logs", }, { icon: Users, title: "Agencies", description: "Manage many client workspaces at once", }, ], }, { heading: "By use case", links: [ { icon: ShoppingBag, title: "Commerce", description: "Storefronts that convert on every device", }, { icon: LineChart, title: "Analytics", description: "Dashboards your operators actually read", }, { icon: Bot, title: "AI apps", description: "Chat and agent surfaces with guardrails", }, ], }, ], promo: { icon: TrendingUp, eyebrow: "Guide", title: "Scaling to a million users", description: "The architecture behind our busiest tenants.", cta: "Open the playbook", }, }, { label: "Developers", columns: [ { heading: "Get started", links: [ { icon: Terminal, title: "Quickstart", description: "Deploy your first project in five minutes", }, { icon: BookOpen, title: "Documentation", description: "Guides, references, and API details", }, { icon: Code, title: "Examples", description: "Copy and paste snippets for every framework", }, ], }, { heading: "Reference", links: [ { icon: Webhook, title: "API", description: "Typed REST and streaming endpoints", }, { icon: KeyRound, title: "Authentication", description: "Tokens, scopes, and rotation policies", }, { icon: GitBranch, title: "CLI", description: "Automate deploys from your terminal", }, ], }, ], promo: { icon: Package, eyebrow: "SDK", title: "TypeScript client 3.0", description: "Fully typed, tree shakeable, zero deps.", cta: "View on the registry", }, }, { label: "Company", columns: [ { heading: "About", links: [ { icon: Compass, title: "Mission", description: "Why we are building for the agent era", }, { icon: Newspaper, title: "Blog", description: "Product notes and engineering deep dives", }, { icon: Briefcase, title: "Careers", description: "Join a small team shipping quickly", }, ], }, { heading: "Connect", links: [ { icon: LifeBuoy, title: "Support", description: "Reach an engineer, not a ticket queue", }, { icon: MessagesSquare, title: "Community", description: "Trade patterns with other builders", }, { icon: Calendar, title: "Events", description: "Workshops, talks, and office hours", }, ], }, ], promo: { icon: Users, eyebrow: "Hiring", title: "We are growing the team", description: "Twelve open roles across product and infra.", cta: "See open positions", }, }, ]; function PromoTile({ promo }: { promo: MenuPromo }) { const Icon = promo.icon; return (

{promo.eyebrow} {promo.title}

{promo.description}

{promo.cta}

); } export function MegaMenu({ items = NAV_ITEMS, autoPlay = true, className, }: { items?: NavItem[]; autoPlay?: boolean; className?: string; }) { const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); useEffect(() => { if (!autoPlay || paused) return; const id = window.setInterval(() => { setActive((prev) => { const base = prev ?? -1; return (base + 1) % items.length; }); }, 2800); return () => window.clearInterval(id); }, [autoPlay, paused, items.length]); return (

setPaused(true)} onMouseLeave={() => setPaused(false)} > {/* Nav bar */}

Lumenite

{items.map((item, i) => { const isActive = active === i; return ( ); })}

{/* Mega panel */}

{active !== null && (

{items[active].columns.map((col, ci) => (

{col.heading}

{col.links.map((link, li) => { const Icon = link.icon; const delay = Math.round((ci * 3 + li) * 45) / 1000; return ( {link.title} {link.description} ); })}

))}

)}

); } export default function Demo() { return (

); }

Mega Menu