{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","roadmap","timeline","milestones","status","product","project","planning","phases"],"performance":{},"importantUsageNotes":"Ensure to supply 4–5 'milestones' with realistic future dates or quarters (e.g., 'Q1 2026'). Each milestone requires a 'status' of either 'completed', 'in-progress', or 'upcoming' and a 'features' list of 3–5 deliverables. Only describe features or roadmap items that are real and planned — do not invent product capabilities. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:39:47.694Z"}