{
    "name": "features-bento",
    "type": "registry:block",
    "title": "Border Grid",
    "description": "A bordered numbered features grid with icon, title, description, and hover accent line.",
    "dependencies": [
        "framer-motion",
        "lucide-react"
    ],
    "registryDependencies": [],
    "files": [
        {
            "path": "registry/features-bento/features-bento.tsx",
            "content": "\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport {\r\n  Cpu,\r\n  Globe,\r\n  Zap,\r\n  ShieldCheck,\r\n  Rocket,\r\n  BarChart3\r\n} from \"lucide-react\";\r\n\r\nconst features = [\r\n  {\r\n    title: \"Global Edge Network\",\r\n    description: \"Deploy your application to over 300+ edge locations worldwide for lightning fast latency.\",\r\n    icon: Globe,\r\n    className: \"md:col-span-2\",\r\n    gradient: \"from-blue-500/20 via-cyan-500/20 to-teal-500/20\",\r\n  },\r\n  {\r\n    title: \"Instant Scaling\",\r\n    description: \"Handle millions of requests with zero configuration.\",\r\n    icon: Zap,\r\n    className: \"md:col-span-1\",\r\n    gradient: \"from-purple-500/20 via-pink-500/20 to-red-500/20\",\r\n  },\r\n  {\r\n    title: \"Enterprise Security\",\r\n    description: \"Bank-grade encryption and DDoS protection included.\",\r\n    icon: ShieldCheck,\r\n    className: \"md:col-span-1\",\r\n    gradient: \"from-amber-500/20 via-orange-500/20 to-yellow-500/20\",\r\n  },\r\n  {\r\n    title: \"Real-time Analytics\",\r\n    description: \"Track performance metrics and user behavior in real-time.\",\r\n    icon: BarChart3,\r\n    className: \"md:col-span-2\",\r\n    gradient: \"from-emerald-500/20 via-green-500/20 to-lime-500/20\",\r\n  },\r\n];\r\n\r\nexport function FeaturesBento() {\r\n  return (\r\n    <section className=\"py-24 px-4 md:px-8 bg-background text-foreground overflow-hidden\">\r\n      <div className=\"max-w-7xl mx-auto space-y-12\">\r\n        {/* Header */}\r\n        <div className=\"text-center space-y-4 max-w-3xl mx-auto\">\r\n          <motion.div\r\n            initial={{ opacity: 0, y: 20 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\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-sm font-medium text-primary\"\r\n          >\r\n            <Rocket className=\"mr-2 h-3.5 w-3.5\" />\r\n            Powerful Features\r\n          </motion.div>\r\n          <motion.h2\r\n            initial={{ opacity: 0, y: 20 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\r\n            transition={{ duration: 0.5, delay: 0.1 }}\r\n            className=\"text-4xl md:text-5xl font-black tracking-tight\"\r\n          >\r\n            Everything you need to <span className=\"text-primary\">scale</span>.\r\n          </motion.h2>\r\n          <motion.p\r\n            initial={{ opacity: 0, y: 20 }}\r\n            whileInView={{ opacity: 1, y: 0 }}\r\n            viewport={{ once: true }}\r\n            transition={{ duration: 0.5, delay: 0.2 }}\r\n            className=\"text-lg text-muted-foreground\"\r\n          >\r\n            Our platform provides the infrastructure and tools you need to build next-generation applications.\r\n          </motion.p>\r\n        </div>\r\n\r\n        {/* Bento Grid */}\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n          {features.map((feature, i) => (\r\n            <motion.div\r\n              key={i}\r\n              initial={{ opacity: 0, y: 20 }}\r\n              whileInView={{ opacity: 1, y: 0 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.5, delay: i * 0.1 }}\r\n              className={`group relative overflow-hidden rounded-3xl border border-border/50 bg-card p-8 hover:border-border transition-colors duration-500 ${feature.className}`}\r\n            >\r\n              {/* Background Gradient */}\r\n              <div className={`absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-100 transition-opacity duration-700 ${feature.gradient}`} />\r\n\r\n              {/* Content */}\r\n              <div className=\"relative z-10 flex flex-col h-full justify-between gap-8\">\r\n                <div className=\"p-3 w-fit rounded-2xl bg-background/50 border border-border/50 backdrop-blur-sm group-hover:scale-110 transition-transform duration-500\">\r\n                  <feature.icon className=\"w-6 h-6 text-foreground\" />\r\n                </div>\r\n\r\n                <div className=\"space-y-2\">\r\n                  <h3 className=\"text-2xl font-bold tracking-tight\">{feature.title}</h3>\r\n                  <p className=\"text-muted-foreground leading-relaxed\">\r\n                    {feature.description}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n\r\n              {/* Decorative Blur */}\r\n              <div className=\"absolute -bottom-10 -right-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-colors duration-700\" />\r\n            </motion.div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default FeaturesBento;\r\n",
            "type": "registry:block"
        }
    ],
    "category": "features"
}