{
    "name": "cta-particles",
    "type": "registry:block",
    "title": "Particles",
    "description": "Full-viewport call-to-action with animated particles, grid pattern, and sharp-corner buttons.",
    "dependencies": [
        "framer-motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
    ],
    "registryDependencies": [
        "button"
    ],
    "files": [
        {
            "path": "registry/cta-particles/cta-particles.tsx",
            "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { ArrowRight, Sparkles } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\n\r\nexport function CtaParticles() {\r\n  return (\r\n    <section className=\"py-24 px-4 relative overflow-hidden flex items-center justify-center min-h-[500px] rounded-3xl my-8 mx-4 md:mx-8 border border-border/50 bg-foreground/5 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/10 via-background to-background\">\r\n\r\n      {/* Dynamic Background Particles */}\r\n      <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\r\n        {[...Array(20)].map((_, i) => (\r\n          <motion.div\r\n            key={i}\r\n            initial={{\r\n              opacity: 0,\r\n              scale: 0,\r\n              x: Math.random() * 1000 - 500,\r\n              y: Math.random() * 1000 - 500\r\n            }}\r\n            animate={{\r\n              opacity: [0, 0.5, 0],\r\n              scale: [0, 1.5, 0],\r\n              x: Math.random() * 1000 - 500,\r\n              y: Math.random() * 1000 - 500\r\n            }}\r\n            transition={{\r\n              duration: Math.random() * 3 + 2,\r\n              repeat: Infinity,\r\n              delay: Math.random() * 2\r\n            }}\r\n            className=\"absolute top-1/2 left-1/2 w-1 h-1 bg-primary rounded-full blur-[1px]\"\r\n          />\r\n        ))}\r\n      </div>\r\n\r\n      <div className=\"relative z-10 text-center max-w-3xl space-y-8 p-8\">\r\n        <motion.div\r\n          initial={{ opacity: 0, scale: 0.9 }}\r\n          whileInView={{ opacity: 1, scale: 1 }}\r\n          transition={{ duration: 0.5 }}\r\n          className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-primary/30 bg-primary/10 text-primary text-sm font-medium\"\r\n        >\r\n          <Sparkles className=\"w-4 h-4\" />\r\n          <span>Launch Week Deal</span>\r\n        </motion.div>\r\n\r\n        <motion.h2\r\n          initial={{ opacity: 0, y: 20 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.6, delay: 0.1 }}\r\n          className=\"text-4xl md:text-6xl font-black tracking-tighter\"\r\n        >\r\n          Build better products <br />\r\n          <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-primary to-blue-600\">faster than ever.</span>\r\n        </motion.h2>\r\n\r\n        <motion.p\r\n          initial={{ opacity: 0, y: 20 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.6, delay: 0.2 }}\r\n          className=\"text-lg md:text-xl text-muted-foreground max-w-xl mx-auto\"\r\n        >\r\n          Stop wrestling with UI libraries. Get the best components, animations, and blocks for your next big idea.\r\n        </motion.p>\r\n\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 20 }}\r\n          whileInView={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.6, delay: 0.3 }}\r\n          className=\"flex flex-col sm:flex-row items-center justify-center gap-4\"\r\n        >\r\n          <Button size=\"lg\" className=\"h-12 px-8 text-base rounded-full shadow-[0_0_20px_rgba(37,99,235,0.3)] hover:shadow-[0_0_30px_rgba(37,99,235,0.5)] transition-all\">\r\n            Get Started Now\r\n            <ArrowRight className=\"ml-2 w-4 h-4\" />\r\n          </Button>\r\n          <Button variant=\"outline\" size=\"lg\" className=\"h-12 px-8 text-base rounded-full border-primary/20 hover:bg-primary/5\">\r\n            View Documentation\r\n          </Button>\r\n        </motion.div>\r\n      </div>\r\n\r\n      {/* Grid Pattern Overlay */}\r\n      <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none\" />\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default CtaParticles;\r\n",
            "type": "registry:block"
        }
    ],
    "category": "cta"
}