{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "split-section",
    "type": "registry:component",
    "title": "Split section",
    "description": "A two-column section with text beside a media panel. Add data-reverse to swap sides.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/split-section.html",
            "type": "registry:file",
            "target": "components/split-section.html",
            "content": "<!-- Split section\n     Text beside a media panel. Add data-reverse on .dp-split to swap sides.\n     The media panel is a placeholder; drop in a screenshot or illustration.\n     Marketing theme. -->\n\n<section class=\"dp-split\">\n  <div class=\"dp-split-body\">\n    <p class=\"dp-split-eyebrow\">Technology detection</p>\n    <h2 class=\"dp-split-title\">Know the full stack behind every website</h2>\n    <p class=\"dp-split-text\">Detect the platforms, payment providers, analytics and hosting used across 400M domains, and track how adoption shifts over time.</p>\n    <ul class=\"dp-split-list\">\n      <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg> 9,000+ technologies detected</li>\n      <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg> Historical adoption trends</li>\n      <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"></path></svg> Refreshed every month</li>\n    </ul>\n    <a class=\"dp-btn\" data-variant=\"primary\" href=\"/our-data/technology/\">Explore technology data</a>\n  </div>\n  <div class=\"dp-split-media\">\n    <div class=\"dp-split-media-card\"><b>Shopify</b> detected on 4.1M shops &middot; <b>+2.1%</b> this month</div>\n  </div>\n</section>\n"
        },
        {
            "path": "components/split-section.css",
            "type": "registry:file",
            "target": "components/split-section.css",
            "content": "/* Split section\n   A two-column section: text on one side, a media panel on the other. Add\n   data-reverse to swap sides. Colour and type from tokens.css (marketing). */\n\n.dp-split {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--dp-space-10);\n  align-items: center;\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-split { grid-template-columns: 1fr; } }\n\n.dp-split[data-reverse] .dp-split-body { order: 2; }\n\n.dp-split-eyebrow {\n  margin: 0 0 var(--dp-space-3);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-link);\n}\n\n.dp-split-title {\n  margin: 0 0 var(--dp-space-4);\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-split-text {\n  margin: 0 0 var(--dp-space-6);\n  font-size: var(--dp-text-lg);\n  color: var(--dp-text-muted);\n}\n\n.dp-split-list {\n  margin: 0 0 var(--dp-space-6);\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dp-space-3);\n}\n\n.dp-split-list li {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  color: var(--dp-text);\n}\n\n.dp-split-list svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--dp-success); }\n\n.dp-split-media {\n  position: relative;\n  height: 22rem;\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  background: var(--dp-blue-100);\n  overflow: hidden;\n}\n\n.dp-split-media::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(circle at 30% 30%, rgba(45, 75, 255, 0.14) 0, rgba(45, 75, 255, 0) 45%),\n    radial-gradient(circle at 75% 70%, rgba(255, 199, 1, 0.16) 0, rgba(255, 199, 1, 0) 45%);\n}\n\n.dp-split-media-card {\n  position: absolute;\n  inset: auto var(--dp-space-6) var(--dp-space-6) var(--dp-space-6);\n  padding: var(--dp-space-4) var(--dp-space-5);\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-lg);\n  box-shadow: var(--dp-shadow-md);\n  font-size: var(--dp-text-sm);\n  color: var(--dp-text-muted);\n}\n\n.dp-split-media-card b { color: var(--dp-navy); }\n"
        }
    ]
}