{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-row",
  "title": "Feature Row",
  "description": "An alternating image/copy feature row with an optional icon, eyebrow and checklist.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/feature-row.tsx",
      "content": "import * as React from \"react\"\nimport { Check } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * FeatureRow — an alternating image/copy row. Copy (icon chip, eyebrow, title,\n * body, optional checklist) sits on one side; a media `panel` (or a default\n * gradient placeholder) on the other. Set `imageSide` to alternate rows down a\n * page.\n */\n\ninterface FeatureRowProps {\n  eyebrow?: string\n  title: React.ReactNode\n  body: React.ReactNode\n  bullets?: string[]\n  icon?: React.FC<{ className?: string }>\n  /** Which side the media panel sits on. Alternate down the page. */\n  imageSide?: \"left\" | \"right\"\n  /** The media column — a mockup, image or illustration. */\n  panel?: React.ReactNode\n  className?: string\n}\n\nfunction FeatureRow({\n  eyebrow,\n  title,\n  body,\n  bullets,\n  icon: Icon,\n  imageSide = \"right\",\n  panel,\n  className,\n}: FeatureRowProps) {\n  return (\n    <div\n      data-slot=\"feature-row\"\n      className={cn(\n        \"grid items-center gap-10 md:gap-16 lg:grid-cols-2\",\n        imageSide === \"left\" && \"lg:[&>:first-child]:order-2\",\n        className\n      )}\n    >\n      <div className=\"flex flex-col gap-5\">\n        {Icon ? (\n          <span className=\"flex size-11 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100\">\n            <Icon className=\"size-5\" />\n          </span>\n        ) : null}\n        {eyebrow ? (\n          <p className=\"text-sm font-semibold tracking-wide text-text-brand-secondary uppercase\">\n            {eyebrow}\n          </p>\n        ) : null}\n        <h2 className=\"text-display-xs font-semibold tracking-tight text-text-primary md:text-display-sm\">\n          {title}\n        </h2>\n        <p className=\"text-lg text-text-tertiary\">{body}</p>\n        {bullets ? (\n          <ul className=\"flex flex-col gap-3 pt-2\">\n            {bullets.map((bullet) => (\n              <li\n                key={bullet}\n                className=\"flex items-start gap-3 text-md text-text-secondary\"\n              >\n                <span className=\"mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-brand-600 text-white\">\n                  <Check className=\"size-3.5\" strokeWidth={3} />\n                </span>\n                {bullet}\n              </li>\n            ))}\n          </ul>\n        ) : null}\n      </div>\n      {panel ?? (\n        <div\n          className=\"aspect-[5/4] overflow-hidden rounded-3xl bg-brand-25 ring-1 ring-brand-100\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"size-full\"\n            style={{\n              backgroundImage:\n                \"radial-gradient(circle at 30% 20%, rgb(247 236 51 / 0.35), transparent 40%), radial-gradient(circle at 70% 80%, rgb(18 21 65 / 0.25), transparent 50%)\",\n            }}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { FeatureRow }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/feature-row.tsx"
    }
  ],
  "type": "registry:block"
}