{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-grid-section-shadcnui",
  "type": "registry:page",
  "title": "Feature Grid Section",
  "description": "Animated feature grid with staggered card animations and icon reveals",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/feature-grid-section.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { motion, useInView } from \"framer-motion\";\nimport { Code, Globe, Lock, Shield, Sparkles, Zap } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nconst features = [\n  {\n    icon: Code,\n    title: \"Developer Friendly\",\n    description: \"Built with TypeScript and modern React patterns for a superior developer experience.\",\n  },\n  {\n    icon: Zap,\n    title: \"Lightning Fast\",\n    description: \"Optimized animations and code splitting that ensures your app never lags.\",\n  },\n  {\n    icon: Shield,\n    title: \"Production Ready\",\n    description: \"Fully tested components that are ready for your next big project launch.\",\n  },\n  {\n    icon: Globe,\n    title: \"Responsive\",\n    description: \"Layouts that adapt perfectly to any screen size, from mobile to desktop.\",\n  },\n  {\n    icon: Lock,\n    title: \"Secure By Default\",\n    description: \"Implementation following best security practices to keep your data safe.\",\n  },\n  {\n    icon: Sparkles,\n    title: \"Modern Design\",\n    description: \"Crafted with the latest web technologies and aesthetic trends in mind.\",\n  },\n];\n\nexport function FeatureGridSection() {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true, margin: \"-100px\" });\n\n  return (\n    <section\n      ref={ref}\n      className=\"relative w-full overflow-hidden bg-background px-4 py-12 sm:py-16 md:py-20 lg:py-24\"\n    >\n      <div className=\"mx-auto max-w-6xl\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n          transition={{ duration: 0.5 }}\n          className=\"mb-12 sm:mb-16 md:mb-20 text-center\"\n        >\n          <h2 className=\"mb-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl\">\n            Why Choose Us\n          </h2>\n          <p className=\"mx-auto max-w-2xl px-4 text-base text-foreground/70 sm:text-lg\">\n            Everything you need to build amazing applications, faster and better.\n          </p>\n        </motion.div>\n\n        <div className=\"grid grid-cols-1 gap-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n          {features.map((feature, index) => {\n            const Icon = feature.icon;\n            return (\n              <motion.div\n                key={feature.title}\n                initial={{ opacity: 0, y: 20 }}\n                animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}\n                transition={{ duration: 0.4, delay: index * 0.1 }}\n                className=\"flex\"\n              >\n                <Card className=\"group relative flex h-full w-full flex-col overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur transition-all duration-300 hover:border-border/60 hover:shadow-lg hover:-translate-y-1\">\n                  <div className=\"absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n                  <CardHeader className=\"relative pb-4 z-10\">\n                    <div className=\"mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl border border-primary/30 bg-primary/20 text-primary transition-colors\">\n                      <Icon className=\"h-6 w-6\" />\n                    </div>\n                    <CardTitle className=\"text-xl font-semibold tracking-tight text-foreground\">\n                      {feature.title}\n                    </CardTitle>\n                  </CardHeader>\n                  <CardContent className=\"relative z-10\">\n                    <CardDescription className=\"text-base text-foreground/70 transition-colors\">\n                      {feature.description}\n                    </CardDescription>\n                  </CardContent>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/feature-grid-section-shadcnui.tsx"
    }
  ]
}