{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-grid-section-baseui",
  "type": "registry:page",
  "title": "Feature Grid Section",
  "description": "Animated feature grid with staggered card animations and icon reveals (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/feature-grid-section-baseui.tsx",
      "content": "\"use client\";\n\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 FeatureGridSectionBaseui() {\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      {/* Background Pattern */}\n      <div className=\"absolute inset-0 -z-10 h-full w-full bg-white dark:bg-black bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]\"></div>\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-bold 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-muted-foreground 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                <div className=\"group relative flex h-full w-full flex-col overflow-hidden rounded-xl border border-border/40 bg-background/60 backdrop-blur-sm transition-all duration-300 hover:border-foreground/20 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                  <div className=\"relative z-10 p-6 pb-4\">\n                    <div className=\"mb-3 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground\">\n                      <Icon className=\"h-6 w-6\" />\n                    </div>\n                    <h3 className=\"text-xl font-semibold tracking-tight text-foreground\">\n                      {feature.title}\n                    </h3>\n                  </div>\n                  <div className=\"relative z-10 p-6 pt-0\">\n                    <p className=\"text-base text-muted-foreground/90 group-hover:text-muted-foreground transition-colors\">\n                      {feature.description}\n                    </p>\n                  </div>\n                </div>\n              </motion.div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/feature-grid-section-baseui.tsx"
    }
  ]
}