{"success":true,"data":{"block":{"id":"carousel-image-hero","name":"Carousel Image Hero","title":"Carousel Image Hero","category":"Carousel","categorySlug":"carousel","description":"A full-width hero section with an auto-advancing background image carousel, overlay content with headline, description, and call-to-action button. Includes navigation arrows and dot indicators for manual slide control.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308427/cib1y3kxw4nb1avnux3uzytiu92y/carousel-image-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308428/ht9tkb79mneseytfff9tuhh9jcjl/carousel-image-hero-mobile.jpg"},"componentPath":"blocks/carousel/carousel-image-hero.tsx","code":"import { CarouselImageHero } from \"@opensite/ui/blocks/carousel/carousel-image-hero\";\n\nexport default function Demo() {\n  return (\n    <CarouselImageHero\n      badge=\"New Product Launch\"\n      heading=\"Innovation That Changes Everything\"\n      description=\"Experience the next generation of technology designed to empower your business and elevate your customer experience to unprecedented heights.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"View Services\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\",\n          alt: \"Seamless integration ecosystem\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          alt: \"Advanced AI-powered workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\",\n          alt: \"Collaborative team environment\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\n          alt: \"Real-time data visualization\",\n        },\n      ]}\n      autoPlayInterval={5500}\n      pattern=\"diagonalCrossFadeCenter\"\n      patternOpacity={0.8}\n      background=\"dark\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/eyebrow content above heading","typeLabel":"React.ReactNode","required":false},"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},"images":{"type":"array","description":"Array of image items for the carousel","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem"},"typeLabel":"ImageItem[]","required":false},"autoPlayInterval":{"type":"number","description":"Auto-play interval in milliseconds","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the indicators","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":{"badge":"New Product Launch","heading":"Innovation That Changes Everything","description":"Experience the next generation of technology designed to empower your business.","background":"dark","spacing":"hero","autoPlayInterval":5500,"actions":[{"label":"Start Free Trial","href":"#","variant":"default","size":"lg"},{"label":"View Services","href":"#","variant":"outline","size":"lg"}],"images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Seamless integration ecosystem"},{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Advanced AI-powered workspace"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Collaborative team environment"}]},"dependencies":["@opensite/ui"],"tags":["carousel","hero","fullwidth","background","landing","cta","portfolio","marketing","auto-advance"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ImageItem in 'images' requires a 'src' absolute URL and 'alt' text. Supports 2–6 images for meaningful rotation. 'autoPlayInterval' is in milliseconds (default 7500). Badge renders above the heading using the Badge component. 'actions' renders CTA buttons centered below the description. Text is rendered white with text-shadow when images are present for readability. The component uses min-h-screen on mobile and min-h-[600px] on desktop.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:05:34.722Z"}