{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-studio",
  "title": "Agency: Studio",
  "description": "What the studio is, its people with initials avatars and how a project runs, with a line to the open roles.",
  "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/avatar.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/studio.tsx",
      "content": "\"use client\";\n\nimport { Avatar } from \"../../avatar/avatar\";\nimport { studio } from \"./content-studio\";\nimport { ArrowLink, COLUMN, PageHead, Reveal, Section } from \"./kit\";\n\n/**\n * The studio page's own sections, /studio: what Tessera is, the people with their initials, and\n * how a project runs. The page goes on with the home page's clients and numbers, then a line to\n * the open roles.\n */\nexport function Studio() {\n  return (\n    <>\n      <div className={`${COLUMN} pt-section-sm`}>\n        <PageHead title={studio.title} lead={studio.lead} />\n      </div>\n\n      <Section id=\"people\" label={studio.people.label} className=\"flex flex-col gap-group\">\n        <Reveal className=\"flex max-w-2xl flex-col gap-pad-base\">\n          <p className=\"font-display text-display-3xl font-medium tracking-display text-balance text-text\">{studio.people.title}</p>\n          <p className=\"text-ui-md text-pretty text-text-secondary\">{studio.people.body}</p>\n        </Reveal>\n        <div className=\"flex flex-col gap-pad-lg\">\n          <ul className=\"grid grid-cols-1 gap-x-tiles gap-y-pad-md min-[480px]:grid-cols-2 md:grid-cols-3 lg:grid-cols-5\">\n            {studio.people.items.map((person, i) => (\n              <li key={person.name}>\n                <Reveal index={Math.min(i, 4)} className=\"flex items-center gap-in border-t border-line-subtle pt-in\">\n                  <Avatar name={person.name} size=\"xl\" />\n                  <div className=\"flex min-w-0 flex-col\">\n                    <p className=\"text-ui-md font-medium text-text\">{person.name}</p>\n                    <p className=\"text-ui text-text-secondary\">{person.role}</p>\n                  </div>\n                </Reveal>\n              </li>\n            ))}\n          </ul>\n          <p className=\"text-ui text-text-muted\">{studio.people.more}</p>\n        </div>\n      </Section>\n\n      <Section id=\"approach\" label={studio.approach.label} className=\"grid gap-group lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-group-lg\">\n        <Reveal>\n          <p className=\"max-w-md font-display text-display-3xl font-medium tracking-display text-balance text-text\">{studio.approach.title}</p>\n        </Reveal>\n        <ol className=\"grid gap-x-tiles gap-y-pad-lg sm:grid-cols-2\">\n          {studio.approach.items.map((item, i) => (\n            <li key={item.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\">{item.title}</h3>\n                <p className=\"text-ui-md text-pretty text-text-secondary\">{item.body}</p>\n              </Reveal>\n            </li>\n          ))}\n        </ol>\n      </Section>\n    </>\n  );\n}\n\n/** A line under the clients: the studio is hiring, and the way to the roles. */\nexport function StudioCareers() {\n  return (\n    <div className={`${COLUMN} pb-group`}>\n      <Reveal className=\"flex flex-wrap items-baseline justify-between gap-in border-t border-line-subtle pt-pad-md\">\n        <p className=\"text-display-xl font-medium text-text\">\n          {studio.careers.title} <span className=\"text-text-secondary\">{studio.careers.body}</span>\n        </p>\n        <ArrowLink href={studio.careers.link.href}>{studio.careers.link.label}</ArrowLink>\n      </Reveal>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/studio.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}