{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "home-work",
  "title": "Home Work",
  "description": "Selected work band with editable PROJECTS list.",
  "dependencies": [
    "lucide-react",
    "next"
  ],
  "files": [
    {
      "path": "registry/default/blocks/home-work.tsx",
      "content": "import { ArrowRight, ArrowUpRight } from \"lucide-react\"\nimport Link from \"next/link\"\n\n/**\n * Edit PROJECTS to swap case studies. Matches docs Home Work band.\n */\nconst CONTENT = {\n  stamp: \"Selected work\",\n  headlineBefore: \"Projects that\",\n  headlineAccent: \"shipped\",\n  headlineAfter: \".\",\n  allHref: \"/work\",\n  allLabel: \"All case studies\",\n}\n\nconst PROJECTS = [\n  {\n    industry: \"Studio product\",\n    type: \"In-house product\",\n    meta: \"Shipped · Free tool\",\n    title: \"OG Image Generator - free AI social cards\",\n    challenge:\n      \"Indie makers still ship bland default OG images - or burn an afternoon in Figma for a 1200×630 card.\",\n    href: \"/og\",\n    hrefLabel: \"Open tool\",\n    outcomeLabel: \"Outcome\",\n    outcomeValue: \"1200×630\",\n    outcomeDetail: \"Exact Open Graph canvas · free · no watermark\",\n    featured: true,\n  },\n  {\n    industry: \"Developer tools\",\n    type: \"MVP Sprint\",\n    meta: \"7 days · Fixed price\",\n    title: \"B2B SaaS MVP shipped in 7 days\",\n    challenge:\n      \"Validated demand through a waitlist; needed auth, billing, and core workflow before a hard deadline.\",\n    href: \"/work\",\n    hrefLabel: \"Read case study\",\n    outcomeLabel: \"Time to launch\",\n    outcomeValue: \"7 days\",\n    featured: false,\n  },\n  {\n    industry: \"Creator tools\",\n    type: \"AI Integration\",\n    meta: \"2 weeks · From $2,400\",\n    title: \"Streaming AI feature in an existing app\",\n    challenge:\n      \"Bolt-on chatbot UX was tanking retention. Needed cost-aware streaming with guardrails.\",\n    href: \"/work\",\n    hrefLabel: \"Read case study\",\n    outcomeLabel: \"Activation\",\n    outcomeValue: \"+28%\",\n    featured: false,\n  },\n  {\n    industry: \"Agency\",\n    type: \"Design System\",\n    meta: \"3 weeks · From $3,600\",\n    title: \"Dark-first design system for a product team\",\n    challenge:\n      \"Three products, three visual languages. Needed tokens and components that scale.\",\n    href: \"/work\",\n    hrefLabel: \"Read case study\",\n    outcomeLabel: \"Components\",\n    outcomeValue: \"40+\",\n    featured: false,\n  },\n]\n\nexport function HomeWork() {\n  const featured = PROJECTS.find((p) => p.featured) ?? PROJECTS[0]!\n  const rest = PROJECTS.filter((p) => p !== featured)\n\n  return (\n    <section className=\"border-t border-border-subtle\">\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto flex max-w-7xl flex-col gap-6 border-x border-border-subtle px-6 py-12 sm:flex-row sm:items-end sm:justify-between sm:px-10 sm:py-16\">\n          <div className=\"max-w-2xl\">\n            <p className=\"text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase\">\n              {CONTENT.stamp}\n            </p>\n            <h2 className=\"mt-4 text-3xl font-medium tracking-tight text-foreground sm:text-5xl\">\n              {CONTENT.headlineBefore}{\" \"}\n              <span className=\"italic text-[var(--color-brand,#0b7bff)]\">\n                {CONTENT.headlineAccent}\n              </span>\n              {CONTENT.headlineAfter}\n            </h2>\n          </div>\n          <Link\n            href={CONTENT.allHref}\n            className=\"inline-flex h-10 shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle px-4 text-sm font-medium\"\n          >\n            {CONTENT.allLabel}\n            <ArrowRight className=\"size-3.5\" aria-hidden />\n          </Link>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle\">\n          <Link\n            href={featured.href}\n            className=\"group grid grid-cols-1 gap-0 lg:grid-cols-12\"\n          >\n            <div className=\"flex flex-col justify-between gap-8 border-b border-border-subtle p-6 sm:p-8 lg:col-span-7 lg:border-r lg:border-b-0\">\n              <div>\n                <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground\">\n                  <span className=\"font-medium tracking-wide text-foreground uppercase\">\n                    {featured.industry}\n                  </span>\n                  <span aria-hidden>·</span>\n                  <span>{featured.type}</span>\n                  <span aria-hidden>·</span>\n                  <span>{featured.meta}</span>\n                </div>\n                <h3 className=\"mt-4 text-2xl leading-tight font-medium text-foreground sm:text-3xl\">\n                  {featured.title}\n                </h3>\n                <p className=\"mt-4 max-w-xl text-[15px] leading-relaxed text-muted-foreground\">\n                  {featured.challenge}\n                </p>\n              </div>\n              <span className=\"inline-flex items-center gap-1.5 text-sm font-medium text-foreground transition-colors group-hover:text-[var(--color-brand,#0b7bff)]\">\n                {featured.hrefLabel}\n                <ArrowUpRight className=\"size-3.5\" />\n              </span>\n            </div>\n            <div className=\"flex flex-col justify-between gap-8 bg-muted/30 p-6 sm:p-8 lg:col-span-5\">\n              <div>\n                <p className=\"font-mono text-[11px] tracking-wider text-muted-foreground uppercase\">\n                  {featured.outcomeLabel}\n                </p>\n                <p className=\"mt-3 text-4xl font-medium tracking-tight text-foreground\">\n                  {featured.outcomeValue}\n                </p>\n                {featured.outcomeDetail ? (\n                  <p className=\"mt-2 text-sm text-muted-foreground\">\n                    {featured.outcomeDetail}\n                  </p>\n                ) : null}\n              </div>\n            </div>\n          </Link>\n        </div>\n      </div>\n\n      <div className=\"border-b border-border-subtle\">\n        <div className=\"mx-auto max-w-7xl border-x border-border-subtle\">\n          <ul className=\"grid grid-cols-1 divide-y divide-border-subtle md:grid-cols-3 md:divide-x md:divide-y-0\">\n            {rest.map((study) => (\n              <li key={study.title}>\n                <Link href={study.href} className=\"group block p-6 sm:p-8\">\n                  <p className=\"text-xs text-muted-foreground\">\n                    {study.industry} · {study.type}\n                  </p>\n                  <h3 className=\"mt-3 text-lg font-medium text-foreground group-hover:text-[var(--color-brand,#0b7bff)]\">\n                    {study.title}\n                  </h3>\n                  <p className=\"mt-3 line-clamp-3 text-sm text-muted-foreground\">\n                    {study.challenge}\n                  </p>\n                  <p className=\"mt-4 font-mono text-[11px] text-muted-foreground\">\n                    {study.outcomeLabel}: {study.outcomeValue}\n                  </p>\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/home-work.tsx"
    }
  ],
  "type": "registry:block"
}