{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "timeline",
    "type": "registry:component",
    "title": "Timeline",
    "description": "A vertical milestone track with alternating entries and a centre line.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Marketing",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/timeline.html",
            "type": "registry:file",
            "target": "components/timeline.html",
            "content": "<!-- Timeline\n     A vertical list of milestones with a year, a title and a description.\n     Entries alternate sides of a centre line on wide screens and stack into a\n     single column on narrow screens. Marketing theme. -->\n\n<section class=\"dp-timeline\">\n  <ol class=\"dp-timeline-track\">\n    <li class=\"dp-timeline-item\">\n      <div class=\"dp-timeline-marker\" aria-hidden=\"true\"></div>\n      <div class=\"dp-timeline-card\">\n        <p class=\"dp-timeline-year\">2012</p>\n        <h3 class=\"dp-timeline-heading\">Dataprovider.com starts</h3>\n        <p class=\"dp-timeline-text\">After three years of development, Dataprovider.com launches with one mission: make the internet searchable, measurable and explainable.</p>\n      </div>\n    </li>\n    <li class=\"dp-timeline-item\">\n      <div class=\"dp-timeline-marker\" aria-hidden=\"true\"></div>\n      <div class=\"dp-timeline-card\">\n        <p class=\"dp-timeline-year\">2017</p>\n        <h3 class=\"dp-timeline-heading\">Global monthly coverage</h3>\n        <p class=\"dp-timeline-text\">The platform expands to crawl the entire web, covering hundreds of millions of domains every month.</p>\n      </div>\n    </li>\n    <li class=\"dp-timeline-item\">\n      <div class=\"dp-timeline-marker\" aria-hidden=\"true\"></div>\n      <div class=\"dp-timeline-card\">\n        <p class=\"dp-timeline-year\">2023</p>\n        <h3 class=\"dp-timeline-heading\">SSL Catalog and warehouse access</h3>\n        <p class=\"dp-timeline-text\">We launch the largest continuously updated SSL dataset and open direct access through Snowflake and Google Cloud.</p>\n      </div>\n    </li>\n    <li class=\"dp-timeline-item\">\n      <div class=\"dp-timeline-marker\" aria-hidden=\"true\"></div>\n      <div class=\"dp-timeline-card\">\n        <p class=\"dp-timeline-year\">2024</p>\n        <h3 class=\"dp-timeline-heading\">Quad9 Connection Index</h3>\n        <p class=\"dp-timeline-text\">In partnership with Quad9 we introduce the Connection Index, a signal measuring real user engagement across the web.</p>\n      </div>\n    </li>\n  </ol>\n</section>\n"
        },
        {
            "path": "components/timeline.css",
            "type": "registry:file",
            "target": "components/timeline.css",
            "content": "/* Timeline\n   A vertical milestone track. A centre line runs the full height, with a dot\n   marking each entry; cards alternate left and right on wide screens and stack\n   into one column on narrow screens. Colour and type from tokens.css. */\n\n.dp-timeline {\n  max-width: 60rem;\n  margin: 0 auto;\n  padding: var(--dp-space-12) var(--dp-space-6);\n}\n\n.dp-timeline-track {\n  position: relative;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* the centre line */\n.dp-timeline-track::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 2px;\n  transform: translateX(-1px);\n  background: var(--dp-border);\n}\n\n.dp-timeline-item {\n  position: relative;\n  width: 50%;\n  padding: 0 var(--dp-space-8) var(--dp-space-8);\n  box-sizing: border-box;\n}\n\n.dp-timeline-item:last-child { padding-bottom: 0; }\n\n/* odd items on the left, even items on the right */\n.dp-timeline-item:nth-child(odd) {\n  left: 0;\n  text-align: right;\n}\n\n.dp-timeline-item:nth-child(even) {\n  left: 50%;\n  text-align: left;\n}\n\n/* the dot sits on the centre line */\n.dp-timeline-marker {\n  position: absolute;\n  top: 0.35rem;\n  width: 0.85rem;\n  height: 0.85rem;\n  border-radius: var(--dp-radius-full);\n  background: var(--dp-blue-700);\n  border: 3px solid var(--dp-bg);\n}\n\n.dp-timeline-item:nth-child(odd) .dp-timeline-marker {\n  right: calc(var(--dp-space-8) * -1 - 0.425rem);\n  transform: translateX(1px);\n}\n\n.dp-timeline-item:nth-child(even) .dp-timeline-marker {\n  left: calc(var(--dp-space-8) * -1 - 0.425rem);\n  transform: translateX(-1px);\n}\n\n.dp-timeline-year {\n  margin: 0 0 var(--dp-space-1);\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-timeline-heading {\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-timeline-text {\n  margin: 0;\n  font-size: var(--dp-text-base);\n  color: var(--dp-text-muted);\n}\n\n@media (max-width: 720px) {\n  .dp-timeline-track::before { left: 0.425rem; }\n\n  .dp-timeline-item,\n  .dp-timeline-item:nth-child(odd),\n  .dp-timeline-item:nth-child(even) {\n    width: 100%;\n    left: 0;\n    text-align: left;\n    padding: 0 0 var(--dp-space-8) var(--dp-space-8);\n  }\n\n  .dp-timeline-item:nth-child(odd) .dp-timeline-marker,\n  .dp-timeline-item:nth-child(even) .dp-timeline-marker {\n    left: 0;\n    right: auto;\n    transform: none;\n  }\n}\n"
        }
    ]
}