{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-section-1",
  "title": "Navbar Section 1",
  "description": "Solace UI navbar section block variation 1.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/blocks/navbar-section/one/index.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n  ChevronDown,\n  ArrowRight,\n  Menu,\n  X,\n  Layers,\n  Lock,\n  Settings,\n  Zap,\n  BarChart2,\n  Users,\n  Code,\n  Sparkles,\n  BookOpen,\n  Terminal,\n  Activity,\n  FileText,\n} from \"lucide-react\";\n\n// Types\ninterface Capability {\n  title: string;\n  description: string;\n  icon: React.ComponentType<{ className?: string }>;\n}\n\ninterface ProductItem {\n  id: string;\n  title: string;\n  description: string;\n  capabilities: Capability[];\n}\n\n// Data for dynamic capabilities list based on left item hover\nconst productData: Record<string, ProductItem> = {\n  overview: {\n    id: \"overview\",\n    title: \"Overview\",\n    description: \"Our complete suite of visual collaboration components.\",\n    capabilities: [\n      {\n        title: \"Realtime Collaboration\",\n        description: \"Work together instantly with live presence and state sync.\",\n        icon: Users,\n      },\n      {\n        title: \"Content & Editing\",\n        description: \"Create, refine, and ship with powerful collaborative tools.\",\n        icon: Sparkles,\n      },\n      {\n        title: \"Workflow Automation\",\n        description: \"Automate processes and reduce friction across teams.\",\n        icon: Zap,\n      },\n      {\n        title: \"Permissions & Security\",\n        description: \"Enterprise-grade security with granular access controls.\",\n        icon: Lock,\n      },\n      {\n        title: \"Developer Platform\",\n        description: \"Flexible APIs and SDKs for custom builds and extensions.\",\n        icon: Code,\n      },\n      {\n        title: \"Insights & Analytics\",\n        description: \"Gain clarity with advanced analytics and team reporting.\",\n        icon: BarChart2,\n      },\n    ],\n  },\n  \"core-platform\": {\n    id: \"core-platform\",\n    title: \"Core Platform\",\n    description: \"The underlying syncing and infrastructure layer.\",\n    capabilities: [\n      {\n        title: \"Sub-millisecond Sync\",\n        description: \"Global sync engine with ultra-low latency WebSocket delivery.\",\n        icon: Zap,\n      },\n      {\n        title: \"Conflict Resolution\",\n        description: \"Advanced CRDT operations resolving state collisions automatically.\",\n        icon: Layers,\n      },\n      {\n        title: \"Offline Syncing\",\n        description: \"Local database caching with seamless background catch-up.\",\n        icon: Activity,\n      },\n      {\n        title: \"Scale Infrastructure\",\n        description: \"Supporting millions of concurrent users per room effortlessly.\",\n        icon: Users,\n      },\n      {\n        title: \"Edge Delivery\",\n        description: \"Globally distributed state servers at the network edge.\",\n        icon: Settings,\n      },\n      {\n        title: \"Audit Logging\",\n        description: \"Comprehensive historical logs for compliance and debugging.\",\n        icon: FileText,\n      },\n    ],\n  },\n  collaboration: {\n    id: \"collaboration\",\n    title: \"Collaboration\",\n    description: \"Visual elements to make multiplayer feel native.\",\n    capabilities: [\n      {\n        title: \"Multiplayer Cursors\",\n        description: \"Render high-frequency pointer movements in real-time.\",\n        icon: Users,\n      },\n      {\n        title: \"Live Comments & Chat\",\n        description: \"Contextual conversation threads anywhere on your canvas.\",\n        icon: Sparkles,\n      },\n      {\n        title: \"Presence Avatars\",\n        description: \"Display active online profiles with custom state badges.\",\n        icon: Users,\n      },\n      {\n        title: \"Co-Browsing\",\n        description: \"Direct follow mode matching another user's viewport scale.\",\n        icon: Zap,\n      },\n      {\n        title: \"Interactive Polls\",\n        description: \"Conduct rapid visual voting inside live documents.\",\n        icon: BarChart2,\n      },\n      {\n        title: \"Reactions & Emotes\",\n        description: \"Lightweight floating bubbles for rapid user sentiment.\",\n        icon: Sparkles,\n      },\n    ],\n  },\n  automation: {\n    id: \"automation\",\n    title: \"Automation\",\n    description: \"Rules and engines that drive process workflows.\",\n    capabilities: [\n      {\n        title: \"State Triggers\",\n        description: \"Launch third-party events when document properties modify.\",\n        icon: Zap,\n      },\n      {\n        title: \"Workflow Builder\",\n        description: \"No-code sequence editors to configure document review cycles.\",\n        icon: Settings,\n      },\n      {\n        title: \"Slack Connectors\",\n        description: \"Pipe comments and updates straight to channel threads.\",\n        icon: Users,\n      },\n      {\n        title: \"Edge Handlers\",\n        description: \"Run custom JavaScript state mutations closer to users.\",\n        icon: Code,\n      },\n      {\n        title: \"Webhooks Pipeline\",\n        description: \"Secure, retried delivery of workspace payloads.\",\n        icon: Lock,\n      },\n      {\n        title: \"Scheduled Cleanup\",\n        description: \"Auto-archive empty rooms and clear stale sessions.\",\n        icon: Activity,\n      },\n    ],\n  },\n  \"developer-tools\": {\n    id: \"developer-tools\",\n    title: \"Developer Tools\",\n    description: \"SDKs, debuggers, and local emulators.\",\n    capabilities: [\n      {\n        title: \"Dev Console\",\n        description: \"Inspect active memory nodes, frame rates, and payloads.\",\n        icon: Terminal,\n      },\n      {\n        title: \"Local Emulator\",\n        description: \"Run disconnected environments to verify collaboration logic.\",\n        icon: Code,\n      },\n      {\n        title: \"CLI Scaffold\",\n        description: \"Generate room structures and register component integrations.\",\n        icon: Terminal,\n      },\n      {\n        title: \"React Hooks\",\n        description: \"Declarative React state binding with auto-throttling.\",\n        icon: Code,\n      },\n      {\n        title: \"Telemetry Dashboard\",\n        description: \"Real-time metrics on packet loss and client disconnection rates.\",\n        icon: BarChart2,\n      },\n      {\n        title: \"Multi-Client Test\",\n        description: \"Simulate multi-user loads in a single web browser console.\",\n        icon: Users,\n      },\n    ],\n  },\n  integrations: {\n    id: \"integrations\",\n    title: \"Integrations\",\n    description: \"Sync content across your operational ecosystem.\",\n    capabilities: [\n      {\n        title: \"Notion Wiki Sync\",\n        description: \"Export room summaries and decisions into your team workspace.\",\n        icon: FileText,\n      },\n      {\n        title: \"Figma Connect\",\n        description: \"Pull active frames and canvas layouts directly into Velt rooms.\",\n        icon: Layers,\n      },\n      {\n        title: \"GitHub Actions\",\n        description: \"Assert schema compatibility rules inside code merge cycles.\",\n        icon: Code,\n      },\n      {\n        title: \"Jira / Linear Link\",\n        description: \"Turn floating comment flags directly into tickets.\",\n        icon: Activity,\n      },\n      {\n        title: \"Auth0 Single Sign-on\",\n        description: \"Map enterprise identity providers with token pass-throughs.\",\n        icon: Lock,\n      },\n      {\n        title: \"Stripe Billing Seats\",\n        description: \"Calculate active monthly collaborating team member accounts.\",\n        icon: BarChart2,\n      },\n    ],\n  },\n  security: {\n    id: \"security\",\n    title: \"Security\",\n    description: \"Enterprise compliance and privacy.\",\n    capabilities: [\n      {\n        title: \"Granular ACLs\",\n        description: \"Declare cell-level permissions based on signed user traits.\",\n        icon: Lock,\n      },\n      {\n        title: \"JWT Authorization\",\n        description: \"Secure socket handshakes using short-lived cryptographed keys.\",\n        icon: Lock,\n      },\n      {\n        title: \"SOC2 Compliance\",\n        description: \"Fully audited server structures and operational boundaries.\",\n        icon: FileText,\n      },\n      {\n        title: \"E2E Encryption\",\n        description: \"Encrypt document payloads client-side before sync delivery.\",\n        icon: ShieldCheckIcon,\n      },\n      {\n        title: \"Isolated Private VPC\",\n        description: \"Deploy dedicated client clusters on isolated private subnets.\",\n        icon: Layers,\n      },\n      {\n        title: \"DDoS Mitigation\",\n        description: \"Protect websocket targets with edge connection throttling.\",\n        icon: Zap,\n      },\n    ],\n  },\n  analytics: {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Track room interactions and user engagement.\",\n    capabilities: [\n      {\n        title: \"Occupancy Heatmaps\",\n        description: \"Locate canvas regions that receive the highest user focus.\",\n        icon: BarChart2,\n      },\n      {\n        title: \"MAU Dashboard\",\n        description: \"Graph active collaborative users and channel counts.\",\n        icon: Activity,\n      },\n      {\n        title: \"Message Logs\",\n        description: \"Query packet logs for custom user interactions.\",\n        icon: FileText,\n      },\n      {\n        title: \"Retention Analytics\",\n        description: \"Measure how active users are returning to multiplayer sessions.\",\n        icon: Users,\n      },\n      {\n        title: \"Latency Reporting\",\n        description: \"Track round-trip ping time mapped by user geographic location.\",\n        icon: Zap,\n      },\n      {\n        title: \"Excel/CSV Exports\",\n        description: \"Automate delivery of collaboration traffic files.\",\n        icon: FileText,\n      },\n    ],\n  },\n};\n\n// ShieldCheck Icon Fallback helper\nfunction ShieldCheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" />\n      <path d=\"m9 12 2 2 4-4\" />\n    </svg>\n  );\n}\n\n// Popular resources\nconst popularResources = [\n  {\n    title: \"Platform Docs\",\n    description: \"Technical guides & references\",\n    icon: BookOpen,\n  },\n  {\n    title: \"API Reference\",\n    description: \"Explore endpoints & schemas\",\n    icon: Code,\n  },\n  {\n    title: \"Release Notes\",\n    description: \"What's new and improved\",\n    icon: Sparkles,\n  },\n  {\n    title: \"System Status\",\n    description: \"Live uptime & performance\",\n    icon: Activity,\n  },\n];\n\n// Left navigation menu categories list\nconst productCategories = [\n  { slug: \"overview\", label: \"Overview\" },\n  { slug: \"core-platform\", label: \"Core Platform\" },\n  { slug: \"collaboration\", label: \"Collaboration\" },\n  { slug: \"automation\", label: \"Automation\" },\n  { slug: \"developer-tools\", label: \"Developer Tools\" },\n  { slug: \"integrations\", label: \"Integrations\" },\n  { slug: \"security\", label: \"Security\" },\n  { slug: \"analytics\", label: \"Analytics\" },\n];\n\nconst trustedLogos = [\"NVIDIA\", \"Column\", \"GitHub\", \"Nike\", \"Lemon Squeezy\"];\n\nfunction NavbarOneHero() {\n  return (\n    <section className=\"w-full bg-white text-black dark:bg-[#212121] dark:text-white\">\n      <div className=\"mx-auto min-h-[calc(100vh-4rem)] max-w-7xl border-x border-neutral-200 dark:border-white/20 pt-14 md:pt-20\">\n        <div className=\"mx-auto flex max-w-3xl flex-col items-center text-center\">\n          <a\n            href=\"#\"\n            className=\"group mb-8 inline-flex items-center gap-2 rounded-none border border-neutral-200 px-2 py-1 text-sm text-neutral-400 transition-colors hover:text-black dark:border-white/20 dark:text-white/20 dark:hover:text-white md:px-3\"\n          >\n            <span className=\"rounded-none bg-neutral-300 px-2 py-0.5 text-neutral-400 transition-colors group-hover:bg-neutral-900 group-hover:text-white dark:bg-white/10 dark:text-white\">\n              Hiring\n            </span>\n            Apply for Design Engineers\n            <ArrowRight className=\"size-3 transition-transform group-hover:translate-x-1\" />\n          </a>\n\n          <h1 className=\"max-w-3xl text-4xl font-semibold tracking-[-0.055em] text-black dark:text-white md:text-6xl\">\n            Building visual tools should be fast and simple.\n          </h1>\n          <p className=\"mt-6 max-w-xl text-base leading-relaxed text-neutral-500 dark:text-neutral-400 md:text-lg\">\n            Beautiful visual components ready out of the box to design and build stunning visual applications.\n          </p>\n\n          <div className=\"mt-10 flex flex-wrap items-center justify-center gap-4\">\n            <a\n              href=\"#\"\n              className=\"rounded-none bg-black px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-black dark:hover:bg-neutral-200\"\n            >\n              Get started for free\n            </a>\n            <a\n              href=\"#\"\n              className=\"group flex items-center gap-2 rounded-none border border-neutral-200 px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-neutral-50 dark:border-white/20 dark:text-white dark:hover:bg-white/10\"\n            >\n              Learn more\n              <ArrowRight className=\"size-4 transition-transform group-hover:translate-x-1\" />\n            </a>\n          </div>\n        </div>\n\n        {/* Big Dashboard Mockup Graphics */}\n        <div className=\"mx-6 mt-16 border border-neutral-200 bg-neutral-50 dark:border-white/20 dark:bg-white/5 md:mx-12 md:mt-24\">\n          <div className=\"border-b border-neutral-200 px-4 py-3 dark:border-white/20\">\n            <div className=\"flex items-center gap-1.5\">\n              <div className=\"size-3 rounded-none bg-neutral-200 dark:bg-white/10\" />\n              <div className=\"size-3 rounded-none bg-neutral-200 dark:bg-white/10\" />\n              <div className=\"size-3 rounded-none bg-neutral-200 dark:bg-white/10\" />\n            </div>\n          </div>\n          <div className=\"aspect-[16/9] w-full px-8 py-10\">\n            {/* Inner Dashboard Layout */}\n            <div className=\"grid h-full grid-cols-12 gap-4\">\n              <div className=\"col-span-3 border border-dashed border-neutral-200 p-4 dark:border-white/10\">\n                <div className=\"h-4 w-2/3 bg-neutral-200 dark:bg-white/10\" />\n                <div className=\"mt-4 space-y-2\">\n                  <div className=\"h-3 w-full bg-neutral-100 dark:bg-white/5\" />\n                  <div className=\"h-3 w-5/6 bg-neutral-100 dark:bg-white/5\" />\n                  <div className=\"h-3 w-4/5 bg-neutral-100 dark:bg-white/5\" />\n                </div>\n              </div>\n              <div className=\"col-span-9 border border-dashed border-neutral-200 p-4 dark:border-white/10\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"h-4 w-1/3 bg-neutral-200 dark:bg-white/10\" />\n                  <div className=\"h-4 w-12 bg-neutral-200 dark:bg-white/10\" />\n                </div>\n                <div className=\"mt-6 grid grid-cols-3 gap-4\">\n                  <div className=\"aspect-video bg-neutral-100 dark:bg-white/5\" />\n                  <div className=\"aspect-video bg-neutral-100 dark:bg-white/5\" />\n                  <div className=\"aspect-video bg-neutral-100 dark:bg-white/5\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Trusted Logos Footer */}\n        <div className=\"mx-6 mt-16 border-t border-neutral-200 py-10 dark:border-white/20 md:mx-12 md:mt-24\">\n          <p className=\"text-center text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500\">\n            Trusted by modern product teams\n          </p>\n          <div className=\"mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-6 text-sm font-semibold text-neutral-500 dark:text-neutral-400 md:gap-x-16\">\n            {trustedLogos.map((logo) => (\n              <span key={logo} className=\"hover:text-black dark:hover:text-white transition-colors duration-200\">\n                {logo}\n              </span>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default function NavbarOne() {\n  const [activeMenu, setActiveMenu] = useState<string | null>(null);\n  const [activeCategory, setActiveCategory] = useState<string>(\"overview\");\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [mobileAccordion, setMobileAccordion] = useState<string | null>(null);\n  const [hoveredLink, setHoveredLink] = useState<string | null>(null);\n\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  // Close menus when hitting Escape\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        setActiveMenu(null);\n        setMobileMenuOpen(false);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, []);\n\n  const handleMouseEnter = (menuName: string) => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    setActiveMenu(menuName);\n  };\n\n  const handleMouseLeave = () => {\n    timeoutRef.current = setTimeout(() => {\n      setActiveMenu(null);\n    }, 220);\n  };\n\n  const handleCategoryHover = (categorySlug: string) => {\n    setActiveCategory(categorySlug);\n  };\n\n  const currentCapabilities = productData[activeCategory]?.capabilities || productData.overview.capabilities;\n\n  return (\n    <>\n      <div className=\"w-full max-w-7xl mx-auto bg-[#060608] text-zinc-300 font-sans relative antialiased border-x border-b border-zinc-900 rounded-none overflow-visible transition-colors duration-300\">\n        {/* Main Header */}\n        <header className=\"w-full flex h-16 items-center justify-between px-6 z-50 relative\">\n          {/* Left: SolaceUI Logo */}\n          <div className=\"flex items-center gap-2\">\n            <a href=\"#\" className=\"flex items-center gap-2.5 focus:outline-none group/logo\">\n              <svg\n                width=\"32\"\n                height=\"19\"\n                viewBox=\"0 0 64 38\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className=\"text-white group-hover/logo:opacity-80 transition-opacity\"\n              >\n                <path\n                  d=\"M0 20.1032L39.8387 20.1032C44.7808 20.1032 48.7871 24.1095 48.7871 29.0516C48.7871 33.9937 44.7808 38 39.8387 38L1.56459e-06 38L0 20.1032Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  d=\"M63.4968 17.8968L23.6581 17.8968C18.716 17.8968 14.7097 13.8904 14.7097 8.94839C14.7097 4.00633 18.716 0 23.6581 0L63.4968 0V17.8968Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <span className=\"font-semibold text-base tracking-wider text-white select-none transition-colors duration-200 group-hover/logo:text-zinc-100\">\n                SolaceUI\n              </span>\n            </a>\n          </div>\n\n          {/* Center: Desktop Navigation Items */}\n          <nav \n            className=\"hidden lg:flex items-center gap-1 text-sm font-medium relative\"\n            onMouseLeave={() => setHoveredLink(null)}\n          >\n            {/* Product Dropdown Trigger */}\n            <div\n              className=\"relative\"\n              onMouseEnter={() => {\n                handleMouseEnter(\"product\");\n                setHoveredLink(\"product\");\n              }}\n              onMouseLeave={handleMouseLeave}\n            >\n              <button\n                ref={triggerRef}\n                onClick={() => setActiveMenu(activeMenu === \"product\" ? null : \"product\")}\n                className={`relative flex items-center gap-1.5 px-4 py-2 rounded-none text-zinc-300 hover:text-white transition-colors duration-200 outline-none cursor-pointer border border-transparent`}\n              >\n                <span className=\"relative z-10\">Product</span>\n                <ChevronDown\n                  className={`h-3.5 w-3.5 opacity-60 transition-transform duration-300 relative z-10 ${\n                    activeMenu === \"product\" ? \"rotate-180 text-white opacity-90\" : \"rotate-0 text-zinc-400\"\n                  }`}\n                />\n                {(hoveredLink === \"product\" || activeMenu === \"product\") && (\n                  <motion.div\n                    layoutId=\"nav-hover-pill\"\n                    className=\"absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                  />\n                )}\n              </button>\n            </div>\n\n            <div onMouseEnter={() => setHoveredLink(\"solutions\")}>\n              <a href=\"#\" className=\"relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200\">\n                <span className=\"relative z-10\">Solutions</span>\n                {hoveredLink === \"solutions\" && (\n                  <motion.div\n                    layoutId=\"nav-hover-pill\"\n                    className=\"absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                  />\n                )}\n              </a>\n            </div>\n\n            <div onMouseEnter={() => setHoveredLink(\"enterprise\")}>\n              <a href=\"#\" className=\"relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200\">\n                <span className=\"relative z-10\">Enterprise</span>\n                {hoveredLink === \"enterprise\" && (\n                  <motion.div\n                    layoutId=\"nav-hover-pill\"\n                    className=\"absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                  />\n                )}\n              </a>\n            </div>\n\n            <div onMouseEnter={() => setHoveredLink(\"resources\")}>\n              <a href=\"#\" className=\"relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200\">\n                <span className=\"relative z-10\">Resources</span>\n                {hoveredLink === \"resources\" && (\n                  <motion.div\n                    layoutId=\"nav-hover-pill\"\n                    className=\"absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                  />\n                )}\n              </a>\n            </div>\n\n            <div onMouseEnter={() => setHoveredLink(\"pricing\")}>\n              <a href=\"#\" className=\"relative block px-4 py-2 text-zinc-400 hover:text-white transition-colors duration-200\">\n                <span className=\"relative z-10\">Pricing</span>\n                {hoveredLink === \"pricing\" && (\n                  <motion.div\n                    layoutId=\"nav-hover-pill\"\n                    className=\"absolute inset-0 bg-zinc-900 border border-zinc-800 rounded-none -z-0\"\n                    transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                  />\n                )}\n              </a>\n            </div>\n          </nav>\n\n          {/* Right: CTA Action Buttons */}\n          <div className=\"hidden lg:flex items-center gap-4\">\n            <a href=\"#\" className=\"text-sm font-medium text-zinc-400 hover:text-white transition-colors duration-200\">\n              Sign in\n            </a>\n            <a\n              href=\"#\"\n              className=\"text-sm font-medium text-black bg-white border border-white rounded-none px-5 py-2 hover:bg-transparent hover:text-white transition-all duration-200 whitespace-nowrap\"\n            >\n              Book a demo\n            </a>\n          </div>\n\n          {/* Mobile Hamburger Menu Trigger */}\n          <button\n            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n            className=\"lg:hidden flex h-10 w-10 items-center justify-center rounded-none border border-zinc-800 bg-zinc-900/40 text-zinc-400 hover:text-white focus:outline-none cursor-pointer transition-colors duration-200\"\n          >\n            {mobileMenuOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n          </button>\n        </header>\n\n        {/* Desktop Mega Menu Dropdown */}\n        <AnimatePresence>\n          {activeMenu === \"product\" && (\n            <motion.div\n              initial={{ opacity: 0, y: 4, scale: 0.995 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: 4, scale: 0.995 }}\n              transition={{ duration: 0.15, ease: \"easeOut\" }}\n              onMouseEnter={() => handleMouseEnter(\"product\")}\n              onMouseLeave={handleMouseLeave}\n              className=\"absolute left-0 right-0 top-[72px] z-40 hidden lg:block rounded-none border border-zinc-800 bg-[#08080a] shadow-[0_40px_100px_rgba(0,0,0,0.95)] overflow-hidden\"\n            >\n              {/* Grid Layout */}\n              <div className=\"grid grid-cols-[190px_1fr_300px] divide-x divide-zinc-900/60\">\n                {/* Left Column: Product Selection */}\n                <div className=\"p-6 flex flex-col justify-between bg-[#050507]\">\n                  <div>\n                    <h3 className=\"text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-3\">\n                      Product\n                    </h3>\n                    <div className=\"space-y-1\">\n                      {productCategories.map((cat) => {\n                        const isActive = activeCategory === cat.slug;\n                        return (\n                          <button\n                            key={cat.slug}\n                            onMouseEnter={() => handleCategoryHover(cat.slug)}\n                            className={`w-full text-left px-4 py-2.5 rounded-none text-sm font-medium transition-all duration-150 relative cursor-pointer outline-none ${\n                              isActive\n                                ? \"text-white\"\n                                : \"text-zinc-500 hover:text-zinc-300\"\n                            }`}\n                          >\n                            {isActive && (\n                              <motion.div\n                                layoutId=\"active-left-pill\"\n                                className=\"absolute inset-0 bg-[#0c0c0f] border border-zinc-800 rounded-none -z-10\"\n                                transition={{ type: \"spring\", stiffness: 400, damping: 35 }}\n                              />\n                            )}\n                            {cat.label}\n                          </button>\n                        );\n                      })}\n                    </div>\n                  </div>\n\n                  <div className=\"mt-8 pt-4 border-t border-zinc-900/60\">\n                    <p className=\"text-[11px] text-zinc-500 mb-1.5 px-3\">\n                      Looking for something specific?\n                    </p>\n                    <a\n                      href=\"#\"\n                      className=\"group flex items-center gap-1.5 px-3 text-xs font-medium text-zinc-300 hover:text-white transition-colors\"\n                    >\n                      Search all features\n                      <ArrowRight className=\"h-3 w-3 text-zinc-500 group-hover:translate-x-1 transition-transform duration-200\" />\n                    </a>\n                  </div>\n                </div>\n\n                {/* Middle Column: Capabilities Grid & Popular Resources */}\n                <div className=\"p-8 flex flex-col justify-between bg-[#0c0c0f]\">\n                  <div>\n                    <h3 className=\"text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-6 px-1\">\n                      Platform Capabilities\n                    </h3>\n\n                    {/* Capabilities List with dynamic Framer Motion update */}\n                    <motion.div\n                      key={activeCategory}\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"grid grid-cols-2 xl:grid-cols-3 gap-3.5\"\n                    >\n                      {currentCapabilities.map((cap, i) => {\n                        const CapIcon = cap.icon;\n                        return (\n                          <a\n                            key={cap.title + i}\n                            href=\"#\"\n                            className=\"group p-4 rounded-none border border-zinc-900/60 bg-zinc-950/20 hover:bg-zinc-900/30 hover:border-zinc-800/80 transition-all duration-300 flex items-start gap-3 relative overflow-hidden focus:outline-none\"\n                          >\n                            <div className=\"flex-shrink-0 mt-0.5 text-zinc-500 group-hover:text-white transition-colors duration-300\">\n                              <CapIcon className=\"h-4 w-4\" />\n                            </div>\n                            <div className=\"flex-grow\">\n                              <div className=\"flex items-center gap-1.5 mb-1\">\n                                <span className=\"text-[13px] font-medium text-zinc-300 group-hover:text-white transition-colors duration-200\">\n                                  {cap.title}\n                                </span>\n                                <ArrowRight className=\"h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-white\" />\n                              </div>\n                              <p className=\"text-[11px] leading-relaxed text-zinc-500 group-hover:text-zinc-400 transition-colors duration-200\">\n                                {cap.description}\n                              </p>\n                            </div>\n                          </a>\n                        );\n                      })}\n                    </motion.div>\n                  </div>\n\n                  {/* Bottom section: Popular Resources (Typography Focused / Iconless) */}\n                  <div className=\"mt-10 pt-6 border-t border-zinc-900/60\">\n                    <h3 className=\"text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-1\">\n                      Popular Resources\n                    </h3>\n                    <div className=\"grid grid-cols-4 gap-6\">\n                      {popularResources.map((res, i) => {\n                        return (\n                          <a\n                            key={i}\n                            href=\"#\"\n                            className=\"group flex flex-col pt-1 hover:opacity-80 transition-opacity duration-200\"\n                          >\n                            <span className=\"text-xs font-semibold text-white group-hover:underline flex items-center gap-1\">\n                              {res.title}\n                              <ArrowRight className=\"h-3 w-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 text-zinc-400\" />\n                            </span>\n                            <span className=\"text-[10px] text-zinc-500 mt-1 leading-relaxed\">\n                              {res.description}\n                            </span>\n                          </a>\n                        );\n                      })}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Right Column: Customer Story */}\n                <div className=\"p-6 bg-[#08080a] flex flex-col justify-between h-full\">\n                  <div>\n                    <h3 className=\"text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400/80 mb-4 px-1\">\n                      Customer Story\n                    </h3>\n\n                    {/* Customer story card with custom SVG design */}\n                    <div className=\"relative rounded-none border border-zinc-800 bg-zinc-950/40 p-5 overflow-hidden group h-[320px] flex flex-col justify-between hover:border-zinc-700 transition-all duration-300\">\n                      {/* SVG Graphic Background */}\n                      <div className=\"absolute inset-0 z-0 opacity-40 group-hover:opacity-50 transition-opacity duration-300\">\n                        <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 300 300\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <defs>\n                            <pattern id=\"brutalist-grid\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\n                              <path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"rgba(255,255,255,0.03)\" strokeWidth=\"1\" />\n                            </pattern>\n                          </defs>\n                          <rect width=\"100%\" height=\"100%\" fill=\"url(#brutalist-grid)\" />\n                          <motion.path\n                            d=\"M0 150 L300 150\"\n                            stroke=\"rgba(255,255,255,0.08)\"\n                            strokeWidth=\"1\"\n                            animate={{\n                              scaleY: [1, 1.2, 0.8, 1],\n                              opacity: [0.5, 0.8, 0.4, 0.5]\n                            }}\n                            transition={{\n                              duration: 8,\n                              repeat: Infinity,\n                              ease: \"easeInOut\"\n                            }}\n                          />\n                        </svg>\n                      </div>\n\n                      {/* Gradient Overlay */}\n                      <div className=\"absolute inset-0 bg-gradient-to-t from-[#0b0b0d] via-[#0b0b0d]/70 to-transparent z-1\" />\n\n                      {/* Card Contents */}\n                      <div className=\"relative z-10\">\n                        <span className=\"inline-block text-[9px] font-bold tracking-widest text-zinc-400 border border-zinc-800 bg-zinc-900/50 px-2 py-0.5 rounded-none uppercase mb-4\">\n                          Customer Story\n                        </span>\n                        <h4 className=\"text-base font-semibold leading-snug text-white tracking-tight\">\n                          How Northline scaled collaboration across 12 regions\n                        </h4>\n                      </div>\n\n                      <div className=\"relative z-10 mt-auto\">\n                        <p className=\"text-xs text-zinc-400 leading-relaxed mb-4\">\n                          Northline unified their global teams on Velt—streamlining content ops and accelerating delivery.\n                        </p>\n                        <a\n                          href=\"#\"\n                          className=\"group/link inline-flex items-center gap-1.5 text-xs font-semibold text-white hover:text-zinc-200 transition-colors\"\n                        >\n                          Read the story\n                          <ArrowRight className=\"h-3.5 w-3.5 text-zinc-400 group-hover/link:translate-x-1 transition-transform\" />\n                        </a>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        {/* Mobile Menu Panel */}\n        <AnimatePresence>\n          {mobileMenuOpen && (\n            <motion.div\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: \"auto\" }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.3 }}\n              className=\"lg:hidden border-t border-zinc-900 bg-[#060608] z-30 relative overflow-hidden\"\n            >\n              <div className=\"px-6 py-6 space-y-4 max-h-[85vh] overflow-y-auto\">\n                {/* Product Accordion */}\n                <div className=\"border-b border-zinc-900 pb-4\">\n                  <button\n                    onClick={() => setMobileAccordion(mobileAccordion === \"product\" ? null : \"product\")}\n                    className=\"flex w-full items-center justify-between py-2 text-base font-semibold text-white outline-none\"\n                  >\n                    Product\n                    <ChevronDown\n                      className={`h-4 w-4 text-zinc-500 transition-transform duration-200 ${\n                        mobileAccordion === \"product\" ? \"rotate-180\" : \"\"\n                      }`}\n                    />\n                  </button>\n\n                  <AnimatePresence>\n                    {mobileAccordion === \"product\" && (\n                      <motion.div\n                        initial={{ opacity: 0, height: 0 }}\n                        animate={{ opacity: 1, height: \"auto\" }}\n                        exit={{ opacity: 0, height: 0 }}\n                        className=\"pl-2 pr-2 mt-2 space-y-4 overflow-hidden\"\n                      >\n                        {/* Inner category selector for mobile */}\n                        <div className=\"flex gap-2 overflow-x-auto pb-2 scrollbar-none\">\n                          {productCategories.map((cat) => (\n                            <button\n                              key={cat.slug}\n                              onClick={() => setActiveCategory(cat.slug)}\n                              className={`px-3 py-1.5 rounded-none text-xs font-medium whitespace-nowrap outline-none transition-all duration-150 ${\n                                activeCategory === cat.slug\n                                  ? \"bg-zinc-800 text-white border border-zinc-700/60\"\n                                  : \"bg-zinc-900/30 text-zinc-500 border border-transparent\"\n                              }`}\n                            >\n                              {cat.label}\n                            </button>\n                          ))}\n                        </div>\n\n                        {/* Capabilities in selected category */}\n                        <div className=\"grid gap-2 grid-cols-1 sm:grid-cols-2\">\n                          {currentCapabilities.slice(0, 4).map((cap, i) => {\n                            const CapIcon = cap.icon;\n                            return (\n                              <div\n                                key={i}\n                                className=\"p-3.5 rounded-none border border-zinc-900/60 bg-zinc-950/40\"\n                              >\n                                <div className=\"flex items-center gap-2.5 mb-1.5\">\n                                  <CapIcon className=\"h-4 w-4 text-zinc-400\" />\n                                  <h4 className=\"text-xs font-semibold text-zinc-200\">\n                                    {cap.title}\n                                  </h4>\n                                </div>\n                                <p className=\"text-[11px] text-zinc-500 leading-relaxed\">\n                                  {cap.description}\n                                </p>\n                              </div>\n                            );\n                          })}\n                        </div>\n\n                        <div className=\"pt-2\">\n                          <a\n                            href=\"#\"\n                            className=\"flex items-center justify-center gap-1.5 py-2.5 rounded-none border border-zinc-800 bg-zinc-900/20 text-xs font-semibold text-white hover:bg-zinc-900/40 transition-colors\"\n                          >\n                            View all product features\n                            <ArrowRight className=\"h-3 w-3\" />\n                          </a>\n                        </div>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </div>\n\n                {/* Regular Links */}\n                <a href=\"#\" className=\"block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors\">\n                  Solutions\n                </a>\n                <a href=\"#\" className=\"block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors\">\n                  Enterprise\n                </a>\n                <a href=\"#\" className=\"block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors\">\n                  Resources\n                </a>\n                <a href=\"#\" className=\"block py-2 text-base font-semibold text-zinc-400 hover:text-white transition-colors\">\n                  Pricing\n                </a>\n\n                {/* Mobile CTA buttons */}\n                <div className=\"pt-6 border-t border-zinc-900 space-y-3\">\n                  <a\n                    href=\"#\"\n                    className=\"flex h-11 w-full items-center justify-center rounded-none border border-zinc-800 text-sm font-medium text-zinc-400 hover:text-white hover:bg-zinc-900/20 transition-all\"\n                  >\n                    Sign in\n                  </a>\n                  <a\n                    href=\"#\"\n                    className=\"flex h-11 w-full items-center justify-center rounded-none bg-white text-sm font-medium text-black hover:bg-zinc-100 transition-all\"\n                  >\n                    Book a demo\n                  </a>\n                </div>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n      <NavbarOneHero />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navbar-section-1.tsx"
    }
  ],
  "type": "registry:block"
}