{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-case-study",
  "title": "Agency: Case study",
  "description": "A project's story on its own page: the client's site drawn as wide as the page, the challenge beside the facts, what the studio made, three outcomes, the credits and the next project.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/case-study.tsx",
      "content": "\"use client\";\n\nimport { ClientArt } from \"./client-art\";\nimport { projects, type Project } from \"./content\";\nimport { caseStudies, caseStudyPage } from \"./content-work\";\nimport { Arrow, COLUMN, LABEL, PageHead, Reveal, Section, useHref } from \"./kit\";\n\n/**\n * A case study, /work/<id>: the project's title over its client's site drawn as wide as the\n * page, then the challenge beside the facts, what the studio made, three outcomes, the credits,\n * and the next project as one large link. Everything rises in once as it is reached.\n */\nexport function CaseStudy({ id }: { id: Project[\"id\"] }) {\n  const index = projects.findIndex((p) => p.id === id);\n  const project = projects[index];\n  const study = caseStudies[id];\n  const next = projects[(index + 1) % projects.length];\n  const facts = [\n    { term: caseStudyPage.facts.client, value: project.client },\n    { term: caseStudyPage.facts.year, value: String(project.year) },\n    { term: caseStudyPage.facts.disciplines, value: project.disciplines.join(\", \") },\n    { term: caseStudyPage.facts.duration, value: study.duration },\n    { term: caseStudyPage.facts.team, value: study.team },\n  ];\n\n  return (\n    <>\n      <header className={`${COLUMN} pt-section-sm`}>\n        <PageHead back={caseStudyPage.back} title={project.title} lead={project.line} size=\"md\" />\n        {/* The client's site, drawn: the page's one image, as wide as the column. */}\n        <Reveal index={1} className=\"mt-group\">\n          <div className=\"image-ring relative aspect-[4/3] overflow-hidden rounded-surface sm:aspect-[16/9]\">\n            <div aria-hidden className=\"absolute inset-0\">\n              <ClientArt id={id} />\n            </div>\n          </div>\n        </Reveal>\n      </header>\n\n      <Section id=\"challenge\" label={caseStudyPage.challenge} className=\"grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg\">\n        <Reveal>\n          <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-pad-md border-t border-line-subtle text-ui\">\n            {facts.map((f) => (\n              <div key={f.term} className=\"col-span-full grid grid-cols-subgrid border-b border-line-subtle py-in\">\n                <dt className=\"text-text-muted\">{f.term}</dt>\n                <dd className=\"text-text\">{f.value}</dd>\n              </div>\n            ))}\n          </dl>\n        </Reveal>\n        <Reveal index={1} className=\"flex max-w-2xl flex-col gap-pad-base\">\n          {study.challenge.map((p, i) => (\n            <p key={p.slice(0, 24)} className={i === 0 ? \"text-display-xl text-pretty text-text\" : \"text-ui-md text-pretty text-text-secondary sm:text-ui-lg\"}>\n              {p}\n            </p>\n          ))}\n        </Reveal>\n      </Section>\n\n      <Section id=\"made\" label={caseStudyPage.made}>\n        <ol className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2\">\n          {study.made.map((m, i) => (\n            <li key={m.title}>\n              <Reveal index={i} className=\"flex flex-col gap-1.5 border-t border-line-subtle pt-in\">\n                <span className=\"text-ui-sm text-text-muted tabular-nums\">{String(i + 1).padStart(2, \"0\")}</span>\n                <h3 className=\"text-display-xl font-medium text-text\">{m.title}</h3>\n                <p className=\"max-w-lg text-ui-md text-pretty text-text-secondary\">{m.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ol>\n      </Section>\n\n      <Section id=\"outcomes\" label={caseStudyPage.outcomes}>\n        <dl className=\"grid gap-pad-lg sm:grid-cols-3\">\n          {study.outcomes.map((o, i) => (\n            <Reveal key={o.label} index={i} className=\"flex flex-col gap-1\">\n              <dt className=\"max-w-xs text-ui text-pretty text-text-secondary\">{o.label}</dt>\n              <dd className=\"order-first font-display text-display-5xl font-medium tracking-display text-text tabular-nums\">{o.value}</dd>\n            </Reveal>\n          ))}\n        </dl>\n      </Section>\n\n      <Section id=\"credits\" label={caseStudyPage.credits}>\n        <Reveal>\n          <dl className=\"grid gap-x-tiles gap-y-pad-md sm:grid-cols-2 lg:grid-cols-4\">\n            {study.credits.map((c) => (\n              <div key={c.role} className=\"flex flex-col gap-1\">\n                <dt className={LABEL}>{c.role}</dt>\n                {c.names.map((n) => (\n                  <dd key={n} className=\"text-ui-md text-text\">\n                    {n}\n                  </dd>\n                ))}\n              </div>\n            ))}\n          </dl>\n        </Reveal>\n      </Section>\n\n      <Section id=\"next\" label={caseStudyPage.next}>\n        <NextProject project={next} />\n      </Section>\n    </>\n  );\n}\n\n/** The next project: its client's name large beside its drawn site, the whole card one link (rule 59). */\nfunction NextProject({ project }: { project: Project }) {\n  const to = useHref();\n  return (\n    <Reveal className=\"group relative grid items-center gap-pad-lg md:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] md:gap-group-lg\">\n      <div className=\"flex flex-col items-start gap-in\">\n        <h3 className=\"font-display text-display-5xl font-medium tracking-display text-text sm:text-display-6xl\">\n          <a href={to(`/work/${project.id}`)} className=\"focus-ring rounded-control-sm after:absolute after:inset-0 after:rounded-surface\">\n            {project.client}\n          </a>\n        </h3>\n        <p className=\"max-w-md text-ui-md text-pretty text-text-secondary\">{project.title}</p>\n        <Arrow className=\"text-text-muted\" />\n      </div>\n      <div className=\"image-ring relative aspect-[16/10] overflow-hidden rounded-panel\">\n        <div aria-hidden className=\"absolute inset-0 transition-transform duration-(--eased-duration-fast) ease-enter group-hover-fine:scale-[1.02] reduced:transition-none\">\n          <ClientArt id={project.id} />\n        </div>\n      </div>\n    </Reveal>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/case-study.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}