{
    "name": "hero",
    "type": "registry:block",
    "title": "Dot Grid",
    "description": "Full-viewport hero section with dot grid, radial glow, vertical rails, and stats row.",
    "category": "hero",
    "files": [
        {
            "path": "registry/hero/hero.tsx",
            "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { motion } from \"framer-motion\";\r\n\r\nexport function Hero() {\r\n  return (\r\n    <section className=\"relative w-full py-16 md:py-32 overflow-hidden bg-background\">\r\n      {/* Background Glow */}\r\n      <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-primary/20 rounded-full blur-[80px] md:blur-[120px] -z-10\" />\r\n\r\n      <div className=\"container px-4 sm:px-6 mx-auto text-center space-y-8\">\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 20 }}\r\n          animate={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.5 }}\r\n          className=\"inline-flex items-center rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-[12px] sm:text-sm font-medium text-primary\"\r\n        >\r\n          <span className=\"flex h-2 w-2 rounded-full bg-primary mr-2\" />\r\n          New Component Library Released\r\n        </motion.div>\r\n\r\n        <motion.h1\r\n          initial={{ opacity: 0, y: 20 }}\r\n          animate={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.5, delay: 0.1 }}\r\n          className=\"text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tighter leading-[1.1]\"\r\n        >\r\n          Build Faster with <br className=\"hidden sm:block\" />\r\n          <span className=\"text-primary italic\">Premium Blocks</span>\r\n        </motion.h1>\r\n\r\n        <motion.p\r\n          initial={{ opacity: 0, y: 20 }}\r\n          animate={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.5, delay: 0.2 }}\r\n          className=\"max-w-2xl mx-auto text-base sm:text-lg md:text-xl text-muted-foreground font-light leading-relaxed px-2 sm:px-0\"\r\n        >\r\n          A curated collection of secondary-to-none UI components and blocks\r\n          built with Tailwind CSS and Framer Motion. Shadcn compatible.\r\n        </motion.p>\r\n\r\n        <motion.div\r\n          initial={{ opacity: 0, y: 20 }}\r\n          animate={{ opacity: 1, y: 0 }}\r\n          transition={{ duration: 0.5, 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 w-full sm:w-auto px-8 text-base\">\r\n            Get Started Free\r\n          </Button>\r\n          <Button size=\"lg\" variant=\"outline\" className=\"h-12 w-full sm:w-auto px-8 text-base\">\r\n            View Components\r\n          </Button>\r\n        </motion.div>\r\n\r\n        <motion.div\r\n          initial={{ opacity: 0, scale: 0.9 }}\r\n          animate={{ opacity: 1, scale: 1 }}\r\n          transition={{ duration: 0.8, delay: 0.4 }}\r\n          className=\"mt-12 md:mt-16 relative mx-auto max-w-5xl rounded-2xl border border-border bg-card/50 p-1 sm:p-2 shadow-2xl overflow-hidden\"\r\n        >\r\n          <div className=\"aspect-[16/10] sm:aspect-video rounded-xl bg-muted animate-pulse flex items-center justify-center\">\r\n            <span className=\"text-muted-foreground font-mono text-[10px] sm:text-sm opacity-20 italic p-4 text-center\">\r\n              Dashboard Preview Placeholder\r\n            </span>\r\n          </div>\r\n        </motion.div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default Hero;\r\n",
            "type": "registry:block"
        }
    ],
    "dependencies": [
        "framer-motion"
    ],
    "registryDependencies": [
        "button"
    ]
}