"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "motion/react"; import { ChevronDown, ArrowRight, Menu, X, Layers, Lock, Settings, Zap, BarChart2, Users, Code, Sparkles, BookOpen, Terminal, Activity, FileText, } from "lucide-react"; // Types interface Capability { title: string; description: string; icon: React.ComponentType<{ className?: string }>; } interface ProductItem { id: string; title: string; description: string; capabilities: Capability[]; } // Data for dynamic capabilities list based on left item hover const productData: Record = { overview: { id: "overview", title: "Overview", description: "Our complete suite of visual collaboration components.", capabilities: [ { title: "Realtime Collaboration", description: "Work together instantly with live presence and state sync.", icon: Users, }, { title: "Content & Editing", description: "Create, refine, and ship with powerful collaborative tools.", icon: Sparkles, }, { title: "Workflow Automation", description: "Automate processes and reduce friction across teams.", icon: Zap, }, { title: "Permissions & Security", description: "Enterprise-grade security with granular access controls.", icon: Lock, }, { title: "Developer Platform", description: "Flexible APIs and SDKs for custom builds and extensions.", icon: Code, }, { title: "Insights & Analytics", description: "Gain clarity with advanced analytics and team reporting.", icon: BarChart2, }, ], }, "core-platform": { id: "core-platform", title: "Core Platform", description: "The underlying syncing and infrastructure layer.", capabilities: [ { title: "Sub-millisecond Sync", description: "Global sync engine with ultra-low latency WebSocket delivery.", icon: Zap, }, { title: "Conflict Resolution", description: "Advanced CRDT operations resolving state collisions automatically.", icon: Layers, }, { title: "Offline Syncing", description: "Local database caching with seamless background catch-up.", icon: Activity, }, { title: "Scale Infrastructure", description: "Supporting millions of concurrent users per room effortlessly.", icon: Users, }, { title: "Edge Delivery", description: "Globally distributed state servers at the network edge.", icon: Settings, }, { title: "Audit Logging", description: "Comprehensive historical logs for compliance and debugging.", icon: FileText, }, ], }, collaboration: { id: "collaboration", title: "Collaboration", description: "Visual elements to make multiplayer feel native.", capabilities: [ { title: "Multiplayer Cursors", description: "Render high-frequency pointer movements in real-time.", icon: Users, }, { title: "Live Comments & Chat", description: "Contextual conversation threads anywhere on your canvas.", icon: Sparkles, }, { title: "Presence Avatars", description: "Display active online profiles with custom state badges.", icon: Users, }, { title: "Co-Browsing", description: "Direct follow mode matching another user's viewport scale.", icon: Zap, }, { title: "Interactive Polls", description: "Conduct rapid visual voting inside live documents.", icon: BarChart2, }, { title: "Reactions & Emotes", description: "Lightweight floating bubbles for rapid user sentiment.", icon: Sparkles, }, ], }, automation: { id: "automation", title: "Automation", description: "Rules and engines that drive process workflows.", capabilities: [ { title: "State Triggers", description: "Launch third-party events when document properties modify.", icon: Zap, }, { title: "Workflow Builder", description: "No-code sequence editors to configure document review cycles.", icon: Settings, }, { title: "Slack Connectors", description: "Pipe comments and updates straight to channel threads.", icon: Users, }, { title: "Edge Handlers", description: "Run custom JavaScript state mutations closer to users.", icon: Code, }, { title: "Webhooks Pipeline", description: "Secure, retried delivery of workspace payloads.", icon: Lock, }, { title: "Scheduled Cleanup", description: "Auto-archive empty rooms and clear stale sessions.", icon: Activity, }, ], }, "developer-tools": { id: "developer-tools", title: "Developer Tools", description: "SDKs, debuggers, and local emulators.", capabilities: [ { title: "Dev Console", description: "Inspect active memory nodes, frame rates, and payloads.", icon: Terminal, }, { title: "Local Emulator", description: "Run disconnected environments to verify collaboration logic.", icon: Code, }, { title: "CLI Scaffold", description: "Generate room structures and register component integrations.", icon: Terminal, }, { title: "React Hooks", description: "Declarative React state binding with auto-throttling.", icon: Code, }, { title: "Telemetry Dashboard", description: "Real-time metrics on packet loss and client disconnection rates.", icon: BarChart2, }, { title: "Multi-Client Test", description: "Simulate multi-user loads in a single web browser console.", icon: Users, }, ], }, integrations: { id: "integrations", title: "Integrations", description: "Sync content across your operational ecosystem.", capabilities: [ { title: "Notion Wiki Sync", description: "Export room summaries and decisions into your team workspace.", icon: FileText, }, { title: "Figma Connect", description: "Pull active frames and canvas layouts directly into Velt rooms.", icon: Layers, }, { title: "GitHub Actions", description: "Assert schema compatibility rules inside code merge cycles.", icon: Code, }, { title: "Jira / Linear Link", description: "Turn floating comment flags directly into tickets.", icon: Activity, }, { title: "Auth0 Single Sign-on", description: "Map enterprise identity providers with token pass-throughs.", icon: Lock, }, { title: "Stripe Billing Seats", description: "Calculate active monthly collaborating team member accounts.", icon: BarChart2, }, ], }, security: { id: "security", title: "Security", description: "Enterprise compliance and privacy.", capabilities: [ { title: "Granular ACLs", description: "Declare cell-level permissions based on signed user traits.", icon: Lock, }, { title: "JWT Authorization", description: "Secure socket handshakes using short-lived cryptographed keys.", icon: Lock, }, { title: "SOC2 Compliance", description: "Fully audited server structures and operational boundaries.", icon: FileText, }, { title: "E2E Encryption", description: "Encrypt document payloads client-side before sync delivery.", icon: ShieldCheckIcon, }, { title: "Isolated Private VPC", description: "Deploy dedicated client clusters on isolated private subnets.", icon: Layers, }, { title: "DDoS Mitigation", description: "Protect websocket targets with edge connection throttling.", icon: Zap, }, ], }, analytics: { id: "analytics", title: "Analytics", description: "Track room interactions and user engagement.", capabilities: [ { title: "Occupancy Heatmaps", description: "Locate canvas regions that receive the highest user focus.", icon: BarChart2, }, { title: "MAU Dashboard", description: "Graph active collaborative users and channel counts.", icon: Activity, }, { title: "Message Logs", description: "Query packet logs for custom user interactions.", icon: FileText, }, { title: "Retention Analytics", description: "Measure how active users are returning to multiplayer sessions.", icon: Users, }, { title: "Latency Reporting", description: "Track round-trip ping time mapped by user geographic location.", icon: Zap, }, { title: "Excel/CSV Exports", description: "Automate delivery of collaboration traffic files.", icon: FileText, }, ], }, }; // ShieldCheck Icon Fallback helper function ShieldCheckIcon({ className }: { className?: string }) { return ( ); } // Popular resources const popularResources = [ { title: "Platform Docs", description: "Technical guides & references", icon: BookOpen, }, { title: "API Reference", description: "Explore endpoints & schemas", icon: Code, }, { title: "Release Notes", description: "What's new and improved", icon: Sparkles, }, { title: "System Status", description: "Live uptime & performance", icon: Activity, }, ]; // Left navigation menu categories list const productCategories = [ { slug: "overview", label: "Overview" }, { slug: "core-platform", label: "Core Platform" }, { slug: "collaboration", label: "Collaboration" }, { slug: "automation", label: "Automation" }, { slug: "developer-tools", label: "Developer Tools" }, { slug: "integrations", label: "Integrations" }, { slug: "security", label: "Security" }, { slug: "analytics", label: "Analytics" }, ]; const trustedLogos = ["NVIDIA", "Column", "GitHub", "Nike", "Lemon Squeezy"]; function NavbarOneHero() { return (

