{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "benefits-13",
  "title": "Benefits 13 – Card grid with section header",
  "description": "A layout with a section header followed by a grid of equal-height cards. Each card includes an icon, title, and short text, arranged in a consistent grid that collapses responsively. Use when you need a structured, repeatable set of items with strong visual separation.",
  "registryDependencies": ["@shadcncraft/section-heading", "@shadcncraft/featured-icon"],
  "files": [
    {
      "path": "blocks/pro-marketing/benefits/benefits-13/index.tsx",
      "content": "import type { ReactNode } from \"react\";\n\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  FeatureStack,\n  FeatureStackContent,\n  FeatureStackDescription,\n  FeatureStackHeader,\n  FeatureStackTitle,\n} from \"@/components/shadcncraft/pro-marketing/feature-stack\";\nimport { FeaturedIcon } from \"@/components/shadcncraft/pro-marketing/featured-icon\";\nimport {\n  SectionHeading,\n  SectionHeadingBody,\n  SectionHeadingTagline,\n  SectionHeadingTitle,\n} from \"@/components/shadcncraft/pro-marketing/section-heading\";\n\nexport function Benefits13() {\n  return (\n    <section className=\"py-6 lg:py-20\">\n      <div className=\"mx-auto flex max-w-7xl flex-col gap-12 px-5 lg:gap-16 lg:px-8\">\n        {/* Section Heading */}\n        <SectionHeading alignment=\"center\" size=\"lg\" className=\"mx-auto w-full max-w-3xl\">\n          <SectionHeadingTagline>Benefits</SectionHeadingTagline>\n          <SectionHeadingTitle>Why Choose Acme Inc.</SectionHeadingTitle>\n          <SectionHeadingBody>\n            Discover the key advantages that make Acme Inc. the right choice for your\n            team.\n          </SectionHeadingBody>\n        </SectionHeading>\n\n        {/* Benefits Grid */}\n        <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-9\">\n          {benefitsData.map((benefit) => (\n            <Card key={benefit.title}>\n              <CardContent>\n                <FeatureStack alignment=\"left\" size=\"sm\">\n                  <FeaturedIcon size=\"md\">{benefit.icon}</FeaturedIcon>\n\n                  <FeatureStackHeader>\n                    <FeatureStackTitle>{benefit.title}</FeatureStackTitle>\n                    <FeatureStackDescription>\n                      {benefit.description}\n                    </FeatureStackDescription>\n                  </FeatureStackHeader>\n\n                  <FeatureStackContent>\n                    <a\n                      href=\"#\"\n                      className=\"text-sm font-medium text-primary hover:underline\"\n                    >\n                      Learn more\n                    </a>\n                  </FeatureStackContent>\n                </FeatureStack>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nconst benefitsData: { icon: ReactNode; title: string; description: string }[] = [\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"ArrowBigUpDash\"\n        tabler=\"IconArrowBigUpLine\"\n        hugeicons=\"ArrowUp03Icon\"\n        phosphor=\"ArrowFatLinesUpIcon\"\n        remixicon=\"RiArrowUpWideLine\"\n      />\n    ),\n    title: \"Intelligent Prioritization\",\n    description:\n      \"Know exactly what to work on next with AI that understands your goals and context. Prioritize smarter with Acme Inc.\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"IterationCcw\"\n        tabler=\"IconRepeat\"\n        hugeicons=\"RepeatIcon\"\n        phosphor=\"ArrowsCounterClockwiseIcon\"\n        remixicon=\"RiLoopLeftLine\"\n      />\n    ),\n    title: \"Effortless Integration\",\n    description:\n      \"Acme Inc. connects seamlessly with the tools your team already uses, so there's no steep learning curve or disruption.\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"Database\"\n        tabler=\"IconDatabase\"\n        hugeicons=\"DatabaseIcon\"\n        phosphor=\"DatabaseIcon\"\n        remixicon=\"RiDatabaseLine\"\n      />\n    ),\n    title: \"Clear Decision Support\",\n    description:\n      \"When projects stall, it's rarely because of lack of effort, it's lack of clarity. Acme Inc. provides AI-driven insights.\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"ChartSpline\"\n        tabler=\"IconVectorSpline\"\n        hugeicons=\"ChartLineData02Icon\"\n        phosphor=\"ChartLineIcon\"\n        remixicon=\"RiLineChartLine\"\n      />\n    ),\n    title: \"Smarter Analytics\",\n    description:\n      \"Turn data into clarity with AI-powered insights that help you act faster and more confidently.\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"Workflow\"\n        tabler=\"IconGitBranch\"\n        hugeicons=\"WorkflowCircle01Icon\"\n        phosphor=\"FlowArrowIcon\"\n        remixicon=\"RiGitBranchLine\"\n      />\n    ),\n    title: \"Seamless Workflow\",\n    description:\n      \"Stay in the zone without constant context switching across apps and tools.\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsers\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersIcon\"\n        remixicon=\"RiGroupLine\"\n      />\n    ),\n    title: \"Team Alignment\",\n    description:\n      \"Keep everyone on the same page with a single source of truth for projects and decisions.\",\n  },\n];\n",
      "type": "registry:component",
      "target": "@components/shadcncraft/pro-marketing/benefits/benefits-13/index.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "17859-91861",
    "bundle": "pro-marketing"
  },
  "categories": ["benefits"],
  "type": "registry:block"
}