{"success":true,"data":{"block":{"id":"process-scroll-image","name":"Process Scroll Image","title":"Process Scroll Image","category":"Process","categorySlug":"process","description":"A scroll-triggered process section with a sticky left panel containing title, description, animated image carousel, and CTA. As users scroll through the numbered steps on the right, the corresponding image animates into view with a clip-path reveal effect. Perfect for visual storytelling and step-by-step guides.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290536/680qw4gmev6cjmc12vu3p9d82fcl/process-scroll-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290537/vwhw8lhv8s60ppxohpyqe3r9zajy/process-scroll-image-mobile.png"},"componentPath":"blocks/process/process-scroll-image.tsx","code":"import { ProcessScrollImage } from \"@opensite/ui/blocks/process/process-scroll-image\";\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <ProcessScrollImage\n      heading=\"Build. Test. Launch.\"\n      description=\"Our agile methodology ensures rapid delivery without compromising quality.\"\n      actions={[\n        {\n          label: \"Start Your Project\",\n          href: \"/get-started\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Case Studies\",\n          href: \"/case-studies\",\n          variant: \"outline\",\n        },\n      ]}\n      steps={[\n        {\n          step: \"01\",\n          title: \"Requirements Gathering\",\n          description: \"Comprehensive analysis of business needs, technical requirements, and user expectations. We create detailed specifications that serve as the blueprint for success.\",\n          image: imagePlaceholders[15],\n        },\n        {\n          step: \"02\",\n          title: \"Architecture Planning\",\n          description: \"Design scalable system architecture that supports growth. We select the right technologies, define data structures, and plan integration points.\",\n          image: imagePlaceholders[51],\n        },\n        {\n          step: \"03\",\n          title: \"Iterative Development\",\n          description: \"Build features in focused sprints with continuous feedback loops. Regular demos and stakeholder reviews ensure alignment throughout the process.\",\n          image: imagePlaceholders[78],\n        },\n        {\n          step: \"04\",\n          title: \"Automated Testing\",\n          description: \"Comprehensive test coverage including unit tests, integration tests, and end-to-end scenarios. Catch bugs early and maintain code quality.\",\n          image: imagePlaceholders[95],\n        },\n        {\n          step: \"05\",\n          title: \"Staged Rollout\",\n          description: \"Gradual deployment strategy with feature flags, monitoring, and rollback capabilities. Minimize risk while maximizing user satisfaction.\",\n          image: imagePlaceholders[36],\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"white\"\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},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image URL for the step","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessScrollImageItem"},"typeLabel":"ProcessScrollImageItem[]","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},"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},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","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","scroll","animation","image","carousel","interactive","visual","storytelling","steps"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the scroll-image layout shown in the demo. Each step requires a 'step' label (e.g., '01'), 'title', 'description', and a real 'image' URL from the media library — DO NOT USE this block if you do not have valid image URLs for every step. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:37:55.921Z"}