{"success":true,"data":{"block":{"id":"process-roadmap-timeline","name":"Process Roadmap Timeline","title":"Process Roadmap Timeline","category":"Process","categorySlug":"process","description":"A product roadmap timeline with status badges (completed, in-progress, upcoming) and milestone cards. Features alternating left/right layout, date labels, feature tags, and visual status indicators. The timeline line connects milestones with numbered or checkmark badges. Perfect for product roadmaps and project timelines.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290544/flo2gdvcyfdhr20mebtwx53pil5x/process-roadmap-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290545/66ssd8yvzr1ld9orejmytwbyev9s/process-roadmap-timeline-mobile.png"},"componentPath":"blocks/process/process-roadmap-timeline.tsx","code":"import { ProcessRoadmapTimeline } from \"@opensite/ui/blocks/process/process-roadmap-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessRoadmapTimeline\n      heading=\"Product Roadmap 2026\"\n      description=\"Our strategic vision for delivering powerful new features and improvements throughout the year.\"\n      milestones={[\n        {\n          title: \"Platform Foundation\",\n          description:\n            \"Core infrastructure upgrades, performance optimizations, and enhanced security protocols to support future growth.\",\n          date: \"Q1 2026\",\n          status: \"completed\",\n          features: [\n            \"API v3\",\n            \"Database Migration\",\n            \"SSO Integration\",\n            \"Enhanced Security\",\n          ],\n        },\n        {\n          title: \"AI-Powered Features\",\n          description:\n            \"Intelligent automation tools powered by machine learning to streamline workflows and boost productivity.\",\n          date: \"Q2 2026\",\n          status: \"in-progress\",\n          features: [\n            \"Smart Recommendations\",\n            \"Auto-categorization\",\n            \"Predictive Analytics\",\n            \"NLP Search\",\n          ],\n        },\n        {\n          title: \"Mobile Experience\",\n          description:\n            \"Native mobile applications for iOS and Android with offline capabilities and push notifications.\",\n          date: \"Q3 2026\",\n          status: \"upcoming\",\n          features: [\n            \"iOS App\",\n            \"Android App\",\n            \"Offline Mode\",\n            \"Push Notifications\",\n          ],\n        },\n        {\n          title: \"Enterprise Suite\",\n          description:\n            \"Advanced enterprise features including custom workflows, white-labeling, and dedicated support options.\",\n          date: \"Q4 2026\",\n          status: \"upcoming\",\n          features: [\n            \"Custom Workflows\",\n            \"White-label\",\n            \"Advanced Permissions\",\n            \"Priority Support\",\n          ],\n        },\n        {\n          title: \"Global Expansion\",\n          description:\n            \"Multi-language support, regional data centers, and localized payment options to serve international markets.\",\n          date: \"Q1 2027\",\n          status: \"upcoming\",\n          features: [\n            \"Multi-language\",\n            \"Regional Servers\",\n            \"Local Payments\",\n            \"Compliance Tools\",\n          ],\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.1}\n      background=\"gradient\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"milestones":{"type":"array","description":"Array of milestone configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Milestone title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Milestone description","typeLabel":"React.ReactNode","required":false},"date":{"type":"object","description":"Date or time period (e.g., \"Q1 2024\")","typeLabel":"React.ReactNode","required":false},"status":{"type":"string","description":"Milestone status","typeLabel":"MilestoneStatus","required":true},"features":{"type":"array","description":"List of features or deliverables","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the milestone item","required":false}},"typeLabel":"ProcessRoadmapMilestoneItem"},"typeLabel":"ProcessRoadmapMilestoneItem[]","required":true,"minItems":2,"maxItems":8},"milestonesSlot":{"type":"object","description":"Custom slot for rendering milestones (overrides milestones array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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 container","required":false},"timelineLineClassName":{"type":"string","description":"Additional CSS classes for the timeline line","required":false},"milestoneCardClassName":{"type":"string","description":"Additional CSS classes for each milestone card","required":false},"milestoneNodeClassName":{"type":"string","description":"Additional CSS classes for the milestone node","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].title":{"type":"object","description":"","required":true,"maxLength":60},"milestones[].status":{"type":"object","description":"","required":true},"milestones[].date":{"type":"object","description":"","maxLength":20},"milestones[].description":{"type":"object","description":"","maxLength":200},"milestones[].features":{"type":"object","description":"","maxItems":6}},"exampleProps":{"heading":"Product Roadmap 2026","description":"Our strategic vision for delivering powerful new features throughout the year.","milestones":[{"title":"Platform Foundation","description":"Core infrastructure upgrades and security.","date":"Q1 2026","status":"completed","features":["API v3","Database Migration","SSO Integration"]},{"title":"AI-Powered Features","description":"Intelligent automation to streamline workflows.","date":"Q2 2026","status":"in-progress","features":["Smart Recommendations","Predictive Analytics"]},{"title":"Mobile Experience","description":"Native iOS and Android apps with offline support.","date":"Q3 2026","status":"upcoming","features":["iOS App","Android App","Offline Mode"]},{"title":"Enterprise Suite","description":"Custom workflows, white-labeling, and advanced permissions.","date":"Q4 2026","status":"upcoming","features":["Custom Workflows","White-label"]}],"background":"gradient"},"dependencies":["@opensite/ui"],"tags":["process","roadmap","timeline","milestones","status","product","project","planning","phases"],"performance":{},"importantUsageNotes":"Use for product or project roadmaps with dated milestones. Each milestone requires a status: 'completed' | 'in-progress' | 'upcoming'. features are small chip badges shown in the card. date is a display string (e.g. 'Q1 2026') — not parsed. No image props.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"milestones":{"required":true,"minItems":2,"maxItems":8},"milestones[].title":{"required":true,"maxLength":60},"milestones[].status":{"required":true,"note":"status must be one of: completed, in-progress, upcoming. Must be one of: completed, in-progress, upcoming."},"milestones[].date":{"maxLength":20,"note":"Display string, e.g. 'Q1 2026'."},"milestones[].description":{"maxLength":200},"milestones[].features":{"maxItems":6,"note":"Short feature tag strings."}},"mediaSlots":{}}}},"timestamp":"2026-06-27T20:03:59.230Z"}