{"success":true,"data":{"block":{"id":"process-expandable-timeline","name":"Process Expandable Timeline","title":"Process Expandable Timeline","category":"Process","categorySlug":"process","description":"A clickable timeline with expandable content sections. Each step shows a numbered badge, title, and brief description that expands to reveal detailed content when clicked. Features smooth height animations and decorative corner connectors. Ideal for FAQ-style process explanations or detailed methodology breakdowns.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290542/797jqaeds60apxki8ozj7yk83aco/process-expandable-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290543/m68kn9r1g7odgfc5hjcfri4y1hyr/process-expandable-timeline-mobile.png"},"componentPath":"blocks/process/process-expandable-timeline.tsx","code":"import { ProcessExpandableTimeline } from \"@opensite/ui/blocks/process/process-expandable-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessExpandableTimeline\n      heading=\"Our Development Process\"\n      description=\"A comprehensive workflow designed to deliver exceptional results through proven methodologies and continuous collaboration.\"\n      steps={[\n        {\n          title: \"Discovery & Research\",\n          description:\n            \"Deep dive into your business goals, target audience, and competitive landscape.\",\n          expandedContent:\n            \"We conduct stakeholder interviews, user research sessions, and competitive analysis to establish a solid foundation. Our team analyzes market trends, user behavior patterns, and technical requirements to create a comprehensive project roadmap that aligns with your business objectives.\",\n        },\n        {\n          title: \"Strategy & Planning\",\n          description:\n            \"Create a detailed roadmap with milestones, deliverables, and success metrics.\",\n          expandedContent:\n            \"Based on our research findings, we develop a strategic plan that includes information architecture, user flows, technical specifications, and a phased implementation timeline. We establish KPIs and define success criteria to ensure measurable outcomes throughout the project lifecycle.\",\n        },\n        {\n          title: \"Design & Prototyping\",\n          description:\n            \"Craft intuitive interfaces with user-centered design principles.\",\n          expandedContent:\n            \"Our design team creates wireframes, high-fidelity mockups, and interactive prototypes. We conduct usability testing and iterate based on feedback to ensure the design meets user needs and business requirements. Every design decision is validated through data and user testing.\",\n        },\n        {\n          title: \"Development & Implementation\",\n          description:\n            \"Build robust, scalable solutions using modern technologies.\",\n          expandedContent:\n            \"Our engineering team follows agile development practices with regular sprints, code reviews, and automated testing. We implement best practices for security, performance, and scalability while maintaining clean, maintainable code. Continuous integration ensures rapid deployment and quality assurance.\",\n        },\n        {\n          title: \"Testing & Quality Assurance\",\n          description:\n            \"Rigorous testing across devices, browsers, and scenarios.\",\n          expandedContent:\n            \"Comprehensive QA process includes functional testing, performance optimization, security audits, and accessibility compliance checks. We conduct cross-browser testing, mobile responsiveness validation, and load testing to ensure a flawless user experience across all platforms.\",\n        },\n        {\n          title: \"Launch & Optimization\",\n          description:\n            \"Deploy with confidence and continuously improve based on real-world data.\",\n          expandedContent:\n            \"We execute a carefully planned deployment strategy with monitoring and rollback capabilities. Post-launch, we track analytics, gather user feedback, and make data-driven optimizations. Our team provides ongoing support and iterative improvements to maximize performance and user satisfaction.\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.15}\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":{"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description (shown in collapsed state)","typeLabel":"React.ReactNode","required":false},"expandedContent":{"type":"object","description":"Expanded content (shown when step is expanded)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessExpandableTimelineItem"},"typeLabel":"ProcessExpandableTimelineItem[]","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},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","required":false},"stepBadgeClassName":{"type":"string","description":"Additional CSS classes for the step number badge","required":false},"expandedContentClassName":{"type":"string","description":"Additional CSS classes for the expanded content","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","expandable","accordion","interactive","clickable","detailed","faq-style"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the canonical expandable timeline layout shown in the demo. Each step requires a 'title', 'description' (shown collapsed), and 'expandedContent' (shown on expand) — all three fields should be populated with meaningful, specific content. Do not pad with vague placeholder text. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:09.995Z"}