{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split-showcase",
  "type": "registry:component",
  "title": "Hero split showcase",
  "description": "A split hero with headline and copy on the left and a product card on the right whose bar chart grows into place on load. Suits launch and docs homes.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/card.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-split-showcase.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-split-showcase.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\n\nfunction HeroSplitShowcase({\n  className,\n}: {\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-split-showcase\"\n      data-tier=\"premium\"\n      className={cn(\n        \"grid min-w-0 items-center gap-8 overflow-hidden rounded-2xl border border-border bg-surface p-4 sm:gap-10 sm:p-8 lg:grid-cols-2 lg:p-12\",\n        className\n      )}\n    >\n      <div className=\"min-w-0\">\n        <span className=\"mb-4 inline-flex h-5 items-center rounded-md border border-border bg-sunken px-2 text-[11px] font-medium text-fg\">New</span>\n        <motion.h1\n          initial={reduce ? false : { opacity: 0, x: -12 }}\n          animate={{ opacity: 1, x: 0 }}\n          className=\"text-[clamp(1.75rem,3vw+1rem,2.5rem)] font-medium tracking-[-0.026em] text-fg\"\n        >\n          Product UI with a pulse\n        </motion.h1>\n        <p className=\"mt-4 text-sm leading-[1.55] text-fg-muted\">\n          Pair a Hairline narrative with live chrome. Perfect for launch pages and docs homes.\n        </p>\n        <div className=\"mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap\">\n          <Button className=\"w-full sm:w-auto\">Start building</Button>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\">See examples</Button>\n        </div>\n      </div>\n      <motion.div\n        initial={reduce ? false : { opacity: 0, y: 16 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ delay: 0.1, duration: 0.5 }}\n        className=\"relative min-w-0\"\n      >\n        <div className=\"absolute -inset-2 rounded-2xl bg-accent/10 sm:-inset-3\" aria-hidden />\n        <Card className=\"relative overflow-hidden shadow-lg\">\n          <CardHeader>\n            <CardTitle className=\"flex items-center justify-between gap-2\">\n              <span className=\"min-w-0 truncate\">Revenue</span>\n              <span className=\"shrink-0 text-xs font-normal text-success\">+18.2%</span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"flex h-28 items-end gap-1.5\">\n              {[40, 55, 48, 70, 62, 88, 76].map((h, i) => (\n                <motion.div\n                  key={i}\n                  className=\"flex-1 rounded-sm bg-accent/80\"\n                  initial={reduce ? false : { height: 8 }}\n                  animate={{ height: h }}\n                  transition={{ delay: 0.15 + i * 0.04, duration: 0.45 }}\n                />\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n      </motion.div>\n    </section>\n  )\n}\nexport { HeroSplitShowcase }\n"
    }
  ]
}