{"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":false},"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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","timeline","milestones","growth","history","journey","company","about","achievements"],"performance":{},"importantUsageNotes":"Use this block only when you have real company milestone data with verifiable dates, metrics, and descriptions — do not invent funding amounts, team sizes, or growth figures. Supply 4–6 'milestones', each with a real 'year', 'title', 'description', and 'metric' backed by actual data. The 'currentStats' section is a 4-column grid — supply exactly 4 real current stats. If you supply 'actions', use a variant of 'default' for the first action and 'outline' for the second. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:11.513Z"}