{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-portfolio",
  "type": "registry:component",
  "title": "Agency portfolio",
  "description": "An agency portfolio page with a marketing navbar, animated headline, project cards that fade up in sequence as they scroll in, and a mega footer.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/aspect-ratio.json",
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/footer-mega.json",
    "https://ui.minidev.pro/r/nav-marketing.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/agency-portfolio.tsx",
      "type": "registry:ui",
      "target": "components/ui/agency-portfolio.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { NavMarketing } from \"@/components/ui/nav-marketing\"\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\nimport { FooterMega } from \"@/components/ui/footer-mega\"\nimport { Button } from \"@/components/ui/button\"\n\nconst projects = [\n  { name: \"Northwind\", blurb: \"AI ops console\" },\n  { name: \"Harbor\", blurb: \"Billing redesign\" },\n  { name: \"Lumen\", blurb: \"Docs marketing\" },\n]\n\nfunction AgencyPortfolio({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"agency-portfolio\" data-tier=\"premium\" className={cn(\"bg-bg\", className)}>\n      <NavMarketing brand=\"Studio\" />\n      <div className=\"mx-auto max-w-5xl space-y-12 px-6 py-16\">\n        <div className=\"max-w-2xl\">\n          <motion.h1 initial={reduce ? false : { opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className=\"text-4xl font-medium tracking-[-0.026em] text-fg\">\n            Product UI with a pulse\n          </motion.h1>\n          <p className=\"mt-3 text-sm text-fg-muted\">Selected work. Products we designed, built and shipped in thirty days.</p>\n          <Button className=\"mt-6\">Start a project</Button>\n        </div>\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {projects.map((p, i) => (\n            <motion.div\n              key={p.name}\n              initial={reduce ? false : { opacity: 0, y: 12 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              viewport={{ once: true }}\n              transition={{ delay: i * 0.06 }}\n              className=\"overflow-hidden rounded-xl border border-border bg-surface\"\n            >\n              <AspectRatio ratio={4 / 3} className=\"bg-sunken\" />\n              <div className=\"p-4\">\n                <p className=\"text-sm font-medium text-fg\">{p.name}</p>\n                <p className=\"text-xs text-fg-muted\">{p.blurb}</p>\n              </div>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n      <FooterMega columns={[{ title: \"Studio\", links: [{ label: \"Work\", href: \"#\" }, { label: \"Contact\", href: \"#\" }] }]} />\n    </div>\n  )\n}\nexport { AgencyPortfolio }\n"
    }
  ]
}