{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "structured-hero-section",
  "type": "registry:ui",
  "title": "Structured Hero Section",
  "description": "A clean hero section with announcement pill, overlapping showcase cards, trusted-by logo strip, and dual CTAs.",
  "files": [
    {
      "path": "registry/ruixenui/structured-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 ShowcaseCard {\n  label?: string;\n  imageSrcLight?: string;\n  imageSrcDark?: string;\n}\n\ninterface TrustedBySection {\n  heading?: string;\n  action?: Action;\n  logos: React.ReactNode[];\n}\n\nexport interface StructuredHeroSectionProps {\n  /** Text shown inside the announcement pill */\n  announcement?: string;\n  /** Optional link rendered beside the announcement */\n  announcementAction?: Action;\n  /** Main headline */\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  /** Showcase cards (up to 3) — simple gray placeholders */\n  cards?: ShowcaseCard[];\n  /** Trusted-by logo strip */\n  trustedBy?: TrustedBySection;\n  className?: string;\n}\n\n/* ── component ───────────────────────────────────────────────── */\n\nconst cardPositions = [\n  \"left-0 z-[1]\",\n  \"left-1/2 -translate-x-1/2 z-[2]\",\n  \"right-0 z-[3]\",\n] as const;\n\nexport function StructuredHeroSection({\n  announcement = \"New release available\",\n  announcementAction,\n  title,\n  description,\n  primaryAction,\n  secondaryAction,\n  cards,\n  trustedBy,\n  className,\n}: StructuredHeroSectionProps) {\n  return (\n    <section\n      className={cn(\"relative w-full bg-background\", className)}\n      aria-label=\"Hero\"\n    >\n      <div className=\"pt-20 md:pt-28\">\n        <div className=\"relative z-10 mx-auto max-w-6xl\">\n          {/* ── announcement pill ────────────────────────────── */}\n          <div className=\"flex justify-center\">\n            <div className=\"flex items-center gap-2 rounded-full bg-card/75 px-3 py-1 shadow ring-1 ring-foreground/10\">\n              <span className=\"text-sm text-foreground\">{announcement}</span>\n              {announcementAction && (\n                <>\n                  <span className=\"block h-3 w-px bg-foreground/10\" />\n                  <Link\n                    href={announcementAction.href}\n                    className=\"text-sm text-primary\"\n                  >\n                    {announcementAction.label}\n                  </Link>\n                </>\n              )}\n            </div>\n          </div>\n\n          {/* ── heading + description + CTAs ────────────────── */}\n          <div className=\"mt-6 px-6 text-center *:mx-auto md:mt-10 lg:px-12\">\n            <h1 className=\"mb-4 max-w-4xl text-balance text-5xl font-medium lg:text-7xl lg:tracking-tight\">\n              {title}\n            </h1>\n\n            {(description || primaryAction || secondaryAction) && (\n              <div className=\"max-w-2xl\">\n                {description && (\n                  <p className=\"mb-8 text-balance text-lg text-muted-foreground\">\n                    {description}\n                  </p>\n                )}\n\n                {(primaryAction || secondaryAction) && (\n                  <div className=\"flex flex-wrap justify-center 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        </div>\n\n        {/* ── overlapping showcase cards ──────────────────── */}\n        {cards && cards.length > 0 && (\n          <div className=\"relative mx-auto mt-16 max-w-5xl md:mt-24\">\n            <div className=\"relative h-[360px] sm:h-[440px] md:h-[500px] lg:h-[560px] overflow-hidden\">\n              {cards.slice(0, 3).map((card, idx) => (\n                <div\n                  key={idx}\n                  className={cn(\n                    \"absolute top-0 w-[75%] sm:w-[55%] md:w-[45%]\",\n                    cardPositions[idx],\n                  )}\n                >\n                  <div className=\"overflow-hidden rounded-xl bg-muted shadow-2xl shadow-black/15 ring-1 ring-foreground/[0.06]\">\n                    <div className=\"aspect-[3/4]\">\n                      {card.imageSrcLight || card.imageSrcDark ? (\n                        <div className=\"relative size-full overflow-hidden\">\n                          {card.imageSrcDark && (\n                            <img\n                              alt={card.label || \"\"}\n                              loading=\"lazy\"\n                              className=\"hidden size-full object-cover object-left-top dark:block\"\n                              src={card.imageSrcDark}\n                            />\n                          )}\n                          {card.imageSrcLight && (\n                            <img\n                              alt={card.label || \"\"}\n                              loading=\"lazy\"\n                              className=\"size-full object-cover object-left-top dark:hidden\"\n                              src={card.imageSrcLight}\n                            />\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                  </div>\n                  {card.label && (\n                    <p className=\"mt-2 text-center text-xs text-muted-foreground\">\n                      {card.label}\n                    </p>\n                  )}\n                </div>\n              ))}\n\n              {/* ── fade overlays ── */}\n              <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-10 h-full bg-gradient-to-t from-background from-15% to-transparent\" />\n              <div className=\"pointer-events-none absolute inset-y-0 right-0 z-10 w-1/3 bg-gradient-to-l from-background from-5% to-transparent\" />\n            </div>\n          </div>\n        )}\n\n        {/* ── trusted-by logo strip ──────────────────────── */}\n        {trustedBy && (\n          <div className=\"relative py-6 md:py-10\">\n            <div className=\"mx-auto max-w-6xl px-6 lg:px-12\">\n              <div className=\"grid items-center gap-12 lg:grid-cols-[auto_1fr] lg:gap-6\">\n                <div className=\"space-y-4 max-lg:text-center\">\n                  <p className=\"w-fit max-w-sm text-balance text-xl text-foreground max-lg:mx-auto\">\n                    {trustedBy.heading ||\n                      \"Trusted by fast-growing companies around the world\"}\n                  </p>\n                  {trustedBy.action && (\n                    <Link\n                      href={trustedBy.action.href}\n                      className=\"text-sm text-primary underline\"\n                    >\n                      {trustedBy.action.label}\n                    </Link>\n                  )}\n                </div>\n                <div className=\"grid grid-cols-3 items-center gap-y-12 text-foreground/60 sm:grid-cols-4 [&_svg]:fill-foreground/60\">\n                  {trustedBy.logos.map((logo, idx) => (\n                    <div\n                      key={idx}\n                      className=\"flex items-center justify-center px-2\"\n                    >\n                      {logo}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/structured-hero-section.tsx"
    }
  ]
}