{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers-2",
  "title": "Job Posting Detail Page",
  "description": "Single job posting page with meta chips for department, location, and type, an about section, responsibilities and requirements lists, and apply buttons.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/careers/2/careers-block.tsx",
      "content": "import { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\nconst meta = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Briefcase\"\n        tabler=\"IconBriefcase\"\n        hugeicons=\"BriefcaseIcon\"\n        phosphor=\"Briefcase\"\n        remixicon=\"RiBriefcaseLine\"\n        {...p}\n      />\n    ),\n    label: \"Engineering\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"MapPin\"\n        tabler=\"IconMapPin\"\n        hugeicons=\"MapPinIcon\"\n        phosphor=\"MapPin\"\n        remixicon=\"RiMapPinLine\"\n        {...p}\n      />\n    ),\n    label: \"Remote, Europe\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Clock\"\n        tabler=\"IconClock\"\n        hugeicons=\"TimeIcon\"\n        phosphor=\"Clock\"\n        remixicon=\"RiTimeLine\"\n        {...p}\n      />\n    ),\n    label: \"Full-time\",\n  },\n]\n\nconst responsibilities = [\n  \"Build and own customer-facing features across the web app, end to end.\",\n  \"Shape the design system and raise the quality bar for the frontend.\",\n  \"Partner with design and product to turn ideas into shipped work.\",\n  \"Mentor engineers and help set our frontend technical direction.\",\n]\n\nconst requirements = [\n  \"5+ years building production web apps with React and TypeScript.\",\n  \"A strong eye for detail, accessibility, and interaction design.\",\n  \"Comfort working autonomously in a remote-first, async team.\",\n]\n\nexport default function CareersBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full justify-center bg-background px-6 py-16 text-foreground\">\n      <article className=\"w-full max-w-2xl\">\n        <a\n          href=\"#\"\n          className=\"mb-6 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"ArrowLeft\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeftIcon\"\n            phosphor=\"ArrowLeft\"\n            remixicon=\"RiArrowLeftLine\"\n            className=\"size-4\"\n            aria-hidden=\"true\"\n          />\n          All open roles\n        </a>\n\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"flex flex-col gap-3\">\n            <h1 className=\"font-heading text-3xl font-bold tracking-tight\">\n              Senior Frontend Engineer\n            </h1>\n            <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm text-muted-foreground\">\n              {meta.map((item) => (\n                <span key={item.label} className=\"flex items-center gap-1.5\">\n                  <item.icon className=\"size-4\" aria-hidden=\"true\" />\n                  {item.label}\n                </span>\n              ))}\n            </div>\n          </div>\n          <Button\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"shrink-0\"\n          >\n            Apply now\n          </Button>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <div className=\"flex flex-col gap-8 text-[15px]/relaxed text-foreground/80\">\n          <div className=\"flex flex-col gap-3\">\n            <h2 className=\"font-heading text-lg font-semibold tracking-tight text-foreground\">\n              About the role\n            </h2>\n            <p>\n              We are looking for a senior engineer to help shape the frontend of\n              our product. You will work closely with design and product to ship\n              polished, accessible interfaces that thousands of teams rely on\n              every day.\n            </p>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <h2 className=\"font-heading text-lg font-semibold tracking-tight text-foreground\">\n              What you will do\n            </h2>\n            <ul className=\"flex flex-col gap-2.5\">\n              {responsibilities.map((item) => (\n                <li key={item} className=\"flex gap-2.5\">\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"mt-0.5 size-4 shrink-0 text-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{item}</span>\n                </li>\n              ))}\n            </ul>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            <h2 className=\"font-heading text-lg font-semibold tracking-tight text-foreground\">\n              What we are looking for\n            </h2>\n            <ul className=\"flex flex-col gap-2.5\">\n              {requirements.map((item) => (\n                <li key={item} className=\"flex gap-2.5\">\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"mt-0.5 size-4 shrink-0 text-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                  <span>{item}</span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </div>\n\n        <Separator className=\"my-8\" />\n\n        <div className=\"flex flex-col gap-4 rounded-xl border border-border bg-muted/30 p-6 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"text-sm font-semibold\">Ready to apply?</p>\n            <p className=\"text-sm text-muted-foreground\">\n              We review every application and reply within a week.\n            </p>\n          </div>\n          <Button\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"shrink-0\"\n          >\n            Apply now\n          </Button>\n        </div>\n      </article>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/careers-2.tsx"
    }
  ],
  "meta": {
    "height": "950px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "careers"
  ],
  "type": "registry:block"
}