{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-work-page",
  "title": "Agency: Work index",
  "description": "Every project in one ruled grid: a small cover, the client, the project, its disciplines and its year.",
  "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/work-page.tsx",
      "content": "\"use client\";\n\nimport { ClientArt } from \"./client-art\";\nimport { projects, workPage } from \"./content\";\nimport { COLUMN, LABEL, Reveal, useHref } from \"./kit\";\n\n/**\n * The full index of work: the page's title and a line, then every project as a row of one\n * shared grid (rule 103): a small cover, the client, the project, its disciplines and its year,\n * each column starting on one line. Below sm a row stacks to cover and text. Each row is one\n * link to its case study.\n */\nexport function WorkPage() {\n  const to = useHref();\n  return (\n    <section aria-labelledby=\"work-title\" className={`${COLUMN} pt-section-sm pb-group`}>\n      <Reveal className=\"flex flex-col gap-pad-base\">\n        <h1 id=\"work-title\" className=\"font-display text-display-5xl font-medium tracking-display text-text sm:text-display-6xl\">\n          {workPage.title}\n        </h1>\n        <p className=\"max-w-xl text-ui-md text-pretty text-text-secondary\">{workPage.lead}</p>\n      </Reveal>\n      <div className=\"mt-group grid grid-cols-[7rem_minmax(0,1fr)] gap-x-pad-md md:grid-cols-[10rem_minmax(0,1fr)_minmax(0,1.4fr)_minmax(0,1fr)_auto]\">\n        {/* Column names for sighted readers; each row says what it is on its own. */}\n        <div aria-hidden className={`col-span-full grid grid-cols-subgrid border-b border-line-subtle pb-in ${LABEL} max-md:hidden`}>\n          <span />\n          <span>{workPage.columns.client}</span>\n          <span>{workPage.columns.project}</span>\n          <span>{workPage.columns.disciplines}</span>\n          <span className=\"text-right\">{workPage.columns.year}</span>\n        </div>\n        <ol className=\"col-span-full grid grid-cols-subgrid\">\n          {projects.map((p, i) => (\n            <li key={p.id} id={p.id} className=\"col-span-full grid scroll-mt-4 grid-cols-subgrid\">\n              <Reveal index={Math.min(i, 4)} className=\"group relative col-span-full grid grid-cols-subgrid items-center border-b border-line-subtle py-pad-sm\">\n                <span aria-hidden className=\"image-ring relative aspect-[4/3] overflow-hidden rounded-control-sm [--art-min:0]\">\n                  <span className=\"absolute inset-0\">\n                    <ClientArt id={p.id} />\n                  </span>\n                </span>\n                <span className=\"flex min-w-0 flex-col gap-1 md:contents\">\n                  <a\n                    href={to(`/work/${p.id}`)}\n                    className=\"focus-ring self-start rounded-control-xs text-ui-lg font-medium text-text transition-colors duration-(--eased-duration-fast) ease-standard group-hover-fine:text-text-secondary after:absolute after:inset-0 md:self-center md:text-display-xl\"\n                  >\n                    {p.client}\n                  </a>\n                  <span className=\"text-ui text-pretty text-text-secondary\">{p.title}</span>\n                  <span className=\"text-ui-sm text-text-muted md:text-ui\">{p.disciplines.join(\", \")}</span>\n                  <span className=\"text-ui-sm text-text-muted tabular-nums md:text-right md:text-ui\">{p.year}</span>\n                </span>\n              </Reveal>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/work-page.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}