{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[42],\n          ctaText: \"Discover Our Platform\",\n          ctaHref: \"#platform\",\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: imagePlaceholders[67],\n          ctaText: \"View Our Work\",\n          ctaHref: \"#portfolio\",\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: imagePlaceholders[89],\n          ctaText: \"See Benchmarks\",\n          ctaHref: \"#performance\",\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: imagePlaceholders[103],\n          ctaText: \"Security Details\",\n          ctaHref: \"#security\",\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","slider","fullscreen","animated","transitions","storytelling","hero","sections","immersive"],"performance":{},"importantUsageNotes":"Use 3-6 sections in the 'sections' array — each section requires a real image URL for the full-bleed background. Do not exceed 40 characters for each section's 'title' prop. Do not exceed 130 characters for each section's 'description' prop. DO NOT USE this block if you don't have at least 3 valid real images. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[18],\n          label: \"Platform Launch - Q1 2024\",\n        },\n        {\n          src: imagePlaceholders[35],\n          label: \"AI Integration - Q2 2024\",\n        },\n        {\n          src: imagePlaceholders[52],\n          label: \"Enterprise Features - Q3 2024\",\n        },\n        {\n          src: imagePlaceholders[71],\n          label: \"Global Expansion - Q4 2024\",\n        },\n        {\n          src: imagePlaceholders[88],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","slider","auto-advance","progress","animated","hero","onboarding","timed","transitions"],"performance":{},"importantUsageNotes":"Use 4-8 items in the 'items' array — each item requires a real image URL via the 'src' field and a short 'label' (keep labels under 40 characters to avoid truncation in the slide navigation tabs). DO NOT USE this block if you don't have at least 4 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Follow the example props closely for this block."},{"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/289111/qb7qssmk2vb7d1ezhd4pedkas3b5/asdfasdfad-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289110/0x48eqle9zn1x4avfovlq6coy0vv/asdfasdfad-mobile.jpg"},"componentPath":"blocks/carousel/carousel-autoplay-progress.tsx","code":"import { CarouselAutoplayProgress } from \"@opensite/ui/blocks/carousel/carousel-autoplay-progress\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselAutoplayProgress\n      slides={[\n        {\n          src: imagePlaceholders[12],\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-muted-foreground text-sm\">\n                Discover breathtaking peaks and pristine wilderness trails\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: imagePlaceholders[28],\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-muted-foreground text-sm\">\n                Modern cityscapes showcasing cutting-edge design\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: imagePlaceholders[45],\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-muted-foreground text-sm\">\n                Golden hour magic along pristine shorelines\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: imagePlaceholders[61],\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-muted-foreground text-sm\">\n                Immerse yourself in ancient woodland ecosystems\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: imagePlaceholders[78],\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-muted-foreground text-sm\">\n                Endless horizons and sculpted sand formations\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: imagePlaceholders[94],\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-muted-foreground text-sm\">\n                Witness nature's most spectacular light show\n              </p>\n            </div>\n          ),\n        },\n      ]}\n      autoplayDelay={4000}\n      options={{ loop: true }}\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","slider","autoplay","progress-bar","embla","hero","testimonials","features","controls"],"performance":{},"importantUsageNotes":"Use 4-8 slides in the 'slides' array — each slide requires a real image URL via the 'src' field. DO NOT USE this block if you don't have at least 4 valid real images. The optional 'content' slot beneath each slide can include a short title and description; keep titles under 40 characters and descriptions under 100 characters. Follow the example props closely for this block."},{"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 { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[23],\n          alt: \"Real-time Analytics Dashboard\",\n        },\n        {\n          src: imagePlaceholders[47],\n          alt: \"Team Collaboration Tools\",\n        },\n        {\n          src: imagePlaceholders[56],\n          alt: \"API Integration Hub\",\n        },\n        {\n          src: imagePlaceholders[79],\n          alt: \"Customer Success Portal\",\n        },\n        {\n          src: imagePlaceholders[92],\n          alt: \"Advanced Reporting Engine\",\n        },\n        {\n          src: imagePlaceholders[105],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","features","screenshots","badge","two-column","platform","showcase","gallery"],"performance":{},"importantUsageNotes":"Use 4-8 items in the 'items' array — each item requires a real image URL via the 'src' field. DO NOT USE this block if you don't have at least 4 valid real images. Do not exceed 60 characters for the 'heading' prop and 140 characters for the 'description' prop. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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 { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[8],\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: imagePlaceholders[31],\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: imagePlaceholders[54],\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: imagePlaceholders[73],\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: imagePlaceholders[96],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","fullscreen","scroll","gsap","parallax","immersive","storytelling","portfolio","cinematic"],"performance":{},"importantUsageNotes":"Use 3-6 slides in the 'slides' array — this is a fullscreen scroll-fx carousel where each slide requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 3 valid real images. Do not exceed 40 characters for each slide's 'title' prop and 130 characters for each slide's 'description' prop. Per-slide 'actions' are supported; if supplying two actions on a slide, use 'default' variant for the first and 'outline' for the second. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselGalleryThumbnails\n      images={[\n        {\n          src: imagePlaceholders[14],\n          alt: \"Modern minimalist living room with floor-to-ceiling windows\",\n        },\n        {\n          src: imagePlaceholders[29],\n          alt: \"Gourmet kitchen with marble countertops and custom cabinetry\",\n        },\n        {\n          src: imagePlaceholders[41],\n          alt: \"Luxurious master bedroom with city skyline views\",\n        },\n        {\n          src: imagePlaceholders[58],\n          alt: \"Spa-inspired bathroom with rainfall shower and soaking tub\",\n        },\n        {\n          src: imagePlaceholders[66],\n          alt: \"Private rooftop terrace with outdoor entertainment area\",\n        },\n        {\n          src: imagePlaceholders[82],\n          alt: \"Home office with built-in shelving and natural light\",\n        },\n        {\n          src: imagePlaceholders[97],\n          alt: \"Elegant dining room with designer lighting fixtures\",\n        },\n        {\n          src: imagePlaceholders[108],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","gallery","thumbnails","images","portfolio","products","real-estate","photography","navigation"],"performance":{},"importantUsageNotes":"Use 5-10 images in the 'images' array — this is a gallery carousel with thumbnail navigation and each image requires a real URL via the 'src' field. DO NOT USE this block if you don't have at least 5 valid real images. Provide meaningful 'alt' text for each image as it doubles as the visible caption. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[7],\n          title: \"Santorini, Greece\",\n          count: \"2,847\",\n          countLabel: \"Travel Experiences\",\n        },\n        {\n          id: \"kyoto\",\n          imageSrc: imagePlaceholders[22],\n          title: \"Kyoto, Japan\",\n          count: \"3,192\",\n          countLabel: \"Cultural Tours\",\n        },\n        {\n          id: \"patagonia\",\n          imageSrc: imagePlaceholders[38],\n          title: \"Patagonia, Chile\",\n          count: \"1,563\",\n          countLabel: \"Adventure Activities\",\n        },\n        {\n          id: \"reykjavik\",\n          imageSrc: imagePlaceholders[51],\n          title: \"Reykjavik, Iceland\",\n          count: \"2,104\",\n          countLabel: \"Northern Lights Tours\",\n        },\n        {\n          id: \"marrakech\",\n          imageSrc: imagePlaceholders[69],\n          title: \"Marrakech, Morocco\",\n          count: \"1,876\",\n          countLabel: \"Cultural Experiences\",\n        },\n        {\n          id: \"queenstown\",\n          imageSrc: imagePlaceholders[84],\n          title: \"Queenstown, New Zealand\",\n          count: \"2,341\",\n          countLabel: \"Outdoor Adventures\",\n        },\n        {\n          id: \"barcelona\",\n          imageSrc: imagePlaceholders[99],\n          title: \"Barcelona, Spain\",\n          count: \"4,127\",\n          countLabel: \"City Tours\",\n        },\n        {\n          id: \"bali\",\n          imageSrc: imagePlaceholders[112],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","cards","horizontal","scroll","features","products","team","testimonials","stats"],"performance":{},"importantUsageNotes":"Use 5-10 items in the 'items' array — each card requires a real image URL via the 'imageSrc' field. DO NOT USE this block if you don't have at least 5 valid real images. Only use real, verifiable values for 'count' and 'countLabel'; do not invent metrics or statistics. Do not exceed 60 characters for the section 'heading' prop and 130 characters for the 'subtitle' prop. Follow the example props closely for this block."},{"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/295066/4b3mi34g8q3amden1m8kmvsdqwq2/carousel-image-hero-desktop.png","mobile":"https://cdn.ing/assets/i/r/295068/jjur3ldwlzwo9aunyml3rkp12zbr/carousel-image-hero-mobile.png"},"componentPath":"blocks/carousel/carousel-image-hero.tsx","code":"import { CarouselImageHero } from \"@opensite/ui/blocks/carousel/carousel-image-hero\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: \"Watch Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      images={[\n        {\n          src: imagePlaceholders[16],\n          alt: \"Advanced AI-powered workspace\",\n        },\n        {\n          src: imagePlaceholders[44],\n          alt: \"Collaborative team environment\",\n        },\n        {\n          src: imagePlaceholders[63],\n          alt: \"Real-time data visualization\",\n        },\n        {\n          src: imagePlaceholders[87],\n          alt: \"Seamless integration ecosystem\",\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","hero","fullwidth","background","landing","cta","portfolio","marketing","auto-advance"],"performance":{},"importantUsageNotes":"Use 3-6 images in the 'images' array — this is a hero block where the carousel cycles through real background images and each requires a real URL via the 'src' field. DO NOT USE this block if you don't have at least 3 valid real images. Do not exceed 40 characters for the 'heading' prop and 130 characters for the 'description' prop. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[11],\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: imagePlaceholders[34],\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: imagePlaceholders[59],\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: imagePlaceholders[86],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","multi-step","onboarding","tutorial","walkthrough","features","process","steps","progressive"],"performance":{},"importantUsageNotes":"Use exactly 3-5 steps in the 'steps' array — each step requires a real image URL via the 'image' field and a sequential 'step' number. DO NOT USE this block if you don't have at least 3 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Do not exceed 40 characters per step 'title' and 130 characters per step 'description'. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\n\nexport default function Demo() {\n  return (\n    <CarouselPortfolioHero\n      slides={[\n        {\n          id: 1,\n          image: imagePlaceholders[19],\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: imagePlaceholders[37],\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: imagePlaceholders[53],\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: imagePlaceholders[72],\n          title: \"Sustainability Campaign\",\n          description:\n            \"Multi-channel marketing initiative driving environmental change\",\n          tag: \"Marketing\",\n        },\n        {\n          id: 5,\n          image: imagePlaceholders[91],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","portfolio","hero","fullscreen","creative","agency","photography","design","showcase"],"performance":{},"importantUsageNotes":"Use 4-8 slides in the 'slides' array — each slide requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 4 valid real images. The per-slide 'tag' is displayed as a badge overlay; keep tags under 20 characters (ideally 1-2 words) to prevent overflow. Do not exceed 60 characters per slide 'title' and 80 characters per slide 'description'. Only use this block if you have real portfolio work to showcase — do not fabricate project titles or descriptions. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[25],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[25],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[26],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[27],\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: imagePlaceholders[48],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[48],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[49],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[50],\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: imagePlaceholders[64],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[64],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[65],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[68],\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: imagePlaceholders[81],\n          colors: [\n            {\n              name: \"Midnight Black\",\n              value: \"#1a1a1a\",\n              image: imagePlaceholders[81],\n            },\n            {\n              name: \"Silver Mist\",\n              value: \"#c0c0c0\",\n              image: imagePlaceholders[83],\n            },\n            {\n              name: \"Rose Gold\",\n              value: \"#b76e79\",\n              image: imagePlaceholders[85],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","product","features","ecommerce","variants","showcase","interactive","split-layout","saas"],"performance":{},"importantUsageNotes":"Use 3-6 features in the 'features' array — each feature requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 3 valid real product images. Each feature's optional 'colors' array represents real product color variants; only include 'colors' if the product genuinely has color options — do not fabricate color variants. Do not exceed 60 characters for the 'heading' prop, 130 characters for the 'subheading' prop, 40 characters per feature 'title', and 140 characters per feature 'description'. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[13],\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: imagePlaceholders[39],\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: imagePlaceholders[57],\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: imagePlaceholders[76],\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: imagePlaceholders[101],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","progress","slider","auto-advance","onboarding","walkthrough","features","timed","indicators"],"performance":{},"importantUsageNotes":"Ensure to generate succinct titles and descriptions for each of the 'slides' since too much content will distort the layout. Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[20],\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: imagePlaceholders[43],\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: imagePlaceholders[60],\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: imagePlaceholders[77],\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: imagePlaceholders[95],\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: imagePlaceholders[110],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","scroll","features","sticky","storytelling","documentation","marketing","synchronized","intersection-observer"],"performance":{},"importantUsageNotes":"Use 4-8 features in the 'features' array — this is a scroll-driven sticky-image showcase where each feature requires a real image URL via the 'image' field. DO NOT USE this block if you don't have at least 4 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Feature 'description' fields can be longer (up to 250 characters) as each feature description is the focal text content during scroll. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:37.986Z"}