{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dotted-modern",
  "title": "Dotted Modern",
  "description": "Modern dotted background hero component with animated open-source badge.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "packages/dotted-modern/dotted-modern.tsx",
      "content": "\"use client\";\r\nimport Link from \"next/link\";\r\nimport React from \"react\";\r\nimport { motion } from \"motion/react\";\r\nimport { ArrowRight, Terminal } from \"lucide-react\";\r\n\r\ntype MotionWrapperProps = {\r\n  children: React.ReactNode;\r\n};\r\nconst MotionWrapper = ({ children }: MotionWrapperProps) => {\r\n  return (\r\n    <motion.span\r\n      initial={{ opacity: 0, y: 8 }}\r\n      animate={{ opacity: 1, y: 0 }}\r\n      transition={{\r\n        duration: 0.4,\r\n        ease: \"easeOut\",\r\n        delay: 0.3,\r\n      }}\r\n      className=\"relative inline-block overflow-hidden p-[1px]\"\r\n    >\r\n      {children}\r\n    </motion.span>\r\n  );\r\n};\r\n\r\nconst DottedModern = () => {\r\n  return (\r\n    <div className=\"flex flex-col relative h-full w-full\">\r\n      <div className=\"absolute inset-0 z-0 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] rounded-md\"></div>\r\n      <div className=\"mx-auto h-full flex flex-col gap-6 items-center justify-center\">\r\n        <MotionWrapper>\r\n          <a\r\n            href=\"https://github.com/ibelick/background-snippets\"\r\n            target=\"_blank\"\r\n            rel=\"noopener noreferrer\"\r\n            className=\"inline-flex\"\r\n          >\r\n            <span\r\n              className=\"relative inline-block overflow-hidden rounded-full p-[1px] border border-slate-800 border-1\"\r\n              style={{ animationDelay: \"0.3s\", animationFillMode: \"forwards\" }}\r\n            >\r\n              <div\r\n                className=\"\r\n                inline-flex h-full w-full cursor-pointer items-center justify-center\r\n                rounded-full bg-white px-3 py-1 text-xs font-medium leading-5\r\n                text-slate-700 backdrop-blur-xl\r\n                bg-white\r\n              \"\r\n              >\r\n                We are open source 🚀\r\n                <span className=\"inline-flex items-center pl-1 font-semibold text-black\">\r\n                  Github\r\n                  <ArrowRight className=\"pl-0.5 text-black\" size={16} />\r\n                </span>\r\n              </div>\r\n            </span>\r\n          </a>\r\n        </MotionWrapper>\r\n\r\n        <MotionWrapper>\r\n          <h1 className=\"font-display text-4xl sm:text-6xl lg:text-7xl font-medium tracking-tight leading-[1.05] text-slate-900\">\r\n            Action - oriented\r\n            <br />\r\n            <span className=\"bg-clip-text text-transparent bg-gradient-to-br from-slate-900 via-slate-600 to-slate-400\">\r\n              Modern snippets\r\n            </span>\r\n          </h1>\r\n        </MotionWrapper>\r\n\r\n        <MotionWrapper>\r\n          <p className=\"text-lg text-slate-500 leading-relaxed text-center max-w-xl\">\r\n            Plug-and-play snippets-just copy, paste, and use in your next\r\n            project. Built with Tailwind CSS and Vanilla CSS for seamless\r\n            integration.\r\n          </p>\r\n        </MotionWrapper>\r\n        <MotionWrapper>\r\n          <div className=\"flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto pt-2\">\r\n            <Link\r\n              href=\"/components/button\"\r\n              className=\"group w-full sm:w-auto px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-sm font-semibold text-sm shadow-xl shadow-slate-200/50 flex items-center justify-center gap-2\"\r\n            >\r\n              Go to Github\r\n              <ArrowRight className=\"h-4 w-4 transition-transform duration-200 group-hover:translate-x-[2px]\" />\r\n            </Link>\r\n\r\n            <button className=\"w-full sm:w-auto px-6 py-3 rounded-sm font-semibold text-sm text-slate-600 border border-slate-200 hover:bg-slate-50 hover:text-slate-900 transition-all flex items-center justify-center gap-2 bg-white\">\r\n              <Terminal className=\"h-4 w-4\" />\r\n              Documentation\r\n            </button>\r\n          </div>\r\n        </MotionWrapper>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DottedModern;\r\n",
      "type": "registry:component",
      "target": "components/satori-ui/dotted-modern.tsx"
    }
  ],
  "type": "registry:component"
}