{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card-hero",
  "type": "registry:ui",
  "title": "Product Card Hero",
  "description": "Two-column hero with floating account menu card, pricing bar, and a four-column feature grid with icons.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/product-card-hero.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  ChevronRight,\n  Plus,\n  Settings2,\n  CircleHelp,\n  MessageCircle,\n  User,\n  Settings,\n  LogOut,\n} from \"lucide-react\";\n\nconst S = { type: \"spring\" as const, stiffness: 300, damping: 28 };\nconst S_SOFT = { type: \"spring\" as const, stiffness: 260, damping: 24 };\n\nexport interface ProductCardHeroProps {\n  title?: string;\n  description?: string;\n  ctaText?: string;\n  ctaHref?: string;\n  features?: {\n    title: string;\n    description: string;\n  }[];\n  className?: string;\n}\n\nconst TICKER_ROW_1 = [\n  { name: \"Oxymor NS\", price: \"$39\" },\n  { name: \"Vertex AI\", price: \"$59\" },\n  { name: \"Nova Pro\", price: \"$29\" },\n  { name: \"Lumina\", price: \"$49\" },\n  { name: \"Prism X\", price: \"$19\" },\n  { name: \"Helix ML\", price: \"$35\" },\n];\n\nconst TICKER_ROW_2 = [\n  { name: \"Arc Studio\", price: \"$45\" },\n  { name: \"Cipher\", price: \"$25\" },\n  { name: \"Nebula\", price: \"$55\" },\n  { name: \"Flux API\", price: \"$15\" },\n  { name: \"Zenith\", price: \"$42\" },\n  { name: \"Pulse\", price: \"$33\" },\n];\n\nfunction TickerRow({\n  items,\n  duration = 40,\n  reverse = false,\n}: {\n  items: { name: string; price: string }[];\n  duration?: number;\n  reverse?: boolean;\n}) {\n  const doubled = [...items, ...items];\n  return (\n    <div className=\"flex overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]\">\n      <motion.div\n        initial={{ x: reverse ? \"-50%\" : \"0%\" }}\n        animate={{ x: reverse ? \"0%\" : \"-50%\" }}\n        transition={{\n          repeat: Infinity,\n          repeatType: \"loop\",\n          duration,\n          ease: \"linear\",\n        }}\n        className=\"flex shrink-0\"\n      >\n        {doubled.map((item, i) => (\n          <div\n            key={i}\n            className=\"flex shrink-0 items-center gap-1.5 px-4 py-0.5\"\n          >\n            <span className=\"whitespace-nowrap text-[11px] text-foreground/20\">\n              {item.name}\n            </span>\n            <span className=\"whitespace-nowrap text-[11px] font-medium text-foreground/30\">\n              {item.price}\n            </span>\n          </div>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n\nconst ACCOUNTS = [\n  { name: \"Méschac Irung\", initials: \"M\" },\n  { name: \"Bernard Ng\", initials: \"B\" },\n  { name: \"Theo Ng\", initials: \"T\" },\n  { name: \"Glodie Ng\", initials: \"G\" },\n];\n\nconst MENU_GROUPS = [\n  [{ icon: Plus, label: \"Add new account\" }],\n  [{ icon: Settings2, label: \"Preferences\" }],\n  [\n    { icon: CircleHelp, label: \"Help\" },\n    { icon: MessageCircle, label: \"Send feedback\" },\n  ],\n  [\n    { icon: User, label: \"My account\" },\n    { icon: Settings, label: \"Settings\" },\n  ],\n  [{ icon: LogOut, label: \"Sign out\" }],\n];\n\nconst DEFAULT_FEATURES = [\n  {\n    title: \"Instant deploys\",\n    description: \"Sub-second builds. Zero-downtime rollouts. Push and forget.\",\n  },\n  {\n    title: \"Edge-first\",\n    description: \"Compute runs where your users are. 50ms or less, globally.\",\n  },\n  {\n    title: \"Private by design\",\n    description: \"E2E encrypted. SOC 2 compliant. Your code never leaves.\",\n  },\n  {\n    title: \"Aware, not intrusive\",\n    description: \"Reads your full codebase. Suggests only when it matters.\",\n  },\n];\n\nexport function ProductCardHero({\n  title = \"Ship faster\\nwith less friction\",\n  description = \"A development platform that removes the gap between writing code and running it. Build, preview, and deploy from one place.\",\n  ctaText = \"Get started\",\n  ctaHref = \"#\",\n  features = DEFAULT_FEATURES,\n  className,\n}: ProductCardHeroProps) {\n  return (\n    <section className={cn(\"py-10\", className)}>\n      <div className=\"mx-auto w-full max-w-5xl px-6\">\n        <div className=\"grid items-center gap-6 pb-14 md:grid-cols-2\">\n          {/* ── Left: Visual ───────────────────────────────── */}\n          <motion.div\n            initial={{ opacity: 0, y: 16 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...S_SOFT, delay: 0.08 }}\n            className=\"relative flex items-center justify-center overflow-hidden py-6\"\n          >\n            {/* Ticker rows behind the card */}\n            <div className=\"absolute inset-0 flex flex-col justify-center gap-2.5\">\n              <TickerRow items={TICKER_ROW_1} duration={38} />\n              <TickerRow items={TICKER_ROW_2} duration={44} reverse />\n            </div>\n\n            {/* Account card */}\n            <div className=\"relative z-10 [mask-image:linear-gradient(to_bottom,black_55%,transparent_100%)]\">\n              <div className=\"w-60 overflow-hidden rounded-xl bg-card p-1.5 shadow-lg shadow-black/[0.04] ring-1 ring-foreground/[0.06] dark:shadow-black/20 dark:ring-foreground/[0.08]\">\n                {ACCOUNTS.map((account) => (\n                  <div\n                    key={account.name}\n                    className=\"flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-1 transition-colors duration-150 hover:bg-foreground/[0.03]\"\n                  >\n                    <div className=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-foreground/[0.07] text-[9px] font-medium text-foreground/50\">\n                      {account.initials}\n                    </div>\n                    <span className=\"text-[13px] text-foreground/80\">\n                      {account.name}\n                    </span>\n                  </div>\n                ))}\n\n                {MENU_GROUPS.map((group, gi) => (\n                  <React.Fragment key={gi}>\n                    <div className=\"mx-2.5 my-1 h-px bg-foreground/[0.06]\" />\n                    {group.map((item) => (\n                      <div\n                        key={item.label}\n                        className=\"flex h-7 cursor-default items-center gap-2.5 rounded-lg px-2.5 transition-colors duration-150 hover:bg-foreground/[0.03]\"\n                      >\n                        <item.icon\n                          className=\"size-3.5 text-foreground/25\"\n                          strokeWidth={1.5}\n                        />\n                        <span className=\"text-[13px] text-foreground/55\">\n                          {item.label}\n                        </span>\n                      </div>\n                    ))}\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n          </motion.div>\n\n          {/* ── Right: Text ────────────────────────────────── */}\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...S, delay: 0 }}\n          >\n            <div className=\"max-w-md\">\n              <h2 className=\"whitespace-pre-line text-balance text-4xl font-semibold text-foreground\">\n                {title}\n              </h2>\n              <p className=\"mt-6 text-balance text-lg text-muted-foreground\">\n                {description}\n              </p>\n              <a\n                href={ctaHref}\n                className=\"mt-8 inline-flex h-9 items-center justify-center gap-2 rounded-md border border-transparent bg-card px-4 py-2 pr-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                {ctaText}\n                <ChevronRight className=\"size-4 opacity-50\" />\n              </a>\n            </div>\n          </motion.div>\n        </div>\n\n        {/* ── Features ──────────────────────────────────── */}\n        <div className=\"grid grid-cols-2 gap-x-6 gap-y-8 border-t border-foreground/[0.06] pt-10 lg:grid-cols-4 lg:gap-x-10\">\n          {features.map((feature, i) => (\n            <motion.div\n              key={i}\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...S, delay: 0.2 + i * 0.08 }}\n            >\n              <span className=\"text-[11px] tabular-nums text-foreground/25\">\n                {String(i + 1).padStart(2, \"0\")}\n              </span>\n              <h3 className=\"mt-2 text-[15px] font-medium tracking-tight text-foreground\">\n                {feature.title}\n              </h3>\n              <p className=\"mt-1.5 text-[13px] leading-relaxed text-foreground/45\">\n                {feature.description}\n              </p>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/product-card-hero.tsx"
    }
  ]
}