{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "team",
    "type": "registry:component",
    "title": "Team",
    "description": "A leadership-team grid with member photos, roles, names and LinkedIn links.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/team.html",
            "type": "registry:file",
            "target": "components/team.html",
            "content": "<!-- Team\n     A leadership-team grid: an eyebrow, a heading and a grid of member cards\n     with a photo, a role, a name and a LinkedIn link. Swap the placeholder\n     photos for real portraits. Marketing theme. -->\n\n<section class=\"dp-team\">\n  <p class=\"dp-team-eyebrow\">Team</p>\n  <h2 class=\"dp-team-title\">Meet our leadership team</h2>\n\n  <div class=\"dp-team-grid\">\n    <article class=\"dp-team-card\">\n      <div class=\"dp-team-photo\" data-initials=\"MN\" aria-hidden=\"true\"></div>\n      <p class=\"dp-team-role\">Co-founder</p>\n      <div class=\"dp-team-name-row\">\n        <h3 class=\"dp-team-name\">Marc Noël</h3>\n        <a class=\"dp-team-social\" href=\"https://www.linkedin.com/company/dataprovidercom/\" aria-label=\"Marc Noël on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"></path></svg>\n        </a>\n      </div>\n    </article>\n\n    <article class=\"dp-team-card\">\n      <div class=\"dp-team-photo\" data-initials=\"CB\" aria-hidden=\"true\"></div>\n      <p class=\"dp-team-role\">Co-founder</p>\n      <div class=\"dp-team-name-row\">\n        <h3 class=\"dp-team-name\">Christian Branbergen</h3>\n        <a class=\"dp-team-social\" href=\"https://www.linkedin.com/company/dataprovidercom/\" aria-label=\"Christian Branbergen on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"></path></svg>\n        </a>\n      </div>\n    </article>\n\n    <article class=\"dp-team-card\">\n      <div class=\"dp-team-photo\" data-initials=\"GB\" aria-hidden=\"true\"></div>\n      <p class=\"dp-team-role\">Co-founder</p>\n      <div class=\"dp-team-name-row\">\n        <h3 class=\"dp-team-name\">Gijs Barends</h3>\n        <a class=\"dp-team-social\" href=\"https://www.linkedin.com/company/dataprovidercom/\" aria-label=\"Gijs Barends on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"></path></svg>\n        </a>\n      </div>\n    </article>\n\n    <article class=\"dp-team-card\">\n      <div class=\"dp-team-photo\" data-initials=\"MP\" aria-hidden=\"true\"></div>\n      <p class=\"dp-team-role\">Privacy officer</p>\n      <div class=\"dp-team-name-row\">\n        <h3 class=\"dp-team-name\">Martin Plak</h3>\n        <a class=\"dp-team-social\" href=\"https://www.linkedin.com/company/dataprovidercom/\" aria-label=\"Martin Plak on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"></path></svg>\n        </a>\n      </div>\n    </article>\n\n    <article class=\"dp-team-card\">\n      <div class=\"dp-team-photo\" data-initials=\"RM\" aria-hidden=\"true\"></div>\n      <p class=\"dp-team-role\">Legal counsel</p>\n      <div class=\"dp-team-name-row\">\n        <h3 class=\"dp-team-name\">Rutger Middendorf</h3>\n        <a class=\"dp-team-social\" href=\"https://www.linkedin.com/company/dataprovidercom/\" aria-label=\"Rutger Middendorf on LinkedIn\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"></path></svg>\n        </a>\n      </div>\n    </article>\n  </div>\n</section>\n"
        },
        {
            "path": "components/team.css",
            "type": "registry:file",
            "target": "components/team.css",
            "content": "/* Team\n   A leadership-team grid with a heading and member cards. The photo is a\n   placeholder that shows the person's initials; replace with a real portrait.\n   Colour and type from tokens.css (marketing theme). */\n\n.dp-team {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n.dp-team-eyebrow {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-link);\n}\n\n.dp-team-title {\n  margin: 0 0 var(--dp-space-8);\n  font-size: var(--dp-text-3xl);\n  line-height: var(--dp-leading-tight);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-team-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: var(--dp-space-8) var(--dp-space-6);\n}\n\n.dp-team-card {\n  display: flex;\n  flex-direction: column;\n}\n\n.dp-team-photo {\n  position: relative;\n  aspect-ratio: 1 / 1;\n  margin-bottom: var(--dp-space-4);\n  border-radius: var(--dp-radius-lg);\n  background:\n    linear-gradient(135deg, var(--dp-blue-200), var(--dp-blue-100));\n  overflow: hidden;\n}\n\n.dp-team-photo::after {\n  content: attr(data-initials);\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--dp-text-3xl);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-blue-700);\n  opacity: 0.55;\n}\n\n.dp-team-role {\n  margin: 0 0 var(--dp-space-1);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-text-muted);\n}\n\n.dp-team-name-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dp-space-3);\n}\n\n.dp-team-name {\n  margin: 0;\n  font-size: var(--dp-text-lg);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-team-social {\n  flex: none;\n  display: inline-flex;\n  color: var(--dp-navy);\n  transition: color 0.15s ease;\n}\n\n.dp-team-social:hover { color: var(--dp-link); }\n.dp-team-social svg { width: 1.15rem; height: 1.15rem; }\n"
        }
    ]
}