{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["avatar","button","@efferd/full-width-divider","@efferd/github-icon","@efferd/linkedin-icon","@efferd/x-icon"],"name":"team-3","description":"Three-column team grid with centered avatars, names, roles, and social icons, plus a hiring call-to-action.","categories":["team"],"files":[{"path":"registry/blocks/team/3/team-section.tsx","type":"registry:component","content":"import { GithubIcon } from \"@/components/icons/github-icon\";\nimport { LinkedinIcon } from \"@/components/icons/linkedin-icon\";\nimport { XIcon } from \"@/components/icons/x-icon\";\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\ntype Social = {\n\tlabel: \"X\" | \"GitHub\" | \"LinkedIn\";\n\thref: string;\n};\n\ntype TeamMember = {\n\tname: string;\n\trole: string;\n\timage: string;\n\tsocials: Social[];\n};\n\nconst socialIcons = {\n\tX: XIcon,\n\tGitHub: GithubIcon,\n\tLinkedIn: LinkedinIcon,\n} as const;\n\nconst team: TeamMember[] = [\n\t{\n\t\tname: \"Shaban Haider\",\n\t\trole: \"Founder & CEO\",\n\t\timage: \"https://github.com/shabanhr.png\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Jordan Blake\",\n\t\trole: \"Head of Product\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Priya Nair\",\n\t\trole: \"Design Lead\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Alex Rivera\",\n\t\trole: \"Engineering\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Sam Okonkwo\",\n\t\trole: \"Growth\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"LinkedIn\", href: \"#\" },\n\t\t],\n\t},\n\t{\n\t\tname: \"Leo Park\",\n\t\trole: \"Developer Experience\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=800&q=80\",\n\t\tsocials: [\n\t\t\t{ label: \"X\", href: \"#\" },\n\t\t\t{ label: \"GitHub\", href: \"#\" },\n\t\t],\n\t},\n];\n\nexport function TeamSection() {\n\treturn (\n\t\t<section\n\t\t\taria-labelledby=\"team-heading\"\n\t\t\tclassName=\"mx-auto w-full max-w-5xl border-x py-4\"\n\t\t>\n\t\t\t<div className=\"flex flex-col gap-2 px-4 py-8 md:px-6 md:py-12\">\n\t\t\t\t<h2\n\t\t\t\t\tclassName=\"text-balance font-medium text-3xl md:text-4xl\"\n\t\t\t\t\tid=\"team-heading\"\n\t\t\t\t>\n\t\t\t\t\tMeet the <span className=\"font-serif italic\">people</span>\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"max-w-lg text-pretty text-muted-foreground text-sm md:text-base\">\n\t\t\t\t\tThe humans who design, ship, and obsess over every Efferd block.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"relative\">\n\t\t\t\t<FullWidthDivider position=\"top\" />\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"pointer-events-none absolute inset-y-0 left-1/2 hidden w-px bg-border sm:block lg:hidden\"\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"pointer-events-none absolute inset-y-0 left-1/3 hidden w-px bg-border lg:block\"\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"pointer-events-none absolute inset-y-0 left-2/3 hidden w-px bg-border lg:block\"\n\t\t\t\t/>\n\t\t\t\t<ul className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t\t{team.map((member) => (\n\t\t\t\t\t\t<TeamMemberCard key={member.name} member={member} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\t\t\t</div>\n\n\t\t\t<div className=\"relative flex flex-col items-start justify-between gap-4 px-4 py-6 md:flex-row md:items-center md:px-6\">\n\t\t\t\t<FullWidthDivider position=\"bottom\" />\n\t\t\t\t<p className=\"text-pretty text-lg text-muted-foreground\">\n\t\t\t\t\t<span className=\"font-medium text-foreground\">Join us!</span> Let's\n\t\t\t\t\tshape the future of the web together\n\t\t\t\t</p>\n\t\t\t\t<Button asChild variant=\"outline\">\n\t\t\t\t\t<a href=\"#careers\">View openings</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nfunction TeamMemberCard({ member }: { member: TeamMember }) {\n\tconst { name, role, image, socials } = member;\n\n\treturn (\n\t\t<li className=\"flex flex-col items-center gap-5 px-6 py-10 text-center md:py-14\">\n\t\t\t<Avatar className=\"size-20 md:size-24\">\n\t\t\t\t<AvatarImage alt={`${name}'s portrait`} src={image} />\n\t\t\t\t<AvatarFallback>{getInitials(name)}</AvatarFallback>\n\t\t\t</Avatar>\n\t\t\t<div className=\"flex flex-col items-center gap-1\">\n\t\t\t\t<h3 className=\"font-medium text-foreground\">{name}</h3>\n\t\t\t\t<p className=\"text-pretty text-muted-foreground text-sm\">{role}</p>\n\t\t\t\t<div className=\"mt-1 flex\">\n\t\t\t\t\t{socials.map((social) => {\n\t\t\t\t\t\tconst Icon = socialIcons[social.label];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground\"\n\t\t\t\t\t\t\t\tkey={social.label}\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<a aria-label={`${name} on ${social.label}`} href={social.href}>\n\t\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t);\n}\n\nfunction getInitials(name: string) {\n\treturn name\n\t\t.split(\" \")\n\t\t.map((part) => part[0])\n\t\t.join(\"\")\n\t\t.slice(0, 2)\n\t\t.toUpperCase();\n}\n"}]}