{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"team-grid","type":"registry:block","title":"Team Grid","description":"A team section with initials avatars, names, roles and short bios in a four-up responsive grid. Server component, no images.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"components/blocks/team-grid.tsx","target":"components/blocks/team-grid.tsx","content":"const team = [\n  {\n    name: \"Elena Vasquez\",\n    role: \"Chief Executive Officer\",\n    bio: \"Previously led product at two venture-backed startups through to acquisition.\",\n    initials: \"EV\",\n    accent: \"bg-indigo-100 text-indigo-700\",\n  },\n  {\n    name: \"James Okonkwo\",\n    role: \"Chief Technology Officer\",\n    bio: \"Spent a decade building distributed systems before turning to developer tools.\",\n    initials: \"JO\",\n    accent: \"bg-emerald-100 text-emerald-700\",\n  },\n  {\n    name: \"Mei Lin Chen\",\n    role: \"VP of Design\",\n    bio: \"Obsessed with the details that make an interface feel effortless to use.\",\n    initials: \"MC\",\n    accent: \"bg-rose-100 text-rose-700\",\n  },\n  {\n    name: \"Omar Haddad\",\n    role: \"VP of Engineering\",\n    bio: \"Believes great teams ship small, ship often, and learn in the open.\",\n    initials: \"OH\",\n    accent: \"bg-amber-100 text-amber-700\",\n  },\n  {\n    name: \"Grace Thompson\",\n    role: \"Head of Customer Success\",\n    bio: \"Turns first-time users into lifelong advocates, one conversation at a time.\",\n    initials: \"GT\",\n    accent: \"bg-sky-100 text-sky-700\",\n  },\n  {\n    name: \"Raj Patel\",\n    role: \"Head of Growth\",\n    bio: \"Finds the channels that scale and doubles down before anyone else notices.\",\n    initials: \"RP\",\n    accent: \"bg-violet-100 text-violet-700\",\n  },\n  {\n    name: \"Nadia Petrova\",\n    role: \"Principal Product Manager\",\n    bio: \"Translates messy customer problems into a roadmap the team can rally behind.\",\n    initials: \"NP\",\n    accent: \"bg-teal-100 text-teal-700\",\n  },\n  {\n    name: \"Tom Fletcher\",\n    role: \"Head of Marketing\",\n    bio: \"Tells stories that make complex products feel simple and worth caring about.\",\n    initials: \"TF\",\n    accent: \"bg-orange-100 text-orange-700\",\n  },\n];\n\nexport default function TeamGrid() {\n  return (\n    <section className=\"w-full bg-white py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <p className=\"text-sm font-semibold text-indigo-600\">Our team</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl\">\n            The people behind the product\n          </h2>\n          <p className=\"mt-4 text-lg text-slate-500\">\n            A small, senior team that cares deeply about the craft of building software.\n          </p>\n        </div>\n\n        <ul\n          role=\"list\"\n          className=\"mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4\"\n        >\n          {team.map((member) => (\n            <li key={member.name} className=\"text-center\">\n              <span\n                aria-hidden=\"true\"\n                className={`mx-auto flex h-24 w-24 items-center justify-center rounded-full text-2xl font-semibold ${member.accent}`}\n              >\n                {member.initials}\n              </span>\n              <h3 className=\"mt-5 text-base font-semibold text-slate-900\">\n                {member.name}\n              </h3>\n              <p className=\"text-sm font-medium text-indigo-600\">{member.role}</p>\n              <p className=\"mt-3 text-sm text-slate-500\">{member.bio}</p>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block"}],"meta":{"kind":"blocks","categories":["team"],"docs":"https://ui.artbloom.tech/artbloom/blocks/team-grid"}}