{"success":true,"data":{"block":{"id":"carousel-gradient-overlay","name":"Carousel Gradient Overlay","title":"Carousel Gradient Overlay","category":"Gallery","categorySlug":"gallery","description":"A carousel with gradient overlay cards and dot indicators. Features smooth transitions, gradient text overlays on images, and progress dot navigation. Ideal for hero sections, featured content, image galleries, or any visual content that needs elegant text overlays.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290127/934awqz852cz08pz362pjiu61xjs/carousel-gradient-overlay-desktop.png","mobile":"https://cdn.ing/assets/i/r/290126/hvs270yd69f6uv80opkcb6kjif3w/carousel-gradient-overlay-mobile.png"},"componentPath":"blocks/gallery/carousel-gradient-overlay.tsx","code":"import { CarouselGradientOverlay } from \"@opensite/ui/blocks/gallery/carousel-gradient-overlay\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselGradientOverlay\n      title=\"Latest Projects\"\n      description=\"Explore our portfolio of innovative solutions that have transformed businesses across industries.\"\n      items={[\n        {\n          id: \"1\",\n          title: \"Digital Transformation\",\n          description:\n            \"Complete digital overhaul for Fortune 500 company, modernizing legacy systems and implementing cloud-native architecture.\",\n          href: \"#\",\n          image: imagePlaceholders[40],\n          imageAlt: \"Digital transformation project\",\n        },\n        {\n          id: \"2\",\n          title: \"AI Customer Service\",\n          description:\n            \"Intelligent chatbot platform handling 10,000+ customer inquiries daily with 95% satisfaction rate and instant response times.\",\n          href: \"#\",\n          image: imagePlaceholders[41],\n          imageAlt: \"AI customer service interface\",\n        },\n        {\n          id: \"3\",\n          title: \"Supply Chain Optimization\",\n          description:\n            \"Real-time logistics platform reducing delivery times by 30% through predictive analytics and route optimization.\",\n          href: \"#\",\n          image: imagePlaceholders[42],\n          imageAlt: \"Supply chain dashboard\",\n        },\n        {\n          id: \"4\",\n          title: \"Mobile Banking App\",\n          description:\n            \"Award-winning mobile application with 2M+ active users, featuring biometric authentication and instant transfers.\",\n          href: \"#\",\n          image: imagePlaceholders[43],\n          imageAlt: \"Mobile banking interface\",\n        },\n        {\n          id: \"5\",\n          title: \"IoT Smart Factory\",\n          description:\n            \"Connected manufacturing platform monitoring 500+ devices in real-time, improving efficiency by 45%.\",\n          href: \"#\",\n          image: imagePlaceholders[44],\n          imageAlt: \"IoT factory monitoring\",\n        },\n      ]}\n      readMoreText=\"View project\"\n      background=\"gray\"\n      spacing=\"py-6 md:py-40\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below title","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of card items to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the item","required":true},"title":{"type":"object","description":"Title of the card","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Link URL for the card","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false}},"typeLabel":"CarouselGradientOverlayItem"},"typeLabel":"CarouselGradientOverlayItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for the \"Read more\" link","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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","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},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"gradientClassName":{"type":"string","description":"Additional CSS classes for the gradient overlay","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the indicators","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","gradient","overlay","dots","hero","featured","images"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'items' array for this gradient-overlay carousel; the demo uses 5. Each item requires a real image from the media library. 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:39:00.281Z"}