{"success":true,"data":{"block":{"id":"carousel-icon-tabs","name":"Carousel Icon Tabs","title":"Carousel Icon Tabs","category":"Gallery","categorySlug":"gallery","description":"A carousel with icon-based tab navigation and animated indicator. Features icon tabs that sync with carousel slides, animated underline indicator, and slide counter. Ideal for feature showcases, product tours, or any content that benefits from categorized visual navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290119/3b914t38n1z6jol2gokq0y90j6g6/carousel-icon-tabs-desktop.png","mobile":"https://cdn.ing/assets/i/r/290118/57te7kp7yp4p5ykrwfkrx2p7iq65/carousel-icon-tabs-mobile.png"},"componentPath":"blocks/gallery/carousel-icon-tabs.tsx","code":"import { CarouselIconTabs } from \"@opensite/ui/blocks/gallery/carousel-icon-tabs\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselIconTabs\n      heading=\"Platform Features\"\n      badge=\"Enterprise Ready\"\n      sections={[\n        {\n          img: imagePlaceholders[70],\n          alt: \"Analytics Dashboard\",\n          title: \"Advanced Analytics\",\n          text: \"Comprehensive analytics dashboard with real-time data visualization, custom reports, and predictive insights. Track KPIs, user behavior, and business metrics in one unified platform.\",\n          icon: \"lucide/bar-chart-3\",\n        },\n        {\n          img: imagePlaceholders[71],\n          alt: \"Team Collaboration\",\n          title: \"Team Collaboration\",\n          text: \"Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.\",\n          icon: \"lucide/users\",\n        },\n        {\n          img: imagePlaceholders[72],\n          alt: \"API Integration\",\n          title: \"API Integration\",\n          text: \"Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.\",\n          icon: \"lucide/plug\",\n        },\n        {\n          img: imagePlaceholders[73],\n          alt: \"Automation Engine\",\n          title: \"Automation Engine\",\n          text: \"Powerful workflow automation with visual builder and pre-built templates. Automate repetitive tasks and create complex workflows without writing code.\",\n          icon: \"lucide/workflow\",\n        },\n        {\n          img: imagePlaceholders[74],\n          alt: \"Custom Reports\",\n          title: \"Custom Reports\",\n          text: \"Flexible reporting engine with drag-and-drop builder, scheduled exports, and white-label options. Create professional reports tailored to your specific needs.\",\n          icon: \"lucide/file-bar-chart\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={0.7}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"badge":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"sections":{"type":"array","description":"Array of tab sections to display","items":{"type":"object","description":"","fields":{"img":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":false},"title":{"type":"object","description":"Title of the tab","typeLabel":"React.ReactNode","required":true},"text":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":true},"icon":{"type":"string","description":"Icon name for DynamicIcon","required":true},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"CarouselIconTabItem"},"typeLabel":"CarouselIconTabItem[]","required":false},"sectionsSlot":{"type":"object","description":"Custom slot for rendering sections (overrides sections array)","typeLabel":"React.ReactNode","required":false},"headerSlot":{"type":"object","description":"Custom slot for rendering the header","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabClassName":{"type":"string","description":"Additional CSS classes for each tab","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","tabs","icons","navigation","features","animated","indicator"],"performance":{},"importantUsageNotes":"Provide 4-6 items in the 'sections' array for this icon-tabs carousel; the demo uses 5. Each item requires a real image ('img') from the media library and a valid Lucide icon name ('icon'). DO NOT USE this block unless you have at least 4 real images from the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:24.104Z"}