{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers-3",
  "title": "Culture And Benefits Page",
  "description": "Careers culture page selling life at the company with a photo strip, a three-up values grid, a perks and benefits row, and a closing call to action.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/blocks/careers/3/careers-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\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 values = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Compass\"\n        tabler=\"IconCompass\"\n        hugeicons=\"CompassIcon\"\n        phosphor=\"Compass\"\n        remixicon=\"RiCompass3Line\"\n        {...p}\n      />\n    ),\n    title: \"Bias For Clarity\",\n    description:\n      \"We write things down, disagree in the open, and leave a trail anyone can follow.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Sprout\"\n        tabler=\"IconPlant\"\n        hugeicons=\"PlantIcon\"\n        phosphor=\"Plant\"\n        remixicon=\"RiPlantLine\"\n        {...p}\n      />\n    ),\n    title: \"Grow In Public\",\n    description:\n      \"Ship early, ask for feedback often, and treat every mistake as shared context.\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Globe\"\n        tabler=\"IconGlobe\"\n        hugeicons=\"GlobalIcon\"\n        phosphor=\"Globe\"\n        remixicon=\"RiGlobalLine\"\n        {...p}\n      />\n    ),\n    title: \"Trust The Team\",\n    description:\n      \"Remote-first since day one. We hire adults and give them the room to do their best work.\",\n  },\n]\n\nconst perks = [\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Wallet\"\n        tabler=\"IconWallet\"\n        hugeicons=\"WalletIcon\"\n        phosphor=\"Wallet\"\n        remixicon=\"RiWalletLine\"\n        {...p}\n      />\n    ),\n    label: \"Competitive Equity\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"HeartPulse\"\n        tabler=\"IconHeartbeat\"\n        hugeicons=\"HeartPulseIcon\"\n        phosphor=\"Heartbeat\"\n        remixicon=\"RiHeartPulseLine\"\n        {...p}\n      />\n    ),\n    label: \"Full Health Coverage\",\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: \"Flexible Hours\",\n  },\n  {\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Globe\"\n        tabler=\"IconGlobe\"\n        hugeicons=\"GlobalIcon\"\n        phosphor=\"Globe\"\n        remixicon=\"RiGlobalLine\"\n        {...p}\n      />\n    ),\n    label: \"Home Office Budget\",\n  },\n]\n\nconst photos = [\n  \"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=500&q=80\",\n  \"https://images.unsplash.com/photo-1531482615713-2afd69097998?w=500&q=80\",\n  \"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=500&q=80\",\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      <div className=\"w-full max-w-5xl\">\n        <div className=\"flex flex-col items-center text-center\">\n          <Badge variant=\"secondary\">Careers</Badge>\n          <h2 className=\"mt-5 font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl\">\n            Come build with a small, deliberate team\n          </h2>\n          <p className=\"mt-4 max-w-2xl text-lg text-pretty text-muted-foreground\">\n            We are forty people across nine time zones, shipping software we are\n            proud of without the meetings that usually come with it.\n          </p>\n        </div>\n\n        <div\n          className=\"mt-12 grid grid-cols-3 gap-3 sm:gap-4\"\n          aria-hidden=\"true\"\n        >\n          {photos.map((src, i) => (\n            <div\n              key={src}\n              className={\n                \"overflow-hidden rounded-lg border border-border bg-muted \" +\n                (i === 1 ? \"aspect-[3/4]\" : \"aspect-square self-center\")\n              }\n            >\n              <img\n                src={src}\n                alt=\"\"\n                className=\"size-full object-cover grayscale\"\n                loading=\"lazy\"\n              />\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-14 grid gap-4 md:grid-cols-3\">\n          {values.map((value) => (\n            <Card key={value.title}>\n              <CardHeader>\n                <div className=\"flex size-10 items-center justify-center rounded-lg border border-border bg-muted text-foreground\">\n                  <value.icon className=\"size-5\" aria-hidden=\"true\" />\n                </div>\n                <CardTitle className=\"mt-3 text-base\">{value.title}</CardTitle>\n              </CardHeader>\n              <CardContent>\n                <p className=\"text-sm text-pretty text-muted-foreground\">\n                  {value.description}\n                </p>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        <div className=\"mt-4 flex flex-col items-center justify-between gap-6 rounded-xl border border-border bg-card p-6 sm:flex-row\">\n          <div className=\"grid w-full grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4\">\n            {perks.map((perk) => (\n              <div key={perk.label} className=\"flex items-center gap-2.5\">\n                <perk.icon\n                  className=\"size-4 shrink-0 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n                <span className=\"text-sm font-medium\">{perk.label}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"mt-10 flex justify-center\">\n          <Button size=\"lg\">\n            See Open Roles\n            <IconPlaceholder\n              lucide=\"ArrowRight\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRightIcon\"\n              phosphor=\"ArrowRight\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n              aria-hidden=\"true\"\n            />\n          </Button>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/careers-3.tsx"
    }
  ],
  "meta": {
    "height": "1163px",
    "tier": "free"
  },
  "categories": [
    "careers"
  ],
  "type": "registry:block"
}