{"success":true,"data":{"category":{"slug":"carousel","name":"Carousel","description":"Collection of carousel components"},"blocks":[{"id":"carousel-animated-sections","name":"Carousel Animated Sections","title":"Carousel Animated Sections","category":"Carousel","categorySlug":"carousel","description":"A fullscreen section carousel with smooth animated transitions between slides. Features click-to-advance navigation, progress indicators, and content overlays with CTAs. Perfect for immersive storytelling experiences.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289109/kn7njl53hgft99n489wb3azustqt/carousel-animated-sections-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289108/qgfrf5zsj38whcvv8d2dngx4cbgs/carousel-animated-sections-mobie.jpg"},"componentPath":"blocks/carousel/carousel-animated-sections.tsx","code":"import { CarouselAnimatedSections } from \"@opensite/ui/blocks/carousel/carousel-animated-sections\";\n\nexport default function Demo() {\n  return (\n    <CarouselAnimatedSections\n      sections={[\n        {\n          id: \"innovation\",\n          subtitle: \"Technology Leadership\",\n          title: \"Building the Future of AI\",\n          description:\n            \"Explore groundbreaking innovations that transform how businesses harness artificial intelligence to solve complex challenges and unlock new opportunities.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg\",\n          ctaText: \"Discover Our Platform\",\n          ctaHref: \"#\",\n        },\n        {\n          id: \"design\",\n          subtitle: \"Creative Excellence\",\n          title: \"Design That Inspires Action\",\n          description:\n            \"Experience stunning visual narratives crafted with precision and purpose. Our design philosophy merges aesthetics with functionality to create memorable digital experiences.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc\",\n          ctaText: \"View Our Work\",\n          ctaHref: \"#\",\n        },\n        {\n          id: \"performance\",\n          subtitle: \"Speed & Efficiency\",\n          title: \"Lightning-Fast Performance\",\n          description:\n            \"Built on cutting-edge infrastructure that delivers millisecond response times. Every interaction is optimized for speed, reliability, and seamless user experience.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo\",\n          ctaText: \"See Benchmarks\",\n          ctaHref: \"#\",\n        },\n        {\n          id: \"security\",\n          subtitle: \"Enterprise Security\",\n          title: \"Fort Knox-Level Protection\",\n          description:\n            \"Your data is protected by military-grade encryption and multi-layered security protocols. We meet the highest compliance standards across all major industries.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n          ctaText: \"Security Details\",\n          ctaHref: \"#\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"sections":{"type":"array","description":"Array of sections","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the section","required":true},"title":{"type":"object","description":"Section title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Section subtitle","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Section description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"ctaText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaHref":{"type":"string","description":"CTA button href","required":false},"ctaOnClick":{"type":"object","description":"CTA button onClick handler","typeLabel":"() => void","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"AnimatedSection"},"typeLabel":"AnimatedSection[]","required":false},"sectionsSlot":{"type":"object","description":"Custom slot for rendering sections (overrides sections array)","typeLabel":"React.ReactNode","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation dots","required":false},"arrowsClassName":{"type":"string","description":"Additional CSS classes for the arrow navigation","required":false},"counterClassName":{"type":"string","description":"Additional CSS classes for the counter","required":false},"slideMediaOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on slide media","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"slideMediaBrightness":{"type":"string","description":"Granular control of brightness for slide media (deprecated - prefer slideMediaOverlayIntensity)\nValues 10-40 use arbitrary Tailwind values for finer control on bright images","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","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},"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},"containerMaxWidth":{"type":"string","description":"Optional max width for the content container","typeLabel":"ContainerMaxWidth","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"sections":[{"id":"innovation","subtitle":"Technology Leadership","title":"Building the Future of AI","description":"Explore groundbreaking innovations that transform how businesses harness artificial intelligence.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","ctaText":"Discover Our Platform","ctaHref":"#platform"},{"id":"design","subtitle":"Creative Excellence","title":"Design That Inspires Action","description":"Experience stunning visual narratives crafted with precision and purpose.","image":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","ctaText":"View Our Work","ctaHref":"#portfolio"},{"id":"performance","subtitle":"Speed & Efficiency","title":"Lightning-Fast Performance","description":"Built on cutting-edge infrastructure that delivers millisecond response times.","image":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","ctaText":"See Benchmarks","ctaHref":"#performance"}],"background":"dark","spacing":"py-0"},"dependencies":["@opensite/ui"],"tags":["carousel","slider","fullscreen","animated","transitions","storytelling","hero","sections","immersive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each section requires a unique 'id' string and an 'image' absolute URL. Supports 2–6 sections; fewer than 2 sections defeats the carousel purpose. The component is full-screen (h-screen) — do not wrap in a height-constrained container. CTA text/href are per-slide; alternatively use the top-level 'actions' array for shared CTA buttons. Default background is 'dark'; slide images render with a high-intensity gradient overlay for readability.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-auto-progress-slides","name":"Carousel Auto Progress Slides","title":"Carousel Auto Progress Slides","category":"Carousel","categorySlug":"carousel","description":"An auto-advancing carousel with animated progress indicators and smooth blur transitions between slides. Features centered headline, navigation controls, and visual progress dots that fill as each slide auto-advances.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289067/nc0w7rixu020dd88lny396d7t312/carousel-auto-progress-slides-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289068/p8gtmwv7jky6bbufqqd3v9bp99nx/carousel-auto-progress-slides-mobile.jpg"},"componentPath":"blocks/carousel/carousel-auto-progress-slides.tsx","code":"import { CarouselAutoProgressSlides } from \"@opensite/ui/blocks/carousel/carousel-auto-progress-slides\";\n\nexport default function Demo() {\n  return (\n    <CarouselAutoProgressSlides\n      heading=\"Product Evolution\"\n      subheading=\"Watch how our platform transforms businesses\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={1}\n      background=\"gray\"\n      items={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\n          label: \"Platform Launch - Q1 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          label: \"AI Integration - Q2 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\n          label: \"Enterprise Features - Q3 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          label: \"Global Expansion - Q4 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/4u3pi66nga47kc1th8tyqd3lpj28\",\n          label: \"Next Generation - 2025\",\n        },\n      ]}\n      autoAdvanceInterval={75}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of slide items","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"label":{"type":"object","description":"Slide label/alt text","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"SlideItem"},"typeLabel":"SlideItem[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides items array)","typeLabel":"React.ReactNode","required":false},"autoAdvanceInterval":{"type":"number","description":"Auto advance interval in milliseconds","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation area","required":false},"slideLabelClassName":{"type":"string","description":"Additional CSS classes for the slide label","required":false},"slideContainerClassName":{"type":"string","description":"Additional CSS classes for the slide container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Product Evolution","subheading":"Watch how our platform transforms businesses","background":"gray","pattern":"gridFadeCenter","patternOpacity":1,"items":[{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","label":"Platform Launch - Q1 2024"},{"src":"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52","label":"AI Integration - Q2 2024"},{"src":"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c","label":"Enterprise Features - Q3 2024"},{"src":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw","label":"Global Expansion - Q4 2024"}],"autoAdvanceInterval":75},"dependencies":["@opensite/ui"],"tags":["carousel","slider","auto-advance","progress","animated","hero","onboarding","timed","transitions"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each SlideItem requires a 'src' absolute URL. Supports 3–8 slide items; too few items makes the progress indicator meaningless. 'autoAdvanceInterval' controls how quickly the progress dot depletes (milliseconds per tick, not total duration). Use 'heading' and 'subheading' to provide context above the carousel. Component fills min-h-screen — suitable for hero use.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-autoplay-progress","name":"Carousel Autoplay Progress","title":"Carousel Autoplay Progress","category":"Carousel","categorySlug":"carousel","description":"An Embla-powered carousel with autoplay functionality, animated progress bar, dot navigation, and play/pause controls. Features smooth transitions with visual feedback for autoplay timing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308426/2u89xyrxy74ibe0330mofbfs8z4v/carousel-autoplay-progress-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308425/eak7nsljk5g806pkz1ghpwkdkvsy/carousel-autoplay-progress-mobile.jpg"},"componentPath":"blocks/carousel/carousel-autoplay-progress.tsx","code":"import { CarouselAutoplayProgress } from \"@opensite/ui/blocks/carousel/carousel-autoplay-progress\";\n\nexport default function Demo() {\n  return (\n    <CarouselAutoplayProgress\n      slides={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n          alt: \"Mountain Expedition\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Mountain Expedition</h3>\n              <p className=\"text-sm\">\n                Discover breathtaking peaks and pristine wilderness trails\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n          alt: \"Urban Architecture\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Urban Architecture</h3>\n              <p className=\"text-sm\">\n                Modern cityscapes showcasing cutting-edge design\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          alt: \"Coastal Sunset\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Coastal Sunset</h3>\n              <p className=\"text-sm\">\n                Golden hour magic along pristine shorelines\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n          alt: \"Forest Canopy\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Forest Canopy</h3>\n              <p className=\"text-sm\">\n                Immerse yourself in ancient woodland ecosystems\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\n          alt: \"Desert Dunes\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Desert Dunes</h3>\n              <p className=\"text-sm\">\n                Endless horizons and sculpted sand formations\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\n          alt: \"Northern Lights\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Northern Lights</h3>\n              <p className=\"text-sm\">\n                Witness nature's most spectacular light show\n              </p>\n            </div>\n          ),\n        },\n      ]}\n      autoplayDelay={7000}\n      options={{ loop: true }}\n      background=\"dark\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"slides":{"type":"array","description":"Array of slides","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"object","description":"Image alt text","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Additional content below the image","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"AutoplaySlide"},"typeLabel":"AutoplaySlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"options":{"type":"object","description":"Embla carousel options","typeLabel":"EmblaOptionsType","required":false},"autoplayDelay":{"type":"number","description":"Autoplay delay in milliseconds","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the carousel container","required":false},"trackClassName":{"type":"string","description":"Additional CSS classes for the slides track","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for individual slides","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the controls area","required":false},"dotsClassName":{"type":"string","description":"Additional CSS classes for the dots navigation","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"background":"dark","pattern":"gridFadeTopRight","patternOpacity":0.15,"options":{"loop":true},"autoplayDelay":7000,"slides":[{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Mountain Expedition"},{"src":"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9","alt":"Urban Architecture"},{"src":"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz","alt":"Coastal Sunset"},{"src":"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv","alt":"Forest Canopy"}]},"dependencies":["@opensite/ui"],"tags":["carousel","slider","autoplay","progress-bar","embla","hero","testimonials","features","controls"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each AutoplaySlide requires a 'src' absolute URL. Supports 3–10 slides for meaningful autoplay navigation. 'autoplayDelay' is in milliseconds (default 5000). The progress bar animates between dots indicating time until next slide. Play/pause toggle is rendered to the right of the progress bar.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-feature-badge","name":"Carousel Feature Badge","title":"Carousel Feature Badge","category":"Carousel","categorySlug":"carousel","description":"A two-column feature section with badge label, headline, description text, and an interactive carousel showcasing platform screenshots or feature images. Includes previous/next navigation controls.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289200/gj8qep2lxp05ragqilq91ekh7d98/carousel-feature-badge-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289201/n10hkak24n77etw37glp3d86qwp5/carousel-feature-badge-mobile.jpg"},"componentPath":"blocks/carousel/carousel-feature-badge.tsx","code":"import { CarouselFeatureBadge } from \"@opensite/ui/blocks/carousel/carousel-feature-badge\";\nimport { DynamicIcon } from \"@opensite/ui\";\n\nexport default function Demo() {\n  return (\n    <CarouselFeatureBadge\n      badge=\"Platform Features\"\n      heading=\"Everything you need to scale your SaaS business\"\n      description=\"From powerful analytics to seamless integrations, our platform provides all the tools you need to grow faster and serve customers better. Built for modern teams who demand excellence.\"\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={0.5}\n      actions={[\n        {\n          label: \"Explore Features\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Case Studies\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      items={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\",\n          alt: \"Real-time Analytics Dashboard\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          alt: \"Team Collaboration Tools\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\",\n          alt: \"API Integration Hub\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          alt: \"Customer Success Portal\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\n          alt: \"Advanced Reporting Engine\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\",\n          alt: \"Security & Compliance Center\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"slideLayoutVariant":{"type":"string","description":"Variant of the slide layout","typeLabel":"\"horizontal\" | \"vertical\" | \"square\"","required":false},"badge":{"type":"object","description":"Badge/eyebrow content above heading","typeLabel":"React.ReactNode","required":false},"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},"items":{"type":"array","description":"Array of image items for 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":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem"},"typeLabel":"ImageItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering carousel 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 container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content column","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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 container","required":false},"carouselItemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","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},"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},"containerMaxWidth":{"type":"string","description":"Optional max width for the content container","typeLabel":"ContainerMaxWidth","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"badge":"Platform Features","heading":"Everything you need to scale your SaaS business","description":"From powerful analytics to seamless integrations, our platform provides all the tools you need to grow faster.","background":"dark","pattern":"architect","patternOpacity":0.5,"slideLayoutVariant":"square","actions":[{"label":"Explore Features","href":"#","variant":"default"},{"label":"Case Studies","href":"#","variant":"outline"}],"items":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Real-time Analytics Dashboard"},{"src":"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq","alt":"Team Collaboration Tools"},{"src":"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh","alt":"API Integration Hub"}]},"dependencies":["@opensite/ui"],"tags":["carousel","features","screenshots","badge","two-column","platform","showcase","gallery"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ImageItem in 'items' requires a 'src' absolute URL and should have a descriptive 'alt'. Supports 3–8 carousel items; carouselItemClassName can override flex-basis. CTA actions are placed below the heading/description using 'actions' array. Badge string renders using the Badge UI component.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-fullscreen-scroll-fx","name":"Carousel Fullscreen Scroll Effects","title":"Carousel Fullscreen Scroll FX","category":"Carousel","categorySlug":"carousel","description":"A GSAP-powered fullscreen carousel with scroll-triggered animations, pinned sections, and smooth parallax effects. Features immersive full-viewport slides with overlay content and navigation indicators.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295059/auiusd6ddgq17r2z6imi6bawl9ba/carousel-fullscreen-scroll-fx-desktop.png","mobile":"https://cdn.ing/assets/i/r/295060/uzkicw5slkpz53y2wrahhmiokhd6/carousel-fullscreen-scroll-fx-mobile.png"},"componentPath":"blocks/carousel/carousel-fullscreen-scroll-fx.tsx","code":"import { CarouselFullscreenScrollFx } from \"@opensite/ui/blocks/carousel/carousel-fullscreen-scroll-fx\";\nimport { DynamicIcon } from \"@opensite/ui\";\n\nexport default function Demo() {\n  return (\n    <CarouselFullscreenScrollFx\n      slides={[\n        {\n          id: \"chapter-one\",\n          subtitle: \"Chapter One\",\n          title: \"The Journey Begins\",\n          description:\n            \"Every great story starts with a single step. This is where vision meets execution, where dreams transform into reality through determination and innovation.\",\n          image: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          overlayColor: \"rgba(0, 20, 40, 0.6)\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              asButton: true,\n            },\n            {\n              label: \"Learn More\",\n              href: \"#\",\n              asButton: true,\n              variant: \"outline\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n        },\n        {\n          id: \"chapter-two\",\n          subtitle: \"Chapter Two\",\n          title: \"Breaking Boundaries\",\n          description:\n            \"We challenged conventional thinking and pushed beyond the limits of what was thought possible. Innovation thrives when curiosity meets courage.\",\n          image: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          overlayColor: \"rgba(40, 20, 60, 0.6)\",\n        },\n        {\n          id: \"chapter-three\",\n          subtitle: \"Chapter Three\",\n          title: \"Building Together\",\n          description:\n            \"Success is a team sport. Through collaboration and shared purpose, we created something greater than the sum of its parts.\",\n          image: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\",\n          overlayColor: \"rgba(20, 40, 20, 0.6)\",\n        },\n        {\n          id: \"chapter-four\",\n          subtitle: \"Chapter Four\",\n          title: \"Global Impact\",\n          description:\n            \"From local roots to worldwide reach, our mission expanded to touch lives across continents and transform entire industries.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          overlayColor: \"rgba(60, 30, 10, 0.6)\",\n        },\n        {\n          id: \"chapter-five\",\n          subtitle: \"Chapter Five\",\n          title: \"The Future Awaits\",\n          description:\n            \"This is just the beginning. The next chapter is being written right now, and you're invited to be part of this incredible journey.\",\n          image: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\n          overlayColor: \"rgba(10, 30, 50, 0.6)\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"slides":{"type":"array","description":"Array of fullscreen slides","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the slide","required":true},"title":{"type":"object","description":"Slide title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Slide subtitle/eyebrow text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"overlayColor":{"type":"string","description":"Overlay color (rgba format)","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"actions":{"type":"array","description":"Array of action configurations","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false}},"typeLabel":"FullscreenSlide"},"typeLabel":"FullscreenSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides 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 container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation dots","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","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},"scrollIndicatorClassName":{"type":"string","description":"Additional CSS classes for the scroll indicator","required":false},"counterClassName":{"type":"string","description":"Additional CSS classes for the slide counter","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},"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},"containerMaxWidth":{"type":"string","description":"Optional max width for the content container","typeLabel":"ContainerMaxWidth","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"slides":[{"id":"chapter-one","subtitle":"Chapter One","title":"The Journey Begins","description":"Every great story starts with a single step. Vision meets execution.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","overlayColor":"rgba(0, 20, 40, 0.6)","actions":[{"label":"Get Started","href":"#","asButton":true}]},{"id":"chapter-two","subtitle":"Chapter Two","title":"Breaking Boundaries","description":"We challenged conventional thinking and pushed beyond limits.","image":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","overlayColor":"rgba(40, 20, 60, 0.6)"},{"id":"chapter-three","subtitle":"Chapter Three","title":"Building Together","description":"Through collaboration and shared purpose, we created something greater.","image":"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q","overlayColor":"rgba(20, 40, 20, 0.6)"}]},"dependencies":["@opensite/ui"],"tags":["carousel","fullscreen","scroll","gsap","parallax","immersive","storytelling","portfolio","cinematic"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each FullscreenSlide requires a unique 'id' string and an 'image' absolute URL. Supports 2–8 slides for effective scroll storytelling. 'overlayColor' accepts rgba strings to tint each slide background independently. Per-slide 'actions' array renders CTA buttons centered over the slide content. The component is intended as a full-page or hero-level section; do not nest inside constrained heights. Default background is 'dark' with a diagonal cross pattern.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-gallery-thumbnails","name":"Carousel Gallery Thumbnails","title":"Carousel Gallery Thumbnails","category":"Carousel","categorySlug":"carousel","description":"A gallery carousel with main image display, thumbnail navigation strip, keyboard navigation support, and auto-play functionality. Features smooth slide transitions with caption overlay and responsive thumbnail grid.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289204/zu4idgda2ywsx08gps209prl3tvl/carousel-gallery-thumbnails-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289205/j55tdxyy1l8bpftgu06dcxmj9fs7/carousel-gallery-thumbnails-mobile.jpg"},"componentPath":"blocks/carousel/carousel-gallery-thumbnails.tsx","code":"import { CarouselGalleryThumbnails } from \"@opensite/ui/blocks/carousel/carousel-gallery-thumbnails\";\n\nexport default function Demo() {\n  return (\n    <CarouselGalleryThumbnails\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n          alt: \"Modern minimalist living room with floor-to-ceiling windows\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n          alt: \"Gourmet kitchen with marble countertops and custom cabinetry\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v\",\n          alt: \"Luxurious master bedroom with city skyline views\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n          alt: \"Spa-inspired bathroom with rainfall shower and soaking tub\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt\",\n          alt: \"Private rooftop terrace with outdoor entertainment area\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          alt: \"Home office with built-in shelving and natural light\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n          alt: \"Elegant dining room with designer lighting fixtures\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n          alt: \"Fitness center with state-of-the-art equipment\",\n        },\n      ]}\n      autoPlay\n      autoPlayInterval={6000}\n      showThumbnails={true}\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.25}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"images":{"type":"array","description":"Array of gallery images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"object","description":"Image alt text/caption","typeLabel":"React.ReactNode","required":false},"width":{"type":"number","description":"Image width","required":false},"height":{"type":"number","description":"Image height","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image element","required":false}},"typeLabel":"GalleryImage"},"typeLabel":"GalleryImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"autoPlay":{"type":"boolean","description":"Enable auto-play","required":false},"autoPlayInterval":{"type":"number","description":"Auto-play interval in milliseconds","required":false},"showThumbnails":{"type":"boolean","description":"Show thumbnail navigation","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the main carousel container","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for the slide area","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","required":false},"captionClassName":{"type":"string","description":"Additional CSS classes for the caption","required":false},"thumbnailsClassName":{"type":"string","description":"Additional CSS classes for the thumbnails container","required":false},"thumbnailClassName":{"type":"string","description":"Additional CSS classes for individual thumbnails","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},"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},"slideMediaOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on slide images","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"slideMediaBrightness":{"type":"string","description":"Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"background":"dark","pattern":"squareAltGrid","patternOpacity":0.25,"autoPlay":true,"autoPlayInterval":6000,"showThumbnails":true,"images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Modern minimalist living room with floor-to-ceiling windows"},{"src":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm","alt":"Gourmet kitchen with marble countertops"},{"src":"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v","alt":"Luxurious master bedroom with city skyline views"},{"src":"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc","alt":"Spa-inspired bathroom with rainfall shower"},{"src":"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt","alt":"Private rooftop terrace"}]},"dependencies":["@opensite/ui"],"tags":["carousel","gallery","thumbnails","images","portfolio","products","real-estate","photography","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each GalleryImage requires a 'src' absolute URL; 'alt' doubles as the caption shown on the main slide. Supports 3–12 images; thumbnails scroll horizontally if many images are provided. 'showThumbnails' defaults to true; set to false to hide the thumbnail strip. 'autoPlay' and 'autoPlayInterval' control automatic advancement. 'slideMediaOverlayIntensity' controls gradient darkness over the main slide image.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-horizontal-cards","name":"Carousel Horizontal Cards","title":"Carousel Horizontal Cards","category":"Carousel","categorySlug":"carousel","description":"A horizontal scrolling card carousel with animated entrance effects, navigation buttons, and stat displays. Features smooth scroll behavior with dynamic button visibility based on scroll position.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295065/y51gs34zjnx8stiwwnorul7skddi/carousel-horizontal-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/295067/r5c5mmp9ltrtfztfit7sh2xk2kph/carousel-horizontal-cards-mobile.png"},"componentPath":"blocks/carousel/carousel-horizontal-cards.tsx","code":"import { CarouselHorizontalCards } from \"@opensite/ui/blocks/carousel/carousel-horizontal-cards\";\n\nexport default function Demo() {\n  return (\n    <CarouselHorizontalCards\n      heading=\"Trending Destinations\"\n      subtitle=\"Discover the world's most captivating travel experiences\"\n      headingHref=\"#\"\n      items={[\n        {\n          id: \"santorini\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          title: \"Santorini, Greece\",\n          count: \"2,847\",\n          countLabel: \"Travel Experiences\",\n        },\n        {\n          id: \"kyoto\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          title: \"Kyoto, Japan\",\n          count: \"3,192\",\n          countLabel: \"Cultural Tours\",\n        },\n        {\n          id: \"patagonia\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\",\n          title: \"Patagonia, Chile\",\n          count: \"1,563\",\n          countLabel: \"Adventure Activities\",\n        },\n        {\n          id: \"reykjavik\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n          title: \"Reykjavik, Iceland\",\n          count: \"2,104\",\n          countLabel: \"Northern Lights Tours\",\n        },\n        {\n          id: \"marrakech\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/rka4y4l9ihtuho5wjylbbaiyan5t\",\n          title: \"Marrakech, Morocco\",\n          count: \"1,876\",\n          countLabel: \"Cultural Experiences\",\n        },\n        {\n          id: \"queenstown\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/s45m6e1h7aeq23z9oiiquqjycl34\",\n          title: \"Queenstown, New Zealand\",\n          count: \"2,341\",\n          countLabel: \"Outdoor Adventures\",\n        },\n        {\n          id: \"barcelona\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/9fdc8a8f-a47b-5840-bb61-587c9c857a52\",\n          title: \"Barcelona, Spain\",\n          count: \"4,127\",\n          countLabel: \"City Tours\",\n        },\n        {\n          id: \"bali\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n          title: \"Bali, Indonesia\",\n          count: \"3,658\",\n          countLabel: \"Wellness Retreats\",\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Subtitle/description text","typeLabel":"React.ReactNode","required":false},"headingHref":{"type":"string","description":"URL for the heading link","required":false},"items":{"type":"array","description":"Array of card items","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the card","typeLabel":"string | number","required":true},"imageSrc":{"type":"string","description":"Image source URL","required":true},"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"count":{"type":"object","description":"Stat count value","typeLabel":"React.ReactNode","required":false},"countLabel":{"type":"object","description":"Label for the count","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for buttons/links on the card","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"CardItem"},"typeLabel":"CardItem[]","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 container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Trending Destinations","subtitle":"Discover the world's most captivating travel experiences","headingHref":"#","background":"white","pattern":"diagonalCrossBasic","patternOpacity":0.7,"items":[{"id":"santorini","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","title":"Santorini, Greece","count":"2,847","countLabel":"Travel Experiences"},{"id":"kyoto","imageSrc":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw","title":"Kyoto, Japan","count":"3,192","countLabel":"Cultural Tours"},{"id":"patagonia","imageSrc":"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9","title":"Patagonia, Chile","count":"1,563","countLabel":"Adventure Activities"},{"id":"reykjavik","imageSrc":"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp","title":"Reykjavik, Iceland","count":"2,104","countLabel":"Northern Lights Tours"}]},"dependencies":["@opensite/ui"],"tags":["carousel","cards","horizontal","scroll","features","products","team","testimonials","stats"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each CardItem requires 'id' and 'imageSrc' absolute URL. Supports 4–12 cards; fewer cards may not show the scroll navigation buttons. 'count' and 'countLabel' display a stat below the card title. Per-card 'actions' array renders action buttons inside the card body. The header 'headingHref' adds a chevron-right link to the heading. 'background' defaults to 'white'.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-image-hero","name":"Carousel Image Hero","title":"Carousel Image Hero","category":"Carousel","categorySlug":"carousel","description":"A full-width hero section with an auto-advancing background image carousel, overlay content with headline, description, and call-to-action button. Includes navigation arrows and dot indicators for manual slide control.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308427/cib1y3kxw4nb1avnux3uzytiu92y/carousel-image-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308428/ht9tkb79mneseytfff9tuhh9jcjl/carousel-image-hero-mobile.jpg"},"componentPath":"blocks/carousel/carousel-image-hero.tsx","code":"import { CarouselImageHero } from \"@opensite/ui/blocks/carousel/carousel-image-hero\";\n\nexport default function Demo() {\n  return (\n    <CarouselImageHero\n      badge=\"New Product Launch\"\n      heading=\"Innovation That Changes Everything\"\n      description=\"Experience the next generation of technology designed to empower your business and elevate your customer experience to unprecedented heights.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"View Services\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\",\n          alt: \"Seamless integration ecosystem\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          alt: \"Advanced AI-powered workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\",\n          alt: \"Collaborative team environment\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\n          alt: \"Real-time data visualization\",\n        },\n      ]}\n      autoPlayInterval={5500}\n      pattern=\"diagonalCrossFadeCenter\"\n      patternOpacity={0.8}\n      background=\"dark\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/eyebrow content above heading","typeLabel":"React.ReactNode","required":false},"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},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Array of image items for 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":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem"},"typeLabel":"ImageItem[]","required":false},"autoPlayInterval":{"type":"number","description":"Auto-play interval in milliseconds","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the indicators","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"badge":"New Product Launch","heading":"Innovation That Changes Everything","description":"Experience the next generation of technology designed to empower your business.","background":"dark","spacing":"hero","autoPlayInterval":5500,"actions":[{"label":"Start Free Trial","href":"#","variant":"default","size":"lg"},{"label":"View Services","href":"#","variant":"outline","size":"lg"}],"images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Seamless integration ecosystem"},{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Advanced AI-powered workspace"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Collaborative team environment"}]},"dependencies":["@opensite/ui"],"tags":["carousel","hero","fullwidth","background","landing","cta","portfolio","marketing","auto-advance"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ImageItem in 'images' requires a 'src' absolute URL and 'alt' text. Supports 2–6 images for meaningful rotation. 'autoPlayInterval' is in milliseconds (default 7500). Badge renders above the heading using the Badge component. 'actions' renders CTA buttons centered below the description. Text is rendered white with text-shadow when images are present for readability. The component uses min-h-screen on mobile and min-h-[600px] on desktop.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-multi-step-showcase","name":"Carousel Multi-Step Showcase","title":"Carousel Multi-Step Showcase","category":"Carousel","categorySlug":"carousel","description":"A multi-step feature showcase with animated step navigation, progress indicators, and synchronized image transitions. Features numbered step buttons with active state highlighting and smooth content transitions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289210/hvruho22wlsn1ezax8ngk4i29nsl/carousel-multi-step-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289211/ny1yq020x55usk9jog1tko8dgbmg/carousel-multi-step-showcase-mobile.jpg"},"componentPath":"blocks/carousel/carousel-multi-step-showcase.tsx","code":"import { CarouselMultiStepShowcase } from \"@opensite/ui/blocks/carousel/carousel-multi-step-showcase\";\n\nexport default function Demo() {\n  return (\n    <CarouselMultiStepShowcase\n      heading=\"How It Works\"\n      subheading=\"Get started in minutes with our simple four-step process\"\n      steps={[\n        {\n          id: \"step-1\",\n          step: 1,\n          title: \"Create Your Account\",\n          description: \"Sign up in seconds with your email or Google account. No credit card required to start exploring our platform and all its powerful features.\",\n          image: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n        },\n        {\n          id: \"step-2\",\n          step: 2,\n          title: \"Connect Your Data\",\n          description: \"Seamlessly integrate with your existing tools and services. We support over 50 popular platforms including Salesforce, HubSpot, and Slack.\",\n          image: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n        },\n        {\n          id: \"step-3\",\n          step: 3,\n          title: \"Customize Your Workflow\",\n          description: \"Tailor the platform to match your unique business processes. Use our drag-and-drop builder to create custom workflows without writing code.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n        },\n        {\n          id: \"step-4\",\n          step: 4,\n          title: \"Launch & Scale\",\n          description: \"Go live with confidence and grow your operations effortlessly. Our infrastructure automatically scales to meet your needs as you expand.\",\n          image: \"https://toastability-production.s3.amazonaws.com/4u3pi66nga47kc1th8tyqd3lpj28\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"Get Started Free\",\n          href: \"#signup\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Schedule Demo\",\n          href: \"#demo\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"steps":{"type":"array","description":"Array of step items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the step","required":true},"step":{"type":"number","description":"Step number","required":true},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"className":{"type":"string","description":"Additional CSS classes for the step","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"StepItem"},"typeLabel":"StepItem[]","required":false},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions 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 container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"stepNavigationClassName":{"type":"string","description":"Additional CSS classes for the step navigation","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"How It Works","subheading":"Get started in minutes with our simple process","steps":[{"id":"step-1","step":1,"title":"Create Your Account","description":"Sign up in seconds with your email or Google account. No credit card required.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"id":"step-2","step":2,"title":"Connect Your Data","description":"Seamlessly integrate with your existing tools and services.","image":"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52"},{"id":"step-3","step":3,"title":"Launch & Scale","description":"Go live with confidence and grow your operations effortlessly.","image":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw"}],"actions":[{"label":"Get Started Free","href":"#signup","variant":"default","size":"lg"}]},"dependencies":["@opensite/ui"],"tags":["carousel","multi-step","onboarding","tutorial","walkthrough","features","process","steps","progressive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Supports 3–6 steps; the progress bar divides 100% by step count. The 'actions' prop renders on the last step in place of the 'Next' button. 'heading' and 'subheading' appear centered above the progress bar. Images display in aspect-video inside an animated container.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-portfolio-hero","name":"Carousel Portfolio Hero","title":"Carousel Portfolio Hero","category":"Carousel","categorySlug":"carousel","description":"A fullscreen portfolio hero section with auto-advancing image slider, gradient overlay, category tags, and navigation controls. Features smooth opacity transitions between slides with slide counter display.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306769/54xexo730vigbx6hbxjnab7harqz/carousel-portfolio-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306770/e9qejt3lndse5dwh7gue4mc0ic64/carousel-portfolio-hero-mobile.jpg"},"componentPath":"blocks/carousel/carousel-portfolio-hero.tsx","code":"import { CarouselPortfolioHero } from \"@opensite/ui/blocks/carousel/carousel-portfolio-hero\";\n\nexport default function Demo() {\n  return (\n    <CarouselPortfolioHero\n      slides={[\n        {\n          id: 1,\n          image:\n            \"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82\",\n          title: \"Brand Identity Redesign\",\n          description:\n            \"Complete visual transformation for a global tech startup\",\n          tag: \"Branding\",\n        },\n        {\n          id: 2,\n          image:\n            \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          title: \"E-Commerce Platform\",\n          description:\n            \"Award-winning shopping experience with AI-powered recommendations\",\n          tag: \"Web Design\",\n        },\n        {\n          id: 3,\n          image:\n            \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\n          title: \"Mobile Banking App\",\n          description: \"Intuitive financial management for the modern consumer\",\n          tag: \"Mobile Design\",\n        },\n        {\n          id: 4,\n          image:\n            \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          title: \"Sustainability Campaign\",\n          description:\n            \"Multi-channel marketing initiative driving environmental change\",\n          tag: \"Marketing\",\n        },\n        {\n          id: 5,\n          image:\n            \"https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg\",\n          title: \"SaaS Dashboard\",\n          description:\n            \"Enterprise analytics platform serving Fortune 500 clients\",\n          tag: \"Product Design\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"View All Projects\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n          asButton: true,\n        },\n      ]}\n      autoPlayInterval={6000}\n    />\n  );\n}","propsSchema":{"slides":{"type":"array","description":"Array of portfolio slides","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the slide","typeLabel":"number | string","required":true},"image":{"type":"string","description":"Image source URL","required":true},"title":{"type":"object","description":"Slide title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"tag":{"type":"object","description":"Category tag","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"PortfolioSlide"},"typeLabel":"PortfolioSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"autoPlayInterval":{"type":"number","description":"Auto-play interval in milliseconds","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"tagClassName":{"type":"string","description":"Additional CSS classes for the tag badge","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"counterClassName":{"type":"string","description":"Additional CSS classes for the slide counter","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},"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},"slideMediaOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on slide images","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"slideMediaBrightness":{"type":"string","description":"Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"autoPlayInterval":6000,"slides":[{"id":1,"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","title":"Brand Identity Redesign","description":"Complete visual transformation for a global tech startup","tag":"Branding"},{"id":2,"image":"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82","title":"E-Commerce Platform","description":"Award-winning shopping experience with AI-powered recommendations","tag":"Web Design"},{"id":3,"image":"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c","title":"Mobile Banking App","description":"Intuitive financial management for the modern consumer","tag":"Mobile Design"}],"actions":[{"label":"View All Projects","href":"#","variant":"default","size":"lg","asButton":true}]},"dependencies":["@opensite/ui"],"tags":["carousel","portfolio","hero","fullscreen","creative","agency","photography","design","showcase"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each PortfolioSlide requires 'id' (number|string) and 'image' absolute URL. Supports 3–8 slides; 'autoPlayInterval' in milliseconds (default 5000). Slide 'tag' renders as a Badge above the title. Title is displayed as h1 in white with text-shadow for image readability. The 'actions' prop renders shared CTAs across all slides (not per-slide). Component is h-screen — suitable as a page hero. Default 'slideMediaOverlayIntensity' is 'high' for dark overlays on bright images.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-product-feature-showcase","name":"Carousel Product Feature Showcase","title":"Carousel Product Feature Showcase","category":"Carousel","categorySlug":"carousel","description":"An interactive product feature carousel with mobile-responsive design, color variant selectors, and animated transitions. Features a split layout with product imagery on one side and feature descriptions with navigation on the other.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295063/5rfjcmqvkqlu1vckzekiiw19uix5/carousel-product-feature-showcase-desktop.png","mobile":"https://cdn.ing/assets/i/r/295064/2g1r6fsoy0lszkyf0rgmqyzqrk9o/carousel-product-feature-showcase-mobile.png"},"componentPath":"blocks/carousel/carousel-product-feature-showcase.tsx","code":"import { CarouselProductFeatureShowcase } from \"@opensite/ui/blocks/carousel/carousel-product-feature-showcase\";\n\nexport default function Demo() {\n  return (\n    <CarouselProductFeatureShowcase\n      heading=\"Premium Wireless Headphones\"\n      subheading=\"Studio-quality sound meets cutting-edge technology\"\n      features={[\n        {\n          id: \"noise-cancellation\",\n          title: \"Active Noise Cancellation\",\n          description:\n            \"Industry-leading ANC technology blocks out ambient noise for an immersive listening experience. Enjoy your music, podcasts, or calls without distractions, whether you're on a plane, train, or busy city street.\",\n          image: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z\",\n            },\n          ],\n        },\n        {\n          id: \"battery-life\",\n          title: \"40-Hour Battery Life\",\n          description:\n            \"Power through your entire week with up to 40 hours of continuous playback. Fast charging gives you 5 hours of playback with just 10 minutes of charging via USB-C.\",\n          image: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo\",\n            },\n          ],\n        },\n        {\n          id: \"comfort\",\n          title: \"Premium Comfort Design\",\n          description:\n            \"Memory foam ear cushions wrapped in premium protein leather provide all-day comfort. The adjustable headband ensures a perfect fit for extended listening sessions without fatigue.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n            },\n          ],\n        },\n        {\n          id: \"connectivity\",\n          title: \"Multipoint Bluetooth 5.3\",\n          description:\n            \"Connect to two devices simultaneously and seamlessly switch between them. Latest Bluetooth 5.3 technology ensures stable connection up to 30 feet with minimal latency.\",\n          image: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\n            },\n          ],\n        },\n      ]}\n      actions={[\n        {\n          label: \"Buy Now - $349\",\n          href: \"#purchase\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Learn More\",\n          href: \"#details\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of product features","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the feature","required":true},"title":{"type":"object","description":"Feature title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"colors":{"type":"array","description":"Color variants for the product","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Color variant name","required":true},"value":{"type":"string","description":"Color value (hex, rgb, etc.)","required":true},"image":{"type":"string","description":"Optional image for this color variant","required":false}},"typeLabel":"ProductColorVariant"},"typeLabel":"ProductColorVariant[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the feature","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ProductFeature"},"typeLabel":"ProductFeature[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","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"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions 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 container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation arrows","required":false},"colorSelectorClassName":{"type":"string","description":"Additional CSS classes for the color selectors","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"indicatorsClassName":{"type":"string","description":"Additional CSS classes for the dot indicators","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Premium Wireless Headphones","subheading":"Studio-quality sound meets cutting-edge technology","background":"gray","spacing":"hero","features":[{"id":"noise-cancellation","title":"Active Noise Cancellation","description":"Industry-leading ANC technology blocks out ambient noise for an immersive listening experience.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","colors":[{"name":"Midnight Black","value":"#1a1a1a","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"name":"Silver Mist","value":"#c0c0c0","image":"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl"}]},{"id":"battery-life","title":"40-Hour Battery Life","description":"Power through your entire week with up to 40 hours of continuous playback.","image":"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq"}],"actions":[{"label":"Buy Now","href":"#purchase","variant":"default","size":"lg"},{"label":"Learn More","href":"#details","variant":"outline","size":"lg"}]},"dependencies":["@opensite/ui"],"tags":["carousel","product","features","ecommerce","variants","showcase","interactive","split-layout","saas"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ProductFeature requires 'id' and 'image' absolute URL. Supports 2–6 features; too many features crowds the dot indicators. 'colors' is optional; each ProductColorVariant can include an optional 'image' to swap the display image. Color 'value' accepts any CSS color string (hex, rgb, named). Image section uses aspect-square on mobile and aspect-4/3 on desktop. 'actions' are shared across all features and render on each feature's detail panel. Default spacing is 'hero'; default background is neutral.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-progress-slider","name":"Carousel Progress Slider","title":"Carousel Progress Slider","category":"Carousel","categorySlug":"carousel","description":"A context-based slider with animated progress bar indicators for each slide. Features auto-advancing slides with visual progress feedback and smooth transitions between content panels.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295061/s0q5rrtbd7mhe49x1tnt2pj73lu7/carousel-progress-slider-desktop.png","mobile":"https://cdn.ing/assets/i/r/295062/ua68ex7qytsihfe42qzq1cppyg2j/carousel-progress-slider-mobile.png"},"componentPath":"blocks/carousel/carousel-progress-slider.tsx","code":"import { CarouselProgressSlider } from \"@opensite/ui/blocks/carousel/carousel-progress-slider\";\n\nexport default function Demo() {\n  return (\n    <CarouselProgressSlider\n      heading=\"Platform Capabilities\"\n      subheading=\"Discover what makes our solution the industry leader\"\n      slides={[\n        {\n          id: \"analytics\",\n          title: \"Advanced Analytics\",\n          description:\n            \"Gain deep insights into your business performance with real-time dashboards, custom reports, and predictive analytics powered by machine learning algorithms.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n        },\n        {\n          id: \"automation\",\n          title: \"Intelligent Automation\",\n          description:\n            \"Streamline repetitive tasks and workflows with smart automation tools that learn from your patterns and optimize themselves over time.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n        },\n        {\n          id: \"collaboration\",\n          title: \"Team Collaboration\",\n          description:\n            \"Bring your entire team together with integrated chat, video conferencing, file sharing, and project management tools in one unified platform.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\",\n        },\n        {\n          id: \"integrations\",\n          title: \"Seamless Integrations\",\n          description:\n            \"Connect with 1,000+ apps and services through our robust API and pre-built integrations. Your tools work better together.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n        },\n        {\n          id: \"security\",\n          title: \"Enterprise Security\",\n          description:\n            \"Rest easy with SOC 2 Type II compliance, end-to-end encryption, SSO, and advanced access controls that protect your sensitive data.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4\",\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.8}\n      background=\"gray\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"string","description":"Section title (renders as h2)","required":false},"subheading":{"type":"string","description":"Section subtitle/eyebrow (renders above title)","required":false},"slides":{"type":"array","description":"Array of slides","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the slide","required":true},"title":{"type":"object","description":"Slide title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ProgressSlide"},"typeLabel":"ProgressSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"duration":{"type":"number","description":"Duration for each slide in milliseconds","required":false},"fastDuration":{"type":"number","description":"Fast forward duration in milliseconds","required":false},"vertical":{"type":"boolean","description":"Whether to use vertical progress bars","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image area","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation area","required":false},"buttonClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","required":false},"progressBarClassName":{"type":"string","description":"Additional CSS classes for the progress bar","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},"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}},"exampleProps":{"heading":"Platform Capabilities","subheading":"Discover what makes our solution the industry leader","background":"gray","spacing":"hero","pattern":"diagonalCrossBasic","patternOpacity":0.8,"duration":8000,"slides":[{"id":"analytics","title":"Advanced Analytics","description":"Gain deep insights into your business performance with real-time dashboards.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"id":"automation","title":"Intelligent Automation","description":"Streamline repetitive tasks with smart automation tools that learn over time.","image":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm"},{"id":"collaboration","title":"Team Collaboration","description":"Bring your entire team together with integrated communication tools.","image":"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh"}]},"dependencies":["@opensite/ui"],"tags":["carousel","progress","slider","auto-advance","onboarding","walkthrough","features","timed","indicators"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ProgressSlide requires 'id' string and 'image' absolute URL. Supports 3–6 slides; more slides make individual progress bars hard to read. 'duration' is the auto-advance period per slide in milliseconds (default 8000). 'vertical' switches progress indicators to fill vertically instead of horizontally. 'heading' and 'subheading' are plain strings (not ReactNode) and render via Section title/subtitle. Play/pause button renders bottom-left on the image panel.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}},{"id":"carousel-scrolling-feature-showcase","name":"Carousel Scrolling Feature Showcase","title":"Carousel Scrolling Feature Showcase","category":"Carousel","categorySlug":"carousel","description":"A scroll-driven feature showcase with a sticky image panel that updates as users scroll through feature descriptions. Features smooth transitions between feature images with intersection observer-based activation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293096/hhfm0ixjnvh1pguce3ar6xaj2zqt/cleanshot-2026-03-03-at-14-20-19.png","mobile":"https://cdn.ing/assets/i/r/293095/d4d2j42mce7dqlza0o6gdfufaore/cleanshot-2026-03-03-at-14-20-39.png"},"componentPath":"blocks/carousel/carousel-scrolling-feature-showcase.tsx","code":"import { CarouselScrollingFeatureShowcase } from \"@opensite/ui/blocks/carousel/carousel-scrolling-feature-showcase\";\n\nexport default function Demo() {\n  return (\n    <CarouselScrollingFeatureShowcase\n      heading=\"Revolutionary Features\"\n      subheading=\"Everything you need to transform your business operations\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.7}\n      background=\"white\"\n      features={[\n        {\n          id: \"ai-assistant\",\n          title: \"AI-Powered Virtual Assistant\",\n          description:\n            \"Meet your new intelligent helper that understands context, learns from interactions, and provides personalized recommendations. Available 24/7 to answer questions, automate tasks, and boost your productivity by up to 40%. Uses advanced natural language processing to understand even complex queries and deliver accurate responses in milliseconds.\",\n          image: \"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82\",\n        },\n        {\n          id: \"real-time-sync\",\n          title: \"Real-Time Data Synchronization\",\n          description:\n            \"Stay perfectly in sync across all your devices and team members. Changes appear instantly for everyone, eliminating version conflicts and ensuring your team always works with the most current information. Our conflict resolution algorithms handle simultaneous edits gracefully, and offline mode lets you work anywhere.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n        },\n        {\n          id: \"custom-workflows\",\n          title: \"No-Code Workflow Builder\",\n          description:\n            \"Design sophisticated business processes without writing a single line of code. Our visual workflow builder features drag-and-drop simplicity with powerful logic capabilities including conditional branching, loops, and external API calls. Includes 200+ pre-built templates to get you started instantly.\",\n          image: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\",\n        },\n        {\n          id: \"advanced-permissions\",\n          title: \"Granular Access Control\",\n          description:\n            \"Define precisely who can see and do what with field-level permissions, role-based access control, and conditional visibility rules. Create custom roles, set up approval workflows, and maintain detailed audit logs of all access and changes. Perfect for enterprises with complex compliance requirements.\",\n          image: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n        },\n        {\n          id: \"predictive-insights\",\n          title: \"Predictive Analytics Engine\",\n          description:\n            \"Harness the power of machine learning to forecast trends, identify opportunities, and prevent problems before they happen. Our ML models analyze historical patterns and external factors to deliver actionable insights with confidence scores. Customize predictions based on your unique business metrics.\",\n          image: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\n        },\n        {\n          id: \"white-label\",\n          title: \"Complete White Labeling\",\n          description:\n            \"Make the platform truly yours with comprehensive branding options. Customize logos, colors, domain names, email templates, and even terminology to match your brand identity perfectly. Your clients will never know you're using a third-party platform.\",\n          image: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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 container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the sticky image panel","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the feature descriptions area","required":false},"numberBadgeClassName":{"type":"string","description":"Additional CSS classes for the feature number badge","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Revolutionary Features","subheading":"Everything you need to transform your business operations","background":"white","pattern":"diagonalCrossBasic","patternOpacity":0.7,"features":[{"id":"ai-assistant","title":"AI-Powered Virtual Assistant","description":"Meet your new intelligent helper that understands context and provides personalized recommendations. Available 24/7 to answer questions, automate tasks, and boost productivity.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"id":"real-time-sync","title":"Real-Time Data Synchronization","description":"Stay perfectly in sync across all your devices and team members. Changes appear instantly for everyone, eliminating version conflicts.","image":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw"},{"id":"custom-workflows","title":"No-Code Workflow Builder","description":"Design sophisticated business processes without writing a single line of code. Our visual builder includes 200+ pre-built templates.","image":"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9"}]},"dependencies":["@opensite/ui"],"tags":["carousel","scroll","features","sticky","storytelling","documentation","marketing","synchronized","intersection-observer"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each FeatureItem requires 'id' string and 'image' absolute URL. Supports 3–8 features; too few features makes the sticky panel pointless. The sticky image panel is hidden on mobile (lg:block) — mobile renders inline images. Feature descriptions should be paragraph-length (3–5 sentences) for effective scroll spacing. The right column adds substantial bottom padding (lg:pb-[60vh]) to allow the last feature to scroll into view. The 'heading' and 'subheading' appear centered above the scrollable content.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}]},"timestamp":"2026-06-27T18:47:38.676Z"}