{"success":true,"data":{"block":{"id":"carousel-multi-step-showcase","name":"Carousel Multi-Step Showcase","title":"Carousel Multi-Step Showcase","category":"Carousel","categorySlug":"carousel","description":"A multi-step feature showcase with animated step navigation, progress indicators, and synchronized image transitions. Features numbered step buttons with active state highlighting and smooth content transitions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289210/hvruho22wlsn1ezax8ngk4i29nsl/carousel-multi-step-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289211/ny1yq020x55usk9jog1tko8dgbmg/carousel-multi-step-showcase-mobile.jpg"},"componentPath":"blocks/carousel/carousel-multi-step-showcase.tsx","code":"import { CarouselMultiStepShowcase } from \"@opensite/ui/blocks/carousel/carousel-multi-step-showcase\";\n\nexport default function Demo() {\n  return (\n    <CarouselMultiStepShowcase\n      heading=\"How It Works\"\n      subheading=\"Get started in minutes with our simple four-step process\"\n      steps={[\n        {\n          id: \"step-1\",\n          step: 1,\n          title: \"Create Your Account\",\n          description: \"Sign up in seconds with your email or Google account. No credit card required to start exploring our platform and all its powerful features.\",\n          image: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n        },\n        {\n          id: \"step-2\",\n          step: 2,\n          title: \"Connect Your Data\",\n          description: \"Seamlessly integrate with your existing tools and services. We support over 50 popular platforms including Salesforce, HubSpot, and Slack.\",\n          image: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n        },\n        {\n          id: \"step-3\",\n          step: 3,\n          title: \"Customize Your Workflow\",\n          description: \"Tailor the platform to match your unique business processes. Use our drag-and-drop builder to create custom workflows without writing code.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n        },\n        {\n          id: \"step-4\",\n          step: 4,\n          title: \"Launch & Scale\",\n          description: \"Go live with confidence and grow your operations effortlessly. Our infrastructure automatically scales to meet your needs as you expand.\",\n          image: \"https://toastability-production.s3.amazonaws.com/4u3pi66nga47kc1th8tyqd3lpj28\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"Get Started Free\",\n          href: \"#signup\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Schedule Demo\",\n          href: \"#demo\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"steps":{"type":"array","description":"Array of step items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the step","required":true},"step":{"type":"number","description":"Step number","required":true},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"className":{"type":"string","description":"Additional CSS classes for the step","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"StepItem"},"typeLabel":"StepItem[]","required":false},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","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},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"subheadingClassName":{"type":"string","description":"Additional CSS classes for the subheading","required":false},"stepNavigationClassName":{"type":"string","description":"Additional CSS classes for the step navigation","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"imageClassName":{"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},"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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"How It Works","subheading":"Get started in minutes with our simple process","steps":[{"id":"step-1","step":1,"title":"Create Your Account","description":"Sign up in seconds with your email or Google account. No credit card required.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"id":"step-2","step":2,"title":"Connect Your Data","description":"Seamlessly integrate with your existing tools and services.","image":"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52"},{"id":"step-3","step":3,"title":"Launch & Scale","description":"Go live with confidence and grow your operations effortlessly.","image":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw"}],"actions":[{"label":"Get Started Free","href":"#signup","variant":"default","size":"lg"}]},"dependencies":["@opensite/ui"],"tags":["carousel","multi-step","onboarding","tutorial","walkthrough","features","process","steps","progressive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Supports 3–6 steps; the progress bar divides 100% by step count. The 'actions' prop renders on the last step in place of the 'Next' button. 'heading' and 'subheading' appear centered above the progress bar. Images display in aspect-video inside an animated container.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:11:02.628Z"}