Building visual tools should be fast and simple.

Beautiful visual components ready out of the box to design and build stunning visual applications.

Get started for free Learn more

{/* Big Dashboard Mockup Graphics */}

{/* Inner Dashboard Layout */}

{/* Trusted Logos Footer */}

Trusted by modern product teams

{trustedLogos.map((logo) => ( {logo} ))}

); } export default function NavbarOne() { const [activeMenu, setActiveMenu] = useState(null); const [activeCategory, setActiveCategory] = useState("overview"); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileAccordion, setMobileAccordion] = useState(null); const [hoveredLink, setHoveredLink] = useState(null); const timeoutRef = useRef(null); const triggerRef = useRef(null); // Close menus when hitting Escape useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { setActiveMenu(null); setMobileMenuOpen(false); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); const handleMouseEnter = (menuName: string) => { if (timeoutRef.current) clearTimeout(timeoutRef.current); setActiveMenu(menuName); }; const handleMouseLeave = () => { timeoutRef.current = setTimeout(() => { setActiveMenu(null); }, 220); }; const handleCategoryHover = (categorySlug: string) => { setActiveCategory(categorySlug); }; const currentCapabilities = productData[activeCategory]?.capabilities || productData.overview.capabilities; return ( <>

{/* Main Header */}

{/* Left: SolaceUI Logo */}

