{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-04",
  "title": "Hero with cycling word",
  "description": "Centered headline whose bracketed word rotates between five options via a pure-CSS keyframe.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "content/components/hero/hero-04.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Menu, Sparkles , X} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst navItems = [\"Home\", \"Features\", \"About\", \"FAQ\", \"Pricing\"]\n\nconst cyclingWords = [\n  \"landing page\",\n  \"SaaS dashboard\",\n  \"pricing page\",\n  \"marketing site\",\n  \"portfolio\",\n]\n\nconst lineHeightRem = 5\n\nexport default function Hero04() {\n  const [menuOpen, setMenuOpen] = React.useState(false)\n  const cycleStyle: React.CSSProperties & Record<string, string> = {\n    \"--cycle-line-height\": `${lineHeightRem}rem`,\n    \"--cycle-translate\": `-${(cyclingWords.length - 1) * lineHeightRem}rem`,\n    \"--cycle-duration\": `${cyclingWords.length * 2}s`,\n    \"--cycle-keyframes-count\": String(cyclingWords.length),\n  }\n\n  return (\n    <section className=\"bg-background pb-24 sm:pb-32\">\n      <style>{cycleKeyframes(cyclingWords.length)}</style>\n\n      <header className=\"mx-auto flex max-w-6xl items-center justify-between px-6 py-5\">\n        <a\n          href=\"#\"\n          className=\"flex items-center gap-2 font-semibold tracking-tight text-foreground\"\n        >\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            src=\"https://blockus.lndevui.com/brand/logo.svg\"\n            alt=\"blockus\"\n            className=\"size-6 dark:invert\"\n          />\n          blockus\n        </a>\n\n        <nav className=\"hidden items-center gap-7 md:flex\">\n          {navItems.map((item) => (\n            <a\n              key={item}\n              href={`#${item.toLowerCase()}`}\n              className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n            >\n              {item}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"hidden rounded-full sm:inline-flex\"\n          >\n            Sign in\n          </Button>\n          <Button size=\"sm\" className=\"rounded-full\">\n            Get started\n          </Button>\n          <button\n            type=\"button\"\n            onClick={() => setMenuOpen(true)}\n            aria-label=\"Open menu\"\n            className=\"grid size-9 place-items-center rounded-full border border-border text-foreground md:hidden\"\n          >\n            <Menu className=\"size-4\" />\n          </button>\n        </div>\n      </header>\n\n      {menuOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div\n            aria-hidden\n            className=\"absolute inset-0 bg-background/80 backdrop-blur-sm\"\n            onClick={() => setMenuOpen(false)}\n          />\n          <div className=\"absolute inset-x-4 top-4 overflow-hidden rounded-2xl border border-border bg-card p-5 shadow-2xl shadow-black/30\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"font-semibold tracking-tight text-foreground\">\n                blockus\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setMenuOpen(false)}\n                aria-label=\"Close menu\"\n                className=\"grid size-9 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n            <ul className=\"mt-5 flex flex-col\">\n              {navItems.map((item) => (\n                <li key={item}>\n                  <a\n                    href={`#${item.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                    onClick={() => setMenuOpen(false)}\n                    className=\"block rounded-md px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted\"\n                  >\n                    {item}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      )}\n\n      <div className=\"mx-auto flex max-w-3xl flex-col items-center gap-7 px-6 pt-20 text-center\">\n        <span className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground\">\n          <Sparkles className=\"size-3 text-amber-500\" />\n          New blocks shipping every week\n        </span>\n\n        <h1\n          className=\"text-balance font-semibold tracking-tight\"\n          style={{\n            fontSize: \"clamp(2.25rem, 5vw, 3.75rem)\",\n            lineHeight: `${lineHeightRem}rem`,\n          }}\n        >\n          <span className=\"block text-muted-foreground\">Build your next</span>\n          <span\n            className=\"relative block overflow-hidden text-foreground\"\n            style={{ height: `${lineHeightRem}rem` }}\n          >\n            <span\n              aria-hidden\n              className=\"inline-flex flex-col\"\n              style={{\n                animation: `hero03Cycle var(--cycle-duration) infinite cubic-bezier(0.65, 0.05, 0.36, 1)`,\n                ...cycleStyle,\n              }}\n            >\n              {cyclingWords.map((word) => (\n                <span\n                  key={word}\n                  style={{ height: `${lineHeightRem}rem` }}\n                  className=\"flex items-center justify-center\"\n                >\n                  {word}.\n                </span>\n              ))}\n            </span>\n            <span className=\"sr-only\">{cyclingWords.join(\", \")}.</span>\n          </span>\n          <span className=\"block text-muted-foreground\">In an afternoon.</span>\n        </h1>\n\n        <p className=\"max-w-xl text-pretty text-muted-foreground sm:text-lg\">\n          A growing library of polished, copy-paste React blocks. Drop one\n          into your project, swap the copy and ship the page before your\n          coffee goes cold.\n        </p>\n\n        <div className=\"flex flex-col gap-3 sm:flex-row\">\n          <Button size=\"lg\" className=\"rounded-full\">\n            Get started\n            <ArrowRight />\n          </Button>\n          <Button size=\"lg\" variant=\"outline\" className=\"rounded-full\">\n            View the catalog\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nfunction cycleKeyframes(count: number): string {\n  const lines: string[] = []\n  for (let i = 0; i < count; i++) {\n    const enter = ((i / count) * 100).toFixed(2)\n    const hold = (((i / count) + 0.7 / count) * 100).toFixed(2)\n    lines.push(`${enter}% { transform: translateY(-${i * lineHeightRem}rem); }`)\n    lines.push(`${hold}% { transform: translateY(-${i * lineHeightRem}rem); }`)\n  }\n  lines.push(`100% { transform: translateY(-${count * lineHeightRem}rem); }`)\n  return `@keyframes hero03Cycle {\\n  ${lines.join(\"\\n  \")}\\n}`\n}\n",
      "type": "registry:block",
      "target": "components/blocks/hero-04.tsx"
    }
  ],
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}