{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-section-block-shadcnui",
  "type": "registry:block",
  "title": "Team Section Block",
  "description": "Animated team member cards with avatars, roles, and social links",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/team-section-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 {\n  motion,\n  useMotionValue,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n  type Variants,\n} from \"framer-motion\";\nimport {\n  Github,\n  Linkedin,\n  Mail,\n  MapPin,\n  Sparkles,\n  Twitter,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst teamMembers = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"CEO & Founder\",\n    bio: \"Visionary leader with 15+ years in tech\",\n    image: \"https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah\",\n    location: \"San Francisco\",\n    skills: [\"Strategy\", \"Leadership\", \"Innovation\"],\n    gradient: \"from-white/10 via-white/5 to-transparent\",\n    social: {\n      twitter: \"#\",\n      linkedin: \"#\",\n      github: \"#\",\n      email: \"sarah@example.com\",\n    },\n  },\n  {\n    name: \"Michael Chen\",\n    role: \"CTO\",\n    bio: \"Full-stack architect and AI enthusiast\",\n    image: \"https://api.dicebear.com/7.x/avataaars/svg?seed=Michael\",\n    location: \"New York\",\n    skills: [\"AI/ML\", \"Architecture\", \"Cloud\"],\n    gradient: \"from-white/12 via-white/5 to-transparent\",\n    social: {\n      twitter: \"#\",\n      linkedin: \"#\",\n      github: \"#\",\n      email: \"michael@example.com\",\n    },\n  },\n  {\n    name: \"Emily Rodriguez\",\n    role: \"Head of Design\",\n    bio: \"Creative mind behind beautiful interfaces\",\n    image: \"https://api.dicebear.com/7.x/avataaars/svg?seed=Emily\",\n    location: \"London\",\n    skills: [\"UI/UX\", \"Branding\", \"Motion\"],\n    gradient: \"from-white/12 via-white/5 to-transparent\",\n    social: {\n      twitter: \"#\",\n      linkedin: \"#\",\n      github: \"#\",\n      email: \"emily@example.com\",\n    },\n  },\n  {\n    name: \"David Park\",\n    role: \"Lead Developer\",\n    bio: \"Code wizard and performance optimizer\",\n    image: \"https://api.dicebear.com/7.x/avataaars/svg?seed=David\",\n    location: \"Tokyo\",\n    skills: [\"React\", \"TypeScript\", \"Performance\"],\n    gradient: \"from-foreground/12 via-foreground/5 to-transparent\",\n    social: {\n      twitter: \"#\",\n      linkedin: \"#\",\n      github: \"#\",\n      email: \"david@example.com\",\n    },\n  },\n];\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.15,\n      delayChildren: 0.3,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 30, scale: 0.9 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: {\n      duration: 0.6,\n      ease: [0.6, 0.05, 0.01, 0.9],\n    },\n  },\n};\n\nfunction TeamMemberCard({ member }: { member: (typeof teamMembers)[0] }) {\n  const [isHovered, setIsHovered] = useState(false);\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const shouldReduceMotion = useReducedMotion();\n\n  const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), {\n    stiffness: 300,\n    damping: 30,\n  });\n  const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), {\n    stiffness: 300,\n    damping: 30,\n  });\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const width = rect.width;\n    const height = rect.height;\n    const x = (e.clientX - rect.left - width / 2) / (width / 2);\n    const y = (e.clientY - rect.top - height / 2) / (height / 2);\n    mouseX.set(x);\n    mouseY.set(y);\n  };\n\n  const handleMouseLeave = () => {\n    mouseX.set(0);\n    mouseY.set(0);\n    setIsHovered(false);\n  };\n\n  return (\n    <motion.div variants={itemVariants} className=\"perspective-1000\">\n      <motion.div\n        style={{\n          rotateX,\n          rotateY,\n          transformStyle: \"preserve-3d\",\n        }}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={handleMouseLeave}\n        className=\"group relative\"\n      >\n        <Card className=\"relative overflow-hidden rounded-3xl border border-border/60 bg-card  backdrop-blur-xl transition-shadow duration-500\">\n          {/* Animated gradient overlay */}\n          <motion.div\n            className={`absolute inset-0 bg-gradient-to-br ${member.gradient} opacity-0 transition-opacity duration-500 group-hover:opacity-100`}\n            animate={\n              isHovered\n                ? { opacity: 1 }\n                : { opacity: shouldReduceMotion ? 0.05 : 0 }\n            }\n          />\n\n          {/* Sparkle effect on hover */}\n          <motion.div\n            initial={{ opacity: 0, scale: 0 }}\n            animate={\n              isHovered\n                ? { opacity: 1, scale: 1 }\n                : { opacity: 0, scale: shouldReduceMotion ? 1 : 0.6 }\n            }\n            className=\"absolute right-4 top-4 z-10\"\n          >\n            <Sparkles className=\"h-5 w-5 text-primary\" aria-hidden />\n          </motion.div>\n\n          <div className=\"relative z-10 p-6\">\n            {/* Avatar Section */}\n            <div className=\"mb-4 flex justify-center\">\n              <motion.div\n                className=\"relative\"\n                whileHover={{ scale: 1.05 }}\n                transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n              >\n                <motion.div\n                  className=\"absolute -inset-2 rounded-full opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100\"\n                  style={{\n                    background: `linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0))`,\n                  }}\n                  animate={\n                    isHovered\n                      ? {\n                          rotate: shouldReduceMotion ? 0 : 360,\n                          scale: shouldReduceMotion ? 1 : [1, 1.08, 1],\n                        }\n                      : { rotate: 0, scale: 1 }\n                  }\n                  transition={{\n                    duration: shouldReduceMotion ? 0.6 : 3,\n                    repeat: shouldReduceMotion ? 0 : Infinity,\n                    ease: \"linear\",\n                  }}\n                />\n                <div className=\"relative h-28 w-28 overflow-hidden rounded-full border border-border/60 bg-card/80 p-1\">\n                  <motion.img\n                    src={member.image}\n                    alt={member.name}\n                    className=\"h-full w-full rounded-full object-cover\"\n                    whileHover={{ scale: 1.1 }}\n                    transition={{ duration: 0.3 }}\n                  />\n                </div>\n              </motion.div>\n            </div>\n\n            {/* Info Section */}\n            <div className=\"text-center\">\n              <motion.h3\n                className=\"mb-1 text-xl font-semibold tracking-tight text-white\"\n                animate={isHovered ? { scale: 1.05 } : { scale: 1 }}\n                transition={{ duration: 0.2 }}\n              >\n                {member.name}\n              </motion.h3>\n              <Badge\n                variant=\"secondary\"\n                className=\"mb-2 bg-white/10 text-xs uppercase tracking-[0.28em] text-[var(--muted-foreground)] backdrop-blur\"\n              >\n                {member.role}\n              </Badge>\n\n              <motion.div\n                className=\"mb-3 flex items-center justify-center gap-1 text-xs text-[var(--muted-foreground)]\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ delay: 0.2 }}\n              >\n                <MapPin className=\"h-3 w-3\" aria-hidden />\n                <span>{member.location}</span>\n              </motion.div>\n\n              <p className=\"mb-4 text-sm text-[var(--muted-foreground)]\">\n                {member.bio}\n              </p>\n\n              {/* Skills */}\n              <motion.div\n                className=\"mb-4 flex flex-wrap justify-center gap-1.5\"\n                initial={{ opacity: 0, y: 10 }}\n                animate={\n                  isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 0 }\n                }\n                transition={{ duration: 0.3 }}\n              >\n                {member.skills.map((skill, idx) => (\n                  <motion.div\n                    key={skill}\n                    initial={{ scale: 0 }}\n                    animate={{ scale: 1 }}\n                    transition={{ delay: 0.1 * idx, type: \"spring\" }}\n                  >\n                    <Badge\n                      variant=\"outline\"\n                      className=\"border-border/60 bg-white/5 text-xs text-[var(--muted-foreground)] transition-colors hover:bg-white/10\"\n                    >\n                      {skill}\n                    </Badge>\n                  </motion.div>\n                ))}\n              </motion.div>\n\n              {/* Social Links */}\n              <motion.div\n                className=\"flex justify-center gap-2\"\n                initial={{ opacity: 0, y: 10 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: 0.3 }}\n              >\n                {[\n                  { icon: Twitter, label: \"Twitter\" },\n                  { icon: Linkedin, label: \"LinkedIn\" },\n                  { icon: Github, label: \"GitHub\" },\n                  { icon: Mail, label: \"Email\" },\n                ].map((social, idx) => (\n                  <motion.div\n                    key={social.label}\n                    initial={{ scale: 0, rotate: -180 }}\n                    animate={\n                      isHovered\n                        ? { scale: 1, rotate: shouldReduceMotion ? 0 : 0 }\n                        : { scale: 0.85, rotate: 0 }\n                    }\n                    transition={{\n                      delay: isHovered ? 0.1 * idx : 0,\n                      type: \"spring\",\n                      stiffness: 300,\n                      damping: 20,\n                    }}\n                  >\n                    <Button\n                      size=\"icon\"\n                      variant=\"ghost\"\n                      className=\"h-8 w-8 rounded-full border border-border/40 bg-white/5 text-[var(--muted-foreground)] transition-colors hover:text-white\"\n                    >\n                      <motion.div\n                        transition={{\n                          duration: shouldReduceMotion ? 0.25 : 0.4,\n                        }}\n                      >\n                        <social.icon className=\"h-4 w-4\" aria-hidden />\n                      </motion.div>\n                    </Button>\n                  </motion.div>\n                ))}\n              </motion.div>\n            </div>\n          </div>\n        </Card>\n      </motion.div>\n    </motion.div>\n  );\n}\n\nexport function TeamSectionBlock() {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <section\n      aria-labelledby=\"team-section-heading\"\n      className=\"relative w-full overflow-hidden px-4 py-20 sm:px-6 lg:px-10\"\n    >\n      {/* Background decorative elements */}\n      <div className=\"absolute inset-0 -z-10 overflow-hidden\">\n        <motion.div\n          animate={{\n            scale: shouldReduceMotion ? 1 : [1, 1.18, 1],\n            rotate: shouldReduceMotion ? 0 : [0, 90, 0],\n            opacity: [0.12, 0.3, 0.12],\n          }}\n          transition={{\n            duration: shouldReduceMotion ? 0.6 : 18,\n            repeat: shouldReduceMotion ? 0 : Infinity,\n            ease: \"linear\",\n          }}\n          className=\"absolute -right-24 -top-24 h-96 w-96 rounded-full bg-primary/25 blur-[180px]\"\n        />\n        <motion.div\n          animate={{\n            scale: shouldReduceMotion ? 1 : [1.1, 1, 1.1],\n            rotate: shouldReduceMotion ? 0 : [0, -90, 0],\n            opacity: [0.12, 0.32, 0.12],\n          }}\n          transition={{\n            duration: shouldReduceMotion ? 0.6 : 16,\n            repeat: shouldReduceMotion ? 0 : Infinity,\n            ease: \"linear\",\n          }}\n          className=\"absolute -bottom-24 -left-24 h-96 w-96 rounded-full bg-emerald-400/20 blur-[180px]\"\n        />\n      </div>\n\n      <div className=\"mx-auto max-w-7xl\">\n        {/* Header */}\n        <motion.div\n          initial={{ opacity: 0, y: -30 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.8, ease: [0.6, 0.05, 0.01, 0.9] }}\n          className=\"mb-16 text-center\"\n        >\n          <motion.div className=\"mb-6 inline-block\">\n            <Badge\n              className=\"gap-2 bg-white/10 text-[var(--muted-foreground)] backdrop-blur\"\n              variant=\"secondary\"\n            >\n              <Sparkles className=\"h-3 w-3\" aria-hidden />\n              Our Dream Team\n            </Badge>\n          </motion.div>\n\n          <motion.h2\n            id=\"team-section-heading\"\n            className=\"mb-6 bg-gradient-to-r from-white via-white/80 to-white/60 bg-clip-text text-5xl font-semibold tracking-tight text-transparent md:text-6xl\"\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.2, duration: 0.6 }}\n          >\n            Meet the people behind\n            <br />\n            <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\n              our success\n            </span>\n          </motion.h2>\n\n          <motion.p\n            className=\"mx-auto max-w-2xl text-lg text-[var(--muted-foreground)]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ delay: 0.4, duration: 0.6 }}\n          >\n            A diverse team of talented individuals working together to build\n            amazing products and deliver exceptional results.\n          </motion.p>\n        </motion.div>\n\n        {/* Team Grid */}\n        <motion.div\n          variants={containerVariants}\n          initial=\"hidden\"\n          animate=\"visible\"\n          className=\"grid gap-8 sm:grid-cols-2 lg:grid-cols-2\"\n        >\n          {teamMembers.map((member, index) => (\n            <TeamMemberCard key={index} member={member} />\n          ))}\n        </motion.div>\n\n        {/* CTA */}\n        <motion.div\n          initial={{ opacity: 0, y: 30 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 1, duration: 0.6 }}\n          className=\"mt-16 text-center\"\n        >\n          <Card className=\"inline-flex flex-col items-center gap-6 rounded-3xl border border-border/60 bg-card/80 px-10 py-8 shadow-[0_20px_70px_-30px_rgba(15,23,42,0.6)] backdrop-blur-xl\">\n            <h3 className=\"text-2xl font-semibold\">Join Our Amazing Team</h3>\n            <p className=\"max-w-xl text-sm text-[var(--muted-foreground)]\">\n              We&apos;re always looking for talented people to join our mission\n            </p>\n            <Button\n              size=\"lg\"\n              className=\"group relative overflow-hidden rounded-full bg-primary px-10 py-6 text-primary-foreground shadow-lg shadow-primary/25 transition-transform duration-300 hover:translate-y-[-2px]\"\n            >\n              <motion.span\n                className=\"absolute inset-0 bg-gradient-to-r from-white/10 via-white/20 to-white/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                animate={\n                  shouldReduceMotion ? undefined : { x: [\"-120%\", \"120%\"] }\n                }\n                transition={\n                  shouldReduceMotion\n                    ? undefined\n                    : { repeat: Infinity, duration: 2, ease: \"linear\" }\n                }\n              />\n              <span className=\"relative font-medium\">View Open Positions</span>\n              <motion.span\n                className=\"relative ml-2\"\n                animate={shouldReduceMotion ? undefined : { x: [0, 5, 0] }}\n                transition={\n                  shouldReduceMotion\n                    ? undefined\n                    : { repeat: Infinity, duration: 1.5 }\n                }\n              >\n                →\n              </motion.span>\n            </Button>\n          </Card>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/team-section-block-shadcnui.tsx"
    }
  ]
}