{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-backdrop",
  "title": "Grid Backdrop",
  "description": "A lightweight standalone grid backdrop for brand bands, testimonials and stat cards — navy on light, accent-yellow on dark.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/grid-backdrop.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\n/**\n * The lightweight standalone grid backdrop — the workhorse behind brand bands,\n * testimonial panels, stat cards and process visuals. No config engine, no\n * client boundary: two crossing 1px gradients draw the grid and a radial mask\n * fades it toward the edges.\n *\n * `tone=\"default\"` draws navy lines (for light surfaces); `tone=\"brand\"` draws\n * accent-yellow lines (for dark brand-600 surfaces). Per-placement tuning\n * (opacity, z-index, position) is done via `className`; `cellSize` and `mask`\n * are props so each placement keeps its exact look.\n */\n\ntype Tone = \"default\" | \"brand\"\n\n/** Common radial masks, named so call sites read clearly. */\nexport const gridMasks = {\n  top: \"radial-gradient(ellipse at top, rgba(0,0,0,0.55) 30%, transparent 80%)\",\n  topLeft:\n    \"radial-gradient(ellipse 80% 60% at 30% 0%, rgba(0,0,0,0.7) 0%, transparent 75%)\",\n  left: \"radial-gradient(ellipse at 20% 50%, rgba(0,0,0,0.6) 20%, transparent 75%)\",\n  center:\n    \"radial-gradient(ellipse at center, rgba(0,0,0,0.6) 20%, transparent 75%)\",\n  bottom:\n    \"radial-gradient(ellipse at bottom, rgba(0,0,0,0.55) 30%, transparent 80%)\",\n} as const\n\ninterface GridBackdropProps {\n  /** Line colour: navy on light surfaces, accent-yellow on dark brand surfaces. */\n  tone?: Tone\n  /** Grid cell size in px (default 64). */\n  cellSize?: number\n  /** Radial mask-image — pass a value from `gridMasks`, a custom gradient, or \"none\". */\n  mask?: string\n  /**\n   * Extra classes. Defaults place the layer at `absolute inset-0 -z-10` with a\n   * tone-appropriate opacity; override opacity/z-index/positioning here.\n   */\n  className?: string\n}\n\nconst lineColor: Record<Tone, string> = {\n  default: \"rgb(18 21 65)\", // brand-600 navy\n  brand: \"rgb(247 236 51)\", // accent yellow\n}\n\nfunction GridBackdrop({\n  tone = \"default\",\n  cellSize = 64,\n  mask = gridMasks.top,\n  className,\n}: GridBackdropProps) {\n  const color = lineColor[tone]\n  const maskImage = mask === \"none\" ? undefined : mask\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"grid-backdrop\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 -z-10\",\n        tone === \"brand\" ? \"opacity-[0.08]\" : \"opacity-[0.05]\",\n        className\n      )}\n      style={{\n        backgroundImage: `linear-gradient(to right, ${color} 1px, transparent 1px), linear-gradient(to bottom, ${color} 1px, transparent 1px)`,\n        backgroundSize: `${cellSize}px ${cellSize}px`,\n        maskImage,\n        WebkitMaskImage: maskImage,\n      }}\n    />\n  )\n}\n\nexport { GridBackdrop }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/grid-backdrop.tsx"
    }
  ],
  "type": "registry:block"
}