{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers-1",
  "title": "Open Roles By Department",
  "description": "Open positions list grouping job roles by department, each row showing the title, location, and employment type with an apply link.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/careers/1/careers-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Role = { title: string; location: string; type: string }\n\nconst departments: { name: string; roles: Role[] }[] = [\n  {\n    name: \"Engineering\",\n    roles: [\n      {\n        title: \"Senior Frontend Engineer\",\n        location: \"Remote\",\n        type: \"Full-time\",\n      },\n      { title: \"Backend Engineer\", location: \"Berlin\", type: \"Full-time\" },\n      { title: \"Platform Engineer\", location: \"Remote\", type: \"Full-time\" },\n    ],\n  },\n  {\n    name: \"Design\",\n    roles: [\n      { title: \"Product Designer\", location: \"Remote\", type: \"Full-time\" },\n      { title: \"Brand Designer\", location: \"London\", type: \"Contract\" },\n    ],\n  },\n  {\n    name: \"Marketing\",\n    roles: [{ title: \"Content Lead\", location: \"Remote\", type: \"Full-time\" }],\n  },\n]\n\nconst total = departments.reduce((sum, d) => sum + d.roles.length, 0)\n\nexport default function CareersBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-2xl\">\n        <div className=\"mb-10\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            Careers\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Open positions\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            We are a remote-first team with {total} open roles and growing. Come\n            build with us.\n          </p>\n        </div>\n\n        <div className=\"flex flex-col gap-8\">\n          {departments.map((department) => (\n            <div key={department.name} className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center gap-2\">\n                <h3 className=\"font-heading text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n                  {department.name}\n                </h3>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {department.roles.length}\n                </span>\n              </div>\n\n              <ul className=\"flex flex-col overflow-hidden rounded-xl border border-border\">\n                {department.roles.map((role, i) => (\n                  <li\n                    key={role.title}\n                    className={i > 0 ? \"border-t border-border\" : \"\"}\n                  >\n                    <a\n                      href=\"#\"\n                      className=\"group flex items-center justify-between gap-4 px-4 py-3.5 transition-colors hover:bg-muted/40\"\n                    >\n                      <div className=\"flex flex-col gap-1.5\">\n                        <span className=\"text-sm font-semibold\">\n                          {role.title}\n                        </span>\n                        <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n                          <span className=\"flex items-center gap-1\">\n                            <IconPlaceholder\n                              lucide=\"MapPin\"\n                              tabler=\"IconMapPin\"\n                              hugeicons=\"MapPinIcon\"\n                              phosphor=\"MapPin\"\n                              remixicon=\"RiMapPinLine\"\n                              className=\"size-3.5\"\n                              aria-hidden=\"true\"\n                            />\n                            {role.location}\n                          </span>\n                          <span className=\"flex items-center gap-1\">\n                            <IconPlaceholder\n                              lucide=\"Briefcase\"\n                              tabler=\"IconBriefcase\"\n                              hugeicons=\"BriefcaseIcon\"\n                              phosphor=\"Briefcase\"\n                              remixicon=\"RiBriefcaseLine\"\n                              className=\"size-3.5\"\n                              aria-hidden=\"true\"\n                            />\n                            {role.type}\n                          </span>\n                        </div>\n                      </div>\n                      <span className=\"flex shrink-0 items-center gap-1 text-sm font-medium\">\n                        Apply\n                        <IconPlaceholder\n                          lucide=\"ArrowRight\"\n                          tabler=\"IconArrowRight\"\n                          hugeicons=\"ArrowRightIcon\"\n                          phosphor=\"ArrowRight\"\n                          remixicon=\"RiArrowRightLine\"\n                          className=\"size-4 transition-transform group-hover:translate-x-0.5\"\n                          aria-hidden=\"true\"\n                        />\n                      </span>\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/careers-1.tsx"
    }
  ],
  "meta": {
    "height": "865px",
    "tier": "free"
  },
  "categories": [
    "careers"
  ],
  "type": "registry:block"
}