{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "team-section-block-baseui",
  "type": "registry:block",
  "title": "Team Section Block",
  "description": "Animated team member cards with avatars, roles, and social links (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/team-section-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { motion, useReducedMotion, type Variants } from \"framer-motion\";\nimport { Github, Linkedin, Mail, MapPin, Twitter } from \"lucide-react\";\n\nconst cn = (...c: (string | false | undefined)[]) => c.filter(Boolean).join(\" \");\n\n/**\n * Neutral placeholder avatar, generated inline. The previous build fetched\n * every face from `api.dicebear.com`, which put a network dependency (and a\n * third-party request) inside a component people copy into their own projects.\n * Pass `image` to swap in a real photo.\n */\nfunction grayAvatar(initials: string) {\n  const svg =\n    `%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E` +\n    `%3Crect width='160' height='160' fill='%23d4d4d4'/%3E` +\n    `%3Ctext x='50%25' y='50%25' dy='.35em' text-anchor='middle' ` +\n    `font-family='system-ui,-apple-system,sans-serif' font-size='56' font-weight='600' ` +\n    `fill='%23737373'%3E${initials}%3C/text%3E%3C/svg%3E`;\n  return `data:image/svg+xml,${svg}`;\n}\n\nconst initialsOf = (name: string) =>\n  name\n    .split(\" \")\n    .map((part) => part[0])\n    .slice(0, 2)\n    .join(\"\");\n\ntype TeamMember = {\n  name: string;\n  role: string;\n  bio: string;\n  image?: string;\n  location: string;\n  skills: string[];\n  social: { twitter?: string; linkedin?: string; github?: string; email?: string };\n};\n\nconst teamMembers: TeamMember[] = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"CEO & Founder\",\n    bio: \"Visionary leader with 15+ years in tech\",\n    location: \"San Francisco\",\n    skills: [\"Strategy\", \"Leadership\", \"Innovation\"],\n    social: {\n      twitter: \"https://twitter.com/\",\n      linkedin: \"https://linkedin.com/\",\n      github: \"https://github.com/\",\n      email: \"sarah@example.com\",\n    },\n  },\n  {\n    name: \"Michael Chen\",\n    role: \"CTO\",\n    bio: \"Full-stack architect and AI enthusiast\",\n    location: \"New York\",\n    skills: [\"AI/ML\", \"Architecture\", \"Cloud\"],\n    social: {\n      twitter: \"https://twitter.com/\",\n      linkedin: \"https://linkedin.com/\",\n      github: \"https://github.com/\",\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    location: \"London\",\n    skills: [\"UI/UX\", \"Branding\", \"Motion\"],\n    social: {\n      twitter: \"https://twitter.com/\",\n      linkedin: \"https://linkedin.com/\",\n      github: \"https://github.com/\",\n      email: \"emily@example.com\",\n    },\n  },\n  {\n    name: \"David Park\",\n    role: \"Lead Developer\",\n    bio: \"Code wizard and performance optimizer\",\n    location: \"Tokyo\",\n    skills: [\"React\", \"TypeScript\", \"Performance\"],\n    social: {\n      twitter: \"https://twitter.com/\",\n      linkedin: \"https://linkedin.com/\",\n      github: \"https://github.com/\",\n      email: \"david@example.com\",\n    },\n  },\n];\n\nconst EASE_OUT: [number, number, number, number] = [0.2, 0, 0, 1];\n\nfunction TeamMemberCard({ member }: { member: TeamMember }) {\n  const socials = [\n    { key: \"twitter\", icon: Twitter, label: \"X (Twitter)\", href: member.social.twitter },\n    { key: \"linkedin\", icon: Linkedin, label: \"LinkedIn\", href: member.social.linkedin },\n    { key: \"github\", icon: Github, label: \"GitHub\", href: member.social.github },\n    {\n      key: \"email\",\n      icon: Mail,\n      label: \"Email\",\n      href: member.social.email ? `mailto:${member.social.email}` : undefined,\n    },\n  ].filter((s) => s.href);\n\n  return (\n    <motion.div variants={itemVariants} className=\"flex\">\n      <div\n        className={cn(\n          \"group relative flex w-full flex-col items-center overflow-hidden rounded-2xl border border-border bg-card p-6 text-center text-card-foreground shadow-sm\",\n          \"transition-[border-color,box-shadow] duration-300 ease-[cubic-bezier(0.2,0,0,1)]\",\n          \"hover:border-foreground/25 hover:shadow-md motion-reduce:transition-none\"\n        )}\n      >\n        <div className=\"mb-4 size-28 overflow-hidden rounded-full border border-border bg-muted\">\n          <img\n            src={member.image ?? grayAvatar(initialsOf(member.name))}\n            alt=\"\"\n            width={112}\n            height={112}\n            className=\"size-full object-cover\"\n          />\n        </div>\n\n        <h3 className=\"mb-1 text-xl font-semibold tracking-tight text-foreground\">\n          {member.name}\n        </h3>\n        <span className=\"mb-2 inline-flex items-center rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground\">\n          {member.role}\n        </span>\n\n        <p className=\"mb-3 flex items-center justify-center gap-1 text-xs text-muted-foreground\">\n          <MapPin className=\"size-3\" aria-hidden />\n          {member.location}\n        </p>\n\n        <p className=\"mb-4 text-pretty text-sm text-muted-foreground\">{member.bio}</p>\n\n        <ul className=\"mb-5 flex flex-wrap justify-center gap-1.5\">\n          {member.skills.map((skill) => (\n            <li key={skill}>\n              <span className=\"inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-normal text-foreground\">\n                {skill}\n              </span>\n            </li>\n          ))}\n        </ul>\n\n        {/*\n          These were icon-only <Button>s with the icon aria-hidden and the\n          label never rendered, so all four announced as an unnamed \"button\"\n          and none of them navigated anywhere.\n        */}\n        <ul className=\"mt-auto flex justify-center gap-1.5\">\n          {socials.map((social) => {\n            const Icon = social.icon;\n            return (\n              <li key={social.key}>\n                <a\n                  href={social.href}\n                  aria-label={`${member.name} on ${social.label}`}\n                  className=\"inline-flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n                >\n                  <Icon className=\"size-4\" aria-hidden />\n                </a>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    </motion.div>\n  );\n}\n\nconst containerVariants: Variants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.1 } },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE_OUT } },\n};\n\nexport function TeamSectionBlockBaseui() {\n  const shouldReduceMotion = useReducedMotion();\n\n  const reveal = shouldReduceMotion\n    ? { initial: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0 } }\n    : { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5, ease: EASE_OUT } };\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      <div aria-hidden className=\"absolute inset-0 -z-10 overflow-hidden\">\n        <div className=\"absolute -right-24 -top-24 size-96 rounded-full bg-foreground/[0.06] blur-[160px]\" />\n        <div className=\"absolute -bottom-24 -left-24 size-96 rounded-full bg-foreground/[0.04] blur-[160px]\" />\n      </div>\n\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div {...reveal} className=\"mb-16 text-center\">\n          <span className=\"mb-6 inline-flex items-center gap-2 rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground\">\n            Our team\n          </span>\n\n          <h2\n            id=\"team-section-heading\"\n            className=\"mb-6 text-balance text-4xl font-semibold tracking-tight text-foreground md:text-5xl\"\n          >\n            Meet the people behind our success\n          </h2>\n\n          <p className=\"mx-auto max-w-2xl text-pretty text-lg text-muted-foreground\">\n            A diverse team of talented individuals working together to build\n            amazing products and deliver exceptional results.\n          </p>\n        </motion.div>\n\n        <motion.div\n          variants={shouldReduceMotion ? undefined : containerVariants}\n          initial={shouldReduceMotion ? false : \"hidden\"}\n          animate={shouldReduceMotion ? undefined : \"visible\"}\n          className=\"grid gap-6 sm:grid-cols-2\"\n        >\n          {teamMembers.map((member) => (\n            <TeamMemberCard key={member.name} member={member} />\n          ))}\n        </motion.div>\n\n        <motion.div {...reveal} className=\"mt-16 text-center\">\n          <div className=\"inline-flex flex-col items-center gap-4 rounded-2xl border border-border bg-card px-10 py-8 text-card-foreground shadow-sm\">\n            <h3 className=\"text-2xl font-semibold tracking-tight\">\n              Join our team\n            </h3>\n            <p className=\"max-w-xl text-pretty text-sm text-muted-foreground\">\n              We&apos;re always looking for talented people to join our mission.\n            </p>\n            <Button className=\"inline-flex h-11 items-center justify-center rounded-full bg-primary px-8 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\">\n              View open positions\n            </Button>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/team-section-block-baseui.tsx"
    }
  ]
}