{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "our-services-section-shadcnui",
  "type": "registry:block",
  "title": "Our Services",
  "description": "Services section with service cards, badges, icons, and hover animations",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/our-services-section.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, type Variants } from \"framer-motion\";\nimport {\n  Code,\n  Palette,\n  Rocket,\n  Search,\n  Shield,\n  Smartphone,\n} from \"lucide-react\";\n\nconst services = [\n  {\n    icon: Code,\n    title: \"Web Development\",\n    description:\n      \"Custom web applications built with modern technologies and best practices.\",\n    badge: \"Popular\",\n  },\n  {\n    icon: Palette,\n    title: \"UI/UX Design\",\n    description:\n      \"Beautiful and intuitive user interfaces that enhance user experience.\",\n    badge: null,\n  },\n  {\n    icon: Smartphone,\n    title: \"Mobile Apps\",\n    description:\n      \"Native and cross-platform mobile applications for iOS and Android.\",\n    badge: \"New\",\n  },\n  {\n    icon: Search,\n    title: \"SEO Optimization\",\n    description:\n      \"Improve your search engine rankings and drive organic traffic.\",\n    badge: null,\n  },\n  {\n    icon: Rocket,\n    title: \"Performance\",\n    description:\n      \"Optimize your applications for speed, scalability, and efficiency.\",\n    badge: null,\n  },\n  {\n    icon: Shield,\n    title: \"Security\",\n    description:\n      \"Enterprise-grade security solutions to protect your data and users.\",\n    badge: \"Featured\",\n  },\n];\n\nexport function OurServicesSection() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.1,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 30, scale: 0.95 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      scale: 1,\n      transition: { duration: 0.5, ease: \"easeOut\" },\n    },\n  };\n\n  return (\n    <section className=\"bg-background px-4 py-20 md:py-24\">\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-16 text-center\"\n        >\n          <Badge className=\"mb-4\">Our Services</Badge>\n          <h2 className=\"mb-4 text-3xl font-bold md:text-4xl lg:text-5xl\">\n            What We Offer\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n            Comprehensive solutions tailored to meet your business needs and\n            drive growth.\n          </p>\n        </motion.div>\n\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true }}\n          className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\"\n        >\n          {services.map((service, index) => {\n            const Icon = service.icon;\n            return (\n              <motion.div key={service.title} variants={itemVariants}>\n                <Card className=\"group relative h-full border-2 p-6 transition-all hover:border-primary hover:shadow-xl\">\n                  {service.badge && (\n                    <Badge className=\"absolute -right-2 -top-2\">\n                      {service.badge}\n                    </Badge>\n                  )}\n                  <div className=\"mb-4 inline-flex rounded-lg bg-primary/10 p-3 transition-transform group-hover:scale-110\">\n                    <Icon className=\"h-6 w-6 text-primary\" />\n                  </div>\n                  <h3 className=\"mb-2 text-xl font-semibold\">\n                    {service.title}\n                  </h3>\n                  <p className=\"mb-4 text-muted-foreground\">\n                    {service.description}\n                  </p>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"group/btn\">\n                    Learn More\n                    <motion.span\n                      className=\"ml-1 inline-block\"\n                      whileHover={{ x: 5 }}\n                    >\n                      →\n                    </motion.span>\n                  </Button>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/our-services-section-shadcnui.tsx"
    }
  ]
}