{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-client-pitch",
  "type": "registry:component",
  "title": "Hero client pitch",
  "description": "A React pitch hero where headline words slide up from masks in sequence, followed by a lede, showcase and gallery buttons, and a row of proof stats.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-client-pitch.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-client-pitch.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction HeroClientPitch({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const stats: [string, string][] = [\n    [\"500+\", \"components\"],\n    [\"2\", \"themes\"],\n    [\"AA\", \"contrast\"],\n  ]\n  return (\n    <section\n      data-slot=\"hero-client-pitch\"\n      data-tier=\"premium\"\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-bg px-4 py-12 sm:px-12 sm:py-24\",\n        className\n      )}\n    >\n      <div aria-hidden className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklch,var(--accent)_55%,transparent),transparent)]\" />\n      <div aria-hidden className=\"pointer-events-none absolute -right-20 top-10 hidden size-72 rounded-full bg-accent/10 sm:block\" />\n      <div className=\"relative mx-auto max-w-4xl\">\n        <motion.p\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          className=\"text-xs font-medium uppercase tracking-[0.01em] text-accent\"\n        >\n          Client-ready product UI\n        </motion.p>\n        <h1 className=\"mt-4 text-[clamp(1.75rem,4.2vw+1rem,3.75rem)] font-medium leading-[1.08] tracking-[-0.028em] text-fg sm:leading-[1.05] sm:tracking-[-0.034em]\">\n          {[\"Interfaces\", \"that\", \"look\"].map((w, i) => (\n            <span key={w} className=\"inline-block overflow-hidden align-bottom\">\n              <motion.span\n                className=\"inline-block pr-[0.28em]\"\n                initial={reduce ? false : { y: \"110%\" }}\n                animate={{ y: 0 }}\n                transition={{ duration: 0.55, delay: 0.05 + i * 0.06, ease: [0.22, 1, 0.36, 1] }}\n              >\n                {w}\n              </motion.span>\n            </span>\n          ))}\n          <span className=\"block overflow-hidden\">\n            <motion.span\n              className=\"inline-block bg-[linear-gradient(100deg,var(--fg)_0%,var(--accent)_60%,var(--accent-2)_100%)] bg-clip-text text-transparent\"\n              initial={reduce ? false : { y: \"110%\" }}\n              animate={{ y: 0 }}\n              transition={{ duration: 0.6, delay: 0.28, ease: [0.22, 1, 0.36, 1] }}\n            >\n              expensive on purpose.\n            </motion.span>\n          </span>\n        </h1>\n        <motion.p\n          initial={reduce ? false : { y: 12 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.4 }}\n          className=\"mt-5 max-w-xl text-sm leading-[1.55] text-fg-muted sm:mt-6 sm:text-base\"\n        >\n          Tables, billing, settings and AI chat, drawn to one standard and ready to ship. Built for teams who care how their product feels.\n        </motion.p>\n        <motion.div\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.5 }}\n          className=\"mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:flex-wrap\"\n        >\n          <Button size=\"lg\" className=\"w-full sm:w-auto\" render={<Link href=\"/showcase\" />}>\n            Open showcase\n          </Button>\n          <Button size=\"lg\" variant=\"outline\" className=\"w-full sm:w-auto\" render={<Link href=\"/gallery\" />}>\n            Browse gallery\n          </Button>\n        </motion.div>\n        <motion.dl\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.58 }}\n          className=\"mt-10 grid max-w-lg grid-cols-3 gap-2 border-t border-border pt-5 sm:mt-12 sm:gap-4 sm:pt-6\"\n        >\n          {stats.map(([v, l]) => (\n            <div key={l} className=\"min-w-0\">\n              <dt className=\"text-lg font-medium tabular-nums tracking-[-0.018em] text-fg sm:text-2xl\">{v}</dt>\n              <dd className=\"mt-0.5 text-[10px] text-fg-muted sm:text-xs\">{l}</dd>\n            </div>\n          ))}\n        </motion.dl>\n      </div>\n    </section>\n  )\n}\nexport { HeroClientPitch }\n"
    }
  ]
}