{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-split-screenshot",
  "title": "Alternating screenshot rows",
  "description": "Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/border-beam.json",
    "https://velora.colorlib.com/r/browser-mockup.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/features-split-screenshot.tsx",
      "content": "import {\n  ArrowRightIcon,\n  BellIcon,\n  BotIcon,\n  CheckIcon,\n  HouseIcon,\n  InboxIcon,\n  LayersIcon,\n  MailIcon,\n  SettingsIcon,\n  TrendingUpIcon,\n  UsersIcon,\n  ZapIcon,\n} from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { BorderBeam } from \"@/components/velora/border-beam\";\nimport { BrowserMockup } from \"@/components/velora/browser-mockup\";\nimport { cn } from \"@/lib/utils\";\n\nconst HEADING = {\n  eyebrow: \"Why Acme\",\n  title: \"Less busywork. More of the work that matters.\",\n  description:\n    \"Acme gives every team a shared picture of the business and quietly handles the repetitive parts.\",\n};\n\nconst ROWS = [\n  {\n    eyebrow: \"Dashboards\",\n    title: \"See the whole business at a glance\",\n    description:\n      \"Pipeline, revenue and customer health live on one screen that updates itself. No spreadsheets to reconcile, no stale exports.\",\n    points: [\n      \"Live metrics from every connected source\",\n      \"Drill down from any chart to the underlying records\",\n      \"Share read-only views with a single link\",\n    ],\n    cta: \"Explore dashboards\",\n    url: \"app.acme.com/overview\",\n    screen: DashboardScreen,\n  },\n  {\n    eyebrow: \"Automations\",\n    title: \"Let the routine work run itself\",\n    description:\n      \"Describe a rule once and Acme follows it forever — routing requests, chasing approvals and keeping everyone in the loop.\",\n    points: [\n      \"Visual builder with 40+ triggers and actions\",\n      \"Test runs with real data before you publish\",\n      \"Full history of every run, with one-click retries\",\n    ],\n    cta: \"See how automations work\",\n    url: \"app.acme.com/automations\",\n    screen: AutomationScreen,\n  },\n];\n\n/**\n * Two alternating feature rows: copy with a checklist on one side and a\n * browser-framed product screen on the other. Screens are plain Tailwind,\n * so they stay sharp and re-theme with your tokens.\n */\nexport function FeaturesSplitScreenshot() {\n  return (\n    <section className=\"overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto max-w-7xl\">\n        <BlurFade>\n          <div className=\"mx-auto max-w-2xl text-center\">\n            <p className=\"text-sm font-semibold text-primary\">{HEADING.eyebrow}</p>\n            <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl\">\n              {HEADING.title}\n            </h2>\n            <p className=\"mt-5 text-lg text-pretty text-muted-foreground\">\n              {HEADING.description}\n            </p>\n          </div>\n        </BlurFade>\n\n        <div className=\"mt-20 space-y-24 sm:mt-24 sm:space-y-32\">\n          {ROWS.map(({ screen: Screen, ...row }, i) => {\n            const flip = i % 2 === 1;\n            return (\n              <div\n                key={row.title}\n                className=\"grid items-center gap-12 lg:grid-cols-2 lg:gap-16\"\n              >\n                <BlurFade direction={flip ? \"left\" : \"right\"} className={cn(\"min-w-0\", flip && \"lg:order-last\")}>\n                  <p className=\"text-sm font-semibold text-primary\">{row.eyebrow}</p>\n                  <h3 className=\"mt-3 text-2xl font-semibold tracking-tight text-balance sm:text-4xl\">\n                    {row.title}\n                  </h3>\n                  <p className=\"mt-4 text-lg text-pretty text-muted-foreground\">{row.description}</p>\n                  <ul className=\"mt-8 space-y-4\">\n                    {row.points.map((point) => (\n                      <li key={point} className=\"flex gap-3\">\n                        <span className=\"mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-from to-brand-to text-brand-foreground\">\n                          <CheckIcon aria-hidden className=\"size-3\" strokeWidth={3} />\n                        </span>\n                        <span className=\"text-sm leading-6\">{point}</span>\n                      </li>\n                    ))}\n                  </ul>\n                  <Button variant=\"outline\" className=\"mt-10\" asChild>\n                    <a href=\"#\">\n                      {row.cta}\n                      <ArrowRightIcon aria-hidden />\n                    </a>\n                  </Button>\n                </BlurFade>\n\n                <BlurFade direction={flip ? \"right\" : \"left\"} delay={0.1} className=\"relative min-w-0\">\n                  <div\n                    aria-hidden\n                    className=\"absolute -inset-6 -z-10 rounded-[2rem] bg-gradient-to-tr from-brand-from/20 via-brand-via/10 to-brand-to/20 blur-2xl\"\n                  />\n                  <BrowserMockup url={row.url} aria-hidden className=\"relative\">\n                    <Screen />\n                    <BorderBeam size={120} duration={10} delay={i * 4} />\n                  </BrowserMockup>\n                </BlurFade>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/* ---------- Product screens (decorative, built with Tailwind) ---------- */\n\nfunction DashboardScreen() {\n  const nav = [\n    { icon: HouseIcon, label: \"Overview\", active: true },\n    { icon: InboxIcon, label: \"Inbox\" },\n    { icon: UsersIcon, label: \"Customers\" },\n    { icon: LayersIcon, label: \"Projects\" },\n    { icon: SettingsIcon, label: \"Settings\" },\n  ];\n  const kpis = [\n    { label: \"Revenue\", value: \"$84.2k\", delta: \"+12%\" },\n    { label: \"Active users\", value: \"3,912\", delta: \"+6%\" },\n    { label: \"Churn\", value: \"1.8%\", delta: \"−0.4%\" },\n  ];\n  const bars = [40, 55, 48, 62, 58, 71, 66, 80, 74, 88, 83, 95];\n  const deals = [\n    { name: \"Northwind\", stage: \"Proposal\", value: \"$24,000\" },\n    { name: \"Halcyon\", stage: \"Negotiation\", value: \"$18,500\" },\n    { name: \"Lumen\", stage: \"Closed won\", value: \"$12,900\" },\n  ];\n\n  return (\n    <div className=\"flex bg-background/60 text-left\">\n      <div className=\"hidden w-40 shrink-0 flex-col gap-1 border-r p-3 sm:flex\">\n        <div className=\"mb-3 flex items-center gap-2 px-2 py-1\">\n          <span className=\"size-5 rounded-md bg-gradient-to-br from-brand-from to-brand-to\" />\n          <span className=\"text-xs font-semibold\">Acme</span>\n        </div>\n        {nav.map(({ icon: Icon, label, active }) => (\n          <div\n            key={label}\n            className={cn(\n              \"flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground\",\n              active && \"bg-muted font-medium text-foreground\"\n            )}\n          >\n            <Icon className=\"size-3.5\" />\n            {label}\n          </div>\n        ))}\n      </div>\n\n      <div className=\"min-w-0 flex-1 space-y-3 p-3 sm:p-4\">\n        <div className=\"grid grid-cols-3 gap-2 sm:gap-3\">\n          {kpis.map((kpi) => (\n            <div key={kpi.label} className=\"rounded-lg border bg-card p-2.5 sm:p-3\">\n              <p className=\"truncate text-[10px] text-muted-foreground sm:text-[11px]\">{kpi.label}</p>\n              <p className=\"mt-1 text-sm font-semibold tracking-tight sm:text-base\">{kpi.value}</p>\n              <p className=\"text-[10px] font-medium text-emerald-600 dark:text-emerald-400\">{kpi.delta}</p>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"rounded-lg border bg-card p-3\">\n          <div className=\"flex items-center justify-between text-[11px]\">\n            <span className=\"font-medium\">Revenue</span>\n            <span className=\"inline-flex items-center gap-1 text-muted-foreground\">\n              <TrendingUpIcon className=\"size-3 text-primary\" />\n              Last 12 months\n            </span>\n          </div>\n          <div className=\"mt-3 flex h-24 items-end gap-1 sm:h-28 sm:gap-1.5\">\n            {bars.map((v, i) => (\n              <div\n                key={i}\n                style={{ height: `${v}%` }}\n                className={cn(\n                  \"flex-1 rounded-t-sm\",\n                  i >= bars.length - 3 ? \"bg-gradient-to-t from-brand-from to-brand-to\" : \"bg-primary/15\"\n                )}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className=\"rounded-lg border bg-card\">\n          {deals.map((deal, i) => (\n            <div\n              key={deal.name}\n              className={cn(\"flex items-center gap-3 px-3 py-2 text-[11px]\", i > 0 && \"border-t\")}\n            >\n              <span className=\"grid size-5 place-items-center rounded-full bg-muted text-[9px] font-semibold\">\n                {deal.name[0]}\n              </span>\n              <span className=\"font-medium\">{deal.name}</span>\n              <span className=\"hidden text-muted-foreground sm:inline\">{deal.stage}</span>\n              <span className=\"ml-auto tabular-nums\">{deal.value}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction AutomationScreen() {\n  const steps = [\n    { icon: MailIcon, kind: \"Trigger\", title: \"New request in Support inbox\", meta: \"Any sender\" },\n    { icon: BotIcon, kind: \"Action\", title: \"Classify priority and product area\", meta: \"AI · 98% confident\" },\n    { icon: UsersIcon, kind: \"Action\", title: \"Assign to the on-call engineer\", meta: \"Round robin · Platform team\" },\n    { icon: BellIcon, kind: \"Action\", title: \"Notify #support-escalations\", meta: \"Only if priority is urgent\" },\n  ];\n\n  return (\n    <div className=\"bg-background/60 p-4 text-left sm:p-6\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <ZapIcon className=\"size-4 text-primary\" />\n        <p className=\"text-sm font-medium\">Route urgent requests</p>\n        <span className=\"inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-700 dark:text-emerald-400\">\n          <span className=\"size-1.5 rounded-full bg-emerald-500\" />\n          Live\n        </span>\n        <span className=\"ml-auto text-[11px] text-muted-foreground\">1,284 runs this week</span>\n      </div>\n\n      <ol className=\"mt-5\">\n        {steps.map(({ icon: Icon, kind, title, meta }, i) => (\n          <li key={title} className=\"relative flex gap-3 pb-4 last:pb-0\">\n            {i < steps.length - 1 && (\n              <span className=\"absolute top-9 bottom-0 left-4 w-px -translate-x-1/2 bg-border\" />\n            )}\n            <span\n              className={cn(\n                \"relative grid size-8 shrink-0 place-items-center rounded-lg border bg-card\",\n                i === 0 && \"border-primary/40 bg-primary/10 text-primary\"\n              )}\n            >\n              <Icon className=\"size-4\" />\n            </span>\n            <div className=\"min-w-0 flex-1 rounded-lg border bg-card px-3 py-2 shadow-sm\">\n              <p className=\"text-[10px] font-medium tracking-wide text-muted-foreground uppercase\">{kind}</p>\n              <p className=\"truncate text-xs font-medium\">{title}</p>\n              <p className=\"truncate text-[11px] text-muted-foreground\">{meta}</p>\n            </div>\n          </li>\n        ))}\n      </ol>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/features-split-screenshot.tsx"
    }
  ],
  "categories": [
    "feature-sections"
  ],
  "type": "registry:block"
}