{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "services-grid-block-shadcnui",
  "type": "registry:block",
  "title": "Services Grid",
  "description": "8-column responsive services grid with icons, features, and hover effects",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/services-grid-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport {\n  BarChart3,\n  Code,\n  Palette,\n  Rocket,\n  Settings,\n  Shield,\n  Users,\n  Zap,\n} from \"lucide-react\";\n\nconst services = [\n  {\n    icon: Code,\n    title: \"Web Development\",\n    description:\n      \"Build modern, responsive websites with cutting-edge technologies and best practices.\",\n    features: [\"React & Next.js\", \"TypeScript\", \"Performance Optimized\"],\n    iconColor: \"text-blue-500\",\n    bgColor: \"bg-blue-500/10\",\n  },\n  {\n    icon: Palette,\n    title: \"UI/UX Design\",\n    description:\n      \"Create beautiful, intuitive interfaces that users love and convert.\",\n    features: [\"User Research\", \"Wireframing\", \"Prototyping\"],\n    iconColor: \"text-purple-500\",\n    bgColor: \"bg-purple-500/10\",\n  },\n  {\n    icon: Rocket,\n    title: \"Product Strategy\",\n    description:\n      \"Plan and execute product roadmaps that align with business goals.\",\n    features: [\"Market Analysis\", \"MVP Planning\", \"Go-to-Market\"],\n    iconColor: \"text-orange-500\",\n    bgColor: \"bg-orange-500/10\",\n  },\n  {\n    icon: Shield,\n    title: \"Security & Compliance\",\n    description:\n      \"Protect your application with enterprise-grade security measures.\",\n    features: [\"Data Encryption\", \"GDPR Compliant\", \"Security Audits\"],\n    iconColor: \"text-green-500\",\n    bgColor: \"bg-green-500/10\",\n  },\n  {\n    icon: Zap,\n    title: \"Performance\",\n    description:\n      \"Optimize your applications for speed, reliability, and scalability.\",\n    features: [\"Code Splitting\", \"Caching\", \"CDN Integration\"],\n    iconColor: \"text-yellow-500\",\n    bgColor: \"bg-yellow-500/10\",\n  },\n  {\n    icon: Users,\n    title: \"Team Collaboration\",\n    description: \"Tools and workflows that enable seamless team communication.\",\n    features: [\"Real-time Sync\", \"Version Control\", \"Comments\"],\n    iconColor: \"text-indigo-500\",\n    bgColor: \"bg-indigo-500/10\",\n  },\n  {\n    icon: BarChart3,\n    title: \"Analytics & Insights\",\n    description:\n      \"Track, measure, and analyze your application performance metrics.\",\n    features: [\"Custom Dashboards\", \"Real-time Data\", \"Reports\"],\n    iconColor: \"text-pink-500\",\n    bgColor: \"bg-pink-500/10\",\n  },\n  {\n    icon: Settings,\n    title: \"API Integration\",\n    description:\n      \"Connect with any third-party service through our flexible API.\",\n    features: [\"RESTful APIs\", \"Webhooks\", \"Documentation\"],\n    iconColor: \"text-slate-500\",\n    bgColor: \"bg-slate-500/10\",\n  },\n];\n\nexport function ServicesGridBlock() {\n  return (\n    <section className=\"w-full bg-background px-4 py-16 md:py-24\">\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center md:mb-16\"\n        >\n          <Badge className=\"mb-4\" variant=\"secondary\">\n            What We Offer\n          </Badge>\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl\">\n            Complete Solutions for Your Business\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-base text-muted-foreground md:text-lg\">\n            Everything you need to build, launch, and scale your digital\n            products with confidence\n          </p>\n        </motion.div>\n\n        {/* Services Grid */}\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 md:gap-6\">\n          {services.map((service, index) => {\n            const Icon = service.icon;\n\n            return (\n              <motion.div\n                key={service.title}\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: index * 0.1, duration: 0.5 }}\n                whileHover={{ y: -5 }}\n              >\n                <Card className=\"group relative h-full overflow-hidden border-border/50 bg-card p-4 transition-all hover:border-primary/50 hover:shadow-xl md:p-6\">\n                  {/* Gradient overlay */}\n                  <motion.div\n                    className={`absolute inset-0 ${service.bgColor} opacity-0 transition-opacity duration-500 group-hover:opacity-100`}\n                  />\n\n                  <div className=\"relative z-10\">\n                    {/* Icon */}\n                    <motion.div transition={{ duration: 0.6 }} className=\"mb-4\">\n                      <div\n                        className={`w-fit rounded-xl ${service.bgColor} p-3`}\n                      >\n                        <Icon\n                          className={`h-6 w-6 ${service.iconColor} md:h-7 md:w-7`}\n                        />\n                      </div>\n                    </motion.div>\n\n                    {/* Content */}\n                    <h3 className=\"mb-2 text-lg font-semibold md:text-xl\">\n                      {service.title}\n                    </h3>\n                    <p className=\"mb-4 text-sm text-muted-foreground\">\n                      {service.description}\n                    </p>\n\n                    {/* Features */}\n                    <ul className=\"mb-4 space-y-1.5\">\n                      {service.features.map((feature, idx) => (\n                        <motion.li\n                          key={feature}\n                          initial={{ opacity: 0, x: -10 }}\n                          animate={{ opacity: 1, x: 0 }}\n                          transition={{ delay: 0.5 + idx * 0.1 }}\n                          className=\"flex items-center gap-2 text-xs text-muted-foreground\"\n                        >\n                          <div className={`h-1 w-1 rounded-full bg-primary`} />\n                          {feature}\n                        </motion.li>\n                      ))}\n                    </ul>\n\n                    {/* CTA */}\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"group/btn w-full text-xs md:text-sm\"\n                    >\n                      Learn More\n                      <motion.span\n                        className=\"ml-2\"\n                        animate={{ x: [0, 3, 0] }}\n                        transition={{\n                          repeat: Infinity,\n                          duration: 1.5,\n                          ease: \"easeInOut\",\n                        }}\n                      >\n                        →\n                      </motion.span>\n                    </Button>\n                  </div>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </div>\n\n        {/* Bottom CTA */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 1, duration: 0.5 }}\n          className=\"mt-12 text-center md:mt-16\"\n        >\n          <p className=\"mb-4 text-sm text-muted-foreground md:text-base\">\n            Need a custom solution?\n          </p>\n          <Button size=\"lg\">Contact Our Team</Button>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/services-grid-block-shadcnui.tsx"
    }
  ]
}