{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabbed-hero-section",
  "type": "registry:ui",
  "title": "Tabbed Hero Section",
  "description": "A SaaS hero section with left-aligned headline, tabbed navigation, app screenshot showcase, and trusted-by logo strip.",
  "files": [
    {
      "path": "registry/ruixenui/tabbed-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 Tab {\n  icon?: React.ReactNode;\n  label: string;\n}\n\ninterface TrustedBySection {\n  description?: React.ReactNode;\n  logos: React.ReactNode[];\n}\n\nexport interface TabbedHeroSectionProps {\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  /** Tab buttons shown above the showcase */\n  tabs?: Tab[];\n  /** Index of the active tab (0-based) */\n  activeTab?: number;\n  /** Background gradient image for light mode */\n  backgroundSrcLight?: string;\n  /** Background gradient image for dark mode */\n  backgroundSrcDark?: string;\n  /** Trusted-by / logo strip section */\n  trustedBy?: TrustedBySection;\n  className?: string;\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\nexport function TabbedHeroSection({\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  tabs,\n  activeTab = 0,\n  backgroundSrcLight,\n  backgroundSrcDark,\n  trustedBy,\n  className,\n}: TabbedHeroSectionProps) {\n  const [currentTab, setCurrentTab] = React.useState(activeTab);\n\n  return (\n    <section\n      className={cn(\"relative w-full bg-background\", className)}\n      aria-label=\"Hero\"\n    >\n      {/* ── background gradient images ──────────────────── */}\n      {(backgroundSrcLight || backgroundSrcDark) && (\n        <div\n          className=\"absolute inset-0\"\n          style={{\n            maskImage:\n              \"linear-gradient(to bottom, transparent, black 35%, black 55%, transparent 75%)\",\n            WebkitMaskImage:\n              \"linear-gradient(to bottom, transparent, black 35%, black 55%, transparent 75%)\",\n          }}\n        >\n          {backgroundSrcDark && (\n            <img\n              alt=\"\"\n              loading=\"lazy\"\n              className=\"hidden size-full object-cover object-bottom dark:block\"\n              src={backgroundSrcDark}\n            />\n          )}\n          {backgroundSrcLight && (\n            <img\n              alt=\"\"\n              loading=\"lazy\"\n              className=\"size-full object-cover object-bottom dark:hidden\"\n              src={backgroundSrcLight}\n            />\n          )}\n        </div>\n      )}\n\n      <div className=\"pb-20 pt-24 md:pt-32 lg:pt-40\">\n        {/* ── heading + description + CTAs ────────────────── */}\n        <div className=\"relative z-10 mx-auto grid max-w-5xl items-end gap-4 px-6\">\n          <h1 className=\"text-balance text-4xl font-semibold sm:text-5xl md:max-w-4xl lg:text-6xl\">\n            {title}\n          </h1>\n\n          {(description || primaryAction || secondaryAction) && (\n            <div className=\"max-w-lg\">\n              {description && (\n                <p className=\"mb-6 text-balance text-lg text-muted-foreground lg:text-xl\">\n                  {description}\n                </p>\n              )}\n\n              {(primaryAction || secondaryAction) && (\n                <div className=\"flex flex-wrap gap-3\">\n                  {primaryAction && (\n                    <Link\n                      href={primaryAction.href}\n                      className=\"inline-flex h-9 items-center justify-center rounded-md border-[0.5px] border-white/10 bg-primary px-4 py-2 text-sm 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-9 items-center justify-center rounded-md border border-transparent bg-card px-4 py-2 text-sm 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        </div>\n\n        {/* ── tabbed showcase ────────────────────────────── */}\n        {tabs && tabs.length > 0 && (\n          <div className=\"relative z-10 mx-auto max-w-5xl px-6 pt-12 lg:pt-20\">\n            <div\n              className=\"grid divide-x divide-foreground/10 border border-foreground/10\"\n              style={{\n                gridTemplateColumns: `repeat(${tabs.length}, 1fr)`,\n              }}\n            >\n              {tabs.map((tab, idx) => (\n                <button\n                  key={idx}\n                  onClick={() => setCurrentTab(idx)}\n                  className={cn(\n                    \"flex h-12 cursor-pointer items-center justify-center gap-2 px-3 text-sm transition-colors duration-150 [&>svg]:size-4\",\n                    idx === currentTab\n                      ? \"bg-muted text-foreground\"\n                      : \"text-muted-foreground hover:bg-foreground/5 hover:text-foreground\",\n                  )}\n                >\n                  {tab.icon}\n                  <span className=\"hidden sm:inline\">{tab.label}</span>\n                </button>\n              ))}\n            </div>\n            <div className=\"aspect-[16/9] border-x border-b border-foreground/10 bg-muted sm:aspect-[2/1]\" />\n          </div>\n        )}\n      </div>\n\n      {/* ── trusted-by section ──────────────────────────── */}\n      {trustedBy && (\n        <div className=\"pb-16\">\n          <div className=\"mx-auto max-w-5xl px-6\">\n            {trustedBy.description && (\n              <div className=\"mx-auto mb-12 max-w-xl text-balance text-center md:mb-16\">\n                <div className=\"text-lg text-muted-foreground\">\n                  {trustedBy.description}\n                </div>\n              </div>\n            )}\n            <div className=\"mx-auto grid max-w-5xl grid-cols-3 items-center gap-8 text-foreground/60 md:grid-cols-5 [&_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        </div>\n      )}\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/tabbed-hero-section.tsx"
    }
  ]
}