{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-editorial-split",
  "type": "registry:component",
  "title": "Hero editorial split",
  "description": "A two column editorial hero in Tailwind with a masked two line headline and lede on the left and an animated device frame stack on the right.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/device-frame-stack.json",
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-editorial-split.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-editorial-split.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\nimport { Button } from \"@/components/ui/button\"\nimport { DeviceFrameStack } from \"@/components/ui/device-frame-stack\"\n\nfunction HeroEditorialSplit({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-editorial-split\"\n      data-tier=\"premium\"\n      className={cn(\n        \"grid min-w-0 items-center gap-8 overflow-hidden rounded-2xl border border-border bg-bg px-4 py-12 sm:gap-10 sm:px-6 sm:py-16 lg:grid-cols-2 lg:px-12\",\n        className\n      )}\n    >\n      <div className=\"min-w-0\">\n        <motion.p initial={reduce ? false : { y: 8 }} animate={{ y: 0 }} className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">\n          Introducing Lumen 2.0\n        </motion.p>\n        <h1 className=\"mt-3 text-[clamp(1.75rem,3.5vw+1rem,3rem)] font-medium tracking-[-0.028em] text-fg\">\n          <span className=\"block overflow-hidden\">\n            <motion.span className=\"block\" initial={reduce ? false : { y: \"110%\" }} animate={{ y: 0 }} transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}>\n              Local craft.\n            </motion.span>\n          </span>\n          <span className=\"block overflow-hidden\">\n            <motion.span className=\"block bg-[linear-gradient(100deg,var(--fg)_0%,var(--accent)_60%,var(--accent-2)_100%)] bg-clip-text text-transparent\" initial={reduce ? false : { y: \"110%\" }} animate={{ y: 0 }} transition={{ duration: 0.7, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}>\n              Public-ready polish.\n            </motion.span>\n          </span>\n        </h1>\n        <p className=\"mt-4 max-w-md text-sm leading-[1.55] text-fg-muted\">\n          A calmer way to plan, build and ship. Everything your team needs in one place, and nothing it does not.\n        </p>\n        <div className=\"mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:flex-wrap\">\n          <MagneticCta className=\"w-full sm:w-auto\">Start free trial</MagneticCta>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\">Open docs</Button>\n        </div>\n      </div>\n      <DeviceFrameStack />\n    </section>\n  )\n}\nexport { HeroEditorialSplit }\n"
    }
  ]
}