{"success":true,"data":{"block":{"id":"hero-tech-carousel","name":"Multi-Panel Hero","title":"Hero Multi-Panel Carousel","category":"Hero","categorySlug":"hero","description":"A full-bleed hero with up to four side-by-side panels on desktop that stack vertically on mobile. Each panel supports an optional logo, title, content, action buttons, and an optional background image or autoplaying image carousel.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306986/zo59nnooemltqmy2w5e9ik7urebv/hero-tech-carousel-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306987/vcz6x2ilfnx4y4h5vy734nhgb4z8/hero-tech-carousel-mobile.jpg"},"componentPath":"blocks/hero/hero-tech-carousel.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroTechCarousel } from \"@opensite/ui/blocks/hero/hero-tech-carousel\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroTechCarousel\n      spacing=\"mt-8 md:mt-0\"\n      items={[\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[0],\n            alt: \"InsuranceSite\",\n          },\n          title: \"InsuranceSite\",\n          content:\n            \"Modern broker tooling that helps independent agents close policies faster.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[0], alt: \"\" },\n            { src: imagePlaceholders[5], alt: \"\" },\n            { src: imagePlaceholders[10], alt: \"\" },\n          ],\n        },\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[1],\n            alt: \"RealtorSite\",\n          },\n          title: \"RealtorSite\",\n          content:\n            \"Built for high-volume listing agents who want a beautiful site without the busywork.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[74], alt: \"\" },\n            { src: imagePlaceholders[52], alt: \"\" },\n            { src: imagePlaceholders[110], alt: \"\" },\n          ],\n        },\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[2],\n            alt: \"CastKit\",\n          },\n          title: \"CastKit\",\n          content:\n            \"AI-powered podcast production from raw recording to publish-ready episode.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[88], alt: \"\" },\n            { src: imagePlaceholders[99], alt: \"\" },\n            { src: imagePlaceholders[130], alt: \"\" },\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"items":{"type":"array","description":"Panels rendered side-by-side on desktop and stacked on mobile.\nCapped at  (4) — additional entries are ignored.","items":{"type":"object","description":"","fields":{"logo":{"type":"object","description":"Optional logo rendered above the title.\nFollows the standard  prop shape used across blocks.\nDefault styling applies `object-contain` so SVG/PNG logos preserve aspect ratio.","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo (overrides the  prop).","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Optional panel title.","typeLabel":"React.ReactNode | string","required":false},"content":{"type":"object","description":"Optional supporting content rendered below the title.","typeLabel":"React.ReactNode | string","required":false},"actions":{"type":"array","description":"Optional action buttons / links rendered at the bottom of the panel.","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},"backgroundMedia":{"type":"array","description":"Optional background media for the panel.\n\n- `0` items → no background, panel renders on the section background.\n- `1` item  → static background image.\n- `2+` items → autoplaying image carousel via .","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":false},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"Optional per-image OptixFlow 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}},"typeLabel":"ImageSliderImage"},"typeLabel":"ImageSliderImage[]","required":false},"backgroundAutoplayIntervalMs":{"type":"number","description":"Autoplay interval (ms) for this panel's background carousel.\nFalls back to the block-level `backgroundAutoplayIntervalMs` when omitted.","required":false},"id":{"type":"string","description":"Optional id for the panel element (for anchor links / analytics).","required":false},"className":{"type":"string","description":"Additional CSS classes for this panel's outer wrapper.","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the panel's content layer (above the background).","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the panel's logo element.","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the panel's title element.","required":false},"textClassName":{"type":"string","description":"Additional CSS classes for the panel's content paragraph.","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the panel's actions wrapper.","required":false},"overlayClassName":{"type":"string","description":"Additional CSS classes applied to the panel's background overlay.\nUseful for tuning legibility per-panel (e.g. `bg-black/60`).","required":false},"optixFlowConfig":{"type":"object","description":"Per-panel OptixFlow override. Falls back to the block-level config.","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}},"typeLabel":"HeroPanelItem"},"typeLabel":"HeroPanelItem[]","required":false},"backgroundAutoplayIntervalMs":{"type":"number","description":"Default autoplay interval (ms) used when a panel has 2+ background media\nitems and does not specify its own `backgroundAutoplayIntervalMs`.","required":false},"background":{"type":"string","description":"Background style for the section.","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section. Defaults to `none` so panels can fill\nthe full viewport on desktop without padding.","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name applied to the section.","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1).","required":false},"className":{"type":"string","description":"Additional CSS classes for the section.","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the section container.","required":false},"panelsClassName":{"type":"string","description":"Additional CSS classes for the panels wrapper (the flex/grid track).","required":false},"panelContentClassName":{"type":"string","description":"Default classes shared by every panel content layer (title/content/actions).\nPer-panel `contentClassName` is appended after this.","required":false},"optixFlowConfig":{"type":"object","description":"Block-level OptixFlow image optimization configuration. Applies to all\npanels unless a panel provides its own `optixFlowConfig`.","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","multi-panel","split","full-bleed","fullscreen","background-image","image-carousel","brands","showcase","cta"],"performance":{},"importantUsageNotes":"Full-bleed multi-panel hero. Pass 1-4 'items' (capped at 4); each item supports an optional logo (LogoItem with object-contain default), title, content, and ActionConfig[] actions. Each item can also take an optional 'backgroundMedia' array of ImageSliderImage entries — 0 = no background, 1 = static cover image, 2+ = autoplaying image carousel. On desktop the panels share a 100vw x 100dvh row equally; on mobile they stack vertically with a content-fit height. Best for showcasing a portfolio of products, sub-brands, audiences, or service tiers in a single immersive hero."}},"timestamp":"2026-05-13T10:39:47.733Z"}