{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "hero",
    "type": "registry:component",
    "title": "Hero",
    "description": "Marketing hero: a two-tone heading, a subtitle and a tabbed product preview with a floating stat card.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/hero.html",
            "type": "registry:file",
            "target": "components/hero.html",
            "content": "<!-- Hero\n     Marketing hero: two-tone heading, subtitle and a tabbed product preview.\n     The preview stage renders an interactive map at runtime; here it shows a\n     heatmap-style backdrop with a floating stat card. Marketing theme. -->\n\n<section class=\"dp-hero\">\n  <h1 class=\"dp-hero-title\"><span class=\"light\">The complete web,</span><br>structured in one place</h1>\n  <p class=\"dp-hero-sub\">Track companies and technologies across 99% of all registered domains worldwide; every TLD, every ccTLD, refreshed monthly.</p>\n\n  <div class=\"dp-hero-preview\">\n    <div class=\"dp-hero-tabs\" role=\"tablist\">\n      <button class=\"dp-hero-tab\" type=\"button\">Discover</button>\n      <button class=\"dp-hero-tab\" type=\"button\" data-active>Map</button>\n      <button class=\"dp-hero-tab\" type=\"button\">Analyze</button>\n      <button class=\"dp-hero-tab\" type=\"button\">Automate</button>\n    </div>\n    <div class=\"dp-hero-stage\">\n      <div class=\"dp-hero-card\">\n        <div class=\"dp-hero-card-label\">Online stores in California</div>\n        <div class=\"dp-hero-card-row\">\n          <span class=\"dp-hero-card-val\">13.217</span>\n          <span class=\"dp-hero-card-pct\">12.0%</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n"
        },
        {
            "path": "components/hero.css",
            "type": "registry:file",
            "target": "components/hero.css",
            "content": "/* Hero\n   The marketing hero: a two-tone heading, a subtitle and a tabbed product\n   preview. Colour and type from tokens.css (marketing theme). */\n\n.dp-hero {\n  max-width: 64rem;\n  margin: 0 auto;\n  padding: var(--dp-space-16) var(--dp-space-6) var(--dp-space-12);\n  text-align: center;\n}\n\n.dp-hero-title {\n  margin: 0 0 var(--dp-space-5);\n  font-size: var(--dp-text-5xl);\n  line-height: var(--dp-leading-tight);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-navy);\n}\n\n.dp-hero-title .light { font-weight: var(--dp-weight-light); }\n\n.dp-hero-sub {\n  max-width: 46ch;\n  margin: 0 auto var(--dp-space-10);\n  font-size: var(--dp-text-xl);\n  line-height: var(--dp-leading-snug);\n  color: var(--dp-blue-600);\n}\n\n.dp-hero-preview {\n  max-width: 60rem;\n  margin: 0 auto;\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-xl);\n  background: var(--dp-surface);\n  overflow: hidden;\n  box-shadow: var(--dp-shadow-lg);\n}\n\n.dp-hero-tabs {\n  display: flex;\n  border-bottom: 1px solid var(--dp-border);\n}\n\n.dp-hero-tab {\n  flex: 1;\n  padding: var(--dp-space-4);\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-base);\n  font-weight: var(--dp-weight-bold);\n  color: var(--dp-text-muted);\n  cursor: pointer;\n}\n\n.dp-hero-tab:hover { color: var(--dp-navy); }\n.dp-hero-tab[data-active] { color: var(--dp-navy); border-bottom-color: var(--dp-blue-700); }\n\n.dp-hero-stage {\n  position: relative;\n  height: 24rem;\n  background: var(--dp-blue-200);\n  overflow: hidden;\n}\n\n/* Heatmap-style backdrop suggesting the map preview */\n.dp-hero-stage::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(circle at 24% 46%, rgba(239, 68, 68, 0.7) 0, rgba(239, 68, 68, 0) 12%),\n    radial-gradient(circle at 30% 40%, rgba(250, 204, 21, 0.55) 0, rgba(250, 204, 21, 0) 8%),\n    radial-gradient(circle at 55% 42%, rgba(239, 68, 68, 0.75) 0, rgba(239, 68, 68, 0) 15%),\n    radial-gradient(circle at 72% 46%, rgba(45, 75, 255, 0.45) 0, rgba(45, 75, 255, 0) 10%),\n    radial-gradient(circle at 48% 64%, rgba(239, 68, 68, 0.6) 0, rgba(239, 68, 68, 0) 9%);\n  filter: blur(3px);\n}\n\n.dp-hero-card {\n  position: absolute;\n  right: var(--dp-space-6);\n  bottom: var(--dp-space-6);\n  min-width: 12rem;\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  text-align: left;\n}\n\n.dp-hero-card-label { font-size: var(--dp-text-sm); font-weight: var(--dp-weight-bold); color: var(--dp-navy); margin-bottom: var(--dp-space-2); }\n.dp-hero-card-row { display: flex; align-items: baseline; gap: var(--dp-space-3); }\n.dp-hero-card-val { font-size: var(--dp-text-2xl); font-weight: var(--dp-weight-extrabold); color: var(--dp-navy); font-variant-numeric: tabular-nums; }\n.dp-hero-card-pct { font-size: var(--dp-text-base); font-weight: var(--dp-weight-bold); color: var(--dp-blue-700); }\n"
        }
    ]
}