{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-hero-section",
  "type": "registry:ui",
  "title": "Split Hero Section",
  "description": "A split-layout hero section with left-aligned headline, key metrics, app screenshot showcase, and trusted-by logo strip.",
  "files": [
    {
      "path": "registry/ruixenui/split-hero-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\n/* ── types ───────────────────────────────────────────────────── */\n\ntype Action = { href: string; label: string };\n\ninterface Stat {\n  /** Numeric / main value, e.g. \"99.9\" */\n  value: string;\n  /** Unit or suffix shown beside the value, e.g. \"%\", \"X\" */\n  unit?: string;\n  /** Label text rendered below the value */\n  label: React.ReactNode;\n}\n\ninterface TrustedBySection {\n  logos: React.ReactNode[];\n}\n\nexport interface SplitHeroSectionProps {\n  /** Main headline — left-aligned */\n  title: React.ReactNode;\n  /** Subtitle / description text */\n  description?: string;\n  /** Primary CTA button */\n  primaryAction?: Action;\n  /** Secondary CTA button */\n  secondaryAction?: Action;\n  /** Key metrics displayed below the CTAs */\n  stats?: Stat[];\n  /** Trusted-by logo strip */\n  trustedBy?: TrustedBySection;\n  className?: string;\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\nexport function SplitHeroSection({\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  stats,\n  trustedBy,\n  className,\n}: SplitHeroSectionProps) {\n  return (\n    <section\n      className={cn(\"relative w-full bg-background\", className)}\n      aria-label=\"Hero\"\n    >\n      <div className=\"mx-auto w-full px-6 lg:max-w-5xl\">\n        <div className=\"grid items-center pt-24 max-lg:gap-12 md:pt-32 lg:grid-cols-2 lg:pt-40\">\n          {/* ── left column ──────────────────────────── */}\n          <div>\n            <div className=\"lg:max-w-sm\">\n              <h1 className=\"text-balance text-4xl font-semibold md:text-5xl\">\n                {title}\n              </h1>\n\n              {description && (\n                <p className=\"mb-6 mt-4 text-balance text-lg text-muted-foreground\">\n                  {description}\n                </p>\n              )}\n\n              {(primaryAction || secondaryAction) && (\n                <div className=\"flex items-center gap-3\">\n                  {primaryAction && (\n                    <Link\n                      href={primaryAction.href}\n                      className=\"inline-flex h-8 items-center justify-center rounded-md border-[0.5px] border-white/10 bg-primary px-3 text-xs font-medium text-primary-foreground shadow-md shadow-black/15 ring-1 ring-[--ring-color] transition-colors hover:bg-primary/90 [--ring-color:color-mix(in_oklab,black_15%,var(--color-primary))] dark:border-transparent dark:[--ring-color:color-mix(in_oklab,white_15%,var(--color-primary))]\"\n                    >\n                      {primaryAction.label}\n                    </Link>\n                  )}\n                  {secondaryAction && (\n                    <Link\n                      href={secondaryAction.href}\n                      className=\"inline-flex h-8 items-center justify-center rounded-md border border-transparent bg-card px-3 text-xs font-medium shadow-sm shadow-black/10 ring-1 ring-foreground/10 transition-colors duration-200 hover:bg-muted/50 dark:ring-foreground/15 dark:hover:bg-muted/50\"\n                    >\n                      {secondaryAction.label}\n                    </Link>\n                  )}\n                </div>\n              )}\n            </div>\n\n            {/* ── stats ──────────────────────────── */}\n            {stats && stats.length > 0 && (\n              <div className=\"mt-12 grid max-w-sm grid-cols-2\">\n                {stats.map((stat, idx) => (\n                  <div key={idx} className=\"space-y-2 *:block\">\n                    <span className=\"text-lg font-semibold\">\n                      {stat.value}{\" \"}\n                      {stat.unit && (\n                        <span className=\"text-lg text-muted-foreground\">\n                          {stat.unit}\n                        </span>\n                      )}\n                    </span>\n                    <p className=\"text-balance text-sm text-muted-foreground\">\n                      {stat.label}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* ── right column: stacked overlapping skeleton cards ── */}\n          <div\n            aria-hidden=\"true\"\n            className=\"relative min-w-xs max-lg:max-w-[calc(100vw-3rem)]\"\n            style={{ perspective: \"800px\" }}\n          >\n            <div\n              className=\"relative flex flex-col\"\n              style={{\n                maskImage:\n                  \"radial-gradient(100% 100% at top left, black 75%, transparent)\",\n                WebkitMaskImage:\n                  \"radial-gradient(100% 100% at top left, black 75%, transparent)\",\n                transform: \"rotateX(5deg) rotateZ(6deg) rotate(-4deg)\",\n              }}\n            >\n              {/* ── Card 1 (back) — analytics skeleton ── */}\n              <div className=\"relative z-[1] pl-6 pt-1\">\n                <div className=\"rounded-2xl bg-background/75 p-2 shadow-lg ring-1 ring-border shadow-black/[0.065]\">\n                  {/* header */}\n                  <div className=\"flex items-center gap-2 px-4 py-3\">\n                    <div className=\"h-3 w-20 rounded-full bg-foreground/10\" />\n                    <div className=\"ml-auto h-5 w-14 rounded-full bg-primary/10\" />\n                  </div>\n                  {/* body */}\n                  <div className=\"rounded-xl bg-card p-4 ring-1 ring-border\">\n                    {/* progress bar */}\n                    <div className=\"space-y-3\">\n                      <div className=\"h-2.5 w-16 rounded bg-muted-foreground/10\" />\n                      <div className=\"relative h-3 overflow-hidden rounded-full bg-muted\">\n                        <div className=\"absolute inset-y-0 left-0 w-[30%] rounded-full bg-primary/30\" />\n                        <div className=\"absolute inset-y-0 left-[30%] w-[45%] rounded-full bg-primary/60\" />\n                      </div>\n                    </div>\n                    {/* skeleton rows */}\n                    <div className=\"mt-4 space-y-3\">\n                      <div className=\"h-2.5 w-24 rounded bg-muted-foreground/10\" />\n                      <div className=\"space-y-1.5\">\n                        <div className=\"flex items-center gap-2 rounded-lg bg-purple-500/10 p-2 ring-1 ring-purple-500/20\">\n                          <div className=\"size-3.5 shrink-0 rounded bg-purple-500/30\" />\n                          <div className=\"h-2 flex-1 rounded bg-purple-500/15\" />\n                          <div className=\"h-2 w-5 rounded bg-muted-foreground/10\" />\n                        </div>\n                        <div className=\"flex items-center gap-2 rounded-lg bg-blue-500/10 p-2 ring-1 ring-blue-500/20\">\n                          <div className=\"size-3.5 shrink-0 rounded bg-blue-500/30\" />\n                          <div className=\"h-2 w-3/4 rounded bg-blue-500/15\" />\n                          <div className=\"h-2 w-5 rounded bg-muted-foreground/10\" />\n                        </div>\n                        <div className=\"flex items-center gap-2 rounded-lg bg-cyan-500/10 p-2 ring-1 ring-cyan-500/20\">\n                          <div className=\"size-3.5 shrink-0 rounded bg-cyan-500/30\" />\n                          <div className=\"h-2 w-4/5 rounded bg-cyan-500/15\" />\n                          <div className=\"h-2 w-5 rounded bg-muted-foreground/10\" />\n                        </div>\n                      </div>\n                    </div>\n                    {/* footer */}\n                    <div className=\"mt-3 flex items-center justify-between\">\n                      <div className=\"h-2 w-28 rounded bg-muted-foreground/10\" />\n                      <div className=\"h-2 w-8 rounded bg-primary/20\" />\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              {/* ── Card 2 (front) — metrics skeleton, overlapping ── */}\n              <div className=\"relative z-[2] -mt-16 ml-2 mr-6\">\n                <div className=\"rounded-2xl bg-background/75 p-2 shadow-lg ring-1 ring-border shadow-black/[0.065]\">\n                  {/* header */}\n                  <div className=\"flex items-center gap-2 px-4 py-3\">\n                    <div className=\"h-3 w-16 rounded-full bg-foreground/10\" />\n                    <div className=\"ml-auto size-2 rounded-full bg-emerald-500\" />\n                    <div className=\"h-2.5 w-10 rounded bg-muted-foreground/10\" />\n                  </div>\n                  {/* body */}\n                  <div className=\"rounded-xl bg-card p-4 ring-1 ring-border\">\n                    {/* metric columns */}\n                    <div className=\"grid grid-cols-3 gap-3\">\n                      <div className=\"space-y-1.5\">\n                        <div className=\"h-5 w-10 rounded bg-foreground/8\" />\n                        <div className=\"h-2 w-full rounded bg-muted-foreground/10\" />\n                      </div>\n                      <div className=\"space-y-1.5\">\n                        <div className=\"h-5 w-12 rounded bg-foreground/8\" />\n                        <div className=\"h-2 w-4/5 rounded bg-muted-foreground/10\" />\n                      </div>\n                      <div className=\"space-y-1.5\">\n                        <div className=\"h-5 w-8 rounded bg-foreground/8\" />\n                        <div className=\"h-2 w-3/4 rounded bg-muted-foreground/10\" />\n                      </div>\n                    </div>\n                    {/* divider */}\n                    <div className=\"my-3 h-px bg-border\" />\n                    {/* list items */}\n                    <div className=\"space-y-2\">\n                      <div className=\"flex items-center gap-2.5\">\n                        <div className=\"size-6 shrink-0 rounded-md bg-muted ring-1 ring-border\" />\n                        <div className=\"flex-1 space-y-1\">\n                          <div className=\"h-2 w-3/5 rounded bg-foreground/8\" />\n                          <div className=\"h-1.5 w-2/5 rounded bg-muted-foreground/8\" />\n                        </div>\n                        <div className=\"h-2 w-6 rounded bg-muted-foreground/10\" />\n                      </div>\n                      <div className=\"flex items-center gap-2.5\">\n                        <div className=\"size-6 shrink-0 rounded-md bg-muted ring-1 ring-border\" />\n                        <div className=\"flex-1 space-y-1\">\n                          <div className=\"h-2 w-2/5 rounded bg-foreground/8\" />\n                          <div className=\"h-1.5 w-1/3 rounded bg-muted-foreground/8\" />\n                        </div>\n                        <div className=\"h-2 w-6 rounded bg-muted-foreground/10\" />\n                      </div>\n                      <div className=\"flex items-center gap-2.5\">\n                        <div className=\"size-6 shrink-0 rounded-md bg-muted ring-1 ring-border\" />\n                        <div className=\"flex-1 space-y-1\">\n                          <div className=\"h-2 w-1/2 rounded bg-foreground/8\" />\n                          <div className=\"h-1.5 w-1/4 rounded bg-muted-foreground/8\" />\n                        </div>\n                        <div className=\"h-2 w-6 rounded bg-muted-foreground/10\" />\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* ── trusted-by logo strip ──────────────────── */}\n      {trustedBy && trustedBy.logos.length > 0 && (\n        <div className=\"mx-auto max-w-5xl px-6 pb-16 pt-16 md:pt-20\">\n          <div className=\"mx-auto grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 text-foreground/60 [&_svg]:fill-foreground/60\">\n            {trustedBy.logos.map((logo, idx) => (\n              <div key={idx} className=\"flex items-center justify-center\">\n                {logo}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/split-hero-section.tsx"
    }
  ]
}