{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "feature-cards",
    "type": "registry:component",
    "title": "Feature cards",
    "description": "A marketing section: a centred heading and a grid of cards with an icon, title, description and read-more link.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/feature-cards.html",
            "type": "registry:file",
            "target": "components/feature-cards.html",
            "content": "<!-- Feature cards\n     A marketing section: centred heading and a grid of cards (icon, title,\n     description, read-more). Marketing theme. -->\n\n<section class=\"dp-fsection\">\n  <div class=\"dp-fsection-head\">\n    <h2 class=\"dp-fsection-title\">One dataset, many use cases</h2>\n    <p class=\"dp-fsection-sub\">Put structured web data to work across your organisation.</p>\n  </div>\n\n  <div class=\"dp-fc-grid\">\n    <article class=\"dp-fc\">\n      <span class=\"dp-fc-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 7h-9\"></path><path d=\"M14 17H5\"></path><circle cx=\"17\" cy=\"17\" r=\"3\"></circle><circle cx=\"7\" cy=\"7\" r=\"3\"></circle></svg>\n      </span>\n      <h3 class=\"dp-fc-title\">Asset management</h3>\n      <p class=\"dp-fc-desc\">Keep a live inventory of every domain, subdomain and technology your organisation runs.</p>\n      <a class=\"dp-btn\" data-variant=\"outline\" href=\"/cases/assets/\">Read more</a>\n    </article>\n\n    <article class=\"dp-fc\">\n      <span class=\"dp-fc-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"></path></svg>\n      </span>\n      <h3 class=\"dp-fc-title\">Online brand protection</h3>\n      <p class=\"dp-fc-desc\">Detect look-alike domains and infringements before they reach your customers.</p>\n      <a class=\"dp-btn\" data-variant=\"outline\" href=\"/cases/brand-protection/\">Read more</a>\n    </article>\n\n    <article class=\"dp-fc\">\n      <span class=\"dp-fc-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 3v18h18\"></path><rect width=\"4\" height=\"7\" x=\"7\" y=\"10\"></rect><rect width=\"4\" height=\"12\" x=\"15\" y=\"5\"></rect></svg>\n      </span>\n      <h3 class=\"dp-fc-title\">Business information</h3>\n      <p class=\"dp-fc-desc\">Enrich company records with technographics, contact data and firmographics.</p>\n      <a class=\"dp-btn\" data-variant=\"outline\" href=\"/cases/business-information/\">Read more</a>\n    </article>\n  </div>\n</section>\n"
        },
        {
            "path": "components/feature-cards.css",
            "type": "registry:file",
            "target": "components/feature-cards.css",
            "content": "/* Feature cards\n   A marketing section: a centred heading and a grid of cards with an icon,\n   title, description and a read-more link. Colour and type from tokens.css\n   (marketing theme). */\n\n.dp-fsection {\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n.dp-fsection-head {\n  max-width: 44rem;\n  margin: 0 auto var(--dp-space-8);\n  text-align: center;\n}\n\n.dp-fsection-title {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-3xl);\n  line-height: var(--dp-leading-tight);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-fsection-sub {\n  margin: 0;\n  font-size: var(--dp-text-lg);\n  color: var(--dp-text-muted);\n}\n\n.dp-fc-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: var(--dp-space-6);\n}\n\n.dp-fc {\n  display: flex;\n  flex-direction: column;\n  padding: var(--dp-space-6);\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n}\n\n.dp-fc-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  margin-bottom: var(--dp-space-5);\n  border-radius: var(--dp-radius-lg);\n  background: var(--dp-blue-200);\n  color: var(--dp-blue-700);\n}\n\n.dp-fc-icon svg { width: 1.5rem; height: 1.5rem; }\n\n.dp-fc-title {\n  margin: 0 0 var(--dp-space-2);\n  font-size: var(--dp-text-xl);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-fc-desc {\n  flex: 1;\n  margin: 0 0 var(--dp-space-5);\n  font-size: var(--dp-text-base);\n  color: var(--dp-text-muted);\n}\n\n.dp-fc-more { align-self: flex-start; }\n"
        }
    ]
}