{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-grid-minimal",
  "title": "Developer tool hero",
  "description": "Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/retro-grid.json",
    "https://velora.colorlib.com/r/terminal.json",
    "https://velora.colorlib.com/r/typewriter.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/hero-grid-minimal.tsx",
      "content": "import { ArrowRightIcon, BookOpenIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { RetroGrid } from \"@/components/velora/retro-grid\";\nimport { Terminal } from \"@/components/velora/terminal\";\nimport { Typewriter } from \"@/components/velora/typewriter\";\n\nconst ACCENTS = [\"monorepos.\", \"TypeScript.\", \"every CI.\"];\n\n// Keep lines under ~36 characters so they don't wrap on phones.\nconst SESSION = [\n  \"$ npm install -D tachyon\",\n  \"added 1 package in 812ms\",\n  \"$ npx tachyon build\",\n  \"✓ 148 tasks restored from cache\",\n  \"✓ 3 tasks rebuilt\",\n  \"Done in 0.42s (31× faster)\",\n];\n\nconst PACKAGE_MANAGERS = [\"npm\", \"pnpm\", \"yarn\", \"bun\"];\n\n/**\n * Minimal developer-tool hero: a receding grid, a typed headline accent, an\n * install session in a terminal and two calls to action. Quiet enough to let\n * the command be the hero.\n */\nexport function HeroGridMinimal() {\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <div aria-hidden className=\"absolute inset-x-0 bottom-0 -z-10 h-3/4\">\n        <RetroGrid angle={65} cellSize={48} opacity={0.9} />\n      </div>\n\n      <div className=\"mx-auto max-w-3xl text-center\">\n        <BlurFade>\n          <a\n            href=\"#\"\n            className=\"inline-flex items-center gap-2 rounded-md border bg-background/70 py-1 pr-2.5 pl-1 font-mono text-xs text-muted-foreground backdrop-blur transition-colors hover:text-foreground\"\n          >\n            <span className=\"rounded-sm bg-foreground px-1.5 py-0.5 font-semibold text-background\">\n              v2.4\n            </span>\n            Remote cache is free for open source\n            <ArrowRightIcon className=\"size-3\" />\n          </a>\n        </BlurFade>\n\n        <h1 className=\"mt-8 text-4xl font-semibold tracking-tight sm:text-6xl\">\n          Zero-config builds\n          <br />\n          for{\" \"}\n          <Typewriter\n            words={ACCENTS}\n            className=\"bg-gradient-to-r from-brand-from to-brand-to bg-clip-text text-transparent\"\n          />\n        </h1>\n\n        <p className=\"mx-auto mt-6 max-w-xl text-lg text-pretty text-muted-foreground\">\n          Tachyon caches every task, runs only what changed and shares the\n          results with your team and CI. Drop it into any JavaScript repo — no\n          config file required.\n        </p>\n\n        <BlurFade delay={0.3}>\n          <div className=\"mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <Button size=\"lg\" className=\"h-11 w-full px-6 sm:w-auto\" asChild>\n              <a href=\"#\">\n                Get started <ArrowRightIcon />\n              </a>\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"lg\"\n              className=\"h-11 w-full px-6 sm:w-auto\"\n              asChild\n            >\n              <a href=\"#\">\n                <BookOpenIcon /> Read the docs\n              </a>\n            </Button>\n          </div>\n        </BlurFade>\n      </div>\n\n      <BlurFade\n        delay={0.4}\n        className=\"relative mx-auto mt-16 max-w-2xl sm:mt-20\"\n      >\n        <div\n          aria-hidden\n          className=\"absolute inset-x-12 -inset-y-6 -z-10 rounded-full bg-brand/20 blur-3xl\"\n        />\n        {/* min-height holds the finished session's size so typing never shifts the page */}\n        <Terminal\n          lines={SESSION}\n          title=\"~/acme-monorepo\"\n          className=\"min-h-[15.5rem]\"\n        />\n        <p className=\"mt-5 text-center font-mono text-xs text-muted-foreground\">\n          Works with{\" \"}\n          {PACKAGE_MANAGERS.map((pm, i) => (\n            <span key={pm}>\n              {i > 0 && <span aria-hidden> · </span>}\n              <span className=\"text-foreground\">{pm}</span>\n              {i < PACKAGE_MANAGERS.length - 1 && (\n                <span className=\"sr-only\">,</span>\n              )}\n            </span>\n          ))}\n        </p>\n      </BlurFade>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/hero-grid-minimal.tsx"
    }
  ],
  "categories": [
    "hero-sections"
  ],
  "type": "registry:block"
}