{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-feature-hero",
  "type": "registry:ui",
  "title": "Product Feature Hero",
  "description": "Two-column hero with decorative gradient card and a four-column feature highlights grid.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/product-feature-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  Search,\n  FileText,\n  ArrowUpRight,\n  GitPullRequest,\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 ProductFeatureHeroProps {\n  title?: string;\n  description?: string;\n  secondaryText?: React.ReactNode;\n  ctaText?: string;\n  ctaHref?: string;\n  features?: {\n    title: string;\n    description: string;\n  }[];\n  className?: string;\n}\n\nconst COMMANDS = [\n  { label: \"Open command bar\", shortcut: \"⌘K\" },\n  { label: \"Quick open file\", shortcut: \"⌘P\" },\n];\n\nconst RECENT_FILES = [\"dashboard.tsx\", \"api/auth.ts\", \"lib/utils.ts\"];\n\nconst ACTIONS = [\n  { icon: ArrowUpRight, label: \"Deploy to production\" },\n  { icon: GitPullRequest, label: \"Create pull request\" },\n];\n\nconst DEFAULT_FEATURES = [\n  {\n    title: \"Instant\",\n    description: \"Sub-50ms completions, zero spinners.\",\n  },\n  {\n    title: \"Context-aware\",\n    description: \"Reads your full codebase, not just open files.\",\n  },\n  {\n    title: \"Private\",\n    description: \"Code stays on your machine. Always.\",\n  },\n  {\n    title: \"Extensible\",\n    description: \"Every language, every framework.\",\n  },\n];\n\nexport function ProductFeatureHero({\n  title = \"Built for how you think\",\n  description = \"An intelligent editor that understands your intent. Completions, refactors, and explanations surface exactly when you need them.\",\n  secondaryText,\n  ctaText = \"Get started\",\n  ctaHref = \"#\",\n  features = DEFAULT_FEATURES,\n  className,\n}: ProductFeatureHeroProps) {\n  return (\n    <section className={cn(\"\", className)}>\n      <div className=\"mx-auto w-full max-w-5xl p-6\">\n        <div className=\"grid items-center gap-12 pb-14 md:grid-cols-2\">\n          {/* ── Left ─────────────────────────────────────── */}\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=\"text-balance text-4xl font-semibold text-foreground\">\n                {title}\n              </h2>\n              <p className=\"my-6 text-balance text-lg\">{description}</p>\n              {secondaryText ?? (\n                <p className=\"text-muted-foreground\">\n                  We obsessed over every interaction to make it feel invisible.{\" \"}\n                  <span className=\"font-medium text-foreground\">\n                    No config, no context switching.\n                  </span>{\" \"}\n                  Just write.\n                </p>\n              )}\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\n          {/* ── Right ────────────────────────────────────── */}\n          <motion.div\n            initial={{ opacity: 0, y: 16 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...S_SOFT, delay: 0.12 }}\n            className=\"relative flex items-start justify-center overflow-hidden rounded-2xl border border-border bg-muted/30 px-8 pt-10 dark:bg-muted/20\"\n          >\n            <div className=\"mask-b-from-75%\">\n              <div className=\"w-[18rem] rounded-xl bg-card p-1.5 shadow-lg border shadow-black/[0.06] ring-1 ring-border/50 dark:shadow-black/20\">\n                {/* Search */}\n                <div className=\"flex items-center gap-2.5 rounded-lg bg-muted/50 px-3 py-2\">\n                  <Search\n                    className=\"size-3.5 text-foreground/30\"\n                    strokeWidth={1.5}\n                  />\n                  <span className=\"text-[13px] text-foreground/30\">\n                    Search...\n                  </span>\n                </div>\n\n                <div className=\"mt-1.5\">\n                  {/* Suggestions */}\n                  <div className=\"px-3 pb-1 pt-2\">\n                    <span className=\"text-[10px] font-medium uppercase tracking-widest text-foreground/25\">\n                      Suggestions\n                    </span>\n                  </div>\n                  {COMMANDS.map((cmd) => (\n                    <div\n                      key={cmd.label}\n                      className=\"flex cursor-default items-center justify-between rounded-lg px-3 py-1.5 transition-colors duration-150 hover:bg-muted/60\"\n                    >\n                      <span className=\"text-[13px] tracking-tight text-foreground\">\n                        {cmd.label}\n                      </span>\n                      <kbd className=\"rounded bg-muted/80 px-1.5 py-0.5 font-mono text-[10px] text-foreground/35\">\n                        {cmd.shortcut}\n                      </kbd>\n                    </div>\n                  ))}\n\n                  <div className=\"mx-3 my-1.5 h-px bg-border/50\" />\n\n                  {/* Recent */}\n                  <div className=\"px-3 pb-1 pt-1\">\n                    <span className=\"text-[10px] font-medium uppercase tracking-widest text-foreground/25\">\n                      Recent\n                    </span>\n                  </div>\n                  {RECENT_FILES.map((file) => (\n                    <div\n                      key={file}\n                      className=\"flex cursor-default items-center gap-2.5 rounded-lg px-3 py-1.5 transition-colors duration-150 hover:bg-muted/60\"\n                    >\n                      <FileText\n                        className=\"size-3.5 text-foreground/20\"\n                        strokeWidth={1.5}\n                      />\n                      <span className=\"font-mono text-[12px] text-foreground/60\">\n                        {file}\n                      </span>\n                    </div>\n                  ))}\n\n                  <div className=\"mx-3 my-1.5 h-px bg-border/50\" />\n\n                  {/* Actions */}\n                  <div className=\"px-3 pb-1 pt-1\">\n                    <span className=\"text-[10px] font-medium uppercase tracking-widest text-foreground/25\">\n                      Actions\n                    </span>\n                  </div>\n                  {ACTIONS.map((action) => (\n                    <div\n                      key={action.label}\n                      className=\"flex cursor-default items-center gap-2.5 rounded-lg px-3 py-1.5 transition-colors duration-150 hover:bg-muted/60\"\n                    >\n                      <action.icon\n                        className=\"size-3.5 text-foreground/20\"\n                        strokeWidth={1.5}\n                      />\n                      <span className=\"text-[13px] tracking-tight text-foreground\">\n                        {action.label}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          </motion.div>\n        </div>\n\n        {/* ── Features ──────────────────────────────────── */}\n        <div className=\"grid grid-cols-2 gap-6 border-t border-border/40 pt-8 lg:grid-cols-4 lg:gap-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              className=\"space-y-1\"\n            >\n              <p className=\"text-sm font-medium text-foreground\">\n                {feature.title}\n              </p>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\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-feature-hero.tsx"
    }
  ]
}