{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-molecular",
  "title": "Hero · Molecular",
  "description": "Hero · Molecular section.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/hero/hero-molecular/hero-molecular.tsx",
      "content": "import { ChevronRight, Menu, Play, X } from \"lucide-react\"\nimport { useState } from \"react\"\n\nexport type HeroMolecularProps = {\n  className?: string\n}\n\nconst navItems = [\"Technology\", \"Products\", \"Research\", \"About\"]\nconst heroImage = \"https://fsu.creght.com/project/mHbjYDMbTAO/mmoQRYDOFEl__image_2650.jpg\"\nconst logoImage = \"https://fsu.creght.com/project/mHbjYDMbTAO/mmoNwhWxTxc__image.png\"\n\nexport function HeroMolecular({ className = \"\" }: HeroMolecularProps) {\n  const [menuOpen, setMenuOpen] = useState(false)\n  const MenuIcon = menuOpen ? X : Menu\n\n  return (\n    <section\n      className={`isolate relative min-h-[720px] w-full overflow-hidden bg-black text-white ${className}`}\n    >\n      <img\n        src={heroImage}\n        alt=\"\"\n        crossOrigin=\"anonymous\"\n        referrerPolicy=\"no-referrer\"\n        className=\"absolute inset-0 z-0 h-full w-full object-cover object-[58%_43%]\"\n      />\n      <div\n        className=\"absolute inset-x-0 top-0 z-[1] h-48 bg-[radial-gradient(circle_at_54%_0%,rgba(54,111,255,0.34),transparent_44%)]\"\n        aria-hidden\n      />\n\n      <div className=\"relative z-20 mx-auto flex min-h-[100dvh] w-full max-w-[1760px] flex-col px-4 py-4 sm:px-8 sm:py-6 lg:px-14\">\n        <header className=\"relative z-40 mx-auto grid w-full max-w-[1500px] grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[36px] border border-white/12 bg-[#071234]/72 px-5 py-3 shadow-[0_24px_90px_rgba(0,38,130,0.38)] backdrop-blur-xl min-[900px]:grid-cols-[auto_minmax(0,1fr)_auto] sm:rounded-[42px] sm:px-8 sm:py-4\">\n          <a href=\"#\" className=\"flex min-w-0 items-center text-white\">\n            <img\n              src={logoImage}\n              alt=\"LUMI\"\n              crossOrigin=\"anonymous\"\n              referrerPolicy=\"no-referrer\"\n              className=\"h-9 w-auto shrink-0 sm:h-10\"\n            />\n          </a>\n\n          <nav className=\"hidden items-center justify-center gap-7 text-[15px] font-semibold text-white/68 min-[900px]:flex lg:gap-12\">\n            {navItems.map((item) => (\n              <a key={item} href=\"#\" className=\"transition hover:text-white\">\n                {item}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"flex items-center justify-end gap-3\">\n            <a\n              href=\"#\"\n              className=\"hidden min-h-12 items-center justify-center rounded-full border border-white/18 px-7 text-base font-semibold text-white shadow-[inset_0_0_24px_rgba(255,255,255,0.08)] transition hover:border-white/36 hover:bg-white/10 min-[900px]:inline-flex\"\n            >\n              Contact\n            </a>\n            <button\n              type=\"button\"\n              onClick={() => setMenuOpen((open) => !open)}\n              aria-label={menuOpen ? \"Close menu\" : \"Open menu\"}\n              aria-expanded={menuOpen}\n              aria-controls=\"hero-molecular-mobile-menu\"\n              className=\"inline-grid size-11 place-items-center rounded-full border border-white/14 bg-white/8 text-white transition hover:bg-white/14 min-[900px]:hidden\"\n            >\n              <MenuIcon className=\"size-5\" aria-hidden=\"true\" />\n            </button>\n          </div>\n\n          <div\n            id=\"hero-molecular-mobile-menu\"\n            className={`absolute left-0 right-0 top-[calc(100%+12px)] z-50 overflow-hidden rounded-[20px] border border-white/12 bg-[#071234]/92 p-2 shadow-[0_24px_80px_rgba(0,0,0,0.5)] backdrop-blur-xl transition duration-200 min-[900px]:hidden ${\n              menuOpen\n                ? \"translate-y-0 opacity-100\"\n                : \"pointer-events-none -translate-y-2 opacity-0\"\n            }`}\n          >\n            <nav className=\"grid text-sm font-semibold text-white/72\">\n              {navItems.map((item) => (\n                <a\n                  key={item}\n                  href=\"#\"\n                  onClick={() => setMenuOpen(false)}\n                  className=\"rounded-[14px] px-4 py-3 transition hover:bg-white/10 hover:text-white\"\n                >\n                  {item}\n                </a>\n              ))}\n            </nav>\n            <a\n              href=\"#\"\n              onClick={() => setMenuOpen(false)}\n              className=\"mt-2 flex min-h-11 items-center justify-center rounded-[14px] border border-white/16 bg-white/10 px-4 text-sm font-semibold text-white transition hover:bg-white/16\"\n            >\n              Contact\n            </a>\n          </div>\n        </header>\n\n        <main className=\"relative z-20 grid flex-1 items-end gap-10 pb-9 pt-20 sm:pb-14 sm:pt-24 lg:grid-cols-[minmax(0,770px)_1fr] lg:pb-20\">\n          <div className=\"max-w-[790px]\">\n            <p className=\"mb-5 inline-flex min-h-9 items-center rounded-full border border-white/12 bg-white/8 px-4 text-sm font-semibold text-white/72 backdrop-blur-md\">\n              Molecular systems platform\n            </p>\n            <h1 className=\"max-w-[12ch] text-[52px] font-light leading-[0.98] text-white min-[420px]:text-[64px] sm:text-[88px] lg:text-[96px]\">\n              Revolutionizing molecular innovation\n            </h1>\n            <p className=\"mt-6 max-w-[620px] text-lg font-medium leading-7 text-white/68 sm:text-xl sm:leading-8\">\n              Harnessing microscopic particle intelligence to transform material\n              discovery, diagnostics, and industrial biology.\n            </p>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-4 lg:justify-end lg:self-end\">\n            <a\n              href=\"#\"\n              className=\"inline-flex min-h-14 items-center justify-center gap-3 rounded-full border border-white/20 bg-white/10 px-7 text-base font-semibold text-white shadow-[0_18px_60px_rgba(0,70,255,0.24)] backdrop-blur-md transition hover:border-white/40 hover:bg-white/16\"\n            >\n              Products\n              <ChevronRight className=\"size-5\" aria-hidden=\"true\" />\n            </a>\n            <button\n              type=\"button\"\n              className=\"grid size-14 place-items-center rounded-full border border-white/20 bg-white/8 text-white shadow-[0_18px_60px_rgba(0,70,255,0.2)] backdrop-blur-md transition hover:border-white/40 hover:bg-white/16\"\n              aria-label=\"Play introduction video\"\n            >\n              <Play className=\"ml-0.5 size-5 fill-white\" strokeWidth={1.8} aria-hidden=\"true\" />\n            </button>\n          </div>\n        </main>\n      </div>\n    </section>\n  )\n}\n\nexport default HeroMolecular\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}