{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[25],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[25],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[26],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[27],\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: imagePlaceholders[48],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[48],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[49],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[50],\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: imagePlaceholders[64],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[64],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[65],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[68],\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: imagePlaceholders[81],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[81],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[83],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[85],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","product","features","ecommerce","variants","showcase","interactive","split-layout","saas"],"performance":{},"importantUsageNotes":"Use 3-6 features in the 'features' array — each feature requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 3 valid real product images. Each feature's optional 'colors' array represents real product color variants; only include 'colors' if the product genuinely has color options — do not fabricate color variants. Do not exceed 60 characters for the 'heading' prop, 130 characters for the 'subheading' prop, 40 characters per feature 'title', and 140 characters per feature '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:42:28.503Z"}