{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-07",
  "title": "Hero 07",
  "description": "A simple hero block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "https://www.shadcnui-blocks.com/r/animated-grid-pattern.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/hero-07/components/hero.tsx",
      "content": "import { ArrowUpRight, CirclePlay } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\nimport AnimatedGridPattern from \"@/registry/blocks/radix/hero-07/components/ui/animated-grid-pattern\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\n\nexport default function Hero() {\n  return (\n    <div className=\"relative flex min-h-screen items-center justify-center overflow-hidden px-6\">\n      <AnimatedGridPattern\n        className={cn(\n          \"mask-[radial-gradient(500px_circle_at_center,white,transparent)]\",\n          \"inset-x-0 h-full skew-y-12\"\n        )}\n        duration={3}\n        maxOpacity={0.1}\n        numSquares={30}\n      />\n      <div className=\"relative z-10 max-w-3xl text-center\">\n        <Badge\n          asChild\n          className=\"rounded-full border-border py-1\"\n          variant=\"secondary\"\n        >\n          <Link href=\"#\">\n            Just released v1.0.0 <ArrowUpRight className=\"ml-1 size-4\" />\n          </Link>\n        </Badge>\n        <h1 className=\"mx-auto mt-6 max-w-xl font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem] md:text-6xl/[1.2]\">\n          Ship better UI without&nbsp;the&nbsp;hassle\n        </h1>\n        <p className=\"mx-auto mt-6 max-w-2xl text-muted-foreground text-xl md:text-2xl/normal\">\n          Instead of starting from scratch every time, use thoughtfully designed\n          blocks that give you a solid foundation for any UI.\n        </p>\n        <div className=\"mt-12 flex items-center justify-center gap-4\">\n          <Button className=\"rounded-full\" size=\"lg\">\n            Get Started <ArrowUpRight className=\"h-5! w-5!\" />\n          </Button>\n          <Button\n            className=\"rounded-full shadow-none\"\n            size=\"lg\"\n            variant=\"outline\"\n          >\n            <CirclePlay className=\"h-5! w-5!\" /> Watch Demo\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/hero-07/components/ui/animated-grid-pattern.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface AnimatedGridPatternProps {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  strokeDasharray?: string | number;\n  numSquares?: number;\n  className?: string;\n  maxOpacity?: number;\n  duration?: number;\n}\n\nexport default function AnimatedGridPattern({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  numSquares = 50,\n  className,\n  maxOpacity = 0.5,\n  duration = 4,\n  ...props\n}: AnimatedGridPatternProps) {\n  const id = useId();\n  const containerRef = useRef(null);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n  const [squares, setSquares] = useState(() => generateSquares(numSquares));\n\n  function getPos() {\n    return [\n      Math.floor((Math.random() * dimensions.width) / width),\n      Math.floor((Math.random() * dimensions.height) / height),\n    ];\n  }\n\n  // Adjust the generateSquares function to return objects with an id, x, and y\n  function generateSquares(count: number) {\n    return Array.from({ length: count }, (_, i) => ({\n      id: i,\n      pos: getPos(),\n    }));\n  }\n\n  // Function to update a single square's position\n  const updateSquarePosition = (id: number) => {\n    setSquares((currentSquares) =>\n      currentSquares.map((sq) =>\n        sq.id === id\n          ? {\n              ...sq,\n              pos: getPos(),\n            }\n          : sq\n      )\n    );\n  };\n\n  // Update squares to animate in\n  useEffect(() => {\n    if (dimensions.width && dimensions.height) {\n      setSquares(generateSquares(numSquares));\n    }\n  }, [dimensions, numSquares]);\n\n  // Resize observer to update container dimensions\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setDimensions({\n          width: entry.contentRect.width,\n          height: entry.contentRect.height,\n        });\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current);\n      }\n    };\n  }, [containerRef]);\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n        className\n      )}\n      ref={containerRef}\n      {...props}\n    >\n      <defs>\n        <pattern\n          height={height}\n          id={id}\n          patternUnits=\"userSpaceOnUse\"\n          width={width}\n          x={x}\n          y={y}\n        >\n          <path\n            d={`M.5 ${height}V.5H${width}`}\n            fill=\"none\"\n            strokeDasharray={strokeDasharray}\n          />\n        </pattern>\n      </defs>\n      <rect fill={`url(#${id})`} height=\"100%\" width=\"100%\" />\n      <svg className=\"overflow-visible\" x={x} y={y}>\n        {squares.map(({ pos: [x, y], id }, index) => (\n          <motion.rect\n            animate={{ opacity: maxOpacity }}\n            fill=\"currentColor\"\n            height={height - 1}\n            initial={{ opacity: 0 }}\n            key={`${x}-${y}-${index}`}\n            onAnimationComplete={() => updateSquarePosition(id)}\n            strokeWidth=\"0\"\n            transition={{\n              duration,\n              repeat: 1,\n              delay: index * 0.1,\n              repeatType: \"reverse\",\n            }}\n            width={width - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    </svg>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}