{"success":true,"data":{"block":{"id":"carousel-demo-link","name":"Carousel Demo Link","title":"Carousel Demo Link","category":"Gallery","categorySlug":"gallery","description":"A carousel with a prominent demo link in the header section. Features navigation buttons, external demo link, and cards with images and descriptions. Ideal for product demos, feature showcases, or any content where you want to drive users to a live demo or external resource.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290125/jeqc5l75nl1ixofhqa3rm0wxuah3/carousel-demo-link-desktop.png","mobile":"https://cdn.ing/assets/i/r/290124/069z1pi3yo5q5jcjqmlsrcakqbvq/carousel-demo-link-mobile.png"},"componentPath":"blocks/gallery/carousel-demo-link.tsx","code":"import { CarouselDemoLink } from \"@opensite/ui/blocks/gallery/carousel-demo-link\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselDemoLink\n      heading=\"Our Platform Solutions\"\n      demoAction={{\n        label: \"Book a demo\",\n        href: \"https://calendly.com/demo\",\n      }}\n      items={[\n        {\n          id: \"1\",\n          title: \"AI-Powered Analytics\",\n          summary:\n            \"Transform your data into actionable insights with our advanced machine learning platform. Real-time processing and predictive analytics.\",\n          url: \"/solutions/analytics\",\n          image: imagePlaceholders[30],\n          imageAlt: \"Analytics platform interface\",\n        },\n        {\n          id: \"2\",\n          title: \"Cloud Infrastructure\",\n          summary:\n            \"Scalable, secure, and reliable cloud infrastructure designed for enterprise workloads. Auto-scaling and 99.99% uptime SLA.\",\n          url: \"/solutions/cloud\",\n          image: imagePlaceholders[31],\n          imageAlt: \"Cloud infrastructure dashboard\",\n        },\n        {\n          id: \"3\",\n          title: \"Security Suite\",\n          summary:\n            \"Comprehensive security platform with real-time threat detection, compliance management, and zero-trust architecture.\",\n          url: \"/solutions/security\",\n          image: imagePlaceholders[32],\n          imageAlt: \"Security monitoring dashboard\",\n        },\n        {\n          id: \"4\",\n          title: \"Data Integration\",\n          summary:\n            \"Seamlessly connect all your data sources with our universal integration platform. Support for 200+ enterprise applications.\",\n          url: \"/solutions/integration\",\n          image: imagePlaceholders[33],\n          imageAlt: \"Data integration workflow\",\n        },\n        {\n          id: \"5\",\n          title: \"Business Intelligence\",\n          summary:\n            \"Interactive dashboards and real-time reporting tools that empower data-driven decision making across your organization.\",\n          url: \"/solutions/bi\",\n          image: imagePlaceholders[34],\n          imageAlt: \"Business intelligence dashboard\",\n        },\n      ]}\n      readMoreText=\"Learn more\"\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"p6\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"demoAction":{"type":"object","description":"Demo action configuration","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","required":false},"demoActionSlot":{"type":"object","description":"Custom slot for rendering the demo action (overrides demoAction prop)","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},"summary":{"type":"object","description":"Summary/description text","typeLabel":"React.ReactNode","required":true},"url":{"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":"CarouselDemoLinkItem"},"typeLabel":"CarouselDemoLinkItem[]","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"demoLinkClassName":{"type":"string","description":"Additional CSS classes for the demo link","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},"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","demo","link","cta","products","features","external"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'items' array for this 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. The 'demoAction' should link to a real booking or demo URL from the site's data; do not invent a URL. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:28.746Z"}