{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-card",
  "title": "Feature Card",
  "description": "The flexible marketing card — default, dashed-outline and self-flipping on-brand variants, with an optional hover-lift link affordance.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/feature-card.tsx",
      "content": "import * as React from \"react\"\nimport { ArrowUpRight } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * FeatureCard — the flexible marketing card behind product grids, pillar links\n * and pain/gain lists. Three variants:\n *   - `default` — a bordered light card,\n *   - `outline-dashed` — a dashed, muted card for \"the problem\" framing,\n *   - `on-brand` — a self-flipping navy card (`bg-brand-section`) that reads\n *     correctly in both light and dark.\n *\n * Passing `href` turns the whole card into a hover-lift link with a nudging\n * arrow. The icon chip rotates on hover — the recurring Nexus affordance.\n */\n\ntype Variant = \"default\" | \"outline-dashed\" | \"on-brand\"\n\nconst variantStyles: Record<Variant, string> = {\n  default: \"border border-border-secondary bg-bg-primary\",\n  \"outline-dashed\": \"border border-dashed border-border-primary bg-bg-secondary\",\n  \"on-brand\": \"bg-bg-brand-section\",\n}\n\ninterface FeatureCardProps {\n  title: React.ReactNode\n  body?: React.ReactNode\n  eyebrow?: string\n  icon?: React.FC<{ className?: string }>\n  badge?: React.ReactNode\n  variant?: Variant\n  /** When set, the whole card becomes a hover-lift link with a nudging arrow. */\n  href?: string\n  external?: boolean\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction FeatureCard({\n  title,\n  body,\n  eyebrow,\n  icon: Icon,\n  badge,\n  variant = \"default\",\n  href,\n  external,\n  className,\n  children,\n}: FeatureCardProps) {\n  const onBrand = variant === \"on-brand\"\n  const interactive = Boolean(href)\n\n  const titleColor = onBrand ? \"text-text-primary_on-brand\" : \"text-text-primary\"\n  const bodyColor = onBrand ? \"text-text-tertiary_on-brand\" : \"text-text-tertiary\"\n  const eyebrowColor = onBrand\n    ? \"text-accent-300\"\n    : \"text-text-brand-secondary\"\n\n  const content = (\n    <>\n      <div className=\"flex items-start justify-between gap-4\">\n        {Icon ? (\n          <span\n            className={cn(\n              \"flex size-11 items-center justify-center rounded-xl transition duration-200 ease-linear\",\n              onBrand\n                ? \"bg-white/10 text-white\"\n                : \"bg-brand-600 text-white\",\n              interactive && \"group-hover/card:rotate-3\"\n            )}\n          >\n            <Icon className=\"size-5\" />\n          </span>\n        ) : null}\n        {badge}\n        {interactive ? (\n          <ArrowUpRight\n            className={cn(\n              \"size-5 shrink-0 transition duration-150 ease-linear\",\n              onBrand ? \"text-white/60\" : \"text-fg-quaternary\",\n              \"-translate-x-1 opacity-0 group-hover/card:translate-x-0 group-hover/card:opacity-100\"\n            )}\n            aria-hidden=\"true\"\n          />\n        ) : null}\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        {eyebrow ? (\n          <p\n            className={cn(\n              \"text-xs font-semibold tracking-wide uppercase\",\n              eyebrowColor\n            )}\n          >\n            {eyebrow}\n          </p>\n        ) : null}\n        <h3 className={cn(\"text-lg font-semibold\", titleColor)}>{title}</h3>\n        {body ? <p className={cn(\"text-md\", bodyColor)}>{body}</p> : null}\n        {children}\n      </div>\n    </>\n  )\n\n  const shared = cn(\n    \"group/card flex flex-col gap-6 rounded-2xl p-7 md:p-8\",\n    variantStyles[variant],\n    interactive &&\n      \"outline-none transition duration-200 ease-linear hover:-translate-y-1 hover:shadow-xl focus-visible:ring-4 focus-visible:ring-ring/25\",\n    interactive && !onBrand && \"hover:border-brand-200\",\n    className\n  )\n\n  if (href) {\n    return (\n      <a\n        data-slot=\"feature-card\"\n        href={href}\n        {...(external\n          ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n          : {})}\n        className={shared}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <div data-slot=\"feature-card\" className={shared}>\n      {content}\n    </div>\n  )\n}\n\nexport { FeatureCard }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/feature-card.tsx"
    }
  ],
  "type": "registry:block"
}