{"success":true,"data":{"block":{"id":"stats-growth-timeline","name":"Stats Growth Timeline","title":"Stats Growth Timeline","category":"Stats","categorySlug":"stats","description":"A vertical timeline showcasing company milestones and growth journey. Features alternating left/right content placement, year badges, milestone cards with icons and metrics, a 'Where We Are Today' summary section, and a future roadmap CTA. Ideal for about pages, investor presentations, or company history sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288936/otkldz7km9w9q43k1f1moppu0frk/stats-growth-timeline-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288937/toqnx92kq668q01mbqfi7enlxqbp/stats-growth-timeline-mobile.jpg"},"componentPath":"blocks/stats/stats-growth-timeline.tsx","code":"import { StatsGrowthTimeline } from \"@opensite/ui/blocks/stats/stats-growth-timeline\";\n\nexport default function Demo() {\n  return (\n    <StatsGrowthTimeline\n      badge=\"Our Journey\"\n      heading=\"Growing From Startup to Industry Leader\"\n      description=\"A decade of innovation, growth, and commitment to excellence\"\n      milestones={[\n        {\n          id: \"launch\",\n          year: \"2018\",\n          title: \"Company Founded\",\n          description:\n            \"Started with a small team and a big vision to transform how businesses operate online.\",\n          metric: { value: \"5\", label: \"Team Members\" },\n          icon: \"lucide/calendar-days\",\n        },\n        {\n          id: \"seed\",\n          year: \"2019\",\n          title: \"Seed Funding\",\n          description:\n            \"Secured initial investment to accelerate product development and expand the team.\",\n          metric: { value: \"$2M\", label: \"Raised\" },\n          icon: \"lucide/banknote\",\n        },\n        {\n          id: \"product\",\n          year: \"2020\",\n          title: \"Product Launch\",\n          description:\n            \"Released our flagship platform to the market, gaining rapid adoption.\",\n          metric: { value: \"10K\", label: \"Early Adopters\" },\n          icon: \"lucide/rocket\",\n        },\n        {\n          id: \"series-a\",\n          year: \"2022\",\n          title: \"Series A\",\n          description:\n            \"Major funding round enabled global expansion and enterprise features.\",\n          metric: { value: \"$25M\", label: \"Raised\" },\n          icon: \"lucide/trending-up\",\n        },\n        {\n          id: \"global\",\n          year: \"2024\",\n          title: \"Global Expansion\",\n          description:\n            \"Opened offices in Europe and Asia, serving customers worldwide.\",\n          metric: { value: \"50+\", label: \"Countries\" },\n          icon: \"lucide/globe\",\n        },\n      ]}\n      currentStats={[\n        { value: \"500K+\", label: \"Active Users\" },\n        { value: \"150+\", label: \"Team Members\" },\n        { value: \"$50M\", label: \"ARR\" },\n        { value: \"99.9%\", label: \"Uptime\" },\n      ]}\n      currentStatsHeading=\"Where We Are Today\"\n      futureHeading=\"What's Next\"\n      futureDescription=\"We're just getting started. Our roadmap includes AI-powered features, deeper integrations, and continued global expansion.\"\n      actions={[\n        {\n          label: \"View Our Roadmap\",\n          href: \"/roadmap\",\n          variant: \"default\",\n        },\n      ]}\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides badge)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"milestones":{"type":"array","description":"Array of milestones to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the milestone","required":true},"year":{"type":"object","description":"Year of the milestone","typeLabel":"React.ReactNode","required":true},"title":{"type":"object","description":"Title of the milestone","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description of the milestone","typeLabel":"React.ReactNode","required":true},"metric":{"type":"object","description":"Metric associated with the milestone","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"{ value: React.ReactNode; label: React.ReactNode; }","required":true},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/calendar-days\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the milestone","required":false}},"typeLabel":"Milestone"},"typeLabel":"Milestone[]","required":true,"minItems":2,"maxItems":8},"milestonesSlot":{"type":"object","description":"Custom slot for rendering milestones (overrides milestones array)","typeLabel":"React.ReactNode","required":false},"currentStats":{"type":"array","description":"Current stats for the \"Where We Are Today\" section","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"The stat value","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The stat label","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"CurrentStat"},"typeLabel":"CurrentStat[]","required":false,"minItems":2,"maxItems":6},"currentStatsSlot":{"type":"object","description":"Custom slot for rendering current stats (overrides currentStats array)","typeLabel":"React.ReactNode","required":false},"currentStatsHeading":{"type":"object","description":"Current stats section heading","typeLabel":"React.ReactNode","required":false},"futureHeading":{"type":"object","description":"Future section heading","typeLabel":"React.ReactNode","required":false},"futureDescription":{"type":"object","description":"Future section description","typeLabel":"React.ReactNode","required":false},"futureSlot":{"type":"object","description":"Custom slot for the future section (overrides futureHeading/futureDescription/actions)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Actions for the future section (replaces roadmapLinkText/roadmapLinkUrl)","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline","required":false},"milestoneClassName":{"type":"string","description":"Additional CSS classes for milestone cards","required":false},"currentStatsClassName":{"type":"string","description":"Additional CSS classes for the current stats section","required":false},"futureClassName":{"type":"string","description":"Additional CSS classes for the future section","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].id":{"type":"object","description":"","required":true},"milestones[].year":{"type":"object","description":"","required":true},"milestones[].title":{"type":"object","description":"","required":true},"milestones[].description":{"type":"object","description":"","required":true},"milestones[].metric":{"type":"object","description":"","required":true},"currentStats[].value":{"type":"object","description":"","required":true},"currentStats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Our Journey","heading":"Growing From Startup to Industry Leader","description":"A decade of innovation, growth, and commitment to excellence","milestones":[{"id":"launch","year":"2018","title":"Company Founded","description":"Started with a small team and a big vision to transform how businesses operate online.","metric":{"value":"5","label":"Team Members"},"icon":"lucide/calendar-days"},{"id":"series-a","year":"2022","title":"Series A","description":"Major funding round enabled global expansion and enterprise features.","metric":{"value":"$25M","label":"Raised"},"icon":"lucide/trending-up"}],"currentStats":[{"value":"500K+","label":"Active Users"},{"value":"150+","label":"Team Members"},{"value":"$50M","label":"ARR"},{"value":"99.9%","label":"Uptime"}],"currentStatsHeading":"Where We Are Today","futureHeading":"What's Next","futureDescription":"Our roadmap includes AI-powered features, deeper integrations, and continued global expansion.","actions":[{"label":"View Our Roadmap","href":"/roadmap","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["stats","timeline","milestones","growth","history","journey","company","about","achievements"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each milestone requires an 'id', 'year', 'title', 'description', and a 'metric' with 'value' and 'label'. Milestone years should be actual dates in chronological order. The 'metric' should be a real measurable data point for that milestone. currentStats are the present-day summary stats — provide 4 for the 4-column grid. The icon string uses 'prefix/name' format.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"milestones":{"required":true,"minItems":2,"maxItems":8},"milestones[].id":{"required":true,"note":"Unique identifier string."},"milestones[].year":{"required":true,"note":"Year string like '2018'. Must be real."},"milestones[].title":{"required":true,"note":"Milestone event title."},"milestones[].description":{"required":true,"note":"Brief narrative for the milestone."},"milestones[].metric":{"required":true,"note":"Object with 'value' and 'label' fields. Source-backed."},"currentStats":{"minItems":2,"maxItems":6,"note":"4 items recommended for the 4-column layout."},"currentStats[].value":{"required":true,"note":"Source-backed metric value."},"currentStats[].label":{"required":true,"note":"Short label for the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:12:20.236Z"}