{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-03",
  "title": "Hero · 03",
  "description": "Hero · 03 section.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/hero/hero-03/hero-03.tsx",
      "content": "import { Menu, X, Zap } from \"lucide-react\"\nimport { useState } from \"react\"\n\nexport type Hero03Props = {\n  className?: string\n}\n\nconst navItems = [\"Product\", \"Solutions\", \"Resources\", \"Customers\", \"Pricing\"]\n\nexport function Hero03({ className = \"\" }: Hero03Props) {\n  const [menuOpen, setMenuOpen] = useState(false)\n  const MenuIcon = menuOpen ? X : Menu\n\n  return (\n    <section\n      className={`relative h-screen min-h-[640px] w-full overflow-hidden bg-black text-white ${className}`}\n    >\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-40 top-52 z-0 mx-auto w-[92vw] max-w-[430px] translate-x-10 sm:bottom-6 sm:top-12 sm:w-[64vw] sm:max-w-[560px] lg:top-10 lg:max-w-[720px]\">\n        <img\n          src=\"https://ugc.talizen.com/_assets/site/2052003801170186240/1779179767214__image.png\"\n          alt=\"\"\n          className=\" w-full object-contain \"\n        />\n      </div>\n\n      <div className=\"relative z-10 mx-auto flex h-full w-full max-w-[1440px] flex-col px-5 py-5 sm:px-8 sm:py-7 lg:px-[35px] lg:py-[34px]\">\n        <header className=\"relative z-10 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 min-[880px]:grid-cols-[auto_minmax(0,1fr)_auto] min-[880px]:gap-4\">\n          <a href=\"#\" className=\"flex items-center gap-2.5\">\n            <Zap className=\"h-[22px] w-[22px] fill-white text-white\" strokeWidth={0} />\n            <span className=\"text-base font-bold leading-none tracking-[-0.01em] sm:text-lg\">\n              Fundora\n            </span>\n          </a>\n\n          <nav className=\"hidden items-center gap-6 pr-0 text-sm font-medium text-[#8d8f9a] min-[880px]:flex lg:gap-[38px] lg:pr-[13px] lg:text-base\">\n            {navItems.map((item) => (\n              <a key={item} href=\"#\" className=\"transition hover:text-white\">\n                {item}\n              </a>\n            ))}\n          </nav>\n\n          <a\n            href=\"#\"\n            className=\"hidden h-9 items-center justify-center whitespace-nowrap rounded-[4px] bg-white px-3 text-sm tracking-[0.01em] text-black transition hover:bg-zinc-200 min-[880px]:inline-flex sm:h-10 sm:px-4\"\n          >\n            Get Started Free\n          </a>\n\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-03-mobile-menu\"\n            className=\"inline-grid size-10 place-items-center rounded-[4px] border border-white/10 bg-white/8 text-white transition hover:bg-white/14 min-[880px]:hidden\"\n          >\n            <MenuIcon className=\"size-5\" aria-hidden=\"true\" />\n          </button>\n\n          <div\n            id=\"hero-03-mobile-menu\"\n            className={`absolute left-0 right-0 top-[calc(100%+12px)] z-20 overflow-hidden rounded-[6px] border border-white/10 bg-black/88 p-2 shadow-[0_24px_70px_rgba(0,0,0,0.42)] backdrop-blur-xl transition duration-200 min-[880px]: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-medium text-[#a0a2ab]\">\n              {navItems.map((item) => (\n                <a\n                  key={item}\n                  href=\"#\"\n                  onClick={() => setMenuOpen(false)}\n                  className=\"rounded-[4px] px-3 py-3 transition hover:bg-white/8 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-10 items-center justify-center rounded-[4px] bg-white px-3 text-sm text-black transition hover:bg-zinc-200\"\n            >\n              Get Started Free\n            </a>\n          </div>\n        </header>\n\n        <div className=\"relative flex flex-1 flex-col justify-between pt-14 sm:pt-20 lg:pt-[188px]\">\n          <h1 className=\"relative max-w-[11ch] font-serif text-5xl font-normal leading-[0.98] tracking-[-0.045em] text-white sm:text-6xl lg:text-7xl\">\n            The Intelligent\n            <br />\n            <span className=\"text-[#858585]\">Layer For AI</span>\n            <br />\n            <span className=\"text-[#858585]\">Systems</span>\n          </h1>\n\n          <div className=\"relative flex flex-col gap-5 pb-0 sm:flex-row sm:items-end sm:justify-between sm:gap-10 sm:pb-1\">\n            <div className=\"flex gap-10 sm:gap-16 lg:gap-[103px]\">\n              <div>\n                <p className=\"font-sans text-4xl font-normal leading-none tracking-[-0.03em] text-white\">\n                  32\n                </p>\n                <p className=\"mt-[9px] text-sm font-medium leading-none text-[#777777] sm:text-base\">\n                  Designs Shipped\n                </p>\n              </div>\n              <div>\n                <p className=\"font-sans text-4xl font-normal leading-none tracking-[-0.03em] text-white\">\n                  94%\n                </p>\n                <p className=\"mt-[9px] text-sm font-medium leading-none text-[#777777] sm:text-base\">\n                  Positive feedback\n                </p>\n              </div>\n            </div>\n\n            <p className=\"relative max-w-none text-sm font-medium leading-[1.5] text-[#777777] sm:max-w-[340px] sm:text-base sm:leading-[1.62]\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n              fringilla ut mi.\n              Phasellus enim tellus, viverra commodo bibendum in,\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default Hero03\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}