{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c\",\n          imageAlt: \"E-commerce platform\",\n          logo: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\",\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: \"https://toastability-production.s3.amazonaws.com/ri0dqx79spe6771np76mkmno5xfd\",\n          imageAlt: \"Healthcare platform\",\n          logo: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\",\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: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n          imageAlt: \"Financial platform\",\n          logo: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\",\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: \"https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo\",\n          imageAlt: \"IoT platform\",\n          logo: \"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png\",\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,"minItems":2,"maxItems":6,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"title":"Our Work","description":"A selection of recent case studies","background":"dark","spacing":"lg","items":[{"id":"1","title":"E-commerce Platform Redesign","description":"A complete overhaul of the shopping experience that boosted conversions by 42 %.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","badges":["E-commerce","UX Design"]},{"id":"2","title":"Healthcare Data Platform","description":"Integrating patient data across multiple systems to improve care quality.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","badges":["Healthcare","Integration"]},{"id":"3","title":"Financial Services Modernization","description":"Implementing a secure fintech platform that increased customer retention by 30 %.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","badges":["Fintech","Security"]}]},"dependencies":["@opensite/ui"],"tags":["gallery","case-study","portfolio","expandable","hover","cards","projects","work","showcase"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'items[].image' prop is the full-bleed background; supply a high-contrast image so the white overlay text is legible. The 'items[].logo' prop expects a dark/black logo PNG – the component applies 'invert' CSS so it appears white on dark images. At least 2 items are required for the expand-on-hover UX to be meaningful; 4–6 items are recommended. Each item needs a unique 'id' string.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library","portfolio_items"],"propConstraints":{"items":{"minItems":2,"maxItems":6}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/a3m42usevv0iet0fpfwa1fsytxmv\",\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: \"https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l\",\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: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\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: \"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq\",\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: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\",\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,"minItems":3,"maxItems":12,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Featured Case Studies","readMoreText":"Read more","background":"white","spacing":"lg","items":[{"id":"1","title":"AI-Powered Analytics Platform","description":"Transforming raw data into actionable business intelligence.","label":"Analytics","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard interface"},{"id":"2","title":"Enterprise Cloud Migration","description":"Seamless transition to modern cloud architecture, reducing costs by 40 %.","label":"Cloud","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure visualization"},{"id":"3","title":"E-commerce Personalization Engine","description":"Dynamic product recommendations that increased conversion rates by 35 %.","label":"E-commerce","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"E-commerce personalization"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","badges","cards","navigation","products","features","categories"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Provide at least 3 items so the carousel controls are useful; 5–8 items is the sweet spot. 'readMoreText' is optional – omit it to hide the link row. The 'background' prop controls the card background via 'getNestedCardBg'; prefer 'white' or 'gray' for good contrast.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":12}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\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: \"https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y\",\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: \"https://toastability-production.s3.amazonaws.com/vvucxqs128w2d0z3n4s2z131rq7p\",\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: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\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: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\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,"minItems":3,"maxItems":10,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"title":"Latest Projects","description":"Explore our portfolio of innovative solutions that have transformed businesses across industries.","readMoreText":"View project","background":"gray","spacing":"lg","items":[{"id":"1","title":"Digital Transformation","description":"Complete digital overhaul for a Fortune 500 company, modernizing legacy systems.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Digital transformation project"},{"id":"2","title":"AI Customer Service","description":"Intelligent chatbot platform handling 10,000+ daily inquiries with 95 % satisfaction.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI customer service interface"},{"id":"3","title":"Supply Chain Optimization","description":"Real-time logistics platform reducing delivery times by 30 %.","href":"#","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Supply chain dashboard"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","gradient","overlay","dots","hero","featured","images"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each card is '320 px' wide on mobile and '360 px' on desktop with an intrinsic 'aspect-video' ratio on large screens. The gradient overlay ('from-black from-20% to-transparent mix-blend-multiply') only reads well on photographic images with tonal variety – avoid flat solid-colour images. Supply at least 3 items so both navigation arrow states (disabled/enabled) are reachable.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":10}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\",\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: \"https://toastability-production.s3.amazonaws.com/s4vho0wfbjhf758oife8qfuekou8\",\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: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\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: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\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: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\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,"minItems":3,"maxItems":8,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Our Platform Solutions","demoAction":{"label":"Book a demo","href":"https://calendly.com/demo"},"readMoreText":"Learn more","background":"white","spacing":"lg","items":[{"id":"1","title":"AI-Powered Analytics","summary":"Transform your data into actionable insights with advanced machine learning and predictive analytics.","url":"/solutions/analytics","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics platform interface"},{"id":"2","title":"Cloud Infrastructure","summary":"Scalable, secure cloud infrastructure for enterprise workloads with 99.99 % uptime SLA.","url":"/solutions/cloud","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure dashboard"},{"id":"3","title":"Security Suite","summary":"Comprehensive security with real-time threat detection and zero-trust architecture.","url":"/solutions/security","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security monitoring dashboard"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","demo","link","cta","products","features","external"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'demoAction' prop renders a styled link with an arrow icon. Pass '{ label, href }' at minimum; the 'href' should be an external URL (calendly, typeform, etc.). Each item uses a 'url' prop (not 'href') as the card link destination. The 'summary' field (not 'description') holds the card body text. Carousel items are 'basis-85%' on mobile and 'max-w-[452px]' on desktop – images should be landscape oriented. Provide 3–8 items; fewer than 3 makes the navigation arrows feel redundant.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":8}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\", alt: \"Team collaboration\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\", alt: \"Data analytics dashboard\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\", alt: \"AI model training\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\", alt: \"Research and development\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\", alt: \"Innovation workshop\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\", alt: \"Technology showcase\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\", alt: \"Product demonstration\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\", alt: \"Client presentation\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\", alt: \"Team meeting\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\", alt: \"Office environment\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\", alt: \"Creative workspace\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\", 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,"minItems":6,"maxItems":20,"mediaHints":{"path":"images[].src","roles":["gallery"],"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}},"exampleProps":{"heading":"Bringing your data to life with AI","description":"Our team transforms complex datasets into actionable insights that drive business growth.","action":{"label":"Explore our solutions","href":"#"},"autoScrollSpeed":0.5,"background":"gray","spacing":"lg","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team collaboration"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Data analytics dashboard"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"AI model training"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Research and development"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Innovation workshop"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Technology showcase"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","auto-scroll","infinite","logos","partners","clients","staggered"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The carousel uses 'embla-carousel-auto-scroll' and loops infinitely – do not add manual navigation controls. The 'images' prop is an array of '{ src, alt }' objects; provide at least 6 images for the loop to feel seamless. Each image is constrained to 'max-h-80 max-w-60' and receives alternating top-margin via 'index % 2 === 0 ? 'mt-16' : 'mt-7'' for the staggered look. The 'action' CTA renders as a primary-coloured text link with an arrow; supply '{ label, href }' at minimum.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"images":{"minItems":6,"maxItems":20}},"mediaSlots":{"images[].src":{"path":"images[].src","roles":["gallery"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\",\n          imageAlt: \"AI integration tutorial\",\n        },\n        {\n          title: \"Building Scalable APIs\",\n          category: \"Guide\",\n          link: \"/resources/scalable-apis\",\n          image: \"https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu\",\n          imageAlt: \"API development guide\",\n        },\n        {\n          title: \"Security Best Practices 2025\",\n          category: \"Whitepaper\",\n          link: \"/resources/security-practices\",\n          image: \"https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o\",\n          imageAlt: \"Security whitepaper\",\n        },\n        {\n          title: \"Cloud Migration Strategy\",\n          category: \"Case Study\",\n          link: \"/resources/cloud-migration\",\n          image: \"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\",\n          imageAlt: \"Cloud migration case study\",\n        },\n        {\n          title: \"DevOps Implementation Roadmap\",\n          category: \"Guide\",\n          link: \"/resources/devops-roadmap\",\n          image: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\n          imageAlt: \"DevOps guide\",\n        },\n        {\n          title: \"Data Privacy Compliance\",\n          category: \"Whitepaper\",\n          link: \"/resources/data-privacy\",\n          image: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\",\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,"minItems":3,"maxItems":12,"mediaHints":{"path":"resources[].image","roles":["gallery","feature"],"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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}},"exampleProps":{"heading":"Learning Resources","viewAllText":"View all resources","viewAllHref":"/resources","background":"gray","spacing":"xl","resources":[{"title":"Getting Started with AI Integration","category":"Tutorial","link":"/resources/ai-integration-guide","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI integration tutorial"},{"title":"Building Scalable APIs","category":"Guide","link":"/resources/scalable-apis","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"API development guide"},{"title":"Security Best Practices","category":"Whitepaper","link":"/resources/security-practices","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security whitepaper"},{"title":"Cloud Migration Strategy","category":"Case Study","link":"/resources/cloud-migration","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud migration case study"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","resources","links","documentation","learning","three-column"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. category link The sidebar only ever shows the first 3 resources – this is intentional. The carousel shows all of them. Clicking a carousel image opens a built-in lightbox viewer; this is automatic and requires no extra configuration. Provide at least 3 resources to populate the sidebar; 5–8 is ideal for the carousel. 'viewAllText' and 'viewAllHref' are optional but recommended for discoverability.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"resources":{"minItems":3,"maxItems":12}},"mediaSlots":{"resources[].image":{"path":"resources[].image","roles":["gallery","feature"],"required":false}}}},{"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/309641/q91xry8qvp8kmj6utc1faz4slvu7/carousel-icon-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/309642/n60pj7bqnhvswfr9wxyypwddvo8e/carousel-icon-tabs-mobile.jpg"},"componentPath":"blocks/gallery/carousel-icon-tabs.tsx","code":"import { CarouselIconTabs } from \"@opensite/ui/blocks/gallery/carousel-icon-tabs\";\n\nexport default function Demo() {\n  return (\n    <CarouselIconTabs\n      heading=\"Platform Features\"\n      badge=\"Enterprise Ready\"\n      sections={[\n        {\n          img: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\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: \"https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo\",\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: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\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      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"sections[].img","roles":["gallery","feature"],"required":true}},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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}},"exampleProps":{"heading":"Platform Features","badge":"Enterprise Ready","background":"white","pattern":"gridFadeTop","patternOpacity":0.9,"sections":[{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Analytics Dashboard","title":"Advanced Analytics","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.","icon":"lucide/bar-chart-3"},{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team Collaboration","title":"Team Collaboration","text":"Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.","icon":"lucide/users"},{"img":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"API Integration","title":"API Integration","text":"Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.","icon":"lucide/plug"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","tabs","icons","navigation","features","animated","indicator"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title text The 'badge' prop appears below the heading as a secondary badge – keep it short (2–4 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox – no extra configuration needed. Provide exactly 3 sections for ideal layout balance; fewer looks sparse, more crowds the tab row on desktop.","usageRequirements":{"requiredProps":["sections"],"requiresSiteCapabilities":["media_library"],"propConstraints":{"sections":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"sections[].img":{"path":"sections[].img","roles":["gallery","feature"],"required":true}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\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: \"https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y\",\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: \"https://toastability-production.s3.amazonaws.com/vvucxqs128w2d0z3n4s2z131rq7p\",\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: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\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: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\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,"minItems":3,"maxItems":8,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Building the Future, One Line of Code at a Time","description":"From startups to enterprises, we empower businesses with cutting-edge solutions.","background":"dark","spacing":"lg","items":[{"id":"1","username":"@sarahchen","quote":"This platform completely transformed how we handle data. The AI-powered insights helped us make better decisions 40 % faster.","author":"Sarah Chen, CTO at DataFlow","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Sarah Chen","bgColor":"bg-blue-50"},{"id":"2","username":"@mikejohnson","quote":"The best investment we've made this year. ROI was immediate and the support team is always available.","author":"Mike Johnson, VP Operations at CloudTech","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Mike Johnson","bgColor":"bg-green-50"},{"id":"3","username":"@emilyrodriguez","quote":"Implementation was seamless. We were up and running in two weeks and customers immediately noticed the improvement.","author":"Emily Rodriguez, CEO at FastScale","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Emily Rodriguez","bgColor":"bg-purple-50"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","testimonials","quotes","reviews","social-proof","customers","two-panel"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. username quote author image The 'image' prop should be a portrait-oriented photo (at least 400 × 460 px). The optional 'avatar' prop adds a small square avatar beside the author name. The optional 'href' renders a 'Read Review' link below the author. Provide at least 3 testimonials; 4–6 is ideal.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library","reviews_or_testimonials"],"propConstraints":{"items":{"minItems":3,"maxItems":8}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\",\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: \"https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8\",\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: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\",\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: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\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: \"https://toastability-production.s3.amazonaws.com/t3k42fbzq7r7j93feldqm5cj1o1n\",\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,"minItems":2,"maxItems":8,"mediaHints":{"path":"items[].src","roles":["gallery","feature"],"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}},"exampleProps":{"title":"Our Key Features","description":"Discover the standout features that set our platform apart. Each element is designed with your success in mind.","background":"gray","spacing":"xl","items":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Elegant Design","title":"Elegant Design","description":"Beautiful interfaces that users love, combining aesthetics with usability.","icon":"lucide/palette"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"High Performance","title":"High Performance","description":"Lightning-fast applications optimised for speed. Every millisecond counts.","icon":"lucide/zap"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Secure by Default","title":"Secure by Default","description":"Enterprise-grade security built into every layer of the stack.","icon":"lucide/shield-check"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","sidebar","icons","two-column","features","contextual","details"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description The sidebar panel uses card-style styling (shadow, border, bg-card). Do not override with conflicting background colours. Clicking any carousel image opens a built-in lightbox – this is automatic. Images render at a 4:3 aspect ratio inside the carousel. Landscape images work best. Provide at least 2 items; 4–6 is optimal for the sidebar navigation arrows to be useful. The optional 'title' and 'description' section-level props appear above the carousel as a header.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":2,"maxItems":8}},"mediaSlots":{"items[].src":{"path":"items[].src","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\",\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: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\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: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\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: \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\",\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: \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\",\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: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\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: \"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt\",\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: \"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov\",\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: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\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: \"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82\",\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,"minItems":3,"maxItems":12,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Code less.","subheading":"Build faster.","tagline":"Innovative solutions that drive results","background":"dark","spacing":"lg","items":[{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Enterprise SaaS Platform","title":"Enterprise SaaS","description":"Scalable multi-tenant platform serving 100,000+ users with 99.99 % uptime.","href":"#"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"E-commerce Marketplace","title":"Marketplace","description":"High-performance marketplace processing $50M+ in annual transactions.","href":"#"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Healthcare Portal","title":"Healthcare","description":"HIPAA-compliant patient portal enabling secure communication for 200+ clinics.","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","gradient","text","pills","indicators","portfolio","animated"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Cards render at 'aspect-4/5' with a 'max-h-[500px]' cap – portrait images work best. The 'heading' and 'subheading' are rendered together in a single '<h2>' element: '{heading} {subheading}'. The 'subheading' gets 'text-primary' colouring. The 'tagline' prop renders below the heading as a paragraph. The 'href' per item is optional; omitting it makes the card non-interactive. Expanding pill indicators at the bottom show the active slide title – keep titles short (1–3 words). Provide 4–10 items for a rich indicator strip.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":12}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\",\n          imageAlt: \"Web development service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\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: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          imageAlt: \"Mobile app design service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\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: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          imageAlt: \"Cloud infrastructure service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\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: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n          imageAlt: \"AI integration service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/cyhcpla6me8vs936i3fw6wbhypi2\",\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: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\",\n          imageAlt: \"Security audit service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/y1aezpa78m2fhfvj8whcx337y9cb\",\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,"minItems":3,"maxItems":8,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Our Services","pricePrefix":"Starting at","background":"dark","spacing":"lg","items":[{"id":"1","title":"Web Development","price":"$5,000","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Web development service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Web development in action","tag":"Popular","href":"#"},{"id":"2","title":"Mobile App Design","price":"$7,500","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Mobile app design service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Mobile app design process","tag":"Trending","href":"#"},{"id":"3","title":"Cloud Infrastructure","price":"$10,000","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Cloud infrastructure setup","tag":"Enterprise","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","services","hover","image-swap","cards","portrait","interactive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each item requires both 'image' AND 'hoverImage' – both must be real absolute URLs. The hover image replaces the primary image on mouse-over via opacity transition. Images render at 'aspect-3/4' (portrait). Provide portrait-oriented images for the best result. The 'tag' prop is displayed as an outline badge in the top-left of the card. The 'price' prop renders as plain text; use 'pricePrefix' to add 'Starting at' or similar label. The 'href' prop is optional; omit it to suppress navigation on click. Provide 3–8 items; the progress-bar width is divided by 'items.length'.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":8}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\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: \"https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx\",\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: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\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: \"https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv\",\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: \"https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm\",\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,"minItems":3,"maxItems":6,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"title":"Explore Our Platform","description":"Discover the features and solutions designed for your needs.","background":"white","spacing":"lg","items":[{"title":"Enterprise Platform","description":"A comprehensive solution for complex workflows and large-scale data processing.","note":"Trusted by Fortune 500 companies worldwide","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Enterprise platform dashboard","category":"Enterprise"},{"title":"Startup Suite","description":"Fast-track your growth with all-in-one tools from MVP to scale.","note":"Launch your product in days, not months","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Startup suite interface","category":"Startup"},{"title":"Developer Tools","description":"Powerful CLI, SDKs, and APIs to build, test, and deploy with confidence.","note":"Loved by 50,000+ developers","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Developer tools interface","category":"Developers"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","tabs","animated","underline","categories","navigation","synced"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description note The 'category' string must be unique across all items – it is used as the tab key and for syncing carousel position. The tab underline indicator is positioned absolutely and animates via measured 'offsetWidth' / 'offsetLeft' – keep tab labels short to avoid overflow. Clicking the image opens a built-in lightbox viewer. Provide 3–6 items; more makes the tab row crowded.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":6}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/ehgbcugs782765ke1l2dtbtzd918\",\n          alt: \"Modern Architecture\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo\",\n          alt: \"Creative Workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/67fnapqepn7f8vwt0x4nqho70hbz\",\n          alt: \"Urban Design\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/t4cidbsfz3z468bn45yqdrkbx7ou\",\n          alt: \"Interior Spaces\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu\",\n          alt: \"Natural Light\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd\",\n          alt: \"Minimalist Design\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\",\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,"minItems":3,"maxItems":12,"mediaHints":{"path":"images[].src","roles":["gallery","feature"],"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}},"exampleProps":{"title":"Architectural Highlights","description":"A curated selection of stunning architectural designs showcasing innovation and functionality.","startIndex":1,"background":"dark","spacing":"xl","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Modern Architecture"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Creative Workspace"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Urban Design"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Interior Spaces"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Natural Light"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","scale","focus","opacity","hero","featured","emphasis"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each image requires 'src' and 'alt'; the optional 'className' is applied to the image container. Images render at 'aspect-4/3' with 'max-w-200'. Landscape images are strongly recommended. Clicking any image opens a built-in lightbox viewer. The 'startIndex' prop (default '1') sets the initially visible slide – use '1' to start on the second image so adjacent slides are visible. Provide at least 3 images; 5–9 is ideal for the scale-focus effect to be visible.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"images":{"minItems":3,"maxItems":12}},"mediaSlots":{"images[].src":{"path":"images[].src","roles":["gallery","feature"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n          alt: \"Gallery image 1\",\n          height: \"h-60\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n          alt: \"Gallery image 2\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n          alt: \"Gallery image 3\",\n          height: \"h-72\",\n        },\n      ]}\n      column2Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          alt: \"Gallery image 4\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\",\n          alt: \"Gallery image 5\",\n          height: \"h-60\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n          alt: \"Gallery image 6\",\n          height: \"h-80\",\n        },\n      ]}\n      column3Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          alt: \"Gallery image 7\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          alt: \"Gallery image 8\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          alt: \"Gallery image 9\",\n          height: \"h-60\",\n        },\n      ]}\n      column4Images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\",\n          alt: \"Gallery image 10\",\n          height: \"h-72\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n          alt: \"Gallery image 11\",\n          height: \"h-80\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\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,"mediaHints":{"path":"column1Images[].src","roles":["gallery"],"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}},"exampleProps":{"title":"Media Gallery","description":"Explore our media gallery featuring a collection of stunning images in a visually engaging layout.","showDuplicateGrid":false,"background":"dark","spacing":"lg","column1Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 1","height":"h-60"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 2","height":"h-80"}],"column2Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 3","height":"h-72"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 4","height":"h-60"}],"column3Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 5","height":"h-80"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 6","height":"h-72"}],"column4Images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 7","height":"h-72"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Gallery image 8","height":"h-80"}]},"dependencies":["@opensite/ui"],"tags":["gallery","masonry","grid","animated","motion","pinterest","photos","portfolio"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. column2Images column3Images column4Images'. Each image object requires 'src alt Column 1 and 3 animate upward ('y: 50 → 0'); column 2 and 4 animate downward ('y: -50 → 0') for a natural wave effect. Provide 2–4 images per column for a balanced layout. 'showDuplicateGrid' (default 'true') renders an identical second grid below the first – set to 'false' for shorter galleries. Requires Framer Motion ('framer-motion') to be installed in the consuming app.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["media_library"],"mediaSlots":{"column1Images[].src":{"path":"column1Images[].src","roles":["gallery"],"required":false}}}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n          alt: \"Photo 1\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n          alt: \"Photo 2\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n          alt: \"Photo 3\",\n          colSpan: 3,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          alt: \"Photo 4\",\n          colSpan: 2,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\",\n          alt: \"Photo 5\",\n          colSpan: 2,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n          alt: \"Photo 6\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          alt: \"Photo 7\",\n          colSpan: 5,\n          height: \"h-100\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          alt: \"Photo 8\",\n          colSpan: 3,\n          height: \"h-82\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\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,"mediaHints":{"path":"images[].src","roles":["gallery"],"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}},"exampleProps":{"title":"Our Portfolio","description":"A curated selection of our finest work, showcasing the diversity and quality of our projects.","gridColumns":5,"gridGap":"gap-4","vignetteConfig":{"radius":"5px","inset":"5px","transitionLength":"42px","blur":"3px"},"background":"white","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 1","colSpan":2,"height":"h-82"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 2","colSpan":3,"height":"h-82"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 3","colSpan":3,"height":"h-100"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 4","colSpan":2,"height":"h-100"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Photo 5","colSpan":5,"height":"h-82"}]},"dependencies":["@opensite/ui"],"tags":["gallery","grid","blur","vignette","hover","artistic","photography","dramatic"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. alt The 'colSpan' values in your image array should sum to multiples of 'gridColumns' (default 5) per row for a neat layout. Common patterns: [2, 3] or [3, 2] per row. The vignette effect is a CSS 'backdrop-filter: blur' mask that is active by default and dissolves on hover. Tweak 'vignetteConfig' props ('radius', 'inset', 'transitionLength', 'blur') to adjust the edge effect. Requires Framer Motion ('framer-motion') to be installed in the consuming app. No built-in lightbox – clicking images has no default action.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["media_library"],"mediaSlots":{"images[].src":{"path":"images[].src","roles":["gallery"],"required":false}}}},{"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\";\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        \"https://cdn.ing/assets/i/r/289134/pq7xx1m5piaai94v56e8kpt5rc7m/luxury-champagne-wall-with-ambient-sconce-lighting.jpg\",\n        \"https://cdn.ing/assets/i/r/289135/r0s7nf2ywu133hpy6hcbt74i8htg/espresso-martini-served-at-moody-bar-with-coffee-beans.jpg\",\n        \"https://cdn.ing/assets/i/r/289136/47lmzyqgma1ovg3oxw37x38oyx08/bartender-shaking-cocktail-in-lively-night-bar.jpg\",\n        \"https://cdn.ing/assets/i/r/289137/aud3lp0mpweq0wdoke6vnxy3a5l7/nightlife-bar-friends-holding-martinis-celebration.jpg\",\n        \"https://cdn.ing/assets/i/r/289138/tlbtkr13i2nwu7kx80t5bnf9qwgg/manual-meat-slicer-on-wooden-counter-charcuterie-station.jpg\",\n        \"https://cdn.ing/assets/i/r/289144/9thob27iku9i72elwvz5j03z6482/glamorous-nightlife-portrait-woman-burgundy-dress-upscale-bar.jpg\",\n        \"https://cdn.ing/assets/i/r/289147/mc32ysna8zk8xtyt0oizs1cqwbqt/fine-dining-restaurant-table-gourmet-dishes-red-wine.webp\",\n        \"https://cdn.ing/assets/i/r/289148/0p9g9lcxh9z50zhqww4athwg17bf/moody-orange-cocktail-in-coupe-glass-on-bar.jpg\",\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,"minItems":4,"maxItems":20,"mediaHints":{"path":"images[]","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Beautiful Interiors.","description":"Explore our curated collection of stunning interior designs that blend functionality with aesthetics.","loop":true,"background":"gray","spacing":"lg","images":["https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","interior","two-up","portrait","real-estate","design","comparison"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. The 'images' prop accepts either plain URL strings or '{ src, alt, className }' objects – you can mix both. Images render at 'aspect-4/5' (portrait). Provide portrait-oriented images for the best result. Clicking any image opens a built-in lightbox viewer. The 'loop' prop (default 'true') enables infinite looping; set to 'false' for a bounded gallery. Navigation arrows are overlaid on the carousel at vertical centre with 'bg-foreground text-background' styling. Provide 6–12 images for a rich gallery feel.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"images":{"minItems":4,"maxItems":20}},"mediaSlots":{"images[]":{"path":"images[]","roles":["gallery","feature"],"required":false}}}}]},"timestamp":"2026-06-27T18:47:40.070Z"}