{"success":true,"data":{"block":{"id":"carousel-scrolling-feature-showcase","name":"Carousel Scrolling Feature Showcase","title":"Carousel Scrolling Feature Showcase","category":"Carousel","categorySlug":"carousel","description":"A scroll-driven feature showcase with a sticky image panel that updates as users scroll through feature descriptions. Features smooth transitions between feature images with intersection observer-based activation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293096/hhfm0ixjnvh1pguce3ar6xaj2zqt/cleanshot-2026-03-03-at-14-20-19.png","mobile":"https://cdn.ing/assets/i/r/293095/d4d2j42mce7dqlza0o6gdfufaore/cleanshot-2026-03-03-at-14-20-39.png"},"componentPath":"blocks/carousel/carousel-scrolling-feature-showcase.tsx","code":"import { CarouselScrollingFeatureShowcase } from \"@opensite/ui/blocks/carousel/carousel-scrolling-feature-showcase\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselScrollingFeatureShowcase\n      heading=\"Revolutionary Features\"\n      subheading=\"Everything you need to transform your business operations\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n      features={[\n        {\n          id: \"ai-assistant\",\n          title: \"AI-Powered Virtual Assistant\",\n          description:\n            \"Meet your new intelligent helper that understands context, learns from interactions, and provides personalized recommendations. Available 24/7 to answer questions, automate tasks, and boost your productivity by up to 40%. Uses advanced natural language processing to understand even complex queries and deliver accurate responses in milliseconds.\",\n          image: imagePlaceholders[20],\n        },\n        {\n          id: \"real-time-sync\",\n          title: \"Real-Time Data Synchronization\",\n          description:\n            \"Stay perfectly in sync across all your devices and team members. Changes appear instantly for everyone, eliminating version conflicts and ensuring your team always works with the most current information. Our conflict resolution algorithms handle simultaneous edits gracefully, and offline mode lets you work anywhere.\",\n          image: imagePlaceholders[43],\n        },\n        {\n          id: \"custom-workflows\",\n          title: \"No-Code Workflow Builder\",\n          description:\n            \"Design sophisticated business processes without writing a single line of code. Our visual workflow builder features drag-and-drop simplicity with powerful logic capabilities including conditional branching, loops, and external API calls. Includes 200+ pre-built templates to get you started instantly.\",\n          image: imagePlaceholders[60],\n        },\n        {\n          id: \"advanced-permissions\",\n          title: \"Granular Access Control\",\n          description:\n            \"Define precisely who can see and do what with field-level permissions, role-based access control, and conditional visibility rules. Create custom roles, set up approval workflows, and maintain detailed audit logs of all access and changes. Perfect for enterprises with complex compliance requirements.\",\n          image: imagePlaceholders[77],\n        },\n        {\n          id: \"predictive-insights\",\n          title: \"Predictive Analytics Engine\",\n          description:\n            \"Harness the power of machine learning to forecast trends, identify opportunities, and prevent problems before they happen. Our ML models analyze historical patterns and external factors to deliver actionable insights with confidence scores. Customize predictions based on your unique business metrics.\",\n          image: imagePlaceholders[95],\n        },\n        {\n          id: \"white-label\",\n          title: \"Complete White Labeling\",\n          description:\n            \"Make the platform truly yours with comprehensive branding options. Customize logos, colors, domain names, email templates, and even terminology to match your brand identity perfectly. Your clients will never know you're using a third-party platform.\",\n          image: imagePlaceholders[110],\n        },\n      ]}\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 feature items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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 sticky image panel","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the feature descriptions area","required":false},"numberBadgeClassName":{"type":"string","description":"Additional CSS classes for the feature number badge","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","scroll","features","sticky","storytelling","documentation","marketing","synchronized","intersection-observer"],"performance":{},"importantUsageNotes":"Use 4-8 features in the 'features' array — this is a scroll-driven sticky-image showcase where each feature requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 4 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Feature 'description' fields can be longer (up to 250 characters) as each feature description is the focal text content during scroll. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:10.377Z"}