{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-2",
  "description": "Modern Hero with grid pattern and featured icons.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/2/page.tsx",
      "content": "\"use client\";\n\nimport { Hero2 } from \"./hero\";\n\nexport default function Hero2Page() {\n  return (\n    <div className=\"w-full bg-background font-sans text-foreground selection:bg-primary selection:text-primary-foreground\">\n      <Hero2 />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/2/hero.tsx",
      "content": "\"use client\";\n\nimport { ChevronRight } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { GridPattern } from \"@/components/shared\";\nimport { Button } from \"@/components/ui/button\";\nimport { SITE_NAME, SITE_VERSION } from \"@/config/site\";\nimport { FeaturedIcons } from \"./featured-icons\";\n\nexport function Hero2() {\n  return (\n    <div className=\"relative isolate flex flex-col items-center justify-center overflow-hidden pt-24 pb-20 lg:pt-32 lg:pb-32\">\n      {/* Background Decor */}\n      <div className=\"-z-10 absolute inset-0 h-full w-full\">\n        <GridPattern className=\"opacity-10\" />\n      </div>\n\n      {/* Background Glow */}\n      <div\n        aria-hidden=\"true\"\n        className=\"-top-40 -z-10 sm:-top-80 absolute inset-x-0 transform-gpu overflow-hidden blur-3xl\"\n      >\n        <div className=\"-translate-x-1/2 relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 rotate-30 bg-linear-to-tr from-primary/20 to-primary/5 opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75\" />\n      </div>\n\n      <div className=\"relative z-10 mx-auto max-w-5xl px-6 text-center\">\n        <div className=\"mx-auto mb-8 flex max-w-fit items-center gap-3 rounded-full border border-border bg-muted/50 py-1.5 pr-4 pl-3 font-medium text-[11px] backdrop-blur-md\">\n          <div className=\"flex items-center gap-2\">\n            <LogoIcon className=\"size-3.5\" />\n            <span className=\"font-semibold text-foreground\">{SITE_NAME}</span>\n          </div>\n          <span className=\"h-3 w-px bg-border\" />\n          <span className=\"text-muted-foreground\">\n            Introducing V-{SITE_VERSION}\n          </span>\n          <span className=\"h-3 w-px bg-border\" />\n          <Link\n            className=\"flex items-center gap-1 text-muted-foreground/50 transition-colors hover:text-foreground\"\n            href=\"/changelog\"\n          >\n            View Changelog\n            <ChevronRight className=\"size-3\" />\n          </Link>\n        </div>\n\n        <h1 className=\"relative font-bold font-heading text-4xl text-foreground tracking-tighter sm:text-6xl lg:text-7xl\">\n          Beautiful ✨{\" \"}\n          <span className=\"font-extrabold text-primary\">shadcn/ui</span> Blocks{\" \"}\n          <br />\n          for the{\" \"}\n          <span className=\"font-extrabold text-glow\">Modern Developer.</span>\n        </h1>\n\n        <p className=\"mx-auto mt-8 max-w-2xl text-base text-muted-foreground leading-relaxed sm:text-lg\">\n          Save hours of design time with clean, ready-to-use shadcn blocks{\" \"}\n          <br className=\"hidden sm:block\" />\n          that just work — modern, responsive, and built for speed.\n        </p>\n\n        <div className=\"mt-10 flex flex-wrap items-center justify-center gap-3\">\n          <Button\n            asChild\n            className=\"h-9 min-w-[140px] rounded-full px-6 font-bold text-xs shadow-md transition-all active:scale-95\"\n            size=\"sm\"\n            variant=\"secondary\"\n          >\n            <Link href=\"/blocks\">Explore</Link>\n          </Button>\n          <Button\n            asChild\n            className=\"h-9 min-w-[140px] rounded-full bg-foreground px-6 font-bold text-background text-xs shadow-md transition-all hover:opacity-90 active:scale-95\"\n            size=\"sm\"\n          >\n            <Link href=\"/get-access\">Get full Access</Link>\n          </Button>\n        </div>\n      </div>\n      <FeaturedIcons />\n\n      {/* Background Decorative Beam */}\n      <div className=\"beam-effect opacity-50\" />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/2/featured-icons.tsx",
      "content": "\"use client\";\n\nimport {\n  Check,\n  Code2,\n  Cpu,\n  Fingerprint,\n  Layers,\n  Layout,\n  MousePointer2,\n  Palette,\n  Search,\n  Sparkles,\n  Zap,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst icons = [\n  { id: \"layout\", icon: Layout, rotate: \"-10deg\", y: 0, zIndex: 10 },\n  { id: \"zap\", icon: Zap, rotate: \"-8deg\", y: -10, zIndex: 11 },\n  { id: \"palette\", icon: Palette, rotate: \"-6deg\", y: -20, zIndex: 12 },\n  { id: \"search\", icon: Search, rotate: \"-4deg\", y: -10, zIndex: 13 },\n  { id: \"code\", icon: Code2, rotate: \"-2deg\", y: 0, zIndex: 14 },\n  {\n    id: \"check\",\n    icon: Check,\n    rotate: \"0deg\",\n    y: 15,\n    zIndex: 20,\n    isCenter: true,\n  },\n  { id: \"mouse\", icon: MousePointer2, rotate: \"2deg\", y: 0, zIndex: 14 },\n  { id: \"sparkles\", icon: Sparkles, rotate: \"4deg\", y: -10, zIndex: 13 },\n  { id: \"layers\", icon: Layers, rotate: \"6deg\", y: -20, zIndex: 12 },\n  { id: \"cpu\", icon: Cpu, rotate: \"8deg\", y: -10, zIndex: 11 },\n  { id: \"fingerprint\", icon: Fingerprint, rotate: \"10deg\", y: 0, zIndex: 10 },\n];\n\nexport function FeaturedIcons({ className }: { className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"mt-16 mb-24 flex items-center justify-center gap-2 sm:gap-4 lg:gap-6\",\n        className\n      )}\n    >\n      {icons.map((item, _i) => (\n        <div\n          className={cn(\n            \"relative flex items-center justify-center border border-border shadow-xl transition-all duration-300\",\n            item.isCenter\n              ? \"z-20 size-24 rounded-[32px] bg-foreground text-background shadow-black/30 sm:size-28 dark:shadow-white/20\"\n              : \"size-16 rounded-[20px] bg-card text-muted-foreground sm:size-20\"\n          )}\n          key={item.id}\n          style={{\n            zIndex: item.zIndex,\n            transform: `translateY(${item.y}px) rotate(${item.rotate}) ${item.isCenter ? \"scale(0.9)\" : \"\"}`,\n          }}\n        >\n          <item.icon\n            className={cn(\n              item.isCenter ? \"size-8 sm:size-10\" : \"size-5 sm:size-6\"\n            )}\n            strokeWidth={item.isCenter ? 2.5 : 2}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/2/shared.tsx",
      "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function BorderSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"-translate-x-1/2 pointer-events-none absolute left-1/2 w-screen border-t border-dashed\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function DashedLines({\n  width = 20,\n  height = 50,\n  x = 10,\n  className,\n  ...props\n}: React.ComponentProps<\"svg\">) {\n  const id = React.useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none size-full stroke-border\", className)}\n      {...props}\n    >\n      <pattern\n        height={height}\n        id={id}\n        patternUnits=\"userSpaceOnUse\"\n        width={width}\n        x={x}\n      >\n        <path d={`M.5 0 V${height}`} fill=\"none\" strokeDasharray={2.5} />\n      </pattern>\n      <rect fill={`url(#${id})`} height=\"100%\" strokeWidth={0} width=\"100%\" />\n    </svg>\n  );\n}\n\nexport function GridPattern({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = \"0\",\n  className,\n  ...props\n}: React.ComponentProps<\"svg\"> & {\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  strokeDasharray?: string;\n}) {\n  const id = React.useId();\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 h-full w-full fill-transparent stroke-border/30\",\n        className\n      )}\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%\" strokeWidth={0} width=\"100%\" />\n    </svg>\n  );\n}\n\nexport function GlassCard({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"glass-card rounded-xl p-6\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "100vh",
    "isPinned": false,
    "createdAt": "2026-03-28"
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}