{"success":true,"data":{"block":{"id":"stats-milestone-sidebar","name":"Stats Milestone Sidebar","title":"Stats Milestone Sidebar","category":"Stats","categorySlug":"stats","description":"A two-column layout featuring a sticky sidebar with heading and description, alongside a scrollable list of company milestones. Each milestone displays a year badge, title, and description. The sidebar remains fixed while users scroll through the timeline. Ideal for company history pages, about sections, or investor presentations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288942/i4phziz7u7qi7d18e8yhgmmlhcoy/stats-milestone-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288943/p2hrvhjs7we5ihjnuflw2caj1qul/stats-milestone-sidebar-mobile.jpg"},"componentPath":"blocks/stats/stats-milestone-sidebar.tsx","code":"import { StatsMilestoneSidebar } from \"@opensite/ui/blocks/stats/stats-milestone-sidebar\";\n\nexport default function Demo() {\n  return (\n    <StatsMilestoneSidebar\n      heading=\"Our Journey\"\n      description=\"Key moments that shaped who we are today and continue to drive our mission forward\"\n      milestones={[\n        {\n          year: \"2018\",\n          title: \"Company Founded\",\n          description:\n            \"Started with a vision to transform how businesses operate online. Our founding team of five engineers set out to build something meaningful.\",\n        },\n        {\n          year: \"2019\",\n          title: \"First Major Client\",\n          description:\n            \"Landed our first enterprise customer, validating our product-market fit and setting the stage for rapid growth.\",\n        },\n        {\n          year: \"2020\",\n          title: \"Series A Funding\",\n          description:\n            \"Raised $15M to accelerate product development and expand our team. Opened our first international office.\",\n        },\n        {\n          year: \"2021\",\n          title: \"Platform 2.0 Launch\",\n          description:\n            \"Released a completely redesigned platform with AI-powered features, receiving industry recognition and awards.\",\n        },\n        {\n          year: \"2022\",\n          title: \"Global Expansion\",\n          description:\n            \"Expanded to 30+ countries with localized support. Grew our team to over 100 employees across three continents.\",\n        },\n        {\n          year: \"2023\",\n          title: \"Industry Leadership\",\n          description:\n            \"Recognized as a market leader by major analysts. Surpassed 100,000 active users on the platform.\",\n        },\n        {\n          year: \"2024\",\n          title: \"Series B & Beyond\",\n          description:\n            \"Secured $50M in Series B funding to fuel our next phase of growth and innovation in AI-driven solutions.\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content for the sidebar","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content for the sidebar","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for sidebar content (overrides heading/description)","typeLabel":"React.ReactNode","required":false},"milestones":{"type":"array","description":"Array of milestones to display","items":{"type":"object","description":"","fields":{"year":{"type":"object","description":"The 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},"className":{"type":"string","description":"Additional CSS classes for the milestone","required":false}},"typeLabel":"MilestoneItem"},"typeLabel":"MilestoneItem[]","required":true,"minItems":3,"maxItems":10},"milestonesSlot":{"type":"object","description":"Custom slot for milestones (overrides milestones array)","typeLabel":"React.ReactNode","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},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"milestonesClassName":{"type":"string","description":"Additional CSS classes for the milestones container","required":false},"milestoneItemClassName":{"type":"string","description":"Additional CSS classes for individual milestone items","required":false},"milestoneYearClassName":{"type":"string","description":"Additional CSS classes for milestone year badges","required":false},"milestoneTitleClassName":{"type":"string","description":"Additional CSS classes for milestone titles","required":false},"milestoneDescriptionClassName":{"type":"string","description":"Additional CSS classes for milestone descriptions","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].year":{"type":"object","description":"","required":true},"milestones[].title":{"type":"object","description":"","required":true},"milestones[].description":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Journey","description":"Key moments that shaped who we are today and continue to drive our mission forward","milestones":[{"year":"2018","title":"Company Founded","description":"Started with a vision to transform how businesses operate online."},{"year":"2019","title":"First Major Client","description":"Landed our first enterprise customer, validating product-market fit."},{"year":"2020","title":"Series A Funding","description":"Raised $15M to accelerate product development and expand the team."},{"year":"2022","title":"Global Expansion","description":"Expanded to 30+ countries with localized support."}]},"dependencies":["@opensite/ui"],"tags":["stats","milestones","timeline","sidebar","sticky","history","company","about"],"performance":{},"importantUsageNotes":"Milestone years and descriptions must come from real, source-backed data. Do not fabricate company history. Each milestone requires a 'year', 'title', and 'description'. Years should be real calendar years in chronological order. The sidebar heading and description appear sticky on large screens while users scroll through the timeline. Provide at least 3 milestones for meaningful timeline depth.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"milestones":{"required":true,"minItems":3,"maxItems":10},"milestones[].year":{"required":true,"note":"Real calendar year string, e.g. '2018'."},"milestones[].title":{"required":true,"note":"Event or achievement title."},"milestones[].description":{"required":true,"note":"Narrative description of the milestone. Source-backed."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}},"timestamp":"2026-06-27T20:11:58.820Z"}