{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-01",
  "type": "registry:block",
  "title": "Product Hero with Preview",
  "description": "A product landing hero with an editorial headline, two calls to action, and a media workspace preview.",
  "author": "UIBlocks contributors",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react@0.577.0"
  ],
  "files": [
    {
      "path": "content/components/marketing/hero-01.tsx",
      "type": "registry:component",
      "target": "@components/uiblocks/hero-01/hero-01.tsx",
      "content": "import {\n  ArrowDown,\n  ArrowRight,\n  Check,\n  CheckCheck,\n  FileVideo,\n  Film,\n  Play,\n  Sparkles,\n} from \"lucide-react\";\n\nexport type Hero01Props = {\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n  primaryLabel?: string;\n  primaryHref?: string;\n  secondaryLabel?: string;\n  secondaryHref?: string;\n};\n\n/** Split hero with an entirely code-rendered, asset-free product illustration. */\nexport default function Hero01({\n  eyebrow = \"A little less busywork. A lot more creating.\",\n  title = \"Your files. Ready for what’s next.\",\n  description = \"One calm workspace to organize, prepare, and export your media. Bring the files. Keep your focus on the good part.\",\n  primaryLabel = \"Explore the workspace\",\n  primaryHref = \"/preview/recipes/tool-workspace\",\n  secondaryLabel = \"See how it works\",\n  secondaryHref = \"/preview/recipes/tool-landing#features\",\n}: Hero01Props) {\n  return (\n    <section className=\"w-full overflow-hidden bg-white text-zinc-950 dark:bg-zinc-950 dark:text-white\">\n      <div className=\"mx-auto grid max-w-6xl items-center gap-14 px-6 py-20 md:py-28 lg:grid-cols-[1fr_1.08fr] lg:gap-16 lg:px-8\">\n        <div>\n          <p className=\"mb-6 inline-flex items-center gap-2 text-xs font-medium tracking-wide text-violet-600 dark:text-violet-400\">\n            <span className=\"size-1.5 rounded-full bg-violet-500\" />\n            {eyebrow}\n          </p>\n          <h1 className=\"max-w-[12ch] text-balance text-5xl font-semibold leading-[1.08] tracking-[-0.055em] sm:text-6xl lg:text-[4.25rem]\">\n            {title}\n          </h1>\n          <p className=\"mt-6 max-w-md text-pretty text-base leading-7 text-zinc-500 dark:text-zinc-400\">\n            {description}\n          </p>\n          <div className=\"mt-8 flex flex-wrap items-center gap-x-6 gap-y-4\">\n            <a\n              className=\"inline-flex min-h-11 items-center gap-3 rounded-lg bg-violet-600 px-5 py-3 text-sm font-medium text-white shadow-sm shadow-violet-600/15 transition-colors hover:bg-violet-700 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-violet-500\"\n              href={primaryHref}\n            >\n              {primaryLabel}\n              <ArrowRight aria-hidden=\"true\" className=\"size-4\" />\n            </a>\n            <a\n              className=\"inline-flex min-h-11 items-center gap-2 rounded text-sm font-medium text-zinc-600 hover:text-zinc-950 focus-visible:outline-2 focus-visible:outline-violet-500 dark:text-zinc-300 dark:hover:text-white\"\n              href={secondaryHref}\n            >\n              {secondaryLabel}\n              <ArrowDown aria-hidden=\"true\" className=\"size-3.5\" />\n            </a>\n          </div>\n          <p className=\"mt-7 flex items-center gap-2 text-xs text-zinc-400\">\n            <CheckCheck aria-hidden=\"true\" className=\"size-4 text-zinc-400\" />\n            Interactive demo · No account needed\n          </p>\n        </div>\n        <div className=\"relative min-w-0 scroll-mt-8\" id=\"product-preview\">\n          <div\n            aria-hidden=\"true\"\n            className=\"absolute -inset-8 rounded-[3rem] bg-violet-50/70 dark:bg-violet-950/20\"\n          />\n          <div className=\"relative overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-[0_20px_60px_-25px_rgba(30,41,59,0.2)] dark:border-zinc-700 dark:bg-zinc-900\">\n            <div className=\"flex items-center justify-between border-b border-zinc-100 px-4 py-3 dark:border-zinc-800\">\n              <div aria-hidden=\"true\" className=\"flex gap-1.5\">\n                <span className=\"size-2 rounded-full bg-zinc-200 dark:bg-zinc-700\" />\n                <span className=\"size-2 rounded-full bg-zinc-200 dark:bg-zinc-700\" />\n                <span className=\"size-2 rounded-full bg-zinc-200 dark:bg-zinc-700\" />\n              </div>\n              <span className=\"font-mono text-[10px] text-zinc-400\">\n                frame / workspace\n              </span>\n              <span className=\"rounded border border-zinc-200 px-1.5 py-0.5 text-[9px] font-medium tracking-wider text-zinc-400 dark:border-zinc-700\">\n                DEMO\n              </span>\n            </div>\n            <div className=\"p-5 sm:p-7\">\n              <div className=\"mb-5 flex items-start justify-between gap-3\">\n                <div>\n                  <p className=\"text-sm font-semibold\">The next big idea</p>\n                  <p className=\"mt-1 text-[11px] text-zinc-400\">\n                    A place for work in progress.\n                  </p>\n                </div>\n                <span className=\"rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-medium text-violet-600 dark:bg-violet-500/10 dark:text-violet-300\">\n                  Personal project\n                </span>\n              </div>\n              <div className=\"relative grid aspect-[1.65] place-items-center overflow-hidden rounded-lg bg-zinc-950\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"absolute inset-0 bg-[radial-gradient(ellipse_at_25%_90%,#7c3aed_0%,transparent_50%),radial-gradient(ellipse_at_90%_10%,#71717a_0%,transparent_50%)] opacity-75\"\n                />\n                <div\n                  aria-hidden=\"true\"\n                  className=\"absolute size-32 rotate-[-25deg] rounded-[1.5rem] border border-white/30 bg-white/10 shadow-xl backdrop-blur-md sm:size-40\"\n                />\n                <div\n                  aria-hidden=\"true\"\n                  className=\"absolute size-32 translate-x-8 translate-y-5 rotate-[15deg] rounded-[1.5rem] border border-white/30 bg-white/10 shadow-xl backdrop-blur-md sm:size-40\"\n                />\n                <span className=\"relative grid size-12 place-items-center rounded-full border border-white/30 bg-white/15 text-white backdrop-blur\">\n                  <Play\n                    aria-hidden=\"true\"\n                    className=\"ml-0.5 size-4 fill-current\"\n                  />\n                </span>\n                <div className=\"absolute inset-x-3 bottom-3 flex items-center justify-between rounded bg-black/20 px-2 py-1.5 font-mono text-[9px] text-white/80\">\n                  <span>launch-film.mp4</span>\n                  <span>00:42 / 01:28</span>\n                </div>\n              </div>\n              <div className=\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 p-3 dark:border-zinc-700\">\n                <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-500 dark:bg-violet-500/10\">\n                  <FileVideo aria-hidden=\"true\" className=\"size-4\" />\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-[11px] font-medium\">\n                    launch-film.mp4\n                  </p>\n                  <p className=\"mt-1 text-[10px] text-zinc-400\">\n                    MP4 · 1080p · Ready to export\n                  </p>\n                </div>\n                <span className=\"grid size-5 shrink-0 place-items-center rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10\">\n                  <Check aria-hidden=\"true\" className=\"size-3\" />\n                </span>\n              </div>\n              <div className=\"mt-3 grid grid-cols-3 gap-2 text-center text-[10px] text-zinc-500 dark:text-zinc-400\">\n                <span className=\"flex items-center justify-center gap-1.5 rounded border border-zinc-100 py-2 dark:border-zinc-800\">\n                  <Film aria-hidden=\"true\" className=\"size-3\" />\n                  Prepare\n                </span>\n                <span className=\"flex items-center justify-center gap-1.5 rounded border border-zinc-100 py-2 dark:border-zinc-800\">\n                  <Sparkles aria-hidden=\"true\" className=\"size-3\" />\n                  Organize\n                </span>\n                <span className=\"flex items-center justify-center gap-1.5 rounded border border-zinc-100 py-2 dark:border-zinc-800\">\n                  <CheckCheck aria-hidden=\"true\" className=\"size-3\" />\n                  Export\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "path": "licenses/hero-01/LICENSE.txt",
      "type": "registry:file",
      "target": "@components/uiblocks/hero-01/LICENSE.txt",
      "content": "UIBlocks original block: Copyright (c) 2026 UIBlocks contributors. Licensed under the MIT License below.\n\nIncludes source from Blocks.so and its bundled primitives.\nSource: https://github.com/ephraimduncan/blocks\nRevision: 3f759d5171c2391253ec4c772e9e5b3db2bc7c7f\n\nMIT License\n\nCopyright (c) 2025 Ephraim Duncan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
    }
  ],
  "categories": [
    "marketing",
    "marketing",
    "clean-saas"
  ],
  "docs": "Import the default component from @components/uiblocks/hero-01/hero-01.tsx. React 19, Tailwind CSS 4, and the standard shadcn CSS theme variables are required. This block is framework-independent React and works in TanStack Start, Vite, and Next.js projects. Connect links or navigation callbacks to your host application. Demo avatars use public image URLs; replace them with your own assets. Demo handlers must be connected to your product. See https://uiblocks.org/marketing/hero-01 for content guidelines and source attribution.",
  "meta": {
    "kind": "block",
    "version": "0.1.0",
    "source": {
      "name": "UIBlocks",
      "url": "https://uiblocks.org",
      "license": "MIT",
      "author": "UIBlocks contributors",
      "revision": "uiblocks-v0.1.0"
    },
    "license": "MIT",
    "style": "clean-saas",
    "pageType": "marketing",
    "featured": true,
    "tags": [
      "hero",
      "landing",
      "product",
      "video",
      "preview",
      "split",
      "首屏",
      "官网",
      "视频",
      "预览",
      "长标题"
    ],
    "contentGuidelines": [
      "Aim for two to three headline lines; test longer Chinese copy on mobile.",
      "Keep the introduction to two short sentences and use at most two calls to action."
    ],
    "recommendedWith": [
      "navigation-01",
      "logo-cloud-01",
      "features-01"
    ],
    "entry": "@components/uiblocks/hero-01/hero-01.tsx",
    "exportName": "default",
    "frameworkIndependent": true,
    "frameworkDependencies": [],
    "compatibleHosts": [
      "react",
      "vite",
      "tanstack-start",
      "nextjs"
    ],
    "requirements": {
      "react": ">=19",
      "tailwind": ">=4"
    },
    "previewUrl": "https://uiblocks.org/preview/hero-01"
  }
}