{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "team-3", "title": "Hover Reveal Bio Cards", "description": "Four-column grid of eight team member cards that reveal a bio and social links on hover.", "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "avatar", "card" ], "files": [ { "path": "registry/blocks/team/3/team-block.tsx", "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card } from \"@/components/ui/card\"\nimport { cn } from \"@/lib/utils\"\n\nconst members = [\n {\n name: \"Clara Hoffmann\",\n role: \"Chief Executive Officer\",\n bio: \"Scaled three enterprise platforms from seed to IPO. Leads with clarity and an obsession for customer impact.\",\n img: \"https://i.pravatar.cc/150?img=5\",\n },\n {\n name: \"Marcus Tran\",\n role: \"Chief Technology Officer\",\n bio: \"Former staff engineer at Google. Builds resilient distributed systems and the teams that maintain them.\",\n img: \"https://i.pravatar.cc/150?img=12\",\n },\n {\n name: \"Amara Osei\",\n role: \"Head of Design\",\n bio: \"Crafts interfaces that win awards and convert users. Believes great design is invisible until it's gone.\",\n img: \"https://i.pravatar.cc/150?img=20\",\n },\n {\n name: \"Lena Kovac\",\n role: \"VP of Engineering\",\n bio: \"Led platform migrations at Stripe and Figma. Turns technical debt into roadmap wins quarter after quarter.\",\n img: \"https://i.pravatar.cc/150?img=32\",\n },\n {\n name: \"Daniel Reyes\",\n role: \"Head of Product\",\n bio: \"Zero-to-one product thinker. Shipped features now used by over four million people across the globe.\",\n img: \"https://i.pravatar.cc/150?img=14\",\n },\n {\n name: \"Sophie Laurent\",\n role: \"Head of Marketing\",\n bio: \"Turned brand storytelling into a growth engine twice, at companies you already know and trust.\",\n img: \"https://i.pravatar.cc/150?img=45\",\n },\n {\n name: \"Yuki Tanaka\",\n role: \"Head of Data\",\n bio: \"Built the analytics backbone powering every decision. Makes numbers tell stories executives act on.\",\n img: \"https://i.pravatar.cc/150?img=60\",\n },\n {\n name: \"Noah Bennett\",\n role: \"Head of Operations\",\n bio: \"Keeps the company running like clockwork. Scaled support and finance through three hypergrowth phases.\",\n img: \"https://i.pravatar.cc/150?img=68\",\n },\n]\n\nconst socials = [\n { label: \"X\", icon: XOutlineMark },\n { label: \"LinkedIn\", icon: LinkedinOutlineMark },\n { label: \"GitHub\", icon: GithubOutlineMark },\n { label: \"Dribbble\", icon: DribbbleOutlineMark },\n]\n\nfunction getInitials(name: string) {\n return name\n .split(\" \")\n .map((part) => part[0])\n .join(\"\")\n}\n\nexport default function TeamBlock() {\n return (\n
\n
\n
\n

\n Meet the Acme team\n

\n

\n A small, senior crew that has shipped products used by millions.\n Hover a card to learn what makes each of them tick.\n

\n
\n\n
\n {members.map(({ name, role, bio, img }) => (\n \n
\n \n \n \n {getInitials(name)}\n \n \n
\n \n {name}\n \n {role}\n
\n
\n\n \n

\n {bio}\n

\n
\n {socials.map(({ label, icon: Icon }) => (\n \n \n \n ))}\n
\n
\n \n ))}\n
\n \n
\n )\n}\n\n// Brand marks are inlined rather than imported from an icon library, which\n// would drag a whole extra package into the consumer's install for a handful\n// of glyphs.\ntype MarkProps = React.ComponentProps<\"svg\"> & { size?: number | string }\n\nfunction DribbbleOutlineMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction GithubOutlineMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction LinkedinOutlineMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction XOutlineMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/team-3.tsx" } ], "meta": { "height": "748px", "tier": "free" }, "categories": [ "team" ], "type": "registry:block" }