{"success":true,"data":{"block":{"id":"process-icon-timeline","name":"Process Icon Timeline","title":"Process Icon Timeline","category":"Process","categorySlug":"process","description":"A vertical timeline with colored icon badges and alternating left/right card layout. Each step features a customizable colored badge with icon, title, description, and optional highlight tags. The timeline line connects all steps visually. Perfect for detailed process flows, project phases, or methodology explanations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290540/66xs8ag76ntbs8jdiihfp25u4ymw/process-icon-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290541/thew7w1cvf7ac02gox128kdnclpv/process-icon-timeline-mobile.png"},"componentPath":"blocks/process/process-icon-timeline.tsx","code":"import { ProcessIconTimeline } from \"@opensite/ui/blocks/process/process-icon-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessIconTimeline\n      heading=\"Product Development Timeline\"\n      description=\"From concept to launch, our proven process ensures success at every milestone.\"\n      steps={[\n        {\n          icon: \"lucide/lightbulb\",\n          title: \"Concept & Validation\",\n          description: \"Validate your idea through market research, competitive analysis, and user interviews. Define the value proposition and identify target markets.\",\n          highlights: [\"Market Research\", \"User Surveys\", \"Competitive Analysis\"],\n          badgeColor: \"bg-blue-500\",\n        },\n        {\n          icon: \"lucide/layout\",\n          title: \"Design & Wireframing\",\n          description: \"Create detailed wireframes and user flows. Develop a cohesive design system that scales across your product.\",\n          highlights: [\"Wireframes\", \"Design System\", \"User Flows\"],\n          badgeColor: \"bg-purple-500\",\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Development Sprint\",\n          description: \"Build the MVP with agile methodology. Implement core features with clean, maintainable code and automated testing.\",\n          highlights: [\"Agile Sprints\", \"Code Reviews\", \"Automated Tests\"],\n          badgeColor: \"bg-green-500\",\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Beta Testing\",\n          description: \"Launch beta program with early adopters. Gather feedback, fix bugs, and refine features based on real user behavior.\",\n          highlights: [\"User Feedback\", \"Bug Fixes\", \"Feature Refinement\"],\n          badgeColor: \"bg-orange-500\",\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Production Launch\",\n          description: \"Deploy to production with comprehensive monitoring. Execute go-to-market strategy and provide ongoing customer support.\",\n          highlights: [\"Production Deploy\", \"Marketing Launch\", \"Customer Support\"],\n          badgeColor: \"bg-red-500\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"gray\"\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},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the step (e.g., \"lucide/lightbulb\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"highlights":{"type":"array","description":"List of highlight tags","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"badgeColor":{"type":"string","description":"Badge background color class (e.g., \"bg-blue-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessIconTimelineItem"},"typeLabel":"ProcessIconTimelineItem[]","required":false},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps 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},"stepCardClassName":{"type":"string","description":"Additional CSS classes for each step card","required":false},"stepBadgeClassName":{"type":"string","description":"Additional CSS classes for the step icon badge","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","timeline","icons","badges","vertical","alternating","phases","methodology","highlights"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the icon timeline layout shown in the demo. Each step requires an 'icon', 'title', 'description', and 2–4 'highlights' tags. Assign a distinct 'badgeColor' class per step (e.g., 'bg-blue-500', 'bg-purple-500') to visually differentiate phases. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:39:47.016Z"}