{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-section-shadcnui",
  "type": "registry:page",
  "title": "Hero Section",
  "description": "Hero section with staggered text and button reveal",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/hero-section.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\n\nexport function HeroSection() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.15,\n        delayChildren: 0.1,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 20 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.5, ease: \"easeOut\" },\n    },\n  };\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"hidden\"\n      animate=\"visible\"\n      className=\"flex min-h-[500px] flex-col items-center justify-center px-4 py-16 text-center\"\n    >\n      <motion.div variants={itemVariants} className=\"mb-4\">\n        <span className=\"inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-sm font-medium text-[var(--muted-foreground)]\">\n          <Sparkles className=\"h-4 w-4\" />\n          New Features Available\n        </span>\n      </motion.div>\n\n      <motion.h1\n        variants={itemVariants}\n        className=\"mb-6 text-5xl font-bold tracking-tight md:text-7xl\"\n      >\n        Build Amazing\n        <br />\n        <span className=\"bg-gradient-to-r from-white to-white/60 bg-clip-text text-transparent\">\n          User Experiences\n        </span>\n      </motion.h1>\n\n      <motion.p\n        variants={itemVariants}\n        className=\"mb-8 max-w-2xl text-lg text-[var(--foreground)]/70\"\n      >\n        Create stunning, animated interfaces with our collection of\n        production-ready components. Built with React, Framer Motion, and\n        TailwindCSS.\n      </motion.p>\n\n      <motion.div variants={itemVariants} className=\"flex gap-4\">\n        <Button size=\"lg\" className=\"gap-2\">\n          Get Started\n          <ArrowRight className=\"h-4 w-4\" />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          View Demo\n        </Button>\n      </motion.div>\n\n      <motion.div\n        variants={itemVariants}\n        className=\"mt-12 flex items-center gap-8 text-sm text-[var(--foreground)]/60\"\n      >\n        <div>\n          <div className=\"text-2xl font-bold text-[var(--foreground)]\">\n            10k+\n          </div>\n          <div>Downloads</div>\n        </div>\n        <div className=\"h-8 w-px bg-[var(--border)]\" />\n        <div>\n          <div className=\"text-2xl font-bold text-[var(--foreground)]\">50+</div>\n          <div>Components</div>\n        </div>\n        <div className=\"h-8 w-px bg-[var(--border)]\" />\n        <div>\n          <div className=\"text-2xl font-bold text-[var(--foreground)]\">\n            100%\n          </div>\n          <div>Open Source</div>\n        </div>\n      </motion.div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/hero-section-shadcnui.tsx"
    }
  ]
}