{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-section",
  "title": "Feature section",
  "description": "A marketing section with an editorial heading and a three-column feature grid.",
  "registryDependencies": [
    "https://www.quilldesignsystem.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/blocks/feature-section.tsx",
      "content": "import { Icon, type IconName } from '@/components/ui/icon'\n\nconst features: { icon: IconName; title: string; body: string }[] = [\n  { icon: 'palette', title: 'Design tokens', body: 'One source of truth flows to code and Figma alike.' },\n  { icon: 'dashboard', title: 'Composable', body: 'Build screens fast from accessible, themeable components.' },\n  { icon: 'check_circle', title: 'Accessible', body: 'WCAG 2.1 AA out of the box, verified in CI.' },\n]\n\n/** A marketing section with an editorial heading and a three-column feature grid. */\nexport function FeatureSection() {\n  return (\n    <section className=\"flex flex-col items-center gap-10 bg-background py-12 text-foreground\">\n      <div className=\"flex max-w-xl flex-col items-center gap-2 text-center\">\n        <span className=\"text-xs font-medium uppercase tracking-[0.15em] text-primary\">Why Quill</span>\n        <h2 className=\"font-[family-name:var(--font-fraunces,Georgia,serif)] text-3xl\">\n          A calm, editorial design system\n        </h2>\n        <p className=\"text-sm text-muted-foreground\">\n          Everything connected to tokens, so it stays consistent as it grows.\n        </p>\n      </div>\n      <div className=\"grid grid-cols-1 gap-8 md:grid-cols-3\">\n        {features.map((f) => (\n          <div key={f.title} className=\"flex flex-col gap-2\">\n            <div className=\"flex size-10 items-center justify-center rounded-lg bg-muted text-primary\">\n              <Icon name={f.icon} size={22} />\n            </div>\n            <h3 className=\"text-lg font-medium\">{f.title}</h3>\n            <p className=\"text-sm text-muted-foreground\">{f.body}</p>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/feature-section.tsx"
    }
  ],
  "meta": {
    "intent": [
      "marketing"
    ],
    "use_when": "You need to present product features in an editorial multi-column grid."
  },
  "docs": "A marketing section with an editorial heading and a three-column feature grid. Do: Keep the grid to three (or a multiple of three) features so it reads evenly across the row. Don't: Let an uneven feature count leave a dangling, unbalanced last row on wide screens. Use stats-band when you're presenting numbers, not descriptive feature callouts with icons and body text. Use pricing when the features are tied to specific paid tiers, not the product as a whole.",
  "categories": [
    "marketing"
  ],
  "type": "registry:block"
}