{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-us-section-shadcnui",
  "type": "registry:block",
  "title": "About Us",
  "description": "About us section with value cards, icons, and animated reveal effects",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/about-us-section.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion, Variants } from \"framer-motion\";\nimport { Award, Heart, Target, Users } from \"lucide-react\";\n\nconst values = [\n  {\n    icon: Target,\n    title: \"Our Mission\",\n    description:\n      \"To deliver exceptional solutions that drive growth and innovation for our clients.\",\n  },\n  {\n    icon: Users,\n    title: \"Our Team\",\n    description:\n      \"A diverse group of talented professionals dedicated to excellence.\",\n  },\n  {\n    icon: Award,\n    title: \"Our Excellence\",\n    description:\n      \"Recognized for outstanding quality and innovation in everything we do.\",\n  },\n  {\n    icon: Heart,\n    title: \"Our Values\",\n    description:\n      \"Integrity, transparency, and commitment to our clients success.\",\n  },\n];\n\nexport function AboutUsSection() {\n  const containerVariants: Variants = {\n    hidden: { opacity: 0 },\n    visible: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.15,\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: { opacity: 0, y: 30 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.6, 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\">About Us</Badge>\n          <h2 className=\"mb-4 text-3xl font-bold md:text-4xl lg:text-5xl\">\n            Who We Are\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-lg text-muted-foreground\">\n            We are a team of passionate professionals committed to delivering\n            excellence and driving innovation in everything we do.\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-2\"\n        >\n          {values.map((value, index) => {\n            const Icon = value.icon;\n            return (\n              <motion.div key={value.title} variants={itemVariants}>\n                <Card className=\"group h-full border-2 p-6 transition-all hover:border-primary hover:shadow-lg\">\n                  <div className=\"mb-4 inline-flex rounded-lg bg-primary/10 p-3\">\n                    <Icon className=\"h-6 w-6 text-primary transition-transform group-hover:scale-110\" />\n                  </div>\n                  <h3 className=\"mb-2 text-xl font-semibold\">{value.title}</h3>\n                  <p className=\"text-muted-foreground\">{value.description}</p>\n                </Card>\n              </motion.div>\n            );\n          })}\n        </motion.div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.6, delay: 0.4 }}\n          className=\"mt-16 rounded-lg border-2 border-primary/20 bg-primary/5 p-8 text-center\"\n        >\n          <h3 className=\"mb-4 text-2xl font-bold\">Join Our Journey</h3>\n          <p className=\"mx-auto max-w-2xl text-muted-foreground\">\n            We're always looking for talented individuals to join our growing\n            team. Let's build something amazing together.\n          </p>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/about-us-section-shadcnui.tsx"
    }
  ]
}