SolaceUI

{/* Center: Desktop Navigation Items */}

setHoveredLink(null)} > {/* Product Dropdown Trigger */}

{ handleMouseEnter("product"); setHoveredLink("product"); }} onMouseLeave={handleMouseLeave} >

setHoveredLink("solutions")}> Solutions {hoveredLink === "solutions" && ( )}

setHoveredLink("enterprise")}> Enterprise {hoveredLink === "enterprise" && ( )}

setHoveredLink("resources")}> Resources {hoveredLink === "resources" && ( )}

setHoveredLink("pricing")}> Pricing {hoveredLink === "pricing" && ( )}

{/* Right: CTA Action Buttons */}

{/* Mobile Hamburger Menu Trigger */}

{/* Desktop Mega Menu Dropdown */} {activeMenu === "product" && ( handleMouseEnter("product")} onMouseLeave={handleMouseLeave} 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" > {/* Grid Layout */}

{/* Left Column: Product Selection */}

Product

{productCategories.map((cat) => { const isActive = activeCategory === cat.slug; return ( ); })}

Looking for something specific?

Search all features

{/* Middle Column: Capabilities Grid & Popular Resources */}

Platform Capabilities

{/* Capabilities List with dynamic Framer Motion update */} {currentCapabilities.map((cap, i) => { const CapIcon = cap.icon; return (

{cap.title}

{cap.description}

); })}

{/* Bottom section: Popular Resources (Typography Focused / Iconless) */}

Popular Resources

{popularResources.map((res, i) => { return ( {res.title} {res.description} ); })}

{/* Right Column: Customer Story */}

Customer Story

{/* Customer story card with custom SVG design */}

{/* SVG Graphic Background */}

{/* Gradient Overlay */}

{/* Card Contents */}

Customer Story

How Northline scaled collaboration across 12 regions

Northline unified their global teams on Velt—streamlining content ops and accelerating delivery.

Read the story

)} {/* Mobile Menu Panel */} {mobileMenuOpen && (

{/* Product Accordion */}

{mobileAccordion === "product" && ( {/* Inner category selector for mobile */}

{productCategories.map((cat) => ( ))}

{/* Capabilities in selected category */}

{currentCapabilities.slice(0, 4).map((cap, i) => { const CapIcon = cap.icon; return (

{cap.title}

{cap.description}

); })}

View all product features

)}

{/* Regular Links */} Solutions Enterprise Resources Pricing {/* Mobile CTA buttons */}

)}

); }

Navbar Section