{"success":true,"data":{"block":{"id":"carousel-gradient-text","name":"Carousel Gradient Text","title":"Carousel Gradient Text","category":"Gallery","categorySlug":"gallery","description":"A carousel with gradient overlay text and expanding pill indicators. Features a two-column layout with animated pill indicators that expand on active state. Ideal for portfolio showcases, project galleries, or any visual content with elegant text overlays.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290113/0b6nepz32nfdirj2qg1r2p3vuisn/carousel-gradient-text-desktop.png","mobile":"https://cdn.ing/assets/i/r/290112/dti9monf2qivr4red7fh7x58ut4o/carousel-gradient-text-mobile.png"},"componentPath":"blocks/gallery/carousel-gradient-text.tsx","code":"import { CarouselGradientText } from \"@opensite/ui/blocks/gallery/carousel-gradient-text\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselGradientText\n      heading=\"Our Work\"\n      subheading=\"Portfolio\"\n      tagline=\"Innovative solutions that drive results\"\n      items={[\n        {\n          image: imagePlaceholders[50],\n          imageAlt: \"Project showcase 1\",\n          title: \"Enterprise SaaS Platform\",\n          href: \"#\",\n          description:\n            \"Scalable multi-tenant platform serving 100,000+ users with 99.99% uptime and enterprise-grade security.\",\n        },\n        {\n          image: imagePlaceholders[51],\n          imageAlt: \"Project showcase 2\",\n          title: \"E-commerce Marketplace\",\n          href: \"#\",\n          description:\n            \"High-performance marketplace processing $50M+ in annual transactions with real-time inventory management.\",\n        },\n        {\n          image: imagePlaceholders[52],\n          imageAlt: \"Project showcase 3\",\n          title: \"Healthcare Portal\",\n          href: \"#\",\n          description:\n            \"HIPAA-compliant patient portal enabling secure communication and appointment scheduling for 200+ clinics.\",\n        },\n        {\n          image: imagePlaceholders[53],\n          imageAlt: \"Project showcase 4\",\n          title: \"Fintech Dashboard\",\n          href: \"#\",\n          description:\n            \"Real-time financial analytics platform with customizable widgets and advanced reporting capabilities.\",\n        },\n        {\n          image: imagePlaceholders[54],\n          imageAlt: \"Project showcase 5\",\n          title: \"Education LMS\",\n          href: \"#\",\n          description:\n            \"Comprehensive learning management system supporting 50,000+ students with interactive content and assessments.\",\n        },\n        {\n          image: imagePlaceholders[15],\n          imageAlt: \"Project showcase 1\",\n          title: \"Enterprise SaaS Platform\",\n          href: \"#\",\n          description:\n            \"Scalable multi-tenant platform serving 100,000+ users with 99.99% uptime and enterprise-grade security.\",\n        },\n        {\n          image: imagePlaceholders[16],\n          imageAlt: \"Project showcase 2\",\n          title: \"E-commerce Marketplace\",\n          href: \"#\",\n          description:\n            \"High-performance marketplace processing $50M+ in annual transactions with real-time inventory management.\",\n        },\n        {\n          image: imagePlaceholders[17],\n          imageAlt: \"Project showcase 3\",\n          title: \"Healthcare Portal\",\n          href: \"#\",\n          description:\n            \"HIPAA-compliant patient portal enabling secure communication and appointment scheduling for 200+ clinics.\",\n        },\n        {\n          image: imagePlaceholders[18],\n          imageAlt: \"Project showcase 4\",\n          title: \"Fintech Dashboard\",\n          href: \"#\",\n          description:\n            \"Real-time financial analytics platform with customizable widgets and advanced reporting capabilities.\",\n        },\n        {\n          image: imagePlaceholders[19],\n          imageAlt: \"Project showcase 5\",\n          title: \"Education LMS\",\n          href: \"#\",\n          description:\n            \"Comprehensive learning management system supporting 50,000+ students with interactive content and assessments.\",\n        },\n      ]}\n      background=\"dark\"\n      spacing=\"py-6 md:py-40\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading content (displayed with reduced opacity)","typeLabel":"React.ReactNode","required":false},"tagline":{"type":"object","description":"Tagline text below heading","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of card items to display","items":{"type":"object","description":"","fields":{"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"title":{"type":"object","description":"Title of the card","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"href":{"type":"string","description":"href for the card","required":false}},"typeLabel":"CarouselGradientTextItem"},"typeLabel":"CarouselGradientTextItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","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},"subheadingClassName":{"type":"string","description":"Additional CSS classes for the subheading","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","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","text","pills","indicators","portfolio","animated"],"performance":{},"importantUsageNotes":"Provide 6-10 items in the 'items' array for this gradient-text carousel; the demo uses 10 (5 originals + 5 duplicates for visual continuity). Each item requires a real image from the media library. DO NOT USE this block unless you have at least 5 real images from the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:41.445Z"}