{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-section-2",
  "title": "Navbar Section 2",
  "description": "Solace UI navbar section block variation 2 (xAI inspired).",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/blocks/navbar-section/two/index.tsx",
      "content": "\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { ArrowRight, ChevronDown, Menu, X } from \"lucide-react\";\n\ntype NavItem = {\n  label: string;\n  href?: string;\n  panelId?: \"product\" | \"solution\" | \"pricing\";\n};\n\ntype ProductCard = {\n  title: string;\n  description?: string;\n  mediaType?: \"component\" | \"image\";\n  imageSrc?: string;\n  component?: ReactNode;\n};\n\ntype MenuPanel = {\n  id: NonNullable<NavItem[\"panelId\"]>;\n  items: ProductCard[];\n};\n\nconst navItems: NavItem[] = [\n  { label: \"Product\", panelId: \"product\" },\n  { label: \"Solution\", panelId: \"solution\" },\n  { label: \"Developers\", href: \"#\" },\n  { label: \"Company\", href: \"#\" },\n  { label: \"Pricing\", panelId: \"pricing\" },\n  { label: \"News\", href: \"#\" },\n];\n\nconst menuPanels: MenuPanel[] = [\n  {\n    id: \"product\",\n    items: [\n      { title: \"Chat\", mediaType: \"component\", component: <ChatPreview /> },\n      { title: \"Build\", mediaType: \"component\", component: <BuildPreview /> },\n      { title: \"Imagine\", description: \"Generate and edit images and videos from text\" },\n      { title: \"Voice\", description: \"Build voice agents with sub-second latency\" },\n    ],\n  },\n  {\n    id: \"solution\",\n    items: [\n      { title: \"Research\", description: \"Explore, compare, and synthesize complex work with long-context reasoning.\" },\n      { title: \"Engineering\", description: \"Move from issue to tested patch with agents that understand your codebase.\" },\n      { title: \"Operations\", description: \"Turn messy requests, documents, and workflows into structured execution.\" },\n    ],\n  },\n  {\n    id: \"pricing\",\n    items: [\n      { title: \"Free\", description: \"Start experimenting with core models, chat, and lightweight automation.\" },\n      { title: \"Pro\", description: \"Higher limits, faster responses, and advanced tools for serious builders.\" },\n      { title: \"Enterprise\", description: \"Security, admin controls, dedicated support, and custom deployment paths.\" },\n    ],\n  },\n];\n\nfunction getPanel(panelId: string | null) {\n  return menuPanels.find((panel) => panel.id === panelId);\n}\n\nfunction XaiLogo({ className = \"\" }: { className?: string }) {\n  return (\n    <svg width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} aria-hidden=\"true\">\n      <path d=\"M3.64241 13.8959L19.075 36.4167H25.9348L10.5004 13.8959H3.64241ZM10.4951 26.404L3.63362 36.4167H10.4986L13.9267 31.4113L10.4951 26.404ZM27.5039 1.58337L15.6434 18.8905L19.075 23.8995L34.3689 1.58337H27.5039ZM28.7462 12.2926V36.4167H34.3689V4.08789L28.7462 12.2926Z\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction ChatPreview() {\n  return (\n    <div className=\"relative z-10 flex w-full flex-col gap-2 rounded-lg border border-zinc-900/80 bg-zinc-950 p-2 shadow-sm\">\n      <div className=\"flex justify-start gap-1.5\">\n        <span className=\"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-[8px] font-bold text-zinc-400\">U</span>\n        <div className=\"max-w-[85%] rounded bg-white p-1.5 text-[8px] font-medium leading-normal text-black\">\n          I am building a block library featuring xai, what kind of ui blocks should i design\n        </div>\n      </div>\n      <div className=\"flex justify-start gap-1.5\">\n        <span className=\"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-600 text-[8px] font-bold text-white\">G</span>\n        <div className=\"max-w-[85%] rounded bg-blue-600 p-1.5 text-[8px] font-medium leading-normal text-white\">\n          Design cosmic themes, Grok chat blocks, AI response cards, and sharp truth-seeking components.\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction BuildPreview() {\n  return (\n    <div className=\"relative z-10 w-full space-y-1.5 overflow-hidden rounded-lg border border-zinc-900/80 bg-zinc-950 p-2 font-mono text-[7.5px] leading-normal text-zinc-400 shadow-sm\">\n      <div className=\"flex items-center justify-between text-zinc-500\"><span>Find session references</span><span className=\"rounded bg-zinc-900 px-1 py-px text-[6.5px] text-zinc-400\">explore</span></div>\n      <div className=\"flex items-center gap-1 text-zinc-500\"><span className=\"h-1 w-1 rounded-full bg-emerald-500\" />Thought for 4.1s</div>\n      <div className=\"overflow-hidden rounded border border-zinc-900 bg-[#09090b] text-[6.5px]\">\n        <div className=\"border-b border-zinc-900/60 bg-[#0c0c0e] px-2 py-0.5 text-zinc-500\">Edit src/middleware/auth.ts</div>\n        <div className=\"space-y-px p-1 font-mono text-zinc-400\">\n          <p><span className=\"mr-1 text-zinc-600\">42</span> export async function handler(req) &#123;</p>\n          <p className=\"bg-red-950/20 text-red-300\"><span className=\"mr-1 text-zinc-600\">43</span> - const token = extract(req);</p>\n          <p className=\"bg-emerald-950/30 text-emerald-300\"><span className=\"mr-1 text-zinc-600\">44</span> + const token = extractRequest(req);</p>\n          <p className=\"text-zinc-300\"><span className=\"mr-1 text-zinc-600\">45</span> if (!token) return unauthorized();</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction PanelCard({ item, compact = false }: { item: ProductCard; compact?: boolean }) {\n  if (item.component || item.imageSrc) {\n    return (\n      <div className=\"group relative flex h-[180px] flex-col justify-between overflow-hidden rounded-xl border border-zinc-900 bg-zinc-950/40 p-3 transition-all duration-300 hover:border-zinc-800 hover:bg-zinc-900/15\">\n        <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(59,130,246,0.045),transparent_50%)] opacity-0 transition-opacity group-hover:opacity-100\" />\n        {item.mediaType === \"image\" && item.imageSrc ? (\n          <img src={item.imageSrc} alt=\"\" className=\"relative z-10 h-full w-full rounded-lg object-cover\" />\n        ) : item.component}\n        <span className=\"relative z-10 mt-auto block text-center text-xs font-medium text-zinc-400 transition-colors group-hover:text-white\">{item.title}</span>\n      </div>\n    );\n  }\n\n  return (\n    <a href=\"#\" className={compact ? \"group relative flex h-[86px] flex-col justify-center overflow-hidden rounded-xl border border-zinc-900 bg-zinc-950/40 p-3 transition-all hover:border-zinc-800 hover:bg-zinc-900/15\" : \"group relative flex min-h-[132px] flex-col justify-between overflow-hidden rounded-xl border border-zinc-900 bg-zinc-950/40 p-4 transition-all hover:border-zinc-800 hover:bg-zinc-900/15\"}>\n      <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(59,130,246,0.025),transparent_50%)] opacity-0 transition-opacity group-hover:opacity-100\" />\n      <div className=\"relative z-10\">\n        <h4 className={compact ? \"text-sm font-medium text-white\" : \"text-base font-medium text-white\"}>{item.title}</h4>\n        <p className=\"mt-1 text-[10px] leading-normal text-zinc-500 transition-colors group-hover:text-zinc-400\">{item.description}</p>\n      </div>\n      {!compact && <span className=\"relative z-10 mt-5 text-[10px] font-medium text-zinc-500\">Explore <ArrowRight className=\"ml-1 inline size-3\" /></span>}\n    </a>\n  );\n}\n\nfunction DropdownPanel({ panel }: { panel: MenuPanel }) {\n  if (panel.id === \"product\") {\n    const [chat, build, imagine, voice] = panel.items;\n    return (\n      <div className=\"grid grid-cols-[1.2fr_1.2fr_1fr] gap-4 bg-black p-4\">\n        <PanelCard item={chat} />\n        <PanelCard item={build} />\n        <div className=\"flex flex-col gap-2\"><PanelCard item={imagine} compact /><PanelCard item={voice} compact /></div>\n      </div>\n    );\n  }\n\n  return <div className=\"grid grid-cols-3 gap-4 bg-black p-4\">{panel.items.map((item) => <PanelCard key={item.title} item={item} />)}</div>;\n}\n\nexport default function NavbarTwo() {\n  const [activeMenu, setActiveMenu] = useState<string | null>(null);\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [mobileActiveMenu, setMobileActiveMenu] = useState<string | null>(null);\n  const activePanel = getPanel(activeMenu);\n\n  const toggleMenu = (menuName: string) => setActiveMenu(activeMenu === menuName ? null : menuName);\n\n  return (\n    <div className=\"relative flex min-h-[720px] w-full select-none flex-col items-center overflow-hidden bg-white px-6 pb-6 pt-0 font-sans text-zinc-900 transition-colors duration-300\">\n      <div className=\"relative z-30 hidden h-12 w-full max-w-7xl items-center justify-between lg:flex\">\n        <a href=\"#\" className=\"flex items-center text-black\"><XaiLogo /></a>\n\n        <div className=\"absolute left-1/2 top-0 hidden w-[700px] -translate-x-1/2 lg:block\" style={{ filter: \"drop-shadow(0 12px 20px rgba(0, 0, 0, 0.18))\" }}>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"pointer-events-none absolute -left-[18px] top-0 z-10 text-black\"><path d=\"M 20 20 L 20 0 L 0 0 C 11.046 0 20 11.046 20 20 Z\" fill=\"currentColor\" /></svg>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className=\"pointer-events-none absolute -right-[18px] top-0 z-10 text-black\"><path d=\"M 0 0 L 20 0 C 8.954 0 0 8.954 0 20 Z\" fill=\"currentColor\" /></svg>\n\n          <motion.div animate={{ height: activePanel ? 260 : 48 }} transition={{ type: \"spring\", stiffness: 300, damping: 28 }} className=\"relative flex w-full flex-col justify-start overflow-hidden bg-black\" style={{ borderBottomLeftRadius: \"16px\", borderBottomRightRadius: \"16px\" }}>\n            <div className=\"z-20 flex h-12 items-center justify-center px-6\">\n              <nav className=\"flex w-full items-center justify-center gap-5 text-xs font-medium text-zinc-400\">\n                {navItems.map((item) => item.panelId ? (\n                  <button key={item.label} onClick={() => toggleMenu(item.panelId!)} className={`flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 outline-none transition-all hover:text-white ${activeMenu === item.panelId ? \"bg-[#18181b] text-white\" : \"text-zinc-400\"}`}>\n                    {item.label}<ChevronDown className={`h-3.5 w-3.5 opacity-70 transition-transform duration-300 ${activeMenu === item.panelId ? \"rotate-180\" : \"\"}`} />\n                  </button>\n                ) : <a key={item.label} href={item.href} className=\"px-2 py-1 text-zinc-400 transition-colors duration-250 hover:text-white\">{item.label}</a>)}\n              </nav>\n            </div>\n\n            <AnimatePresence mode=\"wait\">\n              {activePanel && (\n                <motion.div key={activePanel.id} initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} transition={{ duration: 0.18 }} className=\"overflow-hidden border-t border-zinc-900 bg-black\">\n                  <DropdownPanel panel={activePanel} />\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        </div>\n\n        <a href=\"#\" className=\"group flex items-center gap-1 rounded-lg bg-blue-600 px-3.5 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-blue-700\">Try it now<ArrowRight className=\"h-3 w-3 transition-transform group-hover:translate-x-0.5\" /></a>\n      </div>\n\n      <div className=\"relative z-30 flex h-14 w-full items-center justify-between lg:hidden\">\n        <a href=\"#\" className=\"text-black\"><XaiLogo /></a>\n        <div className=\"flex items-center gap-2\">\n          <a href=\"#\" className=\"group flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm\">Try it now<ArrowRight className=\"h-3 w-3\" /></a>\n          <button onClick={() => setMobileOpen((open) => !open)} className=\"grid size-9 place-items-center rounded-lg border border-zinc-200 text-zinc-900\">{mobileOpen ? <X className=\"size-4\" /> : <Menu className=\"size-4\" />}</button>\n        </div>\n      </div>\n\n      <AnimatePresence>\n        {mobileOpen && (\n          <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: \"auto\" }} exit={{ opacity: 0, height: 0 }} className=\"relative z-20 w-full overflow-hidden rounded-xl bg-black text-white shadow-xl lg:hidden\">\n            <div className=\"grid gap-1 p-4\">\n              {navItems.map((item) => {\n                const panel = item.panelId ? getPanel(item.panelId) : null;\n                const isOpen = mobileActiveMenu === item.panelId;\n\n                if (!item.panelId) {\n                  return <a key={item.label} href={item.href || \"#\"} className=\"flex items-center justify-between rounded-lg px-3 py-2 text-sm text-zinc-300 hover:bg-white/10 hover:text-white\">{item.label}</a>;\n                }\n\n                return (\n                  <div key={item.label}>\n                    <button type=\"button\" onClick={() => setMobileActiveMenu(isOpen ? null : item.panelId!)} className=\"flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm text-zinc-300 hover:bg-white/10 hover:text-white\">\n                      {item.label}\n                      <ChevronDown className={`size-4 transition-transform ${isOpen ? \"rotate-180\" : \"\"}`} />\n                    </button>\n                    <AnimatePresence initial={false}>\n                      {isOpen && panel && (\n                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: \"auto\", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.2 }} className=\"overflow-hidden\">\n                          <div className=\"mx-3 mb-2 grid gap-2 border-l border-white/10 pl-3 pt-1\">\n                            {panel.items.map((panelItem) => (\n                              <a key={panelItem.title} href=\"#\" className=\"rounded-md px-3 py-2 hover:bg-white/5\">\n                                <span className=\"block text-sm font-medium text-white\">{panelItem.title}</span>\n                                {panelItem.description && <span className=\"mt-0.5 block text-xs leading-5 text-zinc-500\">{panelItem.description}</span>}\n                              </a>\n                            ))}\n                          </div>\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </div>\n                );\n              })}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n\n      <div className=\"relative z-10 mt-14 w-full max-w-[700px] bg-white text-center lg:mt-14\">\n        <div className=\"flex flex-col items-center px-6 pt-10\">\n          <a href=\"#\" className=\"group mb-8 inline-flex items-center gap-2 rounded-full border border-neutral-200 px-2 py-1 text-sm text-neutral-400 transition-colors hover:text-black md:px-3\"><span className=\"rounded-full bg-neutral-200 px-2 py-0.5 text-neutral-500 transition-colors group-hover:bg-neutral-900 group-hover:text-white\">Hiring</span>Apply for Design Engineers<ArrowRight className=\"size-3 text-neutral-400 transition-transform group-hover:translate-x-1 group-hover:text-black\" /></a>\n          <h1 className=\"max-w-2xl text-3xl font-semibold tracking-tighter text-black md:text-5xl\">Frontier AI models for <br className=\"hidden md:block\" />everything you build</h1>\n          <p className=\"mt-4 max-w-lg text-center text-sm leading-relaxed text-black/60 md:text-lg\">Autonomous agents that debug, refactor, and ship features while you focus on architecture and strategy</p>\n          <div className=\"mb-10 mt-6 flex flex-row gap-4\"><a href=\"#\" className=\"flex min-w-[100px] items-center justify-center rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 md:min-w-[190px] md:text-lg\">Get API Access</a><a href=\"#\" className=\"flex min-w-[100px] items-center justify-center rounded-lg border border-neutral-300 px-3 py-1.5 text-sm font-medium text-black transition-colors hover:bg-gray-50 md:min-w-[190px] md:text-lg\">View Documentation</a></div>\n        </div>\n        <div className=\"relative overflow-hidden rounded-b-[16px] bg-gray-50\"><img src=\"https://assets.solaceui.com/solaceui-hero-light.png\" alt=\"Dashboard Preview\" className=\"h-auto w-full object-cover object-top\" /><div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white via-white/80 to-transparent\" /></div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navbar-section-2.tsx"
    }
  ],
  "type": "registry:block"
}