{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[11],\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: imagePlaceholders[34],\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: imagePlaceholders[59],\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: imagePlaceholders[86],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","multi-step","onboarding","tutorial","walkthrough","features","process","steps","progressive"],"performance":{},"importantUsageNotes":"Use exactly 3-5 steps in the 'steps' array — each step requires a real image URL via the 'image' field and a sequential 'step' number. DO NOT USE this block if you don't have at least 3 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Do not exceed 40 characters per step 'title' and 130 characters per step 'description'. 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:41:16.276Z"}