{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-services",
  "title": "Agency: Services",
  "description": "The studio's claim beside its four services as an accordion, each with what it delivers.",
  "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/accordion.json",
    "https://eased.dev/r/badge.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/services.tsx",
      "content": "\"use client\";\n\nimport { Accordion, AccordionItem } from \"../../accordion/accordion\";\nimport { Badge } from \"../../badge/badge\";\nimport { services } from \"./content\";\nimport { ArrowLink, Reveal, Section } from \"./kit\";\n\n/**\n * What the studio does: the claim and a line on the left, and the four services as an\n * accordion on the right, the first open, each with what it delivers as badges and a link to its\n * own page.\n */\nexport function Services() {\n  return (\n    <Section id=\"services\" label={services.label} className=\"grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg\">\n      <Reveal className=\"flex flex-col items-start gap-pad-base\">\n        <p className=\"max-w-md font-display text-display-3xl font-medium tracking-display text-balance text-text\">{services.title}</p>\n        <p className=\"max-w-md text-ui-md text-pretty text-text-secondary\">{services.body}</p>\n        <ArrowLink href={services.link.href} className=\"mt-in\">\n          {services.link.label}\n        </ArrowLink>\n      </Reveal>\n      <Reveal index={1}>\n        <Accordion defaultValue={[services.items[0].id]} className=\"border-y border-line-subtle\">\n          {services.items.map((s, i) => (\n            <AccordionItem\n              key={s.id}\n              value={s.id}\n              title={\n                <span className=\"flex items-baseline gap-pad-base py-1\">\n                  <span className=\"w-6 shrink-0 text-ui-sm font-normal text-text-muted tabular-nums\">{String(i + 1).padStart(2, \"0\")}</span>\n                  <span className=\"text-display-xl font-medium\">{s.title}</span>\n                </span>\n              }\n            >\n              <div className=\"flex flex-col gap-pad-base pb-pad-md pl-[calc(--spacing(6)+var(--spacing-pad-base))]\">\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                <ArrowLink href={`/services/${s.slug}`} className=\"self-start\">\n                  {services.more} {s.title.toLowerCase()}\n                </ArrowLink>\n              </div>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </Reveal>\n    </Section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/services.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}