{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-services-page",
  "title": "Agency: Services pages",
  "description": "The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json",
    "https://eased.dev/r/agency-work.json",
    "https://eased.dev/r/badge.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/services-page.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"../../badge/badge\";\nimport { projects, services, type ServiceId } from \"./content\";\nimport { servicePages, servicesPage } from \"./content-services\";\nimport { Arrow, COLUMN, PageHead, Reveal, Section, useHref } from \"./kit\";\nimport { WorkCard } from \"./work\";\n\n/**\n * The services index, /services: the four services as a ruled list, each row its number, name,\n * line and deliverables, and the whole row one link to its page.\n */\nexport function ServicesIndex() {\n  const to = useHref();\n  return (\n    <section aria-labelledby=\"page-title\" className={`${COLUMN} pt-section-sm pb-group`}>\n      <PageHead title={servicesPage.title} lead={servicesPage.lead} />\n      <ol className=\"mt-group border-t border-line-subtle\">\n        {services.items.map((s, i) => (\n          <li key={s.id}>\n            <Reveal\n              index={i}\n              className=\"group relative grid gap-x-pad-md gap-y-in border-b border-line-subtle py-pad-lg md:grid-cols-[3rem_minmax(0,5fr)_minmax(0,7fr)_auto] md:items-baseline\"\n            >\n              <span className=\"text-ui-sm text-text-muted tabular-nums\">{String(i + 1).padStart(2, \"0\")}</span>\n              <h2 className=\"font-display text-display-3xl font-medium tracking-display text-text\">\n                <a\n                  href={to(`/services/${s.slug}`)}\n                  className=\"focus-ring rounded-control-xs transition-colors duration-(--eased-duration-fast) ease-standard group-hover-fine:text-text-secondary after:absolute after:inset-0\"\n                >\n                  {s.title}\n                </a>\n              </h2>\n              <div className=\"flex flex-col gap-in\">\n                <p className=\"max-w-xl text-ui-md text-pretty text-text-secondary\">{s.body}</p>\n                <ul aria-label={`${s.title} includes`} className=\"flex flex-wrap gap-1.5\">\n                  {s.deliverables.map((d) => (\n                    <li key={d}>\n                      <Badge size=\"md\">{d}</Badge>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n              <Arrow className=\"text-text-muted max-md:hidden\" />\n            </Reveal>\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n\n/**\n * One service, /services/<slug>: its name and promise, the longer case beside a typical\n * project's facts, what it delivers, how it runs week by week and recent work that used it.\n */\nexport function ServicePage({ id }: { id: ServiceId }) {\n  const service = services.items.find((s) => s.id === id) ?? services.items[0];\n  const page = servicePages[id];\n  const work = page.work.flatMap((w) => projects.filter((p) => p.id === w));\n  const facts = [\n    { term: servicesPage.facts.duration, value: page.engagement.duration },\n    { term: servicesPage.facts.team, value: page.engagement.team },\n    { term: servicesPage.facts.start, value: page.engagement.start },\n  ];\n\n  return (\n    <>\n      <div className={`${COLUMN} pt-section-sm`}>\n        <PageHead back={servicesPage.back} title={service.title} lead={page.lead} />\n      </div>\n\n      <Section id=\"engagement\" label={servicesPage.labels.engagement} 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          {page.body.map((p) => (\n            <p key={p.slice(0, 24)} className=\"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=\"includes\" label={servicesPage.labels.includes}>\n        <ul className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2 lg:grid-cols-4\">\n          {page.includes.map((d, i) => (\n            <li key={d.title}>\n              <Reveal index={i} className=\"flex flex-col gap-1.5 border-t border-line-subtle pt-in\">\n                <h3 className=\"text-display-xl font-medium text-text\">{d.title}</h3>\n                <p className=\"text-ui-md text-pretty text-text-secondary\">{d.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ul>\n      </Section>\n\n      <Section id=\"process\" label={servicesPage.labels.process}>\n        {/* One grid for every step, so the weeks, names and lines each start on one x (rule 103). */}\n        <ol className=\"grid grid-cols-1 border-t border-line-subtle md:grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,5fr)]\">\n          {page.process.map((step, i) => (\n            <li key={step.title} className=\"col-span-full grid md:grid-cols-subgrid\">\n              <Reveal index={i} className=\"col-span-full grid gap-x-pad-md gap-y-1 border-b border-line-subtle py-pad-md md:grid-cols-subgrid md:items-baseline\">\n                <span className=\"text-ui text-text-muted tabular-nums\">{step.weeks}</span>\n                <h3 className=\"text-display-xl font-medium text-text\">{step.title}</h3>\n                <p className=\"max-w-xl text-ui-md text-pretty text-text-secondary\">{step.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ol>\n      </Section>\n\n      <Section id=\"work\" label={servicesPage.labels.work}>\n        <ul className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2 lg:grid-cols-3\">\n          {work.map((p, i) => (\n            <li key={p.id}>\n              <Reveal index={i}>\n                <WorkCard project={p} />\n              </Reveal>\n            </li>\n          ))}\n        </ul>\n      </Section>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/services-page.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}