{"success":true,"data":{"block":{"id":"carousel-product-feature-showcase","name":"Carousel Product Feature Showcase","title":"Carousel Product Feature Showcase","category":"Carousel","categorySlug":"carousel","description":"An interactive product feature carousel with mobile-responsive design, color variant selectors, and animated transitions. Features a split layout with product imagery on one side and feature descriptions with navigation on the other.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295063/5rfjcmqvkqlu1vckzekiiw19uix5/carousel-product-feature-showcase-desktop.png","mobile":"https://cdn.ing/assets/i/r/295064/2g1r6fsoy0lszkyf0rgmqyzqrk9o/carousel-product-feature-showcase-mobile.png"},"componentPath":"blocks/carousel/carousel-product-feature-showcase.tsx","code":"import { CarouselProductFeatureShowcase } from \"@opensite/ui/blocks/carousel/carousel-product-feature-showcase\";\n\nexport default function Demo() {\n  return (\n    <CarouselProductFeatureShowcase\n      heading=\"Premium Wireless Headphones\"\n      subheading=\"Studio-quality sound meets cutting-edge technology\"\n      features={[\n        {\n          id: \"noise-cancellation\",\n          title: \"Active Noise Cancellation\",\n          description:\n            \"Industry-leading ANC technology blocks out ambient noise for an immersive listening experience. Enjoy your music, podcasts, or calls without distractions, whether you're on a plane, train, or busy city street.\",\n          image: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z\",\n            },\n          ],\n        },\n        {\n          id: \"battery-life\",\n          title: \"40-Hour Battery Life\",\n          description:\n            \"Power through your entire week with up to 40 hours of continuous playback. Fast charging gives you 5 hours of playback with just 10 minutes of charging via USB-C.\",\n          image: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo\",\n            },\n          ],\n        },\n        {\n          id: \"comfort\",\n          title: \"Premium Comfort Design\",\n          description:\n            \"Memory foam ear cushions wrapped in premium protein leather provide all-day comfort. The adjustable headband ensures a perfect fit for extended listening sessions without fatigue.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n            },\n          ],\n        },\n        {\n          id: \"connectivity\",\n          title: \"Multipoint Bluetooth 5.3\",\n          description:\n            \"Connect to two devices simultaneously and seamlessly switch between them. Latest Bluetooth 5.3 technology ensures stable connection up to 30 feet with minimal latency.\",\n          image: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\n            },\n          ],\n        },\n      ]}\n      actions={[\n        {\n          label: \"Buy Now - $349\",\n          href: \"#purchase\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Learn More\",\n          href: \"#details\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n      spacing=\"hero\"\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},"features":{"type":"array","description":"Array of product features","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the feature","required":true},"title":{"type":"object","description":"Feature title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"colors":{"type":"array","description":"Color variants for the product","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Color variant name","required":true},"value":{"type":"string","description":"Color value (hex, rgb, etc.)","required":true},"image":{"type":"string","description":"Optional image for this color variant","required":false}},"typeLabel":"ProductColorVariant"},"typeLabel":"ProductColorVariant[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the feature","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ProductFeature"},"typeLabel":"ProductFeature[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation arrows","required":false},"colorSelectorClassName":{"type":"string","description":"Additional CSS classes for the color selectors","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the dot 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":{"heading":"Premium Wireless Headphones","subheading":"Studio-quality sound meets cutting-edge technology","background":"gray","spacing":"hero","features":[{"id":"noise-cancellation","title":"Active Noise Cancellation","description":"Industry-leading ANC technology blocks out ambient noise for an immersive listening experience.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","colors":[{"name":"Midnight Black","value":"#1a1a1a","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"name":"Silver Mist","value":"#c0c0c0","image":"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl"}]},{"id":"battery-life","title":"40-Hour Battery Life","description":"Power through your entire week with up to 40 hours of continuous playback.","image":"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq"}],"actions":[{"label":"Buy Now","href":"#purchase","variant":"default","size":"lg"},{"label":"Learn More","href":"#details","variant":"outline","size":"lg"}]},"dependencies":["@opensite/ui"],"tags":["carousel","product","features","ecommerce","variants","showcase","interactive","split-layout","saas"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ProductFeature requires 'id' and 'image' absolute URL. Supports 2–6 features; too many features crowds the dot indicators. 'colors' is optional; each ProductColorVariant can include an optional 'image' to swap the display image. Color 'value' accepts any CSS color string (hex, rgb, named). Image section uses aspect-square on mobile and aspect-4/3 on desktop. 'actions' are shared across all features and render on each feature's detail panel. Default spacing is 'hero'; default background is neutral.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:16:13.841Z"}