{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers-page",
  "type": "registry:component",
  "title": "Careers page",
  "description": "A React careers page with a marketing nav, animated headline, open roles listing location and employment type with apply buttons, and a mega footer.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/footer-mega.json",
    "https://ui.minidev.pro/r/nav-marketing.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/careers-page.tsx",
      "type": "registry:ui",
      "target": "components/ui/careers-page.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { NavMarketing } from \"@/components/ui/nav-marketing\"\nimport { Button } from \"@/components/ui/button\"\nimport { FooterMega } from \"@/components/ui/footer-mega\"\n\nconst roles = [\n  { title: \"Design Engineer\", loc: \"Remote\", type: \"Full-time\" },\n  { title: \"Product Engineer\", loc: \"SF / Remote\", type: \"Full-time\" },\n  { title: \"Developer Advocate\", loc: \"Remote\", type: \"Contract\" },\n]\n\nfunction CareersPage({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"careers-page\" data-tier=\"premium\" className={cn(\"bg-bg\", className)}>\n      <NavMarketing />\n      <div className=\"mx-auto max-w-3xl px-6 py-16\">\n        <motion.h1 initial={reduce ? false : { opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className=\"text-4xl font-medium tracking-[-0.026em] text-fg\">\n          Build the kit you wish you had\n        </motion.h1>\n        <p className=\"mt-3 text-sm text-fg-muted\">Hairline craft, obsessive a11y, zero generic dashboards.</p>\n        <ul className=\"mt-10 space-y-3\">\n          {roles.map((r, i) => (\n            <motion.li\n              key={r.title}\n              initial={reduce ? false : { opacity: 0, y: 8 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              viewport={{ once: true }}\n              transition={{ delay: i * 0.05 }}\n              className=\"flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border bg-surface px-4 py-3\"\n            >\n              <div>\n                <p className=\"text-sm font-medium text-fg\">{r.title}</p>\n                <p className=\"text-xs text-fg-muted\">{r.loc} · {r.type}</p>\n              </div>\n              <Button size=\"sm\" variant=\"outline\">Apply</Button>\n            </motion.li>\n          ))}\n        </ul>\n      </div>\n      <FooterMega columns={[{ title: \"Company\", links: [{ label: \"About\", href: \"#\" }, { label: \"Blog\", href: \"#\" }] }]} />\n    </div>\n  )\n}\nexport { CareersPage }\n"
    }
  ]
}