{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-split-image",
  "title": "Split CTA with product visual",
  "description": "Two-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/border-beam.json",
    "https://velora.colorlib.com/r/grid-pattern.json",
    "https://velora.colorlib.com/r/meteors.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/cta-split-image.tsx",
      "content": "import { ArrowRightIcon, CheckCircle2Icon, RocketIcon, TrendingUpIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { BorderBeam } from \"@/components/velora/border-beam\";\nimport { DotPattern } from \"@/components/velora/grid-pattern\";\nimport { Meteors } from \"@/components/velora/meteors\";\n\nconst EYEBROW = \"Lumen Analytics\";\nconst TITLE = \"See what your users do — before they tell you\";\nconst COPY =\n  \"Connect your product in five minutes and get live funnels, retention and release impact on one screen.\";\nconst BENEFITS = [\n  \"Self-serve dashboards for every team\",\n  \"Alerts when a release moves a metric\",\n  \"Privacy-first: no cookies, EU hosting\",\n];\nconst PRIMARY = { label: \"Start a free trial\", href: \"#\" };\nconst SECONDARY = { label: \"See a live demo\", href: \"#\" };\n\n// Sample data for the dashboard mock-up (weekly active users, in thousands).\nconst BARS = [38, 52, 46, 61, 58, 72, 69, 84, 78, 92, 88, 100];\nconst STATS = [\n  { label: \"Weekly active\", value: \"12,480\", delta: \"+18%\" },\n  { label: \"Retention\", value: \"64%\", delta: \"+4.2%\" },\n];\n\n/**\n * Split call-to-action card: copy, benefits and two actions on one side, a\n * Tailwind-built dashboard mock-up on the other, with a beam tracing the\n * card's border. Swap the mock-up for a screenshot if you have one.\n */\nexport function CtaSplitImage() {\n  return (\n    <section className=\"px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"relative mx-auto grid max-w-7xl overflow-hidden rounded-3xl border bg-card shadow-sm lg:grid-cols-2\">\n        <BorderBeam size={120} duration={9} />\n\n        <div className=\"flex flex-col justify-center px-6 py-14 sm:px-12 sm:py-16 lg:py-20\">\n          <p className=\"text-sm font-medium text-primary\">{EYEBROW}</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            {TITLE}\n          </h2>\n          <p className=\"mt-5 text-base text-pretty text-muted-foreground sm:text-lg\">{COPY}</p>\n\n          <ul className=\"mt-8 space-y-3\">\n            {BENEFITS.map((benefit) => (\n              <li key={benefit} className=\"flex items-start gap-3 text-sm sm:text-base\">\n                <CheckCircle2Icon aria-hidden className=\"mt-0.5 size-5 shrink-0 text-primary\" />\n                {benefit}\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"mt-10 flex flex-col gap-3 sm:flex-row\">\n            <Button asChild size=\"lg\" className=\"h-11 rounded-full px-6\">\n              <a href={PRIMARY.href}>\n                {PRIMARY.label}\n                <ArrowRightIcon aria-hidden />\n              </a>\n            </Button>\n            <Button asChild size=\"lg\" variant=\"ghost\" className=\"h-11 rounded-full px-6\">\n              <a href={SECONDARY.href}>{SECONDARY.label}</a>\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"relative isolate flex items-center overflow-hidden border-t bg-muted/40 px-6 py-14 sm:px-12 lg:border-t-0 lg:border-l lg:py-20\">\n          <DotPattern\n            aria-hidden\n            className=\"-z-10 fill-foreground/15 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]\"\n          />\n          <div\n            aria-hidden\n            className=\"absolute -top-24 -right-24 -z-10 size-80 rounded-full bg-brand-to/25 blur-3xl\"\n          />\n          <Meteors number={10} />\n\n          <DashboardMock />\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction DashboardMock() {\n  return (\n    <div\n      role=\"img\"\n      aria-label=\"Lumen dashboard: weekly active users up 18% to 12,480 and retention up to 64%, with a rising twelve-week bar chart.\"\n      className=\"relative mx-auto w-full max-w-md\"\n    >\n      <div className=\"rounded-2xl border bg-background/90 shadow-xl shadow-brand/10 backdrop-blur\">\n        <div className=\"flex items-center gap-1.5 border-b px-4 py-3\">\n          <span className=\"size-2.5 rounded-full bg-muted-foreground/30\" />\n          <span className=\"size-2.5 rounded-full bg-muted-foreground/30\" />\n          <span className=\"size-2.5 rounded-full bg-muted-foreground/30\" />\n          <span className=\"ml-3 text-xs text-muted-foreground\">lumen.app/overview</span>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-3 p-4\">\n          {STATS.map((stat) => (\n            <div key={stat.label} className=\"rounded-xl border bg-card p-3\">\n              <p className=\"text-xs text-muted-foreground\">{stat.label}</p>\n              <p className=\"mt-1 text-xl font-semibold tabular-nums\">{stat.value}</p>\n              <p className=\"mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary\">\n                <TrendingUpIcon className=\"size-3.5\" />\n                {stat.delta}\n              </p>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"px-4 pb-4\">\n          <div className=\"rounded-xl border bg-card p-3\">\n            <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n              <span>Active users · 12 weeks</span>\n              <span className=\"rounded-full bg-primary/10 px-2 py-0.5 font-medium text-primary\">\n                Live\n              </span>\n            </div>\n            <div className=\"mt-4 flex h-28 items-end gap-1.5\">\n              {BARS.map((value, i) => (\n                <div\n                  key={i}\n                  className=\"flex-1 rounded-t-sm bg-gradient-to-t from-brand-from/70 to-brand-to\"\n                  style={{ height: `${value}%`, opacity: 0.45 + (i / BARS.length) * 0.55 }}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"absolute -bottom-6 -left-3 flex items-center gap-3 rounded-xl border bg-background px-3 py-2.5 shadow-lg sm:-left-8\">\n        <span className=\"grid size-8 place-items-center rounded-lg bg-primary text-primary-foreground\">\n          <RocketIcon className=\"size-4\" />\n        </span>\n        <div className=\"text-xs\">\n          <p className=\"font-medium\">Release 4.2 shipped</p>\n          <p className=\"text-muted-foreground\">Sign-ups +9% since launch</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/cta-split-image.tsx"
    }
  ],
  "categories": [
    "cta-sections"
  ],
  "type": "registry:block"
}