{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "careers-job-board",
  "title": "Careers Job Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/careers-job-board/CareersJobBoard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component, HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowRight,\n  Briefcase,\n  Coins,\n  Globe,\n  GraduationCap,\n  HeartHandshake,\n  MapPin,\n  Search,\n  SearchX,\n  TrendingUp,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\n\ninterface Perk {\n  icon: Component\n  title: string\n  description: string\n}\n\ninterface JobOpening {\n  id: string\n  title: string\n  department: 'Engineering' | 'Design' | 'Product' | 'Marketing'\n  location: 'Remote' | 'San Francisco, CA' | 'London, UK'\n  type: string\n  level: string\n  salary: string\n  description: string\n}\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string\n    subtitle?: string\n    class?: HTMLAttributes['class']\n  }>(),\n  {\n    title: 'Join our team',\n    subtitle: 'Help us build the open-source UI infrastructure of tomorrow',\n  },\n)\n\nconst PERKS: Perk[] = [\n  {\n    icon: Globe,\n    title: 'Remote-first',\n    description: 'Work from anywhere in the world with flexible hours.',\n  },\n  {\n    icon: GraduationCap,\n    title: '$5k learning budget',\n    description: 'Annual stipend for courses, books, tools, and conferences.',\n  },\n  {\n    icon: HeartHandshake,\n    title: '100% health coverage',\n    description: 'Comprehensive medical, dental, and vision for you and dependents.',\n  },\n  {\n    icon: TrendingUp,\n    title: 'Equity packages',\n    description: 'Meaningful ownership stake with transparent vesting schedules.',\n  },\n]\n\nconst DEPARTMENTS = [\n  { id: 'all', label: 'All', count: 12 },\n  { id: 'Engineering', label: 'Engineering', count: 6 },\n  { id: 'Design', label: 'Design', count: 2 },\n  { id: 'Product', label: 'Product', count: 2 },\n  { id: 'Marketing', label: 'Marketing', count: 2 },\n] as const\n\nconst LOCATIONS = [\n  { id: 'all', label: 'All Locations' },\n  { id: 'Remote', label: 'Remote' },\n  { id: 'San Francisco, CA', label: 'San Francisco, CA' },\n  { id: 'London, UK', label: 'London, UK' },\n] as const\n\nconst JOBS: JobOpening[] = [\n  {\n    id: 'eng-1',\n    title: 'Staff Frontend Engineer',\n    department: 'Engineering',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Staff',\n    salary: '$190k - $240k · 0.3% - 0.6%',\n    description:\n      'Lead the architecture of our high-performance UI components, compiler toolchains, and multi-framework design systems.',\n  },\n  {\n    id: 'eng-2',\n    title: 'Senior Full-Stack Engineer',\n    department: 'Engineering',\n    location: 'San Francisco, CA',\n    type: 'Full-time',\n    level: 'Senior',\n    salary: '$160k - $210k · 0.25% - 0.5%',\n    description:\n      'Build end-to-end features spanning serverless edge runtimes, component registries, and developer tooling.',\n  },\n  {\n    id: 'eng-3',\n    title: 'Systems & Performance Engineer',\n    department: 'Engineering',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Senior',\n    salary: '$170k - $220k · 0.25% - 0.5%',\n    description:\n      'Optimize bundling pipelines, AST transformers, and static site generation latency across large workspaces.',\n  },\n  {\n    id: 'eng-4',\n    title: 'Design Systems Engineer',\n    department: 'Engineering',\n    location: 'London, UK',\n    type: 'Full-time',\n    level: 'Mid-Senior',\n    salary: '£110k - £140k · 0.2% - 0.4%',\n    description:\n      'Bridge design and code by maintaining tokens, accessible headless primitives, and fluid interaction standards.',\n  },\n  {\n    id: 'eng-5',\n    title: 'Developer Experience Engineer',\n    department: 'Engineering',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Mid-Senior',\n    salary: '$150k - $190k · 0.2% - 0.4%',\n    description:\n      'Craft exceptional CLI workflows, interactive documentation playgrounds, and starter template engines.',\n  },\n  {\n    id: 'eng-6',\n    title: 'QA & Automation Engineer',\n    department: 'Engineering',\n    location: 'London, UK',\n    type: 'Full-time',\n    level: 'Mid-Senior',\n    salary: '£95k - £125k · 0.15% - 0.3%',\n    description:\n      'Expand cross-browser visual regression testing suites, accessibility audits, and automated release checks.',\n  },\n  {\n    id: 'des-1',\n    title: 'Senior Product Designer',\n    department: 'Design',\n    location: 'San Francisco, CA',\n    type: 'Full-time',\n    level: 'Senior',\n    salary: '$155k - $195k · 0.25% - 0.45%',\n    description:\n      'Define micro-interactions, responsive dashboard workflows, and layout ergonomics across our block catalog.',\n  },\n  {\n    id: 'des-2',\n    title: 'Brand & Motion Designer',\n    department: 'Design',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Mid-Senior',\n    salary: '$140k - $180k · 0.2% - 0.35%',\n    description:\n      'Create fluid motion principles, brand identity assets, and polished launch visuals for major releases.',\n  },\n  {\n    id: 'prd-1',\n    title: 'Staff Technical Product Manager',\n    department: 'Product',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Staff',\n    salary: '$180k - $230k · 0.3% - 0.5%',\n    description:\n      'Drive product roadmap for developer workflows, unbundled registry distribution, and monorepo orchestration.',\n  },\n  {\n    id: 'prd-2',\n    title: 'Product Operations Lead',\n    department: 'Product',\n    location: 'San Francisco, CA',\n    type: 'Full-time',\n    level: 'Senior',\n    salary: '$145k - $185k · 0.2% - 0.35%',\n    description: 'Manage release triage, community feature requests, and cross-team execution cadences.',\n  },\n  {\n    id: 'mkt-1',\n    title: 'Developer Advocate / Technical Writer',\n    department: 'Marketing',\n    location: 'Remote',\n    type: 'Full-time',\n    level: 'Mid-Senior',\n    salary: '$140k - $180k · 0.2% - 0.4%',\n    description:\n      'Author technical deep-dives, create interactive video tutorials, and engage with the open-source community.',\n  },\n  {\n    id: 'mkt-2',\n    title: 'Growth Marketing Lead',\n    department: 'Marketing',\n    location: 'London, UK',\n    type: 'Full-time',\n    level: 'Senior',\n    salary: '£105k - £135k · 0.2% - 0.4%',\n    description:\n      'Lead developer-focused growth experiments, SEO architecture, launch campaigns, and analytics instrumentation.',\n  },\n]\n\nconst selectedDepartment = ref<string>('all')\nconst selectedLocation = ref<string>('all')\nconst searchQuery = ref('')\n\nconst filteredJobs = computed(() => {\n  const q = searchQuery.value.trim().toLowerCase()\n  return JOBS.filter((job) => {\n    const matchDept = selectedDepartment.value === 'all' || job.department === selectedDepartment.value\n    const matchLoc = selectedLocation.value === 'all' || job.location === selectedLocation.value\n    if (!matchDept || !matchLoc) return false\n    if (!q) return true\n    return (\n      job.title.toLowerCase().includes(q) ||\n      job.description.toLowerCase().includes(q) ||\n      job.department.toLowerCase().includes(q) ||\n      job.level.toLowerCase().includes(q) ||\n      job.location.toLowerCase().includes(q) ||\n      job.type.toLowerCase().includes(q) ||\n      job.salary.toLowerCase().includes(q)\n    )\n  })\n})\n\nconst departmentGroups = computed(() => {\n  const allDepts = ['Engineering', 'Design', 'Product', 'Marketing'] as const\n  const targetDepartments =\n    selectedDepartment.value === 'all' ? allDepts : allDepts.filter((dept) => dept === selectedDepartment.value)\n\n  return targetDepartments\n    .map((dept) => ({\n      name: dept,\n      jobs: filteredJobs.value.filter((job) => job.department === dept),\n    }))\n    .filter((group) => group.jobs.length > 0)\n})\n\nconst isFiltered = computed(\n  () => selectedDepartment.value !== 'all' || selectedLocation.value !== 'all' || searchQuery.value.trim() !== '',\n)\n\nfunction resetFilters() {\n  selectedDepartment.value = 'all'\n  selectedLocation.value = 'all'\n  searchQuery.value = ''\n}\n</script>\n\n<template>\n  <section data-slot=\"careers-job-board\" :class=\"cn('w-full space-y-12 py-6', props.class)\">\n    <!-- Hero / Header -->\n    <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n      <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 text-xs font-medium\">\n        <Briefcase class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n        We're hiring\n      </Badge>\n      <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n        {{ title }}\n      </h1>\n      <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n        {{ subtitle }}\n      </p>\n    </div>\n\n    <!-- Perks summary row -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <div\n        v-for=\"perk in PERKS\"\n        :key=\"perk.title\"\n        class=\"bg-card border-border flex flex-col gap-3 rounded-xl border p-4 shadow-xs\"\n      >\n        <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n          <component :is=\"perk.icon\" class=\"size-4.5\" aria-hidden=\"true\" />\n        </div>\n        <div class=\"space-y-1\">\n          <p class=\"text-foreground text-sm font-semibold\">{{ perk.title }}</p>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">{{ perk.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Filter Toolbar -->\n    <div class=\"bg-card border-border space-y-4 rounded-xl border p-4 shadow-xs\">\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <Button\n          v-for=\"dept in DEPARTMENTS\"\n          :key=\"dept.id\"\n          :variant=\"selectedDepartment === dept.id ? 'default' : 'outline'\"\n          size=\"sm\"\n          class=\"h-8 rounded-lg text-xs\"\n          @click=\"selectedDepartment = dept.id\"\n        >\n          {{ dept.label }}\n          <span\n            :class=\"\n              cn(\n                'ml-1.5 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums',\n                selectedDepartment === dept.id\n                  ? 'bg-primary-foreground/20 text-primary-foreground'\n                  : 'bg-muted text-muted-foreground',\n              )\n            \"\n          >\n            {{ dept.count }}\n          </span>\n        </Button>\n      </div>\n\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n        <div class=\"relative flex-1\">\n          <Search\n            class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\"\n            aria-hidden=\"true\"\n          />\n          <Input\n            v-model=\"searchQuery\"\n            placeholder=\"Search roles, technologies, or keywords...\"\n            class=\"pl-9 text-sm\"\n            aria-label=\"Search open positions\"\n          />\n        </div>\n\n        <div class=\"w-full shrink-0 sm:w-56\">\n          <Select v-model=\"selectedLocation\">\n            <SelectTrigger class=\"w-full text-xs sm:text-sm\" aria-label=\"Filter by location\">\n              <SelectValue placeholder=\"All Locations\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem v-for=\"loc in LOCATIONS\" :key=\"loc.id\" :value=\"loc.id\">\n                {{ loc.label }}\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n\n        <Button\n          v-if=\"isFiltered\"\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"text-muted-foreground hover:text-foreground text-xs\"\n          @click=\"resetFilters\"\n        >\n          Reset filters\n        </Button>\n      </div>\n    </div>\n\n    <!-- Grouped Job Openings list -->\n    <div v-if=\"departmentGroups.length > 0\" class=\"space-y-10\">\n      <div v-for=\"group in departmentGroups\" :key=\"group.name\" class=\"space-y-4\">\n        <div class=\"border-border flex items-center justify-between border-b pb-3\">\n          <div class=\"flex items-center gap-2.5\">\n            <h2 class=\"text-foreground text-lg font-semibold tracking-tight\">{{ group.name }}</h2>\n            <Badge variant=\"secondary\" class=\"text-xs font-normal\">\n              {{ group.jobs.length }} {{ group.jobs.length === 1 ? 'opening' : 'openings' }}\n            </Badge>\n          </div>\n        </div>\n\n        <div class=\"space-y-3\">\n          <article\n            v-for=\"job in group.jobs\"\n            :key=\"job.id\"\n            class=\"group bg-card border-border hover:border-primary/40 relative flex flex-col justify-between gap-4 rounded-xl border p-5 shadow-xs transition-colors duration-150 hover:shadow-sm md:flex-row md:items-center\"\n          >\n            <div class=\"min-w-0 flex-1 space-y-2\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h3\n                  class=\"group-hover:text-primary text-foreground text-base font-semibold tracking-tight transition-colors sm:text-lg\"\n                >\n                  {{ job.title }}\n                </h3>\n                <Badge variant=\"outline\" class=\"text-xs\">{{ job.level }}</Badge>\n              </div>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-relaxed\">\n                {{ job.description }}\n              </p>\n              <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 pt-1 text-xs\">\n                <span class=\"inline-flex items-center gap-1.5\">\n                  <MapPin class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  {{ job.location }}\n                </span>\n                <span class=\"inline-flex items-center gap-1.5\">\n                  <Briefcase class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  {{ job.type }}\n                </span>\n                <span class=\"text-foreground inline-flex items-center gap-1.5 font-medium\">\n                  <Coins class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                  {{ job.salary }}\n                </span>\n              </div>\n            </div>\n            <div class=\"shrink-0 pt-2 md:pt-0\">\n              <Button class=\"w-full gap-1.5 md:w-auto\" size=\"sm\">\n                Apply now\n                <ArrowRight class=\"size-3.5 transition-transform group-hover:translate-x-0.5\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n          </article>\n        </div>\n      </div>\n    </div>\n\n    <!-- Empty State -->\n    <div\n      v-else\n      class=\"border-border flex flex-col items-center justify-center rounded-xl border border-dashed p-12 text-center\"\n    >\n      <div class=\"bg-muted text-muted-foreground mb-4 flex size-12 items-center justify-center rounded-full\">\n        <SearchX class=\"size-6\" aria-hidden=\"true\" />\n      </div>\n      <h3 class=\"text-foreground text-base font-semibold\">No matching positions found</h3>\n      <p class=\"text-muted-foreground mt-1 mb-4 max-w-sm text-sm leading-normal\">\n        We could not find any roles matching your current search or filters. Try adjusting your criteria.\n      </p>\n      <Button variant=\"outline\" size=\"sm\" @click=\"resetFilters\"> Clear all filters </Button>\n    </div>\n\n    <!-- Don't see your role? CTA Card -->\n    <div\n      class=\"bg-card border-border flex flex-col items-start justify-between gap-6 rounded-2xl border p-6 shadow-xs sm:flex-row sm:items-center sm:p-8\"\n    >\n      <div class=\"max-w-xl space-y-1.5\">\n        <h3 class=\"text-foreground text-lg font-semibold tracking-tight\">Don't see your role?</h3>\n        <p class=\"text-muted-foreground text-sm leading-relaxed\">\n          We are always looking for curious, high-craft engineers, designers, and thinkers. Send us an open application\n          and tell us what you'd love to build with us.\n        </p>\n      </div>\n      <Button variant=\"outline\" class=\"shrink-0 gap-2\">\n        Send open application\n        <ArrowRight class=\"size-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CareersJobBoard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json"
  ],
  "description": "Careers page and job openings board with perks overview, live department & location filtering, keyword search, grouped department openings, and general application CTA.",
  "categories": [
    "marketing"
  ]
}