{"success":true,"data":{"category":{"slug":"gallery","name":"Gallery","description":"Collection of gallery components"},"blocks":[{"id":"expandable-case-study-cards","name":"Expandable Case Study Cards","title":"Expandable Case Study Cards","category":"Gallery","categorySlug":"gallery","description":"A gallery of expandable case study cards with hover effects. Each card expands on hover to reveal additional details including title, description, and badge. Features smooth width transitions and gradient overlays. Ideal for portfolios, case studies, project showcases, and work samples where you want to highlight multiple items with progressive disclosure.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290131/f9fr56cjd09bl4ouj1euhsm7opxm/expandable-case-study-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290130/uolv3hf3cbfmfgzzklrx1000t8nd/expandable-case-study-cards-mobile.png"},"componentPath":"blocks/gallery/expandable-case-study-cards.tsx","code":"import { ExpandableCaseStudyCards } from \"@opensite/ui/blocks/gallery/expandable-case-study-cards\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ExpandableCaseStudyCards\n      title=\"Explore Our Case Studies\"\n      description=\"Discover our solutions\"\n      items={[\n        {\n          id: \"1\",\n          title: \"Global E-commerce Transformation\",\n          href: \"#\",\n          image: imagePlaceholders[110],\n          imageAlt: \"E-commerce platform\",\n          logo: brandLogoPlaceholders.black[0],\n          logoAlt: \"TechCorp logo\",\n          company: \"TechCorp\",\n          description:\n            \"Revolutionizing online retail with a scalable, AI-driven platform that enhanced user experience and boosted sales by 50%.\",\n          badges: [\"E-commerce\", \"Cloud\", \"AI\"],\n        },\n        {\n          id: \"2\",\n          title: \"Healthcare Data Platform\",\n          href: \"#\",\n          image: imagePlaceholders[111],\n          imageAlt: \"Healthcare platform\",\n          logo: brandLogoPlaceholders.black[1],\n          logoAlt: \"MediSync logo\",\n          company: \"MediSync\",\n          description:\n            \"Integrating patient data across multiple systems to provide real-time insights, improving care quality and operational efficiency.\",\n          badges: [\"Healthcare\", \"HIPAA\", \"Integration\"],\n        },\n        {\n          id: \"3\",\n          title: \"Financial Services Modernization\",\n          href: \"#\",\n          image: imagePlaceholders[112],\n          imageAlt: \"Financial platform\",\n          logo: brandLogoPlaceholders.black[2],\n          logoAlt: \"FinanceFlow logo\",\n          company: \"FinanceFlow\",\n          description:\n            \"Implementing a secure, compliant fintech platform that streamlined transactions and enhanced user trust, resulting in a 30% increase in customer retention.\",\n          badges: [\"Fintech\", \"Security\", \"Compliance\"],\n        },\n        {\n          id: \"4\",\n          title: \"Manufacturing IoT Solution\",\n          href: \"#\",\n          image: imagePlaceholders[113],\n          imageAlt: \"IoT platform\",\n          logo: brandLogoPlaceholders.black[3],\n          logoAlt: \"IndustrialTech logo\",\n          company: \"IndustrialTech\",\n          description:\n            \"Deploying an IoT-enabled manufacturing platform that optimized production processes, reduced downtime by 25%, and improved overall equipment effectiveness.\",\n          badges: [\"IoT\", \"Manufacturing\", \"Real-time\"],\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.25}\n      spacing=\"py-12 md:py-40\"\n    />\n  );\n}","propsSchema":{"title":{"type":"string","description":"Section title (displayed above cards)","required":false},"description":{"type":"string","description":"Section description/subtitle (displayed above cards)","required":false},"items":{"type":"array","description":"Array of case study 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 case study","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Optional description for the case study","typeLabel":"React.ReactNode","required":false},"href":{"type":"string","description":"Link URL for the case study","required":true},"image":{"type":"string","description":"Background image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the background image","required":false},"logo":{"type":"string","description":"Company logo source URL (optional)","required":false},"logoAlt":{"type":"string","description":"Alt text for the logo","required":false},"company":{"type":"string","description":"Company name","required":false},"badges":{"type":"array","description":"Array of badge labels","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"ExpandableCaseStudyItem"},"typeLabel":"ExpandableCaseStudyItem[]","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the cards container","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},"logoClassName":{"type":"string","description":"Additional CSS classes for each logo","required":false},"badgesClassName":{"type":"string","description":"Additional CSS classes for the badges container","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","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","case-study","portfolio","expandable","hover","cards","projects","work","showcase"],"performance":{},"importantUsageNotes":"Provide exactly 4 items in the 'items' array since the expandable layout is designed for a 4-card row. Each item requires a real image ('image') from the media library; optionally supply a real company logo ('logo') from the media library — do not invent logo URLs. 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."},{"id":"carousel-badge-cards","name":"Carousel Badge Cards","title":"Carousel Badge Cards","category":"Gallery","categorySlug":"gallery","description":"A carousel gallery with badge labels and descriptions on each card. Features navigation buttons, smooth transitions, and cards with category badges. Ideal for product showcases, feature highlights, blog posts, or any content that benefits from categorization and horizontal browsing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290129/xljicunqunevhtf5jtkiur0exwfa/carousel-badge-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290128/4lenpq7hjsduc9caq31dsha8b0iy/carousel-badge-cards-mobile.png"},"componentPath":"blocks/gallery/carousel-badge-cards.tsx","code":"import { CarouselBadgeCards } from \"@opensite/ui/blocks/gallery/carousel-badge-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselBadgeCards\n      heading=\"Featured Case Studies\"\n      items={[\n        {\n          id: \"1\",\n          title: \"AI-Powered Analytics Platform\",\n          description:\n            \"Transforming raw data into actionable business intelligence through advanced machine learning algorithms and predictive analytics.\",\n          label: \"Analytics\",\n          href: \"#\",\n          image: imagePlaceholders[20],\n          imageAlt: \"Analytics dashboard interface\",\n        },\n        {\n          id: \"2\",\n          title: \"Enterprise Cloud Migration\",\n          description:\n            \"Seamless transition of legacy infrastructure to modern cloud architecture, reducing costs by 40% while improving performance.\",\n          label: \"Cloud\",\n          href: \"#\",\n          image: imagePlaceholders[21],\n          imageAlt: \"Cloud infrastructure visualization\",\n        },\n        {\n          id: \"3\",\n          title: \"E-commerce Personalization Engine\",\n          description:\n            \"Dynamic product recommendations powered by AI, increasing conversion rates by 35% and customer satisfaction scores.\",\n          label: \"E-commerce\",\n          href: \"#\",\n          image: imagePlaceholders[22],\n          imageAlt: \"E-commerce platform\",\n        },\n        {\n          id: \"4\",\n          title: \"Healthcare Data Integration\",\n          description:\n            \"Unified patient data platform enabling real-time insights and improving care coordination across multiple facilities.\",\n          label: \"Healthcare\",\n          href: \"#\",\n          image: imagePlaceholders[23],\n          imageAlt: \"Healthcare technology\",\n        },\n        {\n          id: \"5\",\n          title: \"Financial Risk Management\",\n          description:\n            \"Real-time fraud detection system processing millions of transactions daily with 99.9% accuracy.\",\n          label: \"Finance\",\n          href: \"#\",\n          image: imagePlaceholders[24],\n          imageAlt: \"Financial dashboard\",\n        },\n      ]}\n      readMoreText=\"Read more\"\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","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},"label":{"type":"object","description":"Badge label 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":"CarouselBadgeCardItem"},"typeLabel":"CarouselBadgeCardItem[]","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},"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},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","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","badges","cards","navigation","products","features","categories"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'items' array for this badge-card 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."},{"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."},{"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."},{"id":"auto-scroll-carousel","name":"Auto Scroll Carousel","title":"Auto Scroll Carousel","category":"Gallery","categorySlug":"gallery","description":"A continuously auto-scrolling carousel with staggered image layout. Features automatic scrolling using embla-carousel-auto-scroll, alternating vertical offsets for visual interest, and smooth infinite loop. Ideal for client logos, partner showcases, image galleries, or any content that benefits from passive browsing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290123/0fkyuodn2zjfbbv13b91ulbxlku5/auto-scroll-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290122/20tfw533htj7vmlsib4s5p3uuceb/auto-scroll-carousel-mobile.png"},"componentPath":"blocks/gallery/auto-scroll-carousel.tsx","code":"import { AutoScrollCarousel } from \"@opensite/ui/blocks/gallery/auto-scroll-carousel\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AutoScrollCarousel\n      heading=\"Bringing your data to life with AI\"\n      description=\"Our team of data scientists and AI engineers transform complex datasets into actionable insights that drive business growth and innovation.\"\n      action={{\n        label: \"Explore our solutions\",\n        href: \"#\",\n      }}\n      images={[\n        { src: imagePlaceholders[0], alt: \"Team collaboration\" },\n        { src: imagePlaceholders[1], alt: \"Data analytics dashboard\" },\n        { src: imagePlaceholders[2], alt: \"AI model training\" },\n        { src: imagePlaceholders[3], alt: \"Research and development\" },\n        { src: imagePlaceholders[4], alt: \"Innovation workshop\" },\n        { src: imagePlaceholders[5], alt: \"Technology showcase\" },\n        { src: imagePlaceholders[6], alt: \"Product demonstration\" },\n        { src: imagePlaceholders[7], alt: \"Client presentation\" },\n        { src: imagePlaceholders[8], alt: \"Team meeting\" },\n        { src: imagePlaceholders[9], alt: \"Office environment\" },\n        { src: imagePlaceholders[10], alt: \"Creative workspace\" },\n        { src: imagePlaceholders[11], alt: \"Team collaboration\" },\n      ]}\n      autoScrollSpeed={0.5}\n      background=\"gray\"\n      spacing=\"pt-6 pb-20 md:pt-32 md:pb-32\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Link/action configuration for the CTA","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},"actionSlot":{"type":"object","description":"Custom slot for rendering the action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Array of images to display in the carousel","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"AutoScrollCarouselImage"},"typeLabel":"AutoScrollCarouselImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"autoScrollSpeed":{"type":"number","description":"Auto-scroll speed","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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionClassName":{"type":"string","description":"Additional CSS classes for the action link","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},"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","auto-scroll","infinite","logos","partners","clients","staggered"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 8 real images from the site's media library; the demo uses 12 images for a smooth auto-scroll loop. Provide 8-12 items in the 'images' array. All image 'src' values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."},{"id":"carousel-sidebar-resources","name":"Carousel Sidebar Resources","title":"Carousel Sidebar Resources","category":"Gallery","categorySlug":"gallery","description":"A carousel with a sidebar resource list in a three-column layout. Features categorized resource links alongside image carousel. Ideal for documentation, resource libraries, learning platforms, or any content that combines visual browsing with organized link navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290121/t8xashbpevmkab41hs8k7zwh3ao3/carousel-sidebar-resources-desktop.png","mobile":"https://cdn.ing/assets/i/r/290120/tb17g28rqy2fqb3j3bm70wen5q05/carousel-sidebar-resources-mobile.png"},"componentPath":"blocks/gallery/carousel-sidebar-resources.tsx","code":"import { CarouselSidebarResources } from \"@opensite/ui/blocks/gallery/carousel-sidebar-resources\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselSidebarResources\n      heading=\"Learning Resources\"\n      resources={[\n        {\n          title: \"Getting Started with AI Integration\",\n          category: \"Tutorial\",\n          link: \"/resources/ai-integration-guide\",\n          image: imagePlaceholders[90],\n          imageAlt: \"AI integration tutorial\",\n        },\n        {\n          title: \"Building Scalable APIs\",\n          category: \"Guide\",\n          link: \"/resources/scalable-apis\",\n          image: imagePlaceholders[91],\n          imageAlt: \"API development guide\",\n        },\n        {\n          title: \"Security Best Practices 2025\",\n          category: \"Whitepaper\",\n          link: \"/resources/security-practices\",\n          image: imagePlaceholders[92],\n          imageAlt: \"Security whitepaper\",\n        },\n        {\n          title: \"Cloud Migration Strategy\",\n          category: \"Case Study\",\n          link: \"/resources/cloud-migration\",\n          image: imagePlaceholders[93],\n          imageAlt: \"Cloud migration case study\",\n        },\n        {\n          title: \"DevOps Implementation Roadmap\",\n          category: \"Guide\",\n          link: \"/resources/devops-roadmap\",\n          image: imagePlaceholders[94],\n          imageAlt: \"DevOps guide\",\n        },\n        {\n          title: \"Data Privacy Compliance\",\n          category: \"Whitepaper\",\n          link: \"/resources/data-privacy\",\n          image: imagePlaceholders[95],\n          imageAlt: \"Data privacy whitepaper\",\n        },\n      ]}\n      viewAllText=\"View all resources\"\n      viewAllHref=\"/resources\"\n      background=\"gray\"\n      spacing=\"xl\"\n      pattern=\"gridFadeBottomRight\"\n      patternOpacity={0.6}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"resources":{"type":"array","description":"Array of resources to display","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title of the resource","typeLabel":"React.ReactNode","required":true},"category":{"type":"object","description":"Category label","typeLabel":"React.ReactNode","required":true},"link":{"type":"string","description":"Link URL for the resource","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 resource item","required":false}},"typeLabel":"CarouselSidebarResource"},"typeLabel":"CarouselSidebarResource[]","required":false},"resourcesSlot":{"type":"object","description":"Custom slot for rendering resources (overrides resources array)","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering the sidebar","typeLabel":"React.ReactNode","required":false},"viewAllText":{"type":"object","description":"Text for the \"View all resources\" link","typeLabel":"React.ReactNode","required":false},"viewAllHref":{"type":"string","description":"URL for the \"View all resources\" link","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"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","sidebar","resources","links","documentation","learning","three-column"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'resources' array for this sidebar-resources carousel; the demo uses 6. 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. Use only real resource links from the site's content for the 'link' field; do not invent URLs. Follow the example props closely for this 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."},{"id":"testimonial-carousel-cards","name":"Testimonial Carousel Cards","title":"Testimonial Carousel Cards","category":"Gallery","categorySlug":"gallery","description":"A testimonial carousel with image and quote panels in a two-panel layout. Features customer photos alongside their testimonials, progress bar indicator, and navigation buttons. Ideal for customer testimonials, reviews, success stories, or any social proof content.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290117/343nahzo0jgm8xdoynzzityvwabq/testimonial-carousel-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290116/byofxik2qbbhy5d2hdxfrztlsdgn/testimonial-carousel-cards-mobile.png"},"componentPath":"blocks/gallery/testimonial-carousel-cards.tsx","code":"import { TestimonialCarouselCards } from \"@opensite/ui/blocks/gallery/testimonial-carousel-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <TestimonialCarouselCards\n      heading=\"What Our Clients Say\"\n      description=\"Don't just take our word for it. Hear from the companies and teams who've transformed their businesses with our platform.\"\n      items={[\n        {\n          id: \"1\",\n          username: \"@sarahchen\",\n          quote:\n            \"\\\"This platform has completely transformed how we handle data. The AI-powered insights are incredibly accurate and have helped us make better decisions faster. Our team productivity increased by 40% in the first month! The best investment we've made this year. The ROI was immediate and the customer support team is always available to help. We've saved countless hours on manual processes and our error rate dropped to near zero. Supportive throughout the entire process. We were up and running in just two weeks, and our customers immediately noticed the improvement in service quality.\\\"\",\n          author: \"Sarah Chen, CTO at DataFlow\",\n          image: imagePlaceholders[40],\n          imageAlt: \"Sarah Chen testimonial\",\n          bgColor: \"bg-blue-50\",\n        },\n        {\n          id: \"2\",\n          username: \"@mikejohnson\",\n          quote:\n            \"\\\"The best investment we've made this year. The ROI was immediate and the customer support team is always available to help. We've saved countless hours on manual processes and our error rate dropped to near zero.\\\"\",\n          author: \"Mike Johnson, VP Operations at CloudTech\",\n          image: imagePlaceholders[41],\n          imageAlt: \"Mike Johnson testimonial\",\n          bgColor: \"bg-green-50\",\n        },\n        {\n          id: \"3\",\n          username: \"@emilyrodriguez\",\n          quote:\n            '\"Implementation was seamless and the team was incredibly supportive throughout the entire process. We were up and running in just two weeks, and our customers immediately noticed the improvement in service quality.\"',\n          author: \"Emily Rodriguez, CEO at FastScale\",\n          image: imagePlaceholders[42],\n          imageAlt: \"Emily Rodriguez testimonial\",\n          bgColor: \"bg-purple-50\",\n        },\n        {\n          id: \"4\",\n          username: \"@davidkim\",\n          quote:\n            '\"Outstanding platform with features we didn\\'t even know we needed. The analytics dashboard alone has been worth the investment. We can now track everything in real-time and make data-driven decisions instantly.\"',\n          author: \"David Kim, Director of Product at InnovateLab\",\n          image: imagePlaceholders[43],\n          imageAlt: \"David Kim testimonial\",\n          bgColor: \"bg-orange-50\",\n        },\n        {\n          id: \"5\",\n          username: \"@jennasmith\",\n          quote:\n            '\"Security and compliance were our top concerns, and this platform exceeded all our expectations. We passed our SOC 2 audit with flying colors, and our clients have complete confidence in our data protection.\"',\n          author: \"Jenna Smith, CISO at SecureBank\",\n          image: imagePlaceholders[44],\n          imageAlt: \"Jenna Smith testimonial\",\n          bgColor: \"bg-pink-50\",\n        },\n      ]}\n      background=\"dark\"\n      spacing=\"py-6 md:py-40\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of testimonial items to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the item","required":true},"username":{"type":"object","description":"Username/handle to display","typeLabel":"React.ReactNode","required":true},"quote":{"type":"object","description":"Quote/testimonial text","typeLabel":"React.ReactNode","required":true},"author":{"type":"object","description":"Author name","typeLabel":"React.ReactNode","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"bgColor":{"type":"string","description":"Background color class for the quote panel","required":true},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"href":{"type":"string","description":"Optional href for the testimonial","required":false},"avatar":{"type":"string","description":"Optional avatar for testimonial","required":false}},"typeLabel":"TestimonialCarouselItem"},"typeLabel":"TestimonialCarouselItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering the sidebar","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the controls container","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},"quotePanelClassName":{"type":"string","description":"Additional CSS classes for each quote panel","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","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","testimonials","quotes","reviews","social-proof","customers","two-panel"],"performance":{},"importantUsageNotes":"DO NOT generate or guess testimonial content — only use real, verified customer testimonials from the system. If the site has no real testimonials, do not use this block. Provide 4-8 items in the 'items' array; the demo uses 5. Each item must have a real customer quote, real author name/role/company, and a real image from the media library. Do not invent usernames, quotes, authors, or images. Follow the example props closely for this block."},{"id":"carousel-icon-sidebar","name":"Carousel Icon Sidebar","title":"Carousel Icon Sidebar","category":"Gallery","categorySlug":"gallery","description":"A carousel with a dynamic icon sidebar panel in a two-column layout. Features a muted sidebar showing active slide details with icon, title, and description. Ideal for feature tours, product showcases, or any content that benefits from contextual sidebar information.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290115/2hcu6xhs71m2ubpktvjb0m9rusdf/carousel-icon-sidebar-desktop.png","mobile":"https://cdn.ing/assets/i/r/290114/n2iks1j8eyoskwzdfscupdfx04t7/carousel-icon-sidebar-mobile.png"},"componentPath":"blocks/gallery/carousel-icon-sidebar.tsx","code":"import { CarouselIconSidebar } from \"@opensite/ui/blocks/gallery/carousel-icon-sidebar\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselIconSidebar\n      title=\"Our Key Features\"\n      description=\"Discover the standout features that set our platform apart. Each element is designed with your success in mind, ensuring a seamless and powerful experience.\"\n      items={[\n        {\n          src: imagePlaceholders[60],\n          alt: \"Elegant Design\",\n          title: \"Elegant Design\",\n          description:\n            \"Beautiful interfaces that users love. Our design philosophy combines aesthetics with usability to create experiences that delight.\",\n          icon: \"lucide/palette\",\n        },\n        {\n          src: imagePlaceholders[61],\n          alt: \"High Performance\",\n          title: \"High Performance\",\n          description:\n            \"Lightning-fast applications optimized for speed. Every millisecond counts, and we ensure your users get the fastest experience possible.\",\n          icon: \"lucide/zap\",\n        },\n        {\n          src: imagePlaceholders[62],\n          alt: \"Secure by Default\",\n          title: \"Secure by Default\",\n          description:\n            \"Enterprise-grade security built into every layer. From encryption to authentication, we protect your data with industry best practices.\",\n          icon: \"lucide/shield-check\",\n        },\n        {\n          src: imagePlaceholders[63],\n          alt: \"Scalable Architecture\",\n          title: \"Scalable Architecture\",\n          description:\n            \"Infrastructure that grows with your business. Whether you have 100 or 100 million users, our platform handles it effortlessly.\",\n          icon: \"lucide/trending-up\",\n        },\n        {\n          src: imagePlaceholders[64],\n          alt: \"24/7 Support\",\n          title: \"24/7 Support\",\n          description:\n            \"Expert support team available around the clock. Get help whenever you need it with response times under 30 minutes.\",\n          icon: \"lucide/headphones\",\n        },\n      ]}\n      background=\"gray\"\n      spacing=\"py-8 md:py-40\"\n      pattern=\"waves\"\n      patternOpacity={0.04}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Section title (displayed above the carousel)","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Section description (displayed above the carousel)","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of items to display","items":{"type":"object","description":"","fields":{"src":{"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 item","typeLabel":"React.ReactNode","required":true},"description":{"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":"CarouselIconSidebarItem"},"typeLabel":"CarouselIconSidebarItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering the sidebar content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"sectionTitleClassName":{"type":"string","description":"Additional CSS classes for the section title","required":false},"sectionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the section description","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar panel","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the sidebar item title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the sidebar item 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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","icons","two-column","features","contextual","details"],"performance":{},"importantUsageNotes":"Provide 4-6 items in the 'items' array for this icon-sidebar carousel; the demo uses 5. Each item requires a real image ('src') 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."},{"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."},{"id":"service-hover-carousel","name":"Service Hover Carousel","title":"Service Hover Carousel","category":"Gallery","categorySlug":"gallery","description":"A carousel of service cards with hover image swap effect. Features portrait cards with primary/secondary image swap on hover, badges, and call-to-action buttons. Ideal for service showcases, team members, product cards, or any content that benefits from reveal-on-hover interactions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290111/hca7ib1lsvaqc48rglpny99tzs6z/service-hover-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290110/4ormmxu0wdbx28of340krikfxrod/service-hover-carousel-mobile.png"},"componentPath":"blocks/gallery/service-hover-carousel.tsx","code":"import { ServiceHoverCarousel } from \"@opensite/ui/blocks/gallery/service-hover-carousel\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ServiceHoverCarousel\n      heading=\"Our Services\"\n      items={[\n        {\n          id: \"1\",\n          title: \"Web Development\",\n          price: \"$5,000\",\n          image: imagePlaceholders[30],\n          imageAlt: \"Web development service\",\n          hoverImage: imagePlaceholders[11],\n          hoverImageAlt: \"Web development in action\",\n          tag: \"Popular\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Mobile App Design\",\n          price: \"$7,500\",\n          image: imagePlaceholders[32],\n          imageAlt: \"Mobile app design service\",\n          hoverImage: imagePlaceholders[33],\n          hoverImageAlt: \"Mobile app design process\",\n          tag: \"Trending\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"Cloud Infrastructure\",\n          price: \"$10,000\",\n          image: imagePlaceholders[34],\n          imageAlt: \"Cloud infrastructure service\",\n          hoverImage: imagePlaceholders[35],\n          hoverImageAlt: \"Cloud infrastructure setup\",\n          tag: \"Enterprise\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"AI Integration\",\n          price: \"$15,000\",\n          image: imagePlaceholders[36],\n          imageAlt: \"AI integration service\",\n          hoverImage: imagePlaceholders[37],\n          hoverImageAlt: \"AI integration implementation\",\n          tag: \"New\",\n          href: \"#\",\n        },\n        {\n          id: \"5\",\n          title: \"Security Audit\",\n          price: \"$8,000\",\n          image: imagePlaceholders[38],\n          imageAlt: \"Security audit service\",\n          hoverImage: imagePlaceholders[39],\n          hoverImageAlt: \"Security audit process\",\n          tag: \"Essential\",\n          href: \"#\",\n        },\n      ]}\n      pricePrefix=\"Starting at\"\n      background=\"dark\"\n      spacing=\"py-6 md:py-40\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of service 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 service","typeLabel":"React.ReactNode","required":true},"price":{"type":"object","description":"Price display text","typeLabel":"React.ReactNode","required":true},"image":{"type":"string","description":"Primary image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the primary image","required":false},"hoverImage":{"type":"string","description":"Hover image source URL","required":true},"hoverImageAlt":{"type":"string","description":"Alt text for the hover image","required":false},"tag":{"type":"object","description":"Tag/badge text","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Link URL for the item","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"ServiceHoverCarouselItem"},"typeLabel":"ServiceHoverCarouselItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"headerSlot":{"type":"object","description":"Custom slot for rendering the header","typeLabel":"React.ReactNode","required":false},"pricePrefix":{"type":"object","description":"Text displayed before the price","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the controls container","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},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","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","services","hover","image-swap","cards","portrait","interactive"],"performance":{},"importantUsageNotes":"Lock the 'items' array to the exact number of real services the site offers; the demo uses 5. Each item requires two real images from the media library: a primary 'image' and a 'hoverImage'. DO NOT USE this block unless you have at least 3 real services with corresponding real images. Only use real service names, prices, and hrefs from the site's data; do not invent services or pricing. Follow the example props closely for this block."},{"id":"carousel-tabs-content","name":"Carousel Tabs Content","title":"Carousel Tabs Content","category":"Gallery","categorySlug":"gallery","description":"A carousel with animated tab navigation synced to slides. Features a tab bar with animated underline indicator that follows the active slide. Ideal for categorized content, product features, or any content that benefits from tab-based navigation with visual previews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290108/13fsumid4t9l2ovi1cyzofyn98z4/carousel-tabs-content-desktop.png","mobile":"https://cdn.ing/assets/i/r/290107/7lt970k4bza0nv6wmazp59dvhl7n/carousel-tabs-content-mobile.png"},"componentPath":"blocks/gallery/carousel-tabs-content.tsx","code":"import { CarouselTabsContent } from \"@opensite/ui/blocks/gallery/carousel-tabs-content\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselTabsContent\n      title=\"Explore Our Spaces\"\n      description=\"Discover a variety of environments tailored to your needs, from collaborative workspaces to serene relaxation areas. Each space is designed to inspire creativity and productivity.\"\n      items={[\n        {\n          title: \"Enterprise Platform\",\n          description:\n            \"A comprehensive enterprise solution designed to handle complex workflows, large-scale data processing, and multi-tenant architectures. Built with scalability and reliability at its core.\",\n          note: \"Trusted by Fortune 500 companies worldwide\",\n          image: imagePlaceholders[100],\n          imageAlt: \"Enterprise platform dashboard\",\n          category: \"Enterprise\",\n        },\n        {\n          title: \"Startup Suite\",\n          description:\n            \"Fast-track your startup growth with our all-in-one platform. From MVP to scale, we provide the tools and infrastructure you need to succeed without breaking the bank.\",\n          note: \"Launch your product in days, not months\",\n          image: imagePlaceholders[101],\n          imageAlt: \"Startup suite interface\",\n          category: \"Startup\",\n        },\n        {\n          title: \"Developer Tools\",\n          description:\n            \"Powerful developer tools including CLI, SDKs, and comprehensive APIs. Build, test, and deploy with confidence using our modern development environment and extensive documentation.\",\n          note: \"Loved by 50,000+ developers\",\n          image: imagePlaceholders[102],\n          imageAlt: \"Developer tools interface\",\n          category: \"Developers\",\n        },\n        {\n          title: \"Analytics Pro\",\n          description:\n            \"Advanced analytics platform with real-time data processing, custom dashboards, and AI-powered insights. Turn your data into your competitive advantage.\",\n          note: \"Process billions of events daily\",\n          image: imagePlaceholders[103],\n          imageAlt: \"Analytics dashboard\",\n          category: \"Analytics\",\n        },\n        {\n          title: \"Integration Hub\",\n          description:\n            \"Connect with 200+ enterprise applications through our universal integration platform. Pre-built connectors, custom workflows, and real-time data synchronization.\",\n          note: \"Seamless integration in minutes\",\n          image: imagePlaceholders[104],\n          imageAlt: \"Integration hub interface\",\n          category: \"Integration\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.2}\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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"items":{"type":"array","description":"Array of content items to display","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title content (supports ReactNode for gradient text effects)","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description content (supports ReactNode for lists, paragraphs)","typeLabel":"React.ReactNode","required":true},"note":{"type":"object","description":"Note text displayed at the bottom","typeLabel":"React.ReactNode","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"category":{"type":"string","description":"Category label used for tab navigation","required":true},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"CarouselTabsContentItem"},"typeLabel":"CarouselTabsContentItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"tabsSlot":{"type":"object","description":"Custom slot for rendering the tabs","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","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 button","required":false},"indicatorClassName":{"type":"string","description":"Additional CSS classes for the tab indicator","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","tabs","animated","underline","categories","navigation","synced"],"performance":{},"importantUsageNotes":"Provide 4-6 items in the 'items' array for this tabbed-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."},{"id":"carousel-scale-focus","name":"Carousel Scale Focus","title":"Carousel Scale Focus","category":"Gallery","categorySlug":"gallery","description":"A carousel with scale and opacity focus effect on the active slide. Features active slide at full scale/opacity with adjacent slides scaled down and faded. Ideal for hero carousels, featured content, image galleries, or any content where you want to emphasize the current item.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290106/01zapdy5wrhikz2ju91nbt2ophin/carousel-scale-focus-desktop.png","mobile":"https://cdn.ing/assets/i/r/290105/mgwlhoqbznhiucywbyf250qtdu28/carousel-scale-focus-mobile.png"},"componentPath":"blocks/gallery/carousel-scale-focus.tsx","code":"import { CarouselScaleFocus } from \"@opensite/ui/blocks/gallery/carousel-scale-focus\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselScaleFocus\n      title=\"Architectural Highlights\"\n      description=\"A curated selection of stunning architectural designs that showcase innovation, creativity, and functionality in modern construction.\"\n      images={[\n        {\n          src: imagePlaceholders[80],\n          alt: \"Modern Architecture\",\n        },\n        {\n          src: imagePlaceholders[81],\n          alt: \"Creative Workspace\",\n        },\n        {\n          src: imagePlaceholders[82],\n          alt: \"Urban Design\",\n        },\n        {\n          src: imagePlaceholders[83],\n          alt: \"Interior Spaces\",\n        },\n        {\n          src: imagePlaceholders[84],\n          alt: \"Natural Light\",\n        },\n        {\n          src: imagePlaceholders[85],\n          alt: \"Minimalist Design\",\n        },\n        {\n          src: imagePlaceholders[86],\n          alt: \"Architectural Details\",\n        },\n      ]}\n      startIndex={1}\n      background=\"dark\"\n      spacing=\"xl\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.15}\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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"images":{"type":"array","description":"Array of images to display","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"className":{"type":"string","description":"Additional CSS classes for the image container","required":false}},"typeLabel":"CarouselScaleFocusImage"},"typeLabel":"CarouselScaleFocusImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","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},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls container","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the indicators container","required":false},"indicatorClassName":{"type":"string","description":"Additional CSS classes for each indicator dot","required":false},"startIndex":{"type":"number","description":"Starting index for the carousel","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","scale","focus","opacity","hero","featured","emphasis"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 5 real images from the site's media library. Provide 5-9 items in the 'images' array; the demo uses 7. All image 'src' values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."},{"id":"masonry-motion-grid","name":"Masonry Motion Grid","title":"Masonry Motion Grid","category":"Gallery","categorySlug":"gallery","description":"An animated masonry grid layout with Framer Motion animations. Features a 4-column grid with staggered heights and alternating animation directions on scroll. Ideal for image galleries, portfolios, photo collections, or any visual content that benefits from dynamic, Pinterest-style layouts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290104/gg1ooye1poevb4dfadoltvo7suq2/masonry-motion-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290103/s0g91nyumkr38op9hpbaqmvru8d6/masonry-motion-grid-mobile.png"},"componentPath":"blocks/gallery/masonry-motion-grid.tsx","code":"import { MasonryMotionGrid } from \"@opensite/ui/blocks/gallery/masonry-motion-grid\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <MasonryMotionGrid\n      title=\"Media Gallery\"\n      description=\"Explore our media gallery featuring a collection of stunning images arranged in a visually engaging layout. Each image is thoughtfully placed to create a harmonious balance of aesthetics and motion.\"\n      column1Images={[\n        {\n          src: imagePlaceholders[0],\n          alt: \"Gallery image 1\",\n          height: \"h-60\",\n        },\n        {\n          src: imagePlaceholders[1],\n          alt: \"Gallery image 2\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[2],\n          alt: \"Gallery image 3\",\n          height: \"h-72\",\n        },\n      ]}\n      column2Images={[\n        {\n          src: imagePlaceholders[3],\n          alt: \"Gallery image 4\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[4],\n          alt: \"Gallery image 5\",\n          height: \"h-60\",\n        },\n        {\n          src: imagePlaceholders[5],\n          alt: \"Gallery image 6\",\n          height: \"h-80\",\n        },\n      ]}\n      column3Images={[\n        {\n          src: imagePlaceholders[6],\n          alt: \"Gallery image 7\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[7],\n          alt: \"Gallery image 8\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[8],\n          alt: \"Gallery image 9\",\n          height: \"h-60\",\n        },\n      ]}\n      column4Images={[\n        {\n          src: imagePlaceholders[9],\n          alt: \"Gallery image 10\",\n          height: \"h-72\",\n        },\n        {\n          src: imagePlaceholders[10],\n          alt: \"Gallery image 11\",\n          height: \"h-80\",\n        },\n        {\n          src: imagePlaceholders[11],\n          alt: \"Gallery image 12\",\n          height: \"h-60\",\n        },\n      ]}\n      animationDuration={0.5}\n      animationDelayMultiplier={0.1}\n      showDuplicateGrid={true}\n      background=\"dark\"\n      spacing=\"py-12 md:py-40\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.2}\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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"column1Images":{"type":"array","description":"Images for column 1","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column2Images":{"type":"array","description":"Images for column 2","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column3Images":{"type":"array","description":"Images for column 3","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"column4Images":{"type":"array","description":"Images for column 4","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":true},"height":{"type":"string","description":"Height of the image (CSS value)","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"MasonryMotionGridImage"},"typeLabel":"MasonryMotionGridImage[]","required":false},"gridSlot":{"type":"object","description":"Custom slot for rendering the grid (overrides column images)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid container","required":false},"columnClassName":{"type":"string","description":"Additional CSS classes for each column","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for each image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"animationDuration":{"type":"number","description":"Animation duration in seconds","required":false},"animationDelayMultiplier":{"type":"number","description":"Animation delay multiplier for staggered effect","required":false},"showDuplicateGrid":{"type":"boolean","description":"Whether to show the duplicate grid below","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","masonry","grid","animated","motion","pinterest","photos","portfolio"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 12 real images from the site's media library. The grid is split across 4 columns: supply exactly 3 images per column ('column1Images', 'column2Images', 'column3Images', 'column4Images') for a total of 12. Each image requires a 'height' Tailwind class (e.g. 'h-60', 'h-72', 'h-80'). All image 'src' values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."},{"id":"blur-vignette-grid","name":"Blur Vignette Grid","title":"Blur Vignette Grid","category":"Gallery","categorySlug":"gallery","description":"A grid gallery with animated blur vignette effect on hover. Features a 5-column grid with varying column spans and CSS blur mask effect that reveals on interaction. Ideal for artistic galleries, photography portfolios, or any visual content that benefits from dramatic hover effects.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290101/1nnz635xwi8ho7s4h42p3c1i0gqf/blur-vignette-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290100/7z3s0umkbu7n0cgsy4dh4dxxm4be/blur-vignette-grid-mobile.png"},"componentPath":"blocks/gallery/blur-vignette-grid.tsx","code":"import { BlurVignetteGrid } from \"@opensite/ui/blocks/gallery/blur-vignette-grid\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlurVignetteGrid\n      title=\"Our Portfolio\"\n      description=\"A curated selection of our finest work, showcasing the diversity and quality of projects we've had the privilege to bring to life. Each image represents a unique story of creativity, innovation, and collaboration.\"\n      images={[\n        {\n          src: imagePlaceholders[0],\n          alt: \"Photo 1\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[1],\n          alt: \"Photo 2\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[2],\n          alt: \"Photo 3\",\n          colSpan: 3,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[3],\n          alt: \"Photo 4\",\n          colSpan: 2,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[4],\n          alt: \"Photo 5\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[5],\n          alt: \"Photo 6\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[6],\n          alt: \"Photo 7\",\n          colSpan: 5,\n          height: \"h-100\",\n        },\n        {\n          src: imagePlaceholders[7],\n          alt: \"Photo 8\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: imagePlaceholders[8],\n          alt: \"Photo 9\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n      ]}\n      vignetteConfig={{\n        radius: \"5px\",\n        inset: \"5px\",\n        transitionLength: \"42px\",\n        blur: \"3px\",\n      }}\n      gridColumns={5}\n      gridGap=\"gap-4\"\n      background=\"white\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.8}\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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"images":{"type":"array","description":"Array of images to display in the grid","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"colSpan":{"type":"number","description":"Number of columns to span (1-5)","required":true},"height":{"type":"string","description":"Height class for the image (e.g., \"h-82\", \"h-100\")","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"BlurVignetteGridImage"},"typeLabel":"BlurVignetteGridImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"vignetteConfig":{"type":"object","description":"Configuration for the blur vignette effect","fields":{"radius":{"type":"string","description":"Border radius of the vignette","required":false},"inset":{"type":"string","description":"Inset distance from edges","required":false},"transitionLength":{"type":"string","description":"Length of the blur transition","required":false},"blur":{"type":"string","description":"Blur intensity","required":false}},"typeLabel":"BlurVignetteConfig","required":false},"gridColumns":{"type":"number","description":"Number of grid columns","required":false},"gridGap":{"type":"string","description":"Gap between grid items","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid container","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each grid item","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["gallery","grid","blur","vignette","hover","artistic","photography","dramatic"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 9 real images from the site's media library. Provide exactly 9 items in the 'images' array to match the demo grid layout (5-column spanning grid). Each item requires a 'colSpan' (spanning 2 or 3 columns within a 5-column grid) and a 'height' Tailwind class; follow the demo's alternating pattern closely. All image 'src' values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."},{"id":"interior-carousel","name":"Interior Carousel","title":"Interior Carousel","category":"Gallery","categorySlug":"gallery","description":"A looping two-up carousel layout with semi-transparent navigation overlays. Features portrait images displayed two at a time with elegant navigation controls. Ideal for interior design galleries, real estate showcases, product photography, or any content that benefits from side-by-side image comparison.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290099/v75yv76yb2sgpm20w0cd948lkoia/interior-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290098/q9e017uqy9yd4rnjhmujwdh59g9h/interior-carousel-mobile.png"},"componentPath":"blocks/gallery/interior-carousel.tsx","code":"import { InteriorCarousel } from \"@opensite/ui/blocks/gallery/interior-carousel\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <InteriorCarousel\n      heading=\"Interior Design Showcase\"\n      description=\"Explore our collection of beautifully designed spaces that blend functionality with aesthetics. From modern minimalism to classic elegance.\"\n      images={[\n        imagePlaceholders[120],\n        imagePlaceholders[121],\n        imagePlaceholders[122],\n        imagePlaceholders[123],\n        imagePlaceholders[124],\n        imagePlaceholders[125],\n        imagePlaceholders[126],\n        imagePlaceholders[127],\n      ]}\n      loop={true}\n      background=\"gray\"\n      spacing=\"pt-10 pb-20 md:pt-32 md:pb-32\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text (supports newlines for multi-line display)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Array of images to display (can be strings or objects)","items":{"type":"object","description":"","typeLabel":"string | InteriorCarouselImage"},"typeLabel":"string | InteriorCarouselImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"loop":{"type":"boolean","description":"Whether to loop the carousel","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","interior","two-up","portrait","real-estate","design","comparison"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless you have at least 4 real images from the site's media library. Provide 4-8 images in the 'images' array; the demo uses 8. All image values must be real URLs from the media library — do not use placeholder or invented URLs. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:35.722Z"}