{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "new-hero-section-shadcnui",
  "type": "registry:block",
  "title": "New Hero Section",
  "description": "Modern hero section with gradient background, animated stats, and call-to-action buttons",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/new-hero-section.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { ArrowRight, Play, Sparkles } from \"lucide-react\";\n\nexport function NewHeroSection() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.2,\n        delayChildren: 0.3,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 30 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.6, ease: \"easeOut\" },\n    },\n  };\n\n  const floatingVariants: Variants = {\n    animate: {\n      y: [0, -10, 0],\n      transition: {\n        duration: 3,\n        repeat: Infinity,\n        ease: \"easeInOut\",\n      },\n    },\n  };\n\n  return (\n    <section className=\"relative overflow-hidden bg-gradient-to-br from-background via-background to-primary/5 px-4 py-20 md:py-32 w-full\">\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"relative z-10 text-center\"\n        >\n          <motion.div variants={itemVariants} className=\"mb-6\">\n            <span className=\"inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-2 text-sm font-medium text-primary\">\n              <Sparkles className=\"h-4 w-4\" />\n              Welcome to the Future\n            </span>\n          </motion.div>\n\n          <motion.h1\n            variants={itemVariants}\n            className=\"mb-6 text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl\"\n          >\n            Transform Your Business\n            <br />\n            <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\n              With Innovation\n            </span>\n          </motion.h1>\n\n          <motion.p\n            variants={itemVariants}\n            className=\"mx-auto mb-10 max-w-2xl text-lg text-muted-foreground md:text-xl\"\n          >\n            We help businesses grow faster with cutting-edge solutions and\n            exceptional service. Join thousands of satisfied customers.\n          </motion.p>\n\n          <motion.div\n            variants={itemVariants}\n            className=\"flex flex-col items-center justify-center gap-4 sm:flex-row\"\n          >\n            <Button size=\"lg\" className=\"group gap-2\">\n              Get Started\n              <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n            </Button>\n            <Button size=\"lg\" variant=\"outline\" className=\"group gap-2\">\n              <Play className=\"h-4 w-4\" />\n              Watch Demo\n            </Button>\n          </motion.div>\n\n          <motion.div\n            variants={floatingVariants}\n            animate=\"animate\"\n            className=\"mt-16 flex items-center justify-center gap-8 text-sm text-muted-foreground\"\n          >\n            <div className=\"text-center\">\n              <div className=\"text-2xl font-bold text-foreground\">10K+</div>\n              <div>Happy Customers</div>\n            </div>\n            <div className=\"h-8 w-px bg-border\" />\n            <div className=\"text-center\">\n              <div className=\"text-2xl font-bold text-foreground\">500+</div>\n              <div>Projects Completed</div>\n            </div>\n            <div className=\"h-8 w-px bg-border\" />\n            <div className=\"text-center\">\n              <div className=\"text-2xl font-bold text-foreground\">99%</div>\n              <div>Satisfaction Rate</div>\n            </div>\n          </motion.div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/new-hero-section-shadcnui.tsx"
    }
  ]
}