{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-04",
  "title": "Hero · 04",
  "description": "Hero · 04 section.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/talizen/hero/hero-04/hero-04.tsx",
      "content": "import { ArrowLeft, ArrowRight, ChevronDown, Globe2, Menu, SunMedium } from \"lucide-react\"\n\nexport type Hero04Props = {\n  className?: string\n}\n\nconst navItems = [\"Product\", \"About Us\", \"Features\", \"FAQ\", \"Contact\"]\nconst heroImage = \"https://fsu.creght.com/_assets/site/2064188570427461632/1782288320823__prism_horizon_hero.png\"\n\nexport function Hero04({ className = \"\" }: Hero04Props) {\n  return (\n    <section\n      className={`relative min-h-[720px] w-full overflow-hidden bg-[#89b1bd] text-white ${className}`}\n    >\n      <img\n        src={heroImage}\n        alt=\"\"\n        className=\"absolute inset-0 h-full w-full object-cover object-[58%_50%]\"\n      />\n      <div\n        className=\"absolute inset-0 bg-[linear-gradient(90deg,rgba(34,79,94,0.48),rgba(34,79,94,0.2)_42%,rgba(34,79,94,0.1)),linear-gradient(180deg,rgba(28,72,88,0.16),rgba(246,238,198,0.08)_72%,rgba(55,42,24,0.12))]\"\n        aria-hidden\n      />\n\n      <div className=\"relative z-10 mx-auto flex min-h-[100dvh] w-full max-w-[1440px] flex-col px-5 py-5 sm:px-8 lg:px-[58px]\">\n        <header className=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-4 min-[900px]:grid-cols-[auto_minmax(0,1fr)_auto] min-[900px]:gap-x-5\">\n          <a href=\"#\" className=\"flex items-center gap-2 text-white\">\n            <SunMedium className=\"size-7 shrink-0\" strokeWidth={2.4} aria-hidden=\"true\" />\n            <span className=\"font-serif text-[28px] italic leading-none tracking-[-0.04em] drop-shadow-sm\">\n              Prism\n            </span>\n          </a>\n\n          <nav className=\"hidden min-w-0 items-center justify-center gap-5 text-[15px] font-medium text-white/88 drop-shadow-sm min-[900px]:flex lg:gap-8 xl:gap-[54px]\">\n            {navItems.map((item) => (\n              <a key={item} href=\"#\" className=\"shrink-0 transition hover:text-white\">\n                {item}\n              </a>\n            ))}\n          </nav>\n\n          <div className=\"flex items-center justify-self-end gap-2 sm:gap-4 lg:gap-5\">\n            <details className=\"group relative min-[900px]:hidden\">\n              <summary className=\"flex min-h-11 cursor-pointer list-none items-center gap-2 rounded-full border border-white/20 bg-white/12 px-4 text-sm font-semibold text-white shadow-[0_14px_44px_rgba(31,72,86,0.18)] backdrop-blur-md transition hover:bg-white/18 [&::-webkit-details-marker]:hidden\">\n                <Menu className=\"size-4\" aria-hidden=\"true\" />\n                Menu\n                <ChevronDown className=\"size-4 transition group-open:rotate-180\" aria-hidden=\"true\" />\n              </summary>\n\n              <nav className=\"absolute right-0 top-[calc(100%+12px)] z-20 w-[220px] overflow-hidden rounded-[18px] border border-white/18 bg-[#d7e5e8]/90 p-2 text-sm font-semibold text-[#2f4852] shadow-[0_24px_70px_rgba(31,72,86,0.28)] backdrop-blur-xl\">\n                {navItems.map((item) => (\n                  <a\n                    key={item}\n                    href=\"#\"\n                    className=\"block rounded-[12px] px-4 py-3 transition hover:bg-white/64 hover:text-[#1f3943]\"\n                  >\n                    {item}\n                  </a>\n                ))}\n              </nav>\n            </details>\n\n            <button\n              type=\"button\"\n              className=\"hidden min-h-10 items-center gap-2 rounded-full px-2 text-sm font-medium text-white/90 transition hover:bg-white/10 hover:text-white sm:flex min-[900px]:px-0 min-[900px]:hover:bg-transparent\"\n              aria-label=\"Change language\"\n            >\n              <Globe2 className=\"size-4\" aria-hidden=\"true\" />\n              EN\n              <ChevronDown className=\"size-4\" aria-hidden=\"true\" />\n            </button>\n            <a\n              href=\"#\"\n              className=\"hidden min-h-11 shrink-0 items-center gap-2 rounded-full bg-white px-5 text-sm font-semibold text-[#303642] shadow-[0_14px_40px_rgba(35,71,82,0.18)] transition hover:bg-white/88 min-[520px]:inline-flex sm:px-6 sm:text-base\"\n            >\n              Sign up\n              <ArrowRight className=\"size-4\" aria-hidden=\"true\" />\n            </a>\n          </div>\n        </header>\n\n        <main className=\"grid flex-1 items-start gap-8 pb-8 pt-24 sm:pt-32 lg:grid-cols-[minmax(0,760px)_1fr] lg:pb-[82px] lg:pt-[120px]\">\n          <div className=\"min-w-0 max-w-[760px]\">\n            <h1 className=\"max-w-full text-[42px] font-light leading-[0.98] tracking-[-0.04em] drop-shadow-[0_2px_18px_rgba(27,69,83,0.2)] min-[420px]:text-[48px] sm:text-[74px] lg:text-[72px]\">\n              Unlock the <span className=\"block sm:inline\">Power</span>\n              <span className=\"mt-2 block max-w-[8.5ch] font-serif text-[44px] italic leading-[0.9] tracking-[-0.065em] min-[520px]:max-w-none min-[420px]:text-[50px] sm:text-[78px] lg:text-[74px]\">\n                Beyond the Horizon\n              </span>\n            </h1>\n\n            <p className=\"mt-7 max-w-[22rem] text-[18px] font-medium leading-[1.42] text-white/90 drop-shadow-[0_1px_12px_rgba(24,67,82,0.2)] sm:mt-8 sm:max-w-[690px] sm:text-[22px] lg:max-w-[720px]\">\n              Discover a new dimension of possibilities where innovation, imagination,\n              and technology converge to shape the future.\n            </p>\n\n            <div className=\"mt-9 flex max-w-full flex-wrap items-center gap-4 sm:gap-8\">\n              <a\n                href=\"#\"\n                className=\"inline-flex min-h-[58px] items-center justify-center rounded-full bg-white px-7 text-base font-semibold text-[#2b3035] shadow-[0_18px_54px_rgba(39,81,94,0.2)] transition hover:bg-white/90 sm:min-h-[60px] sm:px-9 sm:text-lg\"\n              >\n                Explore More\n              </a>\n              <a\n                href=\"#\"\n                className=\"inline-flex min-h-[58px] items-center gap-3 rounded-full border-2 border-white/86 bg-white/8 px-6 text-base font-semibold text-white shadow-[0_14px_42px_rgba(30,71,85,0.12)] backdrop-blur-[3px] transition hover:bg-white/18 sm:gap-4 sm:px-8 sm:text-lg\"\n              >\n                Start Journey\n                <ArrowRight className=\"size-5\" aria-hidden=\"true\" />\n              </a>\n            </div>\n          </div>\n\n          <aside className=\"hidden justify-self-end pt-1 lg:block\">\n            <div className=\"w-[242px] rounded-[16px] bg-[#a9c1cc]/58 p-3 shadow-[0_24px_80px_rgba(36,76,88,0.22)] ring-1 ring-white/12 backdrop-blur-md\">\n              <img\n                src={heroImage}\n                alt=\"\"\n                className=\"h-[187px] w-full rounded-[9px] object-cover object-[61%_65%]\"\n              />\n              <p className=\"mx-auto mt-4 max-w-[200px] pb-1 text-center text-xs font-medium leading-[1.18] text-white/62\">\n                Welcome to the next level of mindset, fuel your thoughts with clarity\n              </p>\n            </div>\n          </aside>\n        </main>\n\n        <div className=\"pointer-events-auto absolute bottom-[30%] right-5 hidden gap-6 sm:flex lg:right-[62px]\">\n          <button\n            type=\"button\"\n            className=\"grid size-10 place-items-center rounded-full bg-white/16 text-white/80 backdrop-blur-md transition hover:bg-white/26 hover:text-white\"\n            aria-label=\"Previous slide\"\n          >\n            <ArrowLeft className=\"size-6\" aria-hidden=\"true\" />\n          </button>\n          <button\n            type=\"button\"\n            className=\"grid size-10 place-items-center rounded-full bg-white/16 text-white/80 backdrop-blur-md transition hover:bg-white/26 hover:text-white\"\n            aria-label=\"Next slide\"\n          >\n            <ArrowRight className=\"size-6\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default Hero04\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}