{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "statement",
    "type": "registry:component",
    "title": "Statement",
    "description": "A two-column editorial section with a large statement and supporting copy.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/statement.html",
            "type": "registry:file",
            "target": "components/statement.html",
            "content": "<!-- Statement\n     A two-column editorial section: a large statement on the left and\n     supporting copy on the right. Use it for mission, vision or context.\n     Marketing theme. -->\n\n<section class=\"dp-statement\">\n  <h2 class=\"dp-statement-lead\">The web is the world's greatest source of information chaos.</h2>\n  <div class=\"dp-statement-body\">\n    <p>It started in 2009, when Christian Branbergen, Gijs Barends and Marc Noël set out to do what seemed almost impossible: summarise and structure the entire web.</p>\n    <p>What began as a small team of data enthusiasts has grown into a trusted partner for organisations like PayPal, GoDaddy and MarkMonitor. We collect and structure all our data ourselves, running a powerful hosting cluster in the Netherlands.</p>\n  </div>\n</section>\n"
        },
        {
            "path": "components/statement.css",
            "type": "registry:file",
            "target": "components/statement.css",
            "content": "/* Statement\n   A two-column editorial section. The left column carries a large statement;\n   the right column carries supporting paragraphs. Colour and type from\n   tokens.css (marketing theme). */\n\n.dp-statement {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--dp-space-10);\n  align-items: start;\n  max-width: 72rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n@media (max-width: 760px) { .dp-statement { grid-template-columns: 1fr; gap: var(--dp-space-6); } }\n\n.dp-statement-lead {\n  margin: 0;\n  font-size: var(--dp-text-4xl);\n  line-height: var(--dp-leading-tight);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-statement-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-4);\n}\n\n.dp-statement-body p {\n  margin: 0;\n  font-size: var(--dp-text-base);\n  line-height: var(--dp-leading-normal);\n  color: var(--dp-text-muted);\n}\n"
        }
    ]
}