{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"careers-listings","type":"registry:block","title":"Careers Listings","description":"Open roles by department — locations and types in mono.","categories":["careers"],"dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"registry/blocks/careers-listings.tsx","content":"import Link from \"next/link\";\nimport { ArrowUpRight } from \"lucide-react\";\n\nconst departments = [\n  {\n    name: \"Engineering\",\n    roles: [\n      { title: \"Senior product engineer\", location: \"Remote · EU\", type: \"Full-time\" },\n      { title: \"Infrastructure engineer\", location: \"Remote · Worldwide\", type: \"Full-time\" },\n      { title: \"Design engineer\", location: \"Paris or remote\", type: \"Full-time\" },\n    ],\n  },\n  {\n    name: \"Product & Design\",\n    roles: [\n      { title: \"Product designer\", location: \"Remote · EU\", type: \"Full-time\" },\n    ],\n  },\n  {\n    name: \"Go-to-market\",\n    roles: [\n      { title: \"Developer advocate\", location: \"Remote · Americas\", type: \"Full-time\" },\n      { title: \"Technical writer\", location: \"Remote · EU\", type: \"Part-time\" },\n    ],\n  },\n];\n\nexport default function CareersListings() {\n  const total = departments.reduce((sum, d) => sum + d.roles.length, 0);\n\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-4xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-12 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between\">\n          <div>\n            <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n              Open positions\n            </h2>\n            <p className=\"mt-2 max-w-md text-muted-foreground\">\n              Small team, real ownership. Every role is remote-friendly and\n              salary-transparent.\n            </p>\n          </div>\n          <p className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n            {String(total).padStart(2, \"0\")} roles open\n          </p>\n        </div>\n\n        {departments.map((department) => (\n          <div key={department.name} className=\"mb-8 last:mb-0\">\n            <h3 className=\"border-b border-border/60 pb-2.5 font-mono text-xs tracking-wide text-muted-foreground uppercase\">\n              {department.name}\n            </h3>\n            <ul>\n              {department.roles.map((role) => (\n                <li key={role.title} className=\"border-b border-border/60\">\n                  <Link\n                    href=\"#\"\n                    className=\"group flex items-center justify-between gap-4 py-4 transition-colors hover:bg-accent/40 sm:px-3 sm:-mx-3\"\n                  >\n                    <div>\n                      <p className=\"text-sm font-medium group-hover:underline group-hover:underline-offset-4\">\n                        {role.title}\n                      </p>\n                      <p className=\"mt-0.5 font-mono text-xs text-muted-foreground\">\n                        {role.location} · {role.type}\n                      </p>\n                    </div>\n                    <ArrowUpRight className=\"size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:transition-none\" />\n                  </Link>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n\n        <p className=\"mt-8 text-sm text-muted-foreground\">\n          Nothing fits?{\" \"}\n          <Link href=\"#\" className=\"font-medium text-foreground underline-offset-4 hover:underline\">\n            Send a spontaneous application\n          </Link>{\" \"}\n          — we read every one.\n        </p>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/careers/careers-listings.tsx"}]}