{"success":true,"data":{"category":{"slug":"hero","name":"Hero","description":"Collection of hero components"},"blocks":[{"id":"hero-overlay-cta-grid","name":"Overlay CTA Grid Hero","title":"Hero Overlay CTA Grid","category":"Hero","categorySlug":"hero","description":"A background-image hero with a centered badge, headline, dual CTAs, and a grid of icon cards for quick navigation. Ideal for service-focused landing pages that need both narrative impact and fast access to top offerings.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290198/9w6r9tiymfe2hbzxpb2rdlxfgp30/cleanshot-2026-02-18-at-00-15-20.png","mobile":"https://cdn.ing/assets/i/r/290197/ua6rgm50bitbekpbivi77znkthou/cleanshot-2026-02-18-at-00-15-39.png"},"componentPath":"blocks/hero/hero-overlay-cta-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroOverlayCtaGrid } from \"@opensite/ui/blocks/hero/hero-overlay-cta-grid\";\n\nexport default function Demo() {\n  return (\n    <HeroOverlayCtaGrid\n      heading=\"Choose your path\"\n      backgroundImage={imagePlaceholders[12]}\n      description=\"Multiple ways to engage with our platform. Select the option that best fits your needs.\"\n      spacing=\"none\"\n      cards={[\n        {\n          label: \"New Features\",\n          subtitle: \"New AI features to automate workflows\",\n          icon: \"lucide/bot\",\n          href: \"#\",\n        },\n        {\n          label: \"Automation\",\n          subtitle: \"Dedicated agents to help streamline tasks\",\n          icon: \"lucide/bell\",\n          href: \"#\",\n        },\n        {\n          label: \"Performance\",\n          subtitle: \"Enterprise speed for all business sizes\",\n          icon: \"lucide/bolt\",\n          href: \"#\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text displayed above the heading","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Icon name for the badge","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","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},"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},"cards":{"type":"array","description":"CTA cards displayed beneath the hero copy","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"Card label text","required":true},"subtitle":{"type":"string","description":"Supporting card text","required":true},"icon":{"type":"string","description":"Icon name for the card","required":true},"href":{"type":"string","description":"Optional link destination","required":false}},"typeLabel":"HeroOverlayCtaGridCard"},"typeLabel":"HeroOverlayCtaGridCard[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for cards (overrides cards array)","typeLabel":"React.ReactNode","required":false},"backgroundImage":{"type":"string","description":"Background image URL","required":false},"backgroundAlt":{"type":"string","description":"Background image alt text","required":false},"backgroundSlot":{"type":"object","description":"Custom slot for background (overrides backgroundImage)","typeLabel":"React.ReactNode","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content","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},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","overlay","background-image","cta","grid","cards","icons","landing","services","navigation"],"performance":{},"importantUsageNotes":"Only use if you are going to use exactly 3 'cards' for the 'cards' props. The 'href' for each of the cards is optional, only supply it if you have a valid href for each of the card items. Follow the example props closely for this block."},{"id":"hero-split-icon-cards","name":"Split Icon Cards Hero","title":"Hero Split Icon Cards","category":"Hero","categorySlug":"hero","description":"A two-column hero with heading, description, and CTAs on the left, plus stacked icon cards on the right. Perfect for highlighting key benefits or service pillars in a quick, scannable layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290200/d6ohwrcvz5p0qo1fq07uhr0qfuny/cleanshot-2026-02-18-at-00-37-52.png","mobile":"https://cdn.ing/assets/i/r/290199/9whp93w7v5dh4m7dahvvuvn0cs2w/cleanshot-2026-02-18-at-00-38-08.png"},"componentPath":"blocks/hero/hero-split-icon-cards.tsx","code":"import { HeroSplitIconCards } from \"@opensite/ui/blocks/hero/hero-split-icon-cards\";\n\nexport default function Demo() {\n  return (\n    <HeroSplitIconCards\n      eyebrow=\"For Developers\"\n      heading=\"Built for teams that ship fast\"\n      description=\"Powerful features designed for modern development teams. Ship better products, faster.\"\n      primaryCta={{\n        label: \"Get Started\",\n        href: \"#\",\n      }}\n      secondaryCta={{\n        label: \"View Demo\",\n        href: \"#\",\n      }}\n      cardItems={[\n        {\n          title: \"New Features\",\n          subtitle: \"New AI features to automate workflows\",\n          icon: \"lucide/bot\",\n          href: \"#\",\n        },\n        {\n          title: \"Automation\",\n          subtitle: \"Dedicated agents to help streamline tasks\",\n          icon: \"lucide/bell\",\n          href: \"#\",\n        },\n        {\n          title: \"Performance\",\n          subtitle: \"Enterprise speed for all business sizes\",\n          icon: \"lucide/bolt\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"circuitBoardBasic\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Hero heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"primaryCta":{"type":"object","description":"Primary call-to-action configuration","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"{ label: string; href: string; }","required":false},"secondaryCta":{"type":"object","description":"Secondary call-to-action configuration","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"{ label: string; href: string; }","required":false},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides primaryCta and secondaryCta)","typeLabel":"React.ReactNode","required":false},"children":{"type":"object","description":"Optional custom content for the left column","typeLabel":"React.ReactNode","required":false},"cardItems":{"type":"array","description":"Icon card items for the right column","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Card title","required":true},"subtitle":{"type":"string","description":"Card supporting text","required":false},"icon":{"type":"string","description":"Icon name for the card","required":true},"href":{"type":"string","description":"Optional link destination","required":false}},"typeLabel":"HeroSplitIconCardsItem"},"typeLabel":"HeroSplitIconCardsItem[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for cards (overrides cardItems array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"verticalSpacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content column","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","split","two-column","icon-cards","benefits","cta","services","features","callouts"],"performance":{},"importantUsageNotes":"Only use if you are going to use 3-4 'cards' for the 'cards' props. Follow the example props closely for this block."},{"id":"hero-floating-images","name":"Floating Images Hero","title":"Hero Floating Images","category":"Hero","categorySlug":"hero","description":"A centered hero with decorative swirl lines and floating image accents around the headline. Great for lifestyle, hospitality, or brand-forward landing pages that need a playful visual tone.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/287651/iqa7polbmolw2cz1ykaxayyq437f/hero-preview-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/287652/5nuzgffs2qsop76mz7ckuvek9xp9/hero-preview-mobile.jpg"},"componentPath":"blocks/hero/hero-floating-images.tsx","code":"import { imagePlaceholders, optixFlowApiKey } from \"@/lib/media\";\nimport { HeroFloatingImages } from \"@opensite/ui/blocks/hero/hero-floating-images\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroFloatingImages\n      badge=\"Featured Work\"\n      heading=\"Build Stunning Websites with OpenSite UI\"\n      description=\"We design and build beautiful digital products that help brands connect with their audience. From concept to launch, we bring visions to life.\"\n      actions={[\n        {\n          label: \"View Portfolio\",\n          href: \"/portfolio\",\n          size: \"lg\",\n          variant: \"default\",\n          iconAfter: (\n            <DynamicIcon name=\"lucide/arrow-right\" className=\"h-4 w-4\" />\n          ),\n        },\n        {\n          label: \"Our Process\",\n          href: \"/process\",\n          size: \"lg\",\n          variant: \"link\",\n        },\n      ]}\n      images={[\n        {\n          src: imagePlaceholders[10],\n          alt: \"Floating Image 1\",\n          className: \"rounded-lg shadow-lg\",\n        },\n        {\n          src: imagePlaceholders[15],\n          alt: \"Floating Image 2\",\n          className: \"rounded-lg shadow-lg\",\n        },\n        {\n          src: imagePlaceholders[20],\n          alt: \"Floating Image 3\",\n          className: \"rounded-lg shadow-lg\",\n        },\n      ]}\n      optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n      className=\"flex items-center justify-center\"\n      background=\"dark\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content displayed above the heading","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","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 images for the gallery section.\nFirst image with `featured: true` (or first image if none marked) displays as the tall featured image.\nRemaining images display in a stacked layout beside it.","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"featured":{"type":"boolean","description":"Whether this is a featured image (displays larger/taller in the gallery)","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"HeroFloatingImagesImage"},"typeLabel":"HeroFloatingImagesImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering the gallery (overrides images array).\nUse when you need complete control over the gallery layout.","typeLabel":"React.ReactNode","required":false},"zoomIconName":{"type":"string","description":"Icon name for the zoom indicator on gallery images.\nUses DynamicIcon format: \"prefix/icon-name\"","required":false},"enableLightbox":{"type":"boolean","description":"Whether to enable lightbox functionality for gallery images.\nWhen enabled, clicking an image opens it in a fullscreen lightbox.","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area (left side)","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},"galleryClassName":{"type":"string","description":"Additional CSS classes for the gallery container (right side)","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured image wrapper","required":false},"secondaryImageClassName":{"type":"string","description":"Additional CSS classes for secondary image wrappers","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for all images","required":false},"zoomIndicatorClassName":{"type":"string","description":"Additional CSS classes for the zoom indicator overlay","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{"zoomIconName":"lucide/zoom-in","enableLightbox":true,"spacing":"lg"},"dependencies":["@opensite/ui","@page-speed/img","@page-speed/lightbox"],"tags":["hero","floating","images","centered","decorative","playful","brand","landing","visual"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-badge-image-split","name":"Badge Image Split Hero","title":"Hero Badge Image Split","category":"Hero","categorySlug":"hero","description":"A split-layout hero section with a badge, headline, description, and CTA buttons on the left, and a large featured image on the right. Includes a logo bar showing trusted companies. Perfect for SaaS products and business landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290204/21i0ddzfyrqusjfdp7uofkrde7az/cleanshot-2026-02-18-at-01-17-10.png","mobile":"https://cdn.ing/assets/i/r/290203/4ba9nnndzzr6gdf2kko2zlr1fy2z/cleanshot-2026-02-18-at-01-17-34.png"},"componentPath":"blocks/hero/hero-badge-image-split.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroBadgeImageSplit } from \"@opensite/ui/blocks/hero/hero-badge-image-split\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroBadgeImageSplit\n      badge=\"New Release\"\n      badgeIcon={<DynamicIcon name=\"lucide/sparkles\" size={16} />}\n      heading=\"Build faster with our platform\"\n      description=\"Everything you need to ship your product in record time. Developer-friendly tools, powerful features, and world-class support.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"/signup\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"/about\",\n          variant: \"outline\",\n        },\n      ]}\n      imageSrc={imagePlaceholders[35]}\n      imageAlt=\"Platform dashboard\"\n      background=\"gray\"\n      pattern=\"dashedGridFadeTopRight\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","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},"imageSrc":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","landing","split","badge","image","cta","logos","trust","saas","business"],"performance":{},"importantUsageNotes":"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":"hero-image-left-content","name":"Image Left Content Hero","title":"Hero Image Left Content","category":"Hero","categorySlug":"hero","description":"A hero section with a large image on the left and content on the right, featuring headline, description, and CTA buttons. Great for showcasing products or services with visual emphasis.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290206/u771s78d55x6ledoso4ulj9bvdnx/cleanshot-2026-02-18-at-01-18-45.png","mobile":"https://cdn.ing/assets/i/r/290205/a9yh3m5k0x2yhrlven4fvqofsbim/cleanshot-2026-02-18-at-01-19-05.png"},"componentPath":"blocks/hero/hero-image-left-content.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroImageLeftContent } from \"@opensite/ui/blocks/hero/hero-image-left-content\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroImageLeftContent\n      imageSrc={imagePlaceholders[8]}\n      imageAlt=\"Product showcase\"\n      heading=\"Beautiful design meets powerful functionality\"\n      description=\"Create stunning experiences with our intuitive platform. Designed for professionals, built for everyone.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/play-circle\" size={16} />,\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridBasic\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","typeLabel":"React.ReactNode","required":false},"badgeVariant":{"type":"string","description":"Badge variant","typeLabel":"\"default\" | \"secondary\" | \"destructive\" | \"outline\"","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},"imageSrc":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","landing","split","image","content","cta","product","visual"],"performance":{},"importantUsageNotes":"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":"hero-image-slider","name":"Image Slider Hero","title":"Hero Image Slider","category":"Hero","categorySlug":"hero","description":"An immersive hero that layers headline content over a rotating image slider. Ideal for storytelling or product showcases where multiple visuals should share the spotlight.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290208/ofa2sbs39c8dqu99vwvuxeub7m5w/cleanshot-2026-02-18-at-01-20-25.png","mobile":"https://cdn.ing/assets/i/r/290207/lek44x66u4mitdn320c2y2r7r3ex/cleanshot-2026-02-18-at-01-20-46.png"},"componentPath":"blocks/hero/hero-image-slider.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroImageSlider } from \"@opensite/ui/blocks/hero/hero-image-slider\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroImageSlider\n      heading=\"Explore our collection\"\n      description=\"Browse through our carefully curated selection of products, each one designed to enhance your experience.\"\n      images={[\n        { src: imagePlaceholders[14], alt: \"Slide 1\" },\n        { src: imagePlaceholders[18], alt: \"Slide 2\" },\n        { src: imagePlaceholders[19], alt: \"Slide 3\" },\n        { src: imagePlaceholders[26], alt: \"Slide 4\" },\n      ]}\n      actions={[\n        {\n          label: \"Shop Now\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/shopping-bag\" size={16} />,\n        },\n      ]}\n      formHeading=\"Join the list\"\n      buttonText=\"Get Updates\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thanks for subscribing! We'll keep you updated.\",\n      }}\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Action button 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},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"contentSlot":{"type":"object","description":"Custom content slot for the hero copy area","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Image slider items","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":false},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"Optional per-image OptixFlow 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}},"typeLabel":"ImageSliderImage"},"typeLabel":"ImageSliderImage[]","required":false},"autoplay":{"type":"boolean","description":"Enable autoplay rotation","required":false},"autoplayIntervalMs":{"type":"number","description":"Autoplay interval in milliseconds","required":false},"direction":{"type":"string","description":"Slide direction for transitions","typeLabel":"\"up\" | \"down\"","required":false},"overlay":{"type":"boolean","description":"Enable the overlay gradient","required":false},"overlaySlot":{"type":"object","description":"Custom overlay slot (overrides default overlay)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"sliderClassName":{"type":"string","description":"Additional CSS classes for the slider wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the hero content wrapper","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow","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 element","required":false},"overlayClassName":{"type":"string","description":"Additional CSS classes for the overlay layer","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},"formHeading":{"type":"object","description":"Form heading text","typeLabel":"React.ReactNode","required":false},"buttonText":{"type":"string","description":"Submit button text","required":false},"buttonIcon":{"type":"object","description":"Icon to display in submit button","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the form card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"formHeadingClassName":{"type":"string","description":"Additional CSS classes for the form heading","required":false},"privacyNotice":{"type":"object","description":"Privacy notice text below the form","typeLabel":"React.ReactNode","required":false},"privacyNoticeClassName":{"type":"string","description":"Additional CSS classes for the privacy notice","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","slider","carousel","images","background","overlay","cta","storytelling","visual","rotating"],"performance":{},"importantUsageNotes":"Ensure to utilize the form configuration setup for this block."},{"id":"hero-centered-image-grid","name":"Centered Image Grid Hero","title":"Hero Centered Image Grid","category":"Hero","categorySlug":"hero","description":"A centered hero section with headline and description above a grid of images. Ideal for portfolios, galleries, or showcasing multiple products or team members.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290222/cicdwh2mxwcgbazjgc2tcdj9lx74/cleanshot-2026-02-18-at-02-30-21.png","mobile":"https://cdn.ing/assets/i/r/290221/cye89vszposa91pet34gmi9ij2wu/cleanshot-2026-02-18-at-02-30-35.png"},"componentPath":"blocks/hero/hero-centered-image-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroCenteredImageGrid } from \"@opensite/ui/blocks/hero/hero-centered-image-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCenteredImageGrid\n      heading=\"Visual storytelling at its finest\"\n      description=\"Showcase your work with beautiful grid layouts that capture attention and inspire action.\"\n      actions={[\n        {\n          label: \"View Gallery\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      gridImages={[\n        { src: imagePlaceholders[62], alt: \"Gallery 1\" },\n        { src: imagePlaceholders[63], alt: \"Gallery 2\" },\n        { src: imagePlaceholders[64], alt: \"Gallery 3\" },\n        { src: imagePlaceholders[65], alt: \"Gallery 4\" },\n        { src: imagePlaceholders[66], alt: \"Gallery 5\" },\n        { src: imagePlaceholders[67], alt: \"Gallery 6\" },\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.1}\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"gridImages":{"type":"array","description":"Grid images (expects 2 images)","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},"gridImagesSlot":{"type":"object","description":"Custom slot for grid images (overrides gridImages)","typeLabel":"React.ReactNode","required":false},"imageOverlayAction":{"type":"object","description":"Image overlay action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"imageGridClassName":{"type":"string","description":"Additional CSS classes for the image grid","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","centered","grid","images","gallery","portfolio","showcase"],"performance":{},"importantUsageNotes":"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":"hero-centered-screenshot","name":"Centered Screenshot Hero","title":"Hero Centered Screenshot","category":"Hero","categorySlug":"hero","description":"A centered hero with headline, description, and CTA buttons above a large product screenshot. Perfect for SaaS products, apps, and software landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306287/hbucadspqrmgag9to430mb8dwj98/hero-centered-screenshot-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306288/krll2hzr7k3y25dhi4wjprac6svx/hero-centered-screenshot-mobile.jpg"},"componentPath":"blocks/hero/hero-centered-screenshot.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroCenteredScreenshot } from \"@opensite/ui/blocks/hero/hero-centered-screenshot\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCenteredScreenshot\n      heading=\"The all-in-one platform for modern teams\"\n      description=\"Everything you need to collaborate, communicate, and create amazing work together. Simple, powerful, and built for the way you work.\"\n      actions={[\n        {\n          label: \"Try It Free\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" />,\n          asButton: true,\n          size: \"lg\",\n        },\n        {\n          label: \"See Plans\",\n          href: \"#\",\n          variant: \"ghost\",\n          asButton: true,\n          size: \"lg\",\n        },\n      ]}\n      imageSrc={imagePlaceholders[70]}\n      imageAlt=\"Product interface screenshot\"\n      background=\"gray\"\n      pattern=\"gridBasic\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"imageSrc":{"type":"string","description":"Screenshot/hero image source URL","required":false},"imageAlt":{"type":"string","description":"Screenshot/hero image alt text","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","centered","screenshot","product","saas","app","software","demo"],"performance":{},"importantUsageNotes":"Do not exceed 42 characters for the 'heading' prop. Do not exceed 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":"hero-pattern-badge-logos","name":"Pattern Badge Logos Hero","title":"Hero Pattern Badge Logos","category":"Hero","categorySlug":"hero","description":"A hero section with a decorative background pattern, badge, headline, and a row of trusted company logos. Great for establishing credibility and trust.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290212/ozmjo7rfgesnlf5uzsz8ukuoqy0q/cleanshot-2026-02-18-at-01-29-09.png","mobile":"https://cdn.ing/assets/i/r/290211/p8w7pxobvx7qtautaw4iigqheoot/cleanshot-2026-02-18-at-01-29-28.png"},"componentPath":"blocks/hero/hero-pattern-badge-logos.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroPatternBadgeLogos } from \"@opensite/ui/blocks/hero/hero-pattern-badge-logos\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPatternBadgeLogos\n      badge=\"Trusted by Leaders\"\n      heading=\"Join the world's most innovative companies\"\n      description=\"Over 10,000 organizations trust our platform to power their operations and drive growth.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"/signup\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Customers\",\n          href: \"/customers\",\n          variant: \"outline\",\n        },\n      ]}\n      logos={[\n        { src: brandLogoPlaceholders.black[0], alt: \"Company 1\" },\n        { src: brandLogoPlaceholders.black[1], alt: \"Company 2\" },\n        { src: brandLogoPlaceholders.black[2], alt: \"Company 3\" },\n        { src: brandLogoPlaceholders.black[3], alt: \"Company 4\" },\n        { src: brandLogoPlaceholders.black[4], alt: \"Company 5\" },\n        { src: brandLogoPlaceholders.black[5], alt: \"Company 6\" },\n      ]}\n      pattern=\"architect\"\n      patternOpacity={0.1}\n      background=\"muted\"\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},"logos":{"type":"array","description":"Array of logo configurations","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for rendering logos (overrides logos array)","typeLabel":"React.ReactNode","required":false},"logosTagline":{"type":"object","description":"Tagline text above logos","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","pattern","badge","logos","trust","credibility","companies","partners"],"performance":{},"importantUsageNotes":"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. AND VERY IMPORTANT: only use this block if you have 3-6 valid logo img urls since the focal point of this block is to showcase a collection of logos."},{"id":"hero-logo-centered-screenshot","name":"Logo Centered Screenshot Hero","title":"Hero Logo Centered Screenshot","category":"Hero","categorySlug":"hero","description":"A centered hero featuring a logo, headline, description, and a large centered screenshot. Includes trusted company logos below. Ideal for product launches.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290224/cg3a5bh0o4dzsg46rb5qjg8q9ho4/cleanshot-2026-02-18-at-02-31-51.png","mobile":"https://cdn.ing/assets/i/r/290223/s8sx12gozl3sw5bgqgm9rlwcqr2o/cleanshot-2026-02-18-at-02-32-11.png"},"componentPath":"blocks/hero/hero-logo-centered-screenshot.tsx","code":"import { imagePlaceholders, logoPlaceholders } from \"@/lib/media\";\nimport { HeroLogoCenteredScreenshot } from \"@opensite/ui/blocks/hero/hero-logo-centered-screenshot\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroLogoCenteredScreenshot\n      logo={{ src: logoPlaceholders.lightHorizontalLogo, alt: \"Company Logo\" }}\n      heading=\"The platform that powers modern businesses\"\n      description=\"Trusted by thousands of companies worldwide to streamline operations and drive growth.\"\n      action={{\n        label: \"Get Started\",\n        href: \"/signup\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      image={{ src: imagePlaceholders[33], alt: \"Platform screenshot\" }}\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","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},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Screenshot image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","logo","centered","screenshot","product","launch","trust","logos"],"performance":{},"importantUsageNotes":"Only supply a `logo` object if the website has a logo in its media library."},{"id":"hero-pattern-logo-tech-stack","name":"Pattern Logo Tech Stack Hero","title":"Hero Pattern Logo Tech Stack","category":"Hero","categorySlug":"hero","description":"A hero section with a background pattern, logo, headline, and a visual display of technology stack icons. Perfect for developer tools and technical products.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290226/voswkh09xl0fsefnpavwbpwd6rl5/cleanshot-2026-02-18-at-02-33-19.png","mobile":"https://cdn.ing/assets/i/r/290225/tde0mxqqulf7d8i8wjqvxblrycwx/cleanshot-2026-02-18-at-02-33-31.png"},"componentPath":"blocks/hero/hero-pattern-logo-tech-stack.tsx","code":"import {\n  brandLogoPlaceholders,\n  imagePlaceholders,\n  logoPlaceholders,\n} from \"@/lib/media\";\nimport { HeroPatternLogoTechStack } from \"@opensite/ui/blocks/hero/hero-pattern-logo-tech-stack\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPatternLogoTechStack\n      logo={{ src: logoPlaceholders.darkHorizontalLogo, alt: \"Company Logo\" }}\n      heading=\"Built with the best technologies\"\n      description=\"Powered by cutting-edge tools and frameworks that developers love. Fast, reliable, and scalable.\"\n      techLogos={[\n        { src: brandLogoPlaceholders.black[0], alt: \"React\" },\n        { src: brandLogoPlaceholders.black[1], alt: \"TypeScript\" },\n        { src: brandLogoPlaceholders.black[2], alt: \"Node.js\" },\n        { src: brandLogoPlaceholders.black[3], alt: \"PostgreSQL\" },\n        { src: brandLogoPlaceholders.black[4], alt: \"Docker\" },\n        { src: brandLogoPlaceholders.black[5], alt: \"AWS\" },\n      ]}\n      actions={[\n        {\n          label: \"View Docs\",\n          href: \"/docs\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"GitHub\",\n          href: \"https://github.com\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/github\" size={16} />,\n        },\n      ]}\n      pattern=\"grid1\"\n      background=\"white\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"highlightedWord":{"type":"string","description":"Highlighted word in heading","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},"techStackLabel":{"type":"object","description":"Tech stack section label","typeLabel":"React.ReactNode","required":false},"techLogos":{"type":"array","description":"Array of tech stack logos","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"techLogosSlot":{"type":"object","description":"Custom slot for tech logos (overrides techLogos array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"techLogosClassName":{"type":"string","description":"Additional CSS classes for the tech logos 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","pattern","logo","tech","stack","developer","tools","technical","icons"],"performance":{},"importantUsageNotes":"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. AND VERY IMPORTANT: only use this block if you have 3-6 valid logo img urls since the focal point of this block is to showcase a collection of 'techLogos'."},{"id":"hero-announcement-badge","name":"Announcement Badge Hero","title":"Hero Announcement Badge","category":"Hero","categorySlug":"hero","description":"A hero section featuring an announcement badge at the top, followed by headline, description, and CTA buttons. Great for product launches and announcements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290292/ja8wrtovqlc6yz1ue5upgn4kowq7/cleanshot-2026-02-18-at-04-08-23.png","mobile":"https://cdn.ing/assets/i/r/290291/g61i4jgk0fsw9jrlo181c3vgl9b2/cleanshot-2026-02-18-at-04-08-33.png"},"componentPath":"blocks/hero/hero-announcement-badge.tsx","code":"import { HeroAnnouncementBadge } from \"@opensite/ui/blocks/hero/hero-announcement-badge\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroAnnouncementBadge\n      badge=\"New Release v2.0\"\n      badgeIcon={<DynamicIcon name=\"lucide/sparkles\" size={16} />}\n      heading=\"The future of productivity is here\"\n      description=\"Experience unprecedented performance and new features designed to transform the way you work. Join thousands of teams already making the switch.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"What's New\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/announcement content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","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},"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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","announcement","badge","launch","news","update","cta"],"performance":{},"importantUsageNotes":"Do not exceed 54 characters for the 'heading' prop. Do not exceed 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":"hero-tech-carousel","name":"Multi-Panel Hero","title":"Hero Multi-Panel Carousel","category":"Hero","categorySlug":"hero","description":"A full-bleed hero with up to four side-by-side panels on desktop that stack vertically on mobile. Each panel supports an optional logo, title, content, action buttons, and an optional background image or autoplaying image carousel.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306986/zo59nnooemltqmy2w5e9ik7urebv/hero-tech-carousel-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306987/vcz6x2ilfnx4y4h5vy734nhgb4z8/hero-tech-carousel-mobile.jpg"},"componentPath":"blocks/hero/hero-tech-carousel.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroTechCarousel } from \"@opensite/ui/blocks/hero/hero-tech-carousel\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroTechCarousel\n      spacing=\"mt-8 md:mt-0\"\n      items={[\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[0],\n            alt: \"InsuranceSite\",\n          },\n          title: \"InsuranceSite\",\n          content:\n            \"Modern broker tooling that helps independent agents close policies faster.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[0], alt: \"\" },\n            { src: imagePlaceholders[5], alt: \"\" },\n            { src: imagePlaceholders[10], alt: \"\" },\n          ],\n        },\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[1],\n            alt: \"RealtorSite\",\n          },\n          title: \"RealtorSite\",\n          content:\n            \"Built for high-volume listing agents who want a beautiful site without the busywork.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[74], alt: \"\" },\n            { src: imagePlaceholders[52], alt: \"\" },\n            { src: imagePlaceholders[110], alt: \"\" },\n          ],\n        },\n        {\n          logo: {\n            src: brandLogoPlaceholders.white[2],\n            alt: \"CastKit\",\n          },\n          title: \"CastKit\",\n          content:\n            \"AI-powered podcast production from raw recording to publish-ready episode.\",\n          actions: [\n            {\n              label: \"Get Started\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          backgroundMedia: [\n            { src: imagePlaceholders[88], alt: \"\" },\n            { src: imagePlaceholders[99], alt: \"\" },\n            { src: imagePlaceholders[130], alt: \"\" },\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"items":{"type":"array","description":"Panels rendered side-by-side on desktop and stacked on mobile.\nCapped at  (4) — additional entries are ignored.","items":{"type":"object","description":"","fields":{"logo":{"type":"object","description":"Optional logo rendered above the title.\nFollows the standard  prop shape used across blocks.\nDefault styling applies `object-contain` so SVG/PNG logos preserve aspect ratio.","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo (overrides the  prop).","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Optional panel title.","typeLabel":"React.ReactNode | string","required":false},"content":{"type":"object","description":"Optional supporting content rendered below the title.","typeLabel":"React.ReactNode | string","required":false},"actions":{"type":"array","description":"Optional action buttons / links rendered at the bottom of the panel.","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},"backgroundMedia":{"type":"array","description":"Optional background media for the panel.\n\n- `0` items → no background, panel renders on the section background.\n- `1` item  → static background image.\n- `2+` items → autoplaying image carousel via .","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":false},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"className":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"Optional per-image OptixFlow 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}},"typeLabel":"ImageSliderImage"},"typeLabel":"ImageSliderImage[]","required":false},"backgroundAutoplayIntervalMs":{"type":"number","description":"Autoplay interval (ms) for this panel's background carousel.\nFalls back to the block-level `backgroundAutoplayIntervalMs` when omitted.","required":false},"id":{"type":"string","description":"Optional id for the panel element (for anchor links / analytics).","required":false},"className":{"type":"string","description":"Additional CSS classes for this panel's outer wrapper.","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the panel's content layer (above the background).","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the panel's logo element.","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the panel's title element.","required":false},"textClassName":{"type":"string","description":"Additional CSS classes for the panel's content paragraph.","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the panel's actions wrapper.","required":false},"overlayClassName":{"type":"string","description":"Additional CSS classes applied to the panel's background overlay.\nUseful for tuning legibility per-panel (e.g. `bg-black/60`).","required":false},"optixFlowConfig":{"type":"object","description":"Per-panel OptixFlow override. Falls back to the block-level config.","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}},"typeLabel":"HeroPanelItem"},"typeLabel":"HeroPanelItem[]","required":false},"backgroundAutoplayIntervalMs":{"type":"number","description":"Default autoplay interval (ms) used when a panel has 2+ background media\nitems and does not specify its own `backgroundAutoplayIntervalMs`.","required":false},"background":{"type":"string","description":"Background style for the section.","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section. Defaults to `none` so panels can fill\nthe full viewport on desktop without padding.","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name applied to the section.","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1).","required":false},"className":{"type":"string","description":"Additional CSS classes for the section.","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the section container.","required":false},"panelsClassName":{"type":"string","description":"Additional CSS classes for the panels wrapper (the flex/grid track).","required":false},"panelContentClassName":{"type":"string","description":"Default classes shared by every panel content layer (title/content/actions).\nPer-panel `contentClassName` is appended after this.","required":false},"optixFlowConfig":{"type":"object","description":"Block-level OptixFlow image optimization configuration. Applies to all\npanels unless a panel provides its own `optixFlowConfig`.","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","multi-panel","split","full-bleed","fullscreen","background-image","image-carousel","brands","showcase","cta"],"performance":{},"importantUsageNotes":"Full-bleed multi-panel hero. Pass 1-4 'items' (capped at 4); each item supports an optional logo (LogoItem with object-contain default), title, content, and ActionConfig[] actions. Each item can also take an optional 'backgroundMedia' array of ImageSliderImage entries — 0 = no background, 1 = static cover image, 2+ = autoplaying image carousel. On desktop the panels share a 100vw x 100dvh row equally; on mobile they stack vertically with a content-fit height. Best for showcasing a portfolio of products, sub-brands, audiences, or service tiers in a single immersive hero."},{"id":"hero-simple-centered-image","name":"Simple Centered Image Hero","title":"Hero Simple Centered Image","category":"Hero","categorySlug":"hero","description":"A minimal centered hero with headline, description, CTA buttons, and a single featured image below. Clean and straightforward design for any landing page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290294/ajrfpoiz611nukir220y4xh9h0am/cleanshot-2026-02-18-at-04-09-39.png","mobile":"https://cdn.ing/assets/i/r/290293/60psymwja5zqlpgpil8zgoqp2i1a/cleanshot-2026-02-18-at-04-09-50.png"},"componentPath":"blocks/hero/hero-simple-centered-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSimpleCenteredImage } from \"@opensite/ui/blocks/hero/hero-simple-centered-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSimpleCenteredImage\n      heading=\"Clean, simple, effective\"\n      description=\"Sometimes less is more. Focus on what matters with our streamlined approach to design and functionality.\"\n      imageSrc={imagePlaceholders[9]}\n      imageAlt=\"Product showcase\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"imageSrc":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","simple","centered","image","minimal","clean","landing"],"performance":{},"importantUsageNotes":"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":"hero-platform-features-grid","name":"Platform Features Grid Hero","title":"Hero Platform Features Grid","category":"Hero","categorySlug":"hero","description":"A hero section showcasing platform features in a grid layout with icons and descriptions. Includes headline and CTA. Perfect for feature-rich products.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290296/wvipb14wddxax1xjekblovwq3ji6/cleanshot-2026-02-18-at-04-10-52.png","mobile":"https://cdn.ing/assets/i/r/290295/1zrq2efvt9syeepxt4vs752q7g9p/cleanshot-2026-02-18-at-04-11-09.png"},"componentPath":"blocks/hero/hero-platform-features-grid.tsx","code":"import { logoPlaceholders } from \"@/lib/media\";\nimport { HeroPlatformFeaturesGrid } from \"@opensite/ui/blocks/hero/hero-platform-features-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPlatformFeaturesGrid\n      logo={{ src: logoPlaceholders.darkHorizontalLogo, alt: \"Company Logo\" }}\n      subtitle=\"Complete Platform\"\n      heading=\"A complete platform for modern teams\"\n      description=\"All-in-one solution that combines communication, collaboration, and project management tools in a single platform.\"\n      action={{\n        label: \"Explore Features\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      features={[\n        {\n          iconName: \"lucide/message-square\",\n          title: \"Team Chat\",\n          description: \"Real-time messaging\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/video\",\n          title: \"Video Calls\",\n          description: \"HD video meetings\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/file-text\",\n          title: \"Documents\",\n          description: \"Collaborative editing\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/calendar\",\n          title: \"Calendar\",\n          description: \"Schedule meetings\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Subtitle/label text above heading","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature items for the grid","items":{"type":"object","description":"","typeLabel":"FeatureItem & { iconName?: string }"},"typeLabel":"FeatureItem & { iconName?: string }[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features grid","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","platform","features","grid","icons","product","showcase"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 `features` since the achievements showcase is a 4 column layout. Follow the example props closely for this block."},{"id":"hero-spiral-pattern-cards","name":"Spiral Pattern Cards Hero","title":"Hero Spiral Pattern Cards","category":"Hero","categorySlug":"hero","description":"A creative hero with a spiral background pattern and floating feature cards. Unique visual design for creative agencies and innovative products.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290298/43jbz6hrp7ni24e2x35dwnjtr3eb/cleanshot-2026-02-18-at-04-12-02.png","mobile":"https://cdn.ing/assets/i/r/290297/8q6yf85thj7vvdmq2cuhjnvuvg8c/cleanshot-2026-02-18-at-04-12-15.png"},"componentPath":"blocks/hero/hero-spiral-pattern-cards.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSpiralPatternCards } from \"@opensite/ui/blocks/hero/hero-spiral-pattern-cards\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSpiralPatternCards\n      badgeText=\"Innovative Platform\"\n      heading=\"Innovative solutions that evolve with you\"\n      description=\"Dynamic, flexible, and always improving. Our platform adapts to your needs and grows with your business.\"\n      actions={[\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.1}\n      images={[\n        { src: imagePlaceholders[120], alt: \"Image 1\" },\n        { src: imagePlaceholders[121], alt: \"Image 2\" },\n        { src: imagePlaceholders[122], alt: \"Image 3\" },\n      ]}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text 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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"images":{"type":"array","description":"Array of images to display (expects 3 images for stacked card effect)","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},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","spiral","pattern","cards","creative","innovative","visual","agency"],"performance":{},"importantUsageNotes":"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":"hero-split-spiral-shapes","name":"Split Spiral Shapes Hero","title":"Hero Split Spiral Shapes","category":"Hero","categorySlug":"hero","description":"A split-layout hero with content on one side and decorative spiral shapes on the other. Artistic and modern design for creative businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290216/7gjd6p0qulimr2q4f0qwmc1gt8p7/cleanshot-2026-02-18-at-01-50-34.png","mobile":"https://cdn.ing/assets/i/r/290215/xnytd9m7yonh4e4jd0d1lip4sqbg/cleanshot-2026-02-18-at-01-50-51.png"},"componentPath":"blocks/hero/hero-split-spiral-shapes.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSplitSpiralShapes } from \"@opensite/ui/blocks/hero/hero-split-spiral-shapes\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSplitSpiralShapes\n      badgeText=\"Design Excellence\"\n      heading=\"Where creativity meets precision\"\n      description=\"Award-winning designs that blend artistic vision with technical excellence. Experience the difference of thoughtful design.\"\n      actions={[\n        {\n          label: \"View Portfolio\",\n          href: \"/portfolio\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Contact Us\",\n          href: \"/contact\",\n          variant: \"outline\",\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[120], alt: \"Image 1\" },\n        { src: imagePlaceholders[121], alt: \"Image 2\" },\n        { src: imagePlaceholders[122], alt: \"Image 3\" },\n      ]}\n      background=\"dark\"\n      pattern=\"spotlightRight\"\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text 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 images to display (expects 3 images for scattered layout)","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},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","split","spiral","shapes","artistic","modern","creative","design"],"performance":{},"importantUsageNotes":"Do not exceed 42 characters for the 'heading' prop. Do not exceed 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. And ensure to supply exactly 3 images. Follow the example props closely for this block."},{"id":"hero-split-geometric-shapes","name":"Split Geometric Shapes Hero","title":"Hero Split Geometric Shapes","category":"Hero","categorySlug":"hero","description":"A split-layout hero featuring geometric shapes and patterns alongside content. Modern and professional design for tech companies.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290300/xcossl5mgscg6786yyuag026zcuo/cleanshot-2026-02-18-at-04-13-08.png","mobile":"https://cdn.ing/assets/i/r/290299/44k5textl1mmhnsl5orqij5hfq8j/cleanshot-2026-02-18-at-04-13-26.png"},"componentPath":"blocks/hero/hero-split-geometric-shapes.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSplitGeometricShapes } from \"@opensite/ui/blocks/hero/hero-split-geometric-shapes\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSplitGeometricShapes\n      heading=\"Bold design for bold ideas\"\n      description=\"Stand out with striking visuals and modern aesthetics. Make a statement that resonates with your audience.\"\n      actions={[\n        {\n          label: \"Explore\",\n          href: \"/explore\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Contact\",\n          href: \"/contact\",\n          variant: \"outline\",\n        },\n      ]}\n      images={[\n        {\n          src: imagePlaceholders[28],\n          alt: \"Modern design showcase\",\n        },\n        {\n          src: imagePlaceholders[45],\n          alt: \"Creative workspace\",\n        },\n        {\n          src: imagePlaceholders[67],\n          alt: \"Bold visual identity\",\n        },\n        {\n          src: imagePlaceholders[89],\n          alt: \"Contemporary aesthetics\",\n        },\n      ]}\n      background=\"white\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text 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 images to display in masonry layout (can be strings or objects)","items":{"type":"object","description":"","typeLabel":"string | HeroSplitGeometricShapesImage"},"typeLabel":"string | HeroSplitGeometricShapesImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each 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},"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":["hero","split","geometric","shapes","modern","professional","tech","patterns"],"performance":{},"importantUsageNotes":"Do not exceed 42 characters for the 'heading' prop. Do not exceed 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. And ensure to supply exactly 4 images. Follow the example props closely for this block."},{"id":"hero-community-survey-cta","name":"Community Survey CTA Hero","title":"Hero Community Survey CTA","category":"Hero","categorySlug":"hero","description":"A hero section focused on community engagement with a survey or feedback CTA. Includes headline, description, and prominent call-to-action for user participation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290319/mcbtc7roy705ezykqpl8gczu0xzr/cleanshot-2026-02-18-at-08-30-56.png","mobile":"https://cdn.ing/assets/i/r/290320/qscyroy5ha32h0pf7ftndxc9urdk/cleanshot-2026-02-18-at-08-31-07.png"},"componentPath":"blocks/hero/hero-community-survey-cta.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroCommunitySurveyCta } from \"@opensite/ui/blocks/hero/hero-community-survey-cta\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCommunitySurveyCta\n      announcementPrimary=\"Your Voice Matters\"\n      announcementLinkText=\"Learn More\"\n      announcementHref=\"#\"\n      heading=\"Help us build the future\"\n      description=\"Take our 5-minute survey and share your thoughts. Your feedback directly influences our product roadmap and helps us serve you better.\"\n      mainImage={{\n        src: imagePlaceholders[80],\n        alt: \"Hero Community Survey CTA Image\",\n      }}\n      leftOverlayImage={{\n        src: imagePlaceholders[81],\n        alt: \"Hero Community Survey CTA Image Left\",\n      }}\n      rightOverlayImage={{\n        src: imagePlaceholders[82],\n        alt: \"Hero Community Survey CTA Image Right\",\n      }}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"ghost\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gradientGlowBottom\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"announcementPrimary":{"type":"object","description":"Announcement banner content (primary text)","typeLabel":"React.ReactNode","required":false},"announcementLinkText":{"type":"object","description":"Announcement banner link text","typeLabel":"React.ReactNode","required":false},"announcementHref":{"type":"string","description":"Announcement banner href","required":false},"announcementSlot":{"type":"object","description":"Custom slot for announcement banner (overrides announcement props)","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},"mainImage":{"type":"object","description":"Main image configuration","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","required":false},"leftOverlayImage":{"type":"object","description":"Left overlay image configuration","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","required":false},"rightOverlayImage":{"type":"object","description":"Right overlay image configuration","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","required":false},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides image props)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"announcementClassName":{"type":"string","description":"Additional CSS classes for the announcement banner","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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","community","survey","feedback","engagement","cta","participation"],"performance":{},"importantUsageNotes":"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":"hero-marketplace-scattered-images","name":"Marketplace Scattered Images Hero","title":"Hero Marketplace Scattered Images","category":"Hero","categorySlug":"hero","description":"A hero section with scattered product images creating a marketplace feel. Dynamic layout showcasing multiple items or categories.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290230/n4r0qpmxlquv9zo77wmt0bzpr4kt/cleanshot-2026-02-18-at-02-57-15.png","mobile":"https://cdn.ing/assets/i/r/290229/9upfyl1fa7jg3wjcy29wth8nx105/cleanshot-2026-02-18-at-02-57-35.png"},"componentPath":"blocks/hero/hero-marketplace-scattered-images.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroMarketplaceScatteredImages } from \"@opensite/ui/blocks/hero/hero-marketplace-scattered-images\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroMarketplaceScatteredImages\n      heading=\"Discover unique items from creators worldwide\"\n      description=\"Shop handcrafted goods, vintage treasures, and one-of-a-kind products from talented makers and collectors.\"\n      action={{\n        label: \"Browse Marketplace\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      images={[\n        { src: imagePlaceholders[34], alt: \"Product 1\" },\n        { src: imagePlaceholders[36], alt: \"Product 2\" },\n        { src: imagePlaceholders[37], alt: \"Product 3\" },\n        { src: imagePlaceholders[38], alt: \"Product 4\" },\n        { src: imagePlaceholders[39], alt: \"Product 5\" },\n        { src: imagePlaceholders[40], alt: \"Product 6\" },\n      ]}\n      background=\"gray\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"tagline":{"type":"object","description":"Tagline text with icon","typeLabel":"React.ReactNode","required":false},"taglineIcon":{"type":"string","description":"Tagline icon name","required":false},"taglineSlot":{"type":"object","description":"Custom slot for tagline (overrides tagline props)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Array of scattered images (expects 5 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","marketplace","scattered","images","products","dynamic","ecommerce","shop"],"performance":{},"importantUsageNotes":"Only use if you have 6 unique photo assets to supply for the 'image' prop. Follow the example props closely for this block."},{"id":"hero-badge-shadow-overlay","name":"Badge Shadow Overlay Hero","title":"Hero Badge Shadow Overlay","category":"Hero","categorySlug":"hero","description":"A hero with a badge, headline, and content overlaid on a shadowed background image. Creates depth and visual interest for impactful landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290232/xmhcvex2y66r8lcdsbkyb322f327/cleanshot-2026-02-18-at-02-58-39.png","mobile":"https://cdn.ing/assets/i/r/290231/izghatv8ulcqat2ubpcks550f6s1/cleanshot-2026-02-18-at-02-58-47.png"},"componentPath":"blocks/hero/hero-badge-shadow-overlay.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroBadgeShadowOverlay } from \"@opensite/ui/blocks/hero/hero-badge-shadow-overlay\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroBadgeShadowOverlay\n      announcementBadge=\"Launch\"\n      announcementText=\"Premium design system\"\n      announcementHref=\"#\"\n      heading=\"Elevate your brand with stunning visuals\"\n      description=\"Crafted with precision and creativity, our design system empowers you to create visually captivating experiences that resonate with your audience.\"\n      actions={[\n        {\n          label: \"Explore Now\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      backgroundImageUrl={imagePlaceholders[122]}\n    />\n  );\n}","propsSchema":{"announcementBadge":{"type":"object","description":"Announcement badge content","typeLabel":"React.ReactNode","required":false},"announcementText":{"type":"object","description":"Announcement text","typeLabel":"React.ReactNode","required":false},"announcementHref":{"type":"string","description":"Announcement link href","required":false},"heading":{"type":"object","description":"Main heading content","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},"backgroundImageUrl":{"type":"string","description":"Background overlay image URL","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"announcementClassName":{"type":"string","description":"Additional CSS classes for the announcement","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","badge","shadow","overlay","background","depth","impactful","landing"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-video-background-dark","name":"Video Background Dark Hero","title":"Hero Video Background Dark","category":"Hero","categorySlug":"hero","description":"A dark-themed hero with a video background, headline, and CTA buttons. Creates an immersive experience for media-rich landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290809/c0bjx5yamyf6afhuc6bdjc89zv4n/cleanshot-2026-02-25-at-01-46-39.png","mobile":"https://cdn.ing/assets/i/r/290808/y8jlh0itmk601kw8lf9w4k879fc9/cleanshot-2026-02-25-at-01-49-25.png"},"componentPath":"blocks/hero/hero-video-background-dark.tsx","code":"import { masterPlaylistUrls, videoPlaceholders } from \"@/lib/media\";\nimport { HeroVideoBackgroundDark } from \"@opensite/ui/blocks/hero/hero-video-background-dark\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroVideoBackgroundDark\n      badgeText=\"Immersive Experience\"\n      heading=\"Make an unforgettable first impression\"\n      description=\"Captivate your audience with stunning video backgrounds that tell your story in motion.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"/signup\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Explore\",\n          href: \"/explore\",\n          variant: \"outline\",\n        },\n      ]}\n      backgroundVideo={{\n        video: {\n          // masterPlaylistUrl: masterPlaylistUrls[25],\n          // masterPlaylistUrl:\n          //   \"https://octane.cdn.ing/api/v1/video/5ae48b81-2a69-5108-aeaa-4fa947f8d48d/master_playlist\",\n          // masterPlaylistUrl:\n          //   \"https://octane.cdn.ing/api/v1/video/5ae48b81-2a69-5108-aeaa-4fa947f8d48d/master_playlist\",\n          masterPlaylistUrl:\n            \"https://octane.cdn.ing/api/v1/video/df6f71fe-2fd9-51ef-b147-2902b6af60d9/master_playlist\",\n          fallbackSrc:\n            \"https://octane.cdn.ing/api/v1/video/df6f71fe-2fd9-51ef-b147-2902b6af60d9/progressive.mp4\",\n          src: videoPlaceholders[15],\n          // masterPlaylistUrl:\n          //   \"https://octane.cdn.ing/api/v1/video/de9f4e3c-a5e1-5210-b6e6-73c4061e4afc/master_playlist\",\n          optixFlowApiKey: \"os-bcf1c82f-0c47-49ec-a303-807eec0a25c6\",\n        },\n      }}\n      background=\"dark\"\n    />\n  );\n}\n\n// https://octane.cdn.ing/api/v1/video/5ae48b81-2a69-5108-aeaa-4fa947f8d48d/master_playlist\n// https://octane.cdn.ing/api/v1/video/df6f71fe-2fd9-51ef-b147-2902b6af60d9/master_playlist","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text 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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"backgroundVideo":{"type":"object","description":"Background video configuration","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoSlot":{"type":"object","description":"Custom slot for video (overrides backgroundVideo prop)","typeLabel":"React.ReactNode","required":false},"videoSrc":{"type":"string","description":"","required":false},"videoOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on the video","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"videoBrightness":{"type":"string","description":"Granular control of brightness for video (deprecated - prefer videoOverlayIntensity)","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","video","background","dark","immersive","media","cinematic","landing"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Only use if the media query returns a video that is appropriate for the block (b-roll style video). 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":"hero-grid-pattern-efficiency","name":"Grid Pattern Efficiency Hero","title":"Hero Grid Pattern Efficiency","category":"Hero","categorySlug":"hero","description":"A hero section with a grid pattern background emphasizing efficiency and productivity. Clean design for business and productivity tools.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290302/e0k56u05o6y7ykl0rtwq7ze7xjtv/cleanshot-2026-02-18-at-04-25-51.png","mobile":"https://cdn.ing/assets/i/r/290301/ykc8o1kgk2xaic23gwlvq7k0jit5/cleanshot-2026-02-18-at-04-26-02.png"},"componentPath":"blocks/hero/hero-grid-pattern-efficiency.tsx","code":"import { HeroGridPatternEfficiency } from \"@opensite/ui/blocks/hero/hero-grid-pattern-efficiency\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroGridPatternEfficiency\n      heading=\"Work smarter, not harder\"\n      description=\"Maximize productivity with intelligent tools and workflows designed to eliminate busywork and help you focus on what matters.\"\n      action={{\n        label: \"Boost Productivity\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      actionSubtext=\"No credit card required\"\n      pattern=\"grid1\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content (can include highlighted text)","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"actionSubtext":{"type":"object","description":"Subtext below the action button","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionClassName":{"type":"string","description":"Additional CSS classes for the action container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","grid","pattern","efficiency","productivity","business","tools","clean"],"performance":{},"importantUsageNotes":"This block takes a single 'action' prop (not an array) — do not supply multiple actions. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Use 'actionSubtext' for a short trust signal beneath the CTA (e.g. 'No credit card required'). Follow the example props closely for this block."},{"id":"hero-dashed-border-features","name":"Dashed Border Features Hero","title":"Hero Dashed Border Features","category":"Hero","categorySlug":"hero","description":"A hero with dashed border decorations and feature highlights. Unique visual style that draws attention to key features.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290234/j44ri9v8uvlj52hvmxsxi9ie3zxc/cleanshot-2026-02-18-at-03-04-22.png","mobile":"https://cdn.ing/assets/i/r/290233/9tyimydps0l6dwejth0vhqb22lii/cleanshot-2026-02-18-at-03-04-48.png"},"componentPath":"blocks/hero/hero-dashed-border-features.tsx","code":"import { HeroDashedBorderFeatures } from \"@opensite/ui/blocks/hero/hero-dashed-border-features\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDashedBorderFeatures\n      heading=\"Features that make a difference\"\n      description=\"Discover the powerful capabilities that set us apart. Every feature designed with your success in mind.\"\n      badgeText=\"New Features\"\n      announcementHref=\"#\"\n      announcementText=\"Latest innovations\"\n      features={[\n        {\n          icon: <DynamicIcon name=\"lucide/zap\" size={24} />,\n          title: \"Lightning Fast\",\n          description: \"Optimized for speed and performance\",\n          href: \"#\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/shield\" size={24} />,\n          title: \"Secure by Default\",\n          description: \"Enterprise-grade security built-in\",\n          href: \"#\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/sparkles\" size={24} />,\n          title: \"AI-Powered\",\n          description: \"Smart automation that learns\",\n          href: \"#\",\n        },\n      ]}\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: \"Contact Sales\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"white\"\n      // pattern=\"gridBasic\"\n      // patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"announcementText":{"type":"object","description":"Announcement text next to badge","typeLabel":"React.ReactNode","required":false},"announcementHref":{"type":"string","description":"Announcement link href","required":false},"announcementSlot":{"type":"object","description":"Custom slot for announcement (overrides badge and announcement props)","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},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","typeLabel":"FeatureItem & { iconName?: string }"},"typeLabel":"FeatureItem & { iconName?: string }[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","dashed","border","features","unique","decorative","highlights"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Ensure to generate exactly 3 `achievements` since the achievements showcase is a 3 column layout. 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":"hero-design-carousel-portfolio","name":"Design Carousel Portfolio Hero","title":"Hero Design Carousel Portfolio","category":"Hero","categorySlug":"hero","description":"A portfolio-style hero with a carousel showcasing design work or projects. Perfect for creative agencies and designers.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290304/rx0t7ysihfk2lhsr9hdnuf1xwd91/cleanshot-2026-02-18-at-04-27-09.png","mobile":"https://cdn.ing/assets/i/r/290303/b1zjc7oquywndi5knn9wmhh1c2bq/cleanshot-2026-02-18-at-04-27-29.png"},"componentPath":"blocks/hero/hero-design-carousel-portfolio.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroDesignCarouselPortfolio } from \"@opensite/ui/blocks/hero/hero-design-carousel-portfolio\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDesignCarouselPortfolio\n      heading=\"Design portfolio that speaks volumes\"\n      description=\"Showcase your best work with beautiful, interactive carousels that captivate and engage your audience.\"\n      logo={{ src: brandLogoPlaceholders.black[0], alt: \"Brand Logo\" }}\n      features={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/target\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Strategic Focus\",\n          description:\n            \"Every project begins with understanding your goals. We align our work with your business objectives to ensure measurable impact.\",\n        },\n        {\n          icon: (\n            <DynamicIcon name=\"lucide/zap\" size={24} className=\"text-primary\" />\n          ),\n          title: \"Rapid Execution\",\n          description:\n            \"Our agile methodology enables quick iterations and fast time-to-market without compromising on quality.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/heart\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Human-Centered\",\n          description:\n            \"We design for people first. Every decision is informed by user research and validated through testing.\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"Schedule Chat\",\n          href: \"#\",\n          variant: \"default\",\n        },\n        {\n          label: \"View Portfolio\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      carouselImages={[\n        { src: imagePlaceholders[88], alt: \"Design 1\" },\n        { src: imagePlaceholders[89], alt: \"Design 2\" },\n        { src: imagePlaceholders[90], alt: \"Design 3\" },\n        { src: imagePlaceholders[91], alt: \"Design 4\" },\n      ]}\n      background=\"gray\"\n      pattern=\"circuitBoardFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature highlights","items":{"type":"object","description":"","typeLabel":"FeatureItem & { iconName?: string }"},"typeLabel":"FeatureItem & { iconName?: string }[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","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 actions (overrides action props)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"carouselImages":{"type":"array","description":"Array of carousel images","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},"carouselSlot":{"type":"object","description":"Custom slot for carousel (overrides carouselImages array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","design","carousel","portfolio","creative","agency","projects","showcase"],"performance":{},"importantUsageNotes":"Only supply a 'logo.src' if you have a logo from the media library for the site. Only use if you have at least 4-6 'carouselImages'. Do not exceed 42 characters for the 'heading' prop. Do not exceed 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":"hero-gradient-client-focused","name":"Gradient Client Focused Hero","title":"Hero Gradient Client Focused","category":"Hero","categorySlug":"hero","description":"A hero with gradient background focused on client success stories or testimonials. Builds trust through social proof.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306293/04y92ebe0eq7rhi4ofrv49ackrq0/hero-gradient-client-focused-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306294/ahu3bh9isupte12ejwiu7gkijouf/hero-gradient-client-focused-mobile.jpg"},"componentPath":"blocks/hero/hero-gradient-client-focused.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroGradientClientFocused } from \"@opensite/ui/blocks/hero/hero-gradient-client-focused\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroGradientClientFocused\n      heading=\"Your success is our mission\"\n      description=\"We're dedicated to helping you achieve your goals with personalized support, expert guidance, and proven strategies.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Talk to Sales\",\n          href: \"#\",\n          variant: \"ghost\",\n          icon: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n      ]}\n      image={{ src: imagePlaceholders[5], alt: \"Client success\" }}\n      background=\"gradient\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"image":{"type":"object","description":"Hero image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","gradient","client","focused","testimonials","trust","social-proof","success"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-premium-split-avatars","name":"Premium Split Avatars Hero","title":"Hero Premium Split Avatars","category":"Hero","categorySlug":"hero","description":"A premium split-layout hero featuring user avatars and social proof. Shows real users to build credibility and trust.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290236/wj93ewjoo5k83mudgor66hhww5ev/cleanshot-2026-02-18-at-03-22-31.png","mobile":"https://cdn.ing/assets/i/r/290235/5k37o0tswkq1e7rxvju3w920zqlt/cleanshot-2026-02-18-at-03-22-45.png"},"componentPath":"blocks/hero/hero-premium-split-avatars.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroPremiumSplitAvatars } from \"@opensite/ui/blocks/hero/hero-premium-split-avatars\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPremiumSplitAvatars\n      brandName=\"Premium\"\n      brandSuffix=\"Community\"\n      heading=\"Join an exclusive community\"\n      description=\"Connect with like-minded professionals and gain access to premium resources, events, and networking opportunities.\"\n      image={{ src: imagePlaceholders[125], alt: \"Community gathering\" }}\n      action={{\n        label: \"Join Now\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" />,\n      }}\n      avatars={[\n        { src: imagePlaceholders[6], fallback: \"M1\" },\n        { src: imagePlaceholders[7], fallback: \"M2\" },\n        { src: imagePlaceholders[9], fallback: \"M3\" },\n      ]}\n      socialProofText=\"5,000+ active members\"\n      background=\"muted\"\n      pattern=\"architect\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"brandName":{"type":"object","description":"Brand name text","typeLabel":"React.ReactNode","required":false},"brandSuffix":{"type":"object","description":"Highlighted brand suffix (e.g., \"PRO\")","typeLabel":"React.ReactNode","required":false},"brandSlot":{"type":"object","description":"Custom slot for brand (overrides brand props)","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},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"avatars":{"type":"array","description":"Array of avatar items for social proof","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Avatar image source URL","required":true},"alt":{"type":"string","description":"Alt text for the avatar","required":true},"className":{"type":"string","description":"Additional CSS classes for the avatar","required":false}},"typeLabel":"AvatarItem"},"typeLabel":"AvatarItem[]","required":false},"avatarsSlot":{"type":"object","description":"Custom slot for avatars (overrides avatars array)","typeLabel":"React.ReactNode","required":false},"socialProofText":{"type":"object","description":"Social proof text","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Feature image on the right side","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"mediaAspectRatios":{"type":"object","description":"Media aspect ratios for desktop and mobile breakpoints","fields":{"desktop":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false},"mobile":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false}},"typeLabel":"ResponsiveMediaAspectRatioProps","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","premium","split","avatars","social-proof","users","credibility","trust"],"performance":{},"importantUsageNotes":"Only use this block if there you have actual avatar images to showcase and socialProofText - this block should only be used if a site has the type of social proof that can be showcased with actual avatar images of people and a compelling social proof text to go along with it. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-ui-library-showcase","name":"UI Library Showcase Hero","title":"Hero UI Library Showcase","category":"Hero","categorySlug":"hero","description":"A hero designed to showcase UI components or design systems. Features component previews and documentation links.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290324/y0y23ep2ddyq6aa4iw67cetstscp/cleanshot-2026-02-18-at-08-35-05.png","mobile":"https://cdn.ing/assets/i/r/290323/wjfj3i3e53fqspa0uj5ngry1tbkl/cleanshot-2026-02-18-at-08-35-20.png"},"componentPath":"blocks/hero/hero-ui-library-showcase.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroUiLibraryShowcase } from \"@opensite/ui/blocks/hero/hero-ui-library-showcase\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroUiLibraryShowcase\n      logo={{\n        src: brandLogoPlaceholders.white[0],\n        alt: \"StartupCo Logo\",\n      }}\n      heading=\"Beautiful components for modern apps\"\n      description=\"A comprehensive UI library with 100+ components. Built with accessibility, performance, and developer experience in mind.\"\n      image={{\n        src: imagePlaceholders[30],\n        alt: \"UI component showcase\",\n      }}\n      actions={[\n        {\n          label: \"Browse Components\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Docs\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/book-open\" size={16} />,\n        },\n      ]}\n      background=\"secondary\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo image configuration","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","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"image":{"type":"object","description":"Showcase image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","ui","library","showcase","components","design-system","documentation","developer"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-fullscreen-background-image","name":"Fullscreen Background Image Hero","title":"Hero Fullscreen Background Image","category":"Hero","categorySlug":"hero","description":"A fullscreen hero with a background image, overlay, and centered content. Creates an immersive first impression.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306291/v92gk0hbscn8uc44weranfwev4ri/hero-fullscreen-background-image-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306292/c1x6brpr0aozujg1kizwf1fmkxkm/hero-fullscreen-background-image-mobile.jpg"},"componentPath":"blocks/hero/hero-fullscreen-background-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroFullscreenBackgroundImage } from \"@opensite/ui/blocks/hero/hero-fullscreen-background-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroFullscreenBackgroundImage\n      heading=\"Experience the extraordinary\"\n      description=\"Immersive experiences that captivate and inspire. Make a bold statement with stunning visuals.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Talk to Sales\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n      ]}\n      backgroundImage={imagePlaceholders[110]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"backgroundImage":{"type":"string","description":"Background image URL","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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 container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","fullscreen","background","image","overlay","immersive","impactful","landing"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-fullscreen-logo-cta","name":"Fullscreen Logo CTA Hero","title":"Hero Fullscreen Logo CTA","category":"Hero","categorySlug":"hero","description":"A fullscreen hero featuring a prominent logo and call-to-action. Minimal and focused design for brand-centric landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290363/c5nc8pif9ds7rr6m3aavpkdk827x/cleanshot-2026-02-18-at-09-25-57.png","mobile":"https://cdn.ing/assets/i/r/290364/ngt64u3y2uvlcbp4g615br2hqiuy/cleanshot-2026-02-18-at-09-26-11.png"},"componentPath":"blocks/hero/hero-fullscreen-logo-cta.tsx","code":"import { brandLogoPlaceholders } from \"@/lib/media\";\nimport { HeroFullscreenLogoCta } from \"@opensite/ui/blocks/hero/hero-fullscreen-logo-cta\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroFullscreenLogoCta\n      logo={{ src: brandLogoPlaceholders.white[0], alt: \"Company Logo\" }}\n      heading=\"Building the future of work\"\n      description=\"Join the companies already transforming how they operate with our innovative platform.\"\n      action={{\n        label: \"Get Started\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      background=\"dark\"\n      pattern=\"circuitBoardFadeBottomRight\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","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},"action":{"type":"object","description":"Scroll/read more action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"backgroundImage":{"type":"string","description":"Background image URL","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","fullscreen","logo","cta","minimal","brand","focused","landing"],"performance":{},"importantUsageNotes":"Only use if the website has a valid logo to supply to the 'logo.src' prop. Do not exceed 60 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-gradient-avatars-rating","name":"Gradient Avatars Rating Hero","title":"Hero Gradient Avatars Rating","category":"Hero","categorySlug":"hero","description":"A hero with gradient background, user avatars, and star ratings. Combines visual appeal with social proof elements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290326/etbwj8ay5e67esk15c9ckmb1o0q7/cleanshot-2026-02-18-at-08-45-29.png","mobile":"https://cdn.ing/assets/i/r/290325/mcamqx25pmyquzxlovj2rw9m0zkt/cleanshot-2026-02-18-at-08-45-40.png"},"componentPath":"blocks/hero/hero-gradient-avatars-rating.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroGradientAvatarsRating } from \"@opensite/ui/blocks/hero/hero-gradient-avatars-rating\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroGradientAvatarsRating\n      heading=\"Loved by thousands of users\"\n      description=\"Join our community of satisfied customers and experience the difference. Rated 4.9/5 by over 10,000 users.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Read Reviews\",\n          href: \"#\",\n          variant: \"ghost\",\n          icon: <DynamicIcon name=\"lucide/star\" size={16} />,\n        },\n      ]}\n      avatars={[\n        { src: imagePlaceholders[1], alt: \"User 1\" },\n        { src: imagePlaceholders[2], alt: \"User 2\" },\n        { src: imagePlaceholders[3], alt: \"User 3\" },\n        { src: imagePlaceholders[4], alt: \"User 4\" },\n      ]}\n      images={[\n        { src: imagePlaceholders[100], alt: \"Hero 1\" },\n        { src: imagePlaceholders[101], alt: \"Hero 2\" },\n      ]}\n      ratingValue=\"4.9\"\n      ratingLabel=\"10,000+ happy users\"\n      background=\"gradient\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text 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},"avatars":{"type":"array","description":"Array of avatar items for social proof","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Avatar image source URL","required":true},"alt":{"type":"string","description":"Alt text for the avatar","required":true},"className":{"type":"string","description":"Additional CSS classes for the avatar","required":false}},"typeLabel":"AvatarItem"},"typeLabel":"AvatarItem[]","required":false},"avatarsSlot":{"type":"object","description":"Custom slot for avatars (overrides avatars array)","typeLabel":"React.ReactNode","required":false},"ratingValue":{"type":"string","description":"Rating value (e.g., \"5.0\")","required":false},"ratingLabel":{"type":"object","description":"Rating label (e.g., \"1000+ happy developers\")","typeLabel":"React.ReactNode","required":false},"starCount":{"type":"number","description":"Number of stars to display","required":false},"images":{"type":"array","description":"Array of showcase images (expects 2 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","gradient","avatars","rating","stars","social-proof","reviews","trust"],"performance":{},"importantUsageNotes":"Only use this block if there you have actual avatar images to showcase and a ratingValue and ratingLabel - this block should only be used if a site has the type of social proof that can be showcased with actual avatar images of people and a compelling social proof text to go along with it. 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":"hero-task-timer-animated","name":"Task Timer Animated Hero","title":"Hero Task Timer Animated","category":"Hero","categorySlug":"hero","description":"An animated hero featuring a task timer or countdown element. Dynamic and engaging for productivity apps.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290316/fz9jc5okvgifz1pkckk7jvkzo7fa/cleanshot-2026-02-18-at-07-05-13.png","mobile":"https://cdn.ing/assets/i/r/290315/xqxw9bhctr8t1lwbwsv574ye3zbz/cleanshot-2026-02-18-at-07-05-23.png"},"componentPath":"blocks/hero/hero-task-timer-animated.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroTaskTimerAnimated } from \"@opensite/ui/blocks/hero/hero-task-timer-animated\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroTaskTimerAnimated\n      heading=\"Track time, boost productivity\"\n      description=\"Stay focused and manage your time effectively with our intuitive task timer. Perfect for work, study, or any activity that requires dedicated focus.\"\n      actions={[\n        {\n          label: \"Start Tracking\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Features\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[15], alt: \"Timer interface\" },\n        { src: imagePlaceholders[16], alt: \"Task tracking\" },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"images":{"type":"array","description":"Array of showcase images (expects 2 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images area","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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","task","timer","animated","countdown","productivity","dynamic","engaging"],"performance":{},"importantUsageNotes":"Supply exactly 2 images to the 'images' 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":"hero-ai-powered-carousel","name":"AI Powered Carousel Hero","title":"Hero AI Powered Carousel","category":"Hero","categorySlug":"hero","description":"A hero showcasing AI-powered features with a carousel of capabilities. Perfect for AI products and machine learning tools.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306285/r9exzks7m20y3bt8kli66cf8g149/hero-ai-powered-carousel-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306286/qfllp428tfcygv1qi1c1n7ajolhp/hero-ai-powered-carousel-mobile.jpg"},"componentPath":"blocks/hero/hero-ai-powered-carousel.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroAiPoweredCarousel } from \"@opensite/ui/blocks/hero/hero-ai-powered-carousel\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroAiPoweredCarousel\n      badge=\"AI-Powered\"\n      badgeTagline=\"Next Generation Technology\"\n      heading=\"Intelligent automation for your workflow\"\n      description=\"Transform your business with AI-driven solutions that learn, adapt, and optimize automatically. Experience the future of productivity.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/sparkles\" size={16} />,\n        },\n        {\n          label: \"Watch Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/play-circle\" size={16} />,\n        },\n      ]}\n      carouselImages1={[\n        { src: imagePlaceholders[20], alt: \"AI Feature 1\" },\n        { src: imagePlaceholders[21], alt: \"AI Feature 2\" },\n        { src: imagePlaceholders[22], alt: \"AI Feature 3\" },\n        { src: imagePlaceholders[23], alt: \"AI Feature 4\" },\n        { src: imagePlaceholders[24], alt: \"AI Feature 5\" },\n        { src: imagePlaceholders[25], alt: \"AI Feature 6\" },\n      ]}\n      carouselImages2={[\n        { src: imagePlaceholders[26], alt: \"AI Feature 7\" },\n        { src: imagePlaceholders[27], alt: \"AI Feature 8\" },\n        { src: imagePlaceholders[28], alt: \"AI Feature 9\" },\n        { src: imagePlaceholders[29], alt: \"AI Feature 10\" },\n        { src: imagePlaceholders[30], alt: \"AI Feature 11\" },\n        { src: imagePlaceholders[31], alt: \"AI Feature 12\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"badgeTagline":{"type":"object","description":"Badge tagline text","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},"carouselImages1":{"type":"array","description":"Images for carousel 1","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},"carouselImages2":{"type":"array","description":"Images for carousel 2","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},"carouselSlot":{"type":"object","description":"Custom slot for carousel content (overrides all carousel images)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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 container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","ai","powered","carousel","machine-learning","features","technology","innovation"],"performance":{},"importantUsageNotes":"Supply exactly 6 images to the 'carouselImages1' prop and exactly 6 images to the 'carouselImages2' prop - if you don't have a unique set of 12 relevant photos - do not use this block. Do not exceed 12 characters for the 'badge' prop. Do not exceed 26 characters for the 'badgeTagline' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-ad-campaign-expert","name":"Ad Campaign Expert Hero","title":"Hero Ad Campaign Expert","category":"Hero","categorySlug":"hero","description":"A hero designed for advertising and marketing services. Features campaign metrics and expert positioning.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293123/afk7snzbx99mmbhuury69o4movw8/cleanshot-2026-03-04-at-01-35-47.png","mobile":"https://cdn.ing/assets/i/r/293122/9b5nmu8ov4hcai28ll9bdc3wso7b/cleanshot-2026-03-04-at-01-36-02.png"},"componentPath":"blocks/hero/hero-ad-campaign-expert.tsx","code":"import { HeroAdCampaignExpert } from \"@opensite/ui/blocks/hero/hero-ad-campaign-expert\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroAdCampaignExpert\n      heading=\"Your ad campaigns excel with AI-powered insights\"\n      description=\"Optimize your advertising performance with real-time analytics and automated campaign management. Deliver exceptional results across all platforms.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      mediaItem={{\n        video: {\n          src: \"https://toastability-production.s3.amazonaws.com/c654ma8l6buzf82lngt5yq2fxoao\",\n          autoPlay: true,\n          loop: true,\n          muted: true,\n          playsInline: true,\n        },\n      }}\n      directionConfig={{ desktop: \"mediaLeft\", mobile: \"mediaTop\" }}\n      mediaAspectRatios={{ desktop: \"vertical\", mobile: \"vertical\" }}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"mediaItem":{"type":"object","description":"Media item configuration for image and/or video rendering.\nReplaces individual imageSrc/imageAlt/imageClassName props.","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"mediaAspectRatios":{"type":"object","description":"Media aspect ratios for desktop and mobile breakpoints","fields":{"desktop":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false},"mobile":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false}},"typeLabel":"ResponsiveMediaAspectRatioProps","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","ad","campaign","marketing","advertising","expert","metrics","agency"],"performance":{},"importantUsageNotes":"This block can take render an image or video dynamically based on the 'mediaItem' prop, check the prop schema carefully. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-adaptable-product-grid","name":"Adaptable Product Grid Hero","title":"Hero Adaptable Product Grid","category":"Hero","categorySlug":"hero","description":"A flexible hero with an adaptable product grid layout. Showcases multiple products or features in a responsive grid.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290366/uv4qtfn3edl45ax81guo40k04i20/cleanshot-2026-02-18-at-09-27-11.png","mobile":"https://cdn.ing/assets/i/r/290365/5t8td46oq32417ytzaei4p21dah0/cleanshot-2026-02-18-at-09-27-26.png"},"componentPath":"blocks/hero/hero-adaptable-product-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroAdaptableProductGrid } from \"@opensite/ui/blocks/hero/hero-adaptable-product-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroAdaptableProductGrid\n      heading=\"Flexible product displays that adapt to your brand\"\n      description=\"Create stunning product showcases with our adaptable grid system. Perfect for e-commerce, portfolios, and catalogs.\"\n      actions={[\n        {\n          label: \"Browse Products\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/shopping-cart\" size={16} />,\n        },\n      ]}\n      imageSrc={imagePlaceholders[10]}\n      imageAlt=\"Product showcase\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"CTA action configuration","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 action (overrides action)","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Logo/image source URL","required":false},"imageAlt":{"type":"string","description":"Logo/image alt text","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content column","required":false},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","adaptable","product","grid","flexible","responsive","showcase","features"],"performance":{},"importantUsageNotes":"Do not exceed 60 characters for the 'heading' prop. Do not exceed 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":"hero-presentation-platform-video","name":"Presentation Platform Video Hero","title":"Hero Presentation Platform Video","category":"Hero","categorySlug":"hero","description":"A split-layout hero with video content on the right and presentation platform messaging on the left. Ideal for video conferencing and presentation tools.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290328/jjwd82tdn2t1ufpibcxbo7wxhaum/cleanshot-2026-02-18-at-08-47-46.png","mobile":"https://cdn.ing/assets/i/r/290327/8eyi8ohztc1f9k6nntb3c5alc0in/cleanshot-2026-02-18-at-08-47-56.png"},"componentPath":"blocks/hero/hero-presentation-platform-video.tsx","code":"import { videoPlaceholders } from \"@/lib/media\";\nimport { HeroPresentationPlatformVideo } from \"@opensite/ui/blocks/hero/hero-presentation-platform-video\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPresentationPlatformVideo\n      subtitle=\"Presentation Platform\"\n      heading=\"Create stunning presentations in minutes\"\n      description=\"Beautiful templates, smart layouts, and powerful collaboration tools. Make every presentation memorable.\"\n      actions={[\n        {\n          label: \"Start Creating\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Templates\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      videoSrc={videoPlaceholders[38]}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"subtitle":{"type":"object","description":"Subtitle/eyebrow text 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},"backgroundVideo":{"type":"object","description":"Background video configuration","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoSlot":{"type":"object","description":"Custom slot for video (overrides backgroundVideo prop)","typeLabel":"React.ReactNode","required":false},"videoSrc":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"videoClassName":{"type":"string","description":"Additional CSS classes for the video container","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":["hero","presentation","platform","video","split","conferencing","tools","communication"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Do not exceed 30 characters for the 'subtitle' 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":"hero-grid-pattern-solutions","name":"Grid Pattern Solutions Hero","title":"Hero Grid Pattern Solutions","category":"Hero","categorySlug":"hero","description":"A hero with grid pattern background and centered content showcasing business solutions. Professional design for B2B services.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290330/y9443v7g1hl98wx3serlvfaqxtii/cleanshot-2026-02-18-at-08-48-38.png","mobile":"https://cdn.ing/assets/i/r/290329/tewu03d10ia26c0zhupp0w2aeycs/cleanshot-2026-02-18-at-08-49-03.png"},"componentPath":"blocks/hero/hero-grid-pattern-solutions.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroGridPatternSolutions } from \"@opensite/ui/blocks/hero/hero-grid-pattern-solutions\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroGridPatternSolutions\n      badgeText=\"New Version Launched\"\n      badgeHref=\"#\"\n      heading=\"Complete solutions for every challenge\"\n      description=\"From startups to enterprises, we provide comprehensive solutions tailored to your unique needs and goals.\"\n      images={[\n        { src: imagePlaceholders[10], alt: \"For Business\" },\n        { src: imagePlaceholders[11], alt: \"For Developers\" },\n        { src: imagePlaceholders[12], alt: \"For Teams\" },\n        { src: imagePlaceholders[13], alt: \"For Teams\" },\n      ]}\n      actions={[\n        {\n          label: \"Explore Solutions\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" />,\n        },\n      ]}\n      pattern=\"grid1\"\n      patternOpacity={0.1}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/link text content","typeLabel":"React.ReactNode","required":false},"badgeHref":{"type":"string","description":"Badge/link href","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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 images for the grid (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","grid","pattern","solutions","business","b2b","professional","services"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-crm-streamlined","name":"CRM Streamlined Hero","title":"Hero CRM Streamlined","category":"Hero","categorySlug":"hero","description":"A streamlined hero for CRM and sales tools. Features split layout with product image and CRM-focused messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290332/ohesfnbgakl4kf5mzwzg9ic1rmvk/cleanshot-2026-02-18-at-08-49-57.png","mobile":"https://cdn.ing/assets/i/r/290331/6lp3u8m86rimri4nyn3yb1n78k0s/cleanshot-2026-02-18-at-08-50-10.png"},"componentPath":"blocks/hero/hero-crm-streamlined.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroCrmStreamlined } from \"@opensite/ui/blocks/hero/hero-crm-streamlined\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCrmStreamlined\n      tagline=\"Simple CRM\"\n      heading=\"Customer relationships made simple\"\n      description=\"Manage your entire customer lifecycle in one intuitive platform. From first contact to loyal advocate, we've got you covered.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      image={{ src: imagePlaceholders[82], alt: \"CRM Dashboard\" }}\n      background=\"dark\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"tagline":{"type":"object","description":"Tagline text 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":"Action configuration for CTA button","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 action (overrides action)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"image":{"type":"object","description":"Main image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","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},"imageClassName":{"type":"string","description":"Additional CSS classes for the image 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","crm","streamlined","sales","tools","split","product","business"],"performance":{},"importantUsageNotes":"Do not exceed 20 characters for the 'tagline' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-billing-platform-logos","name":"Billing Platform Logos Hero","title":"Hero Billing Platform Logos","category":"Hero","categorySlug":"hero","description":"A hero for billing and payment platforms featuring trusted company logos in a carousel. Builds trust for fintech products.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290308/d4e1e26ctxd9qfqpwql8hikcq2dg/cleanshot-2026-02-18-at-05-05-58.png","mobile":"https://cdn.ing/assets/i/r/290307/unyo6thq4mxlffg3vl8f71reespo/cleanshot-2026-02-18-at-05-06-11.png"},"componentPath":"blocks/hero/hero-billing-platform-logos.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroBillingPlatformLogos } from \"@opensite/ui/blocks/hero/hero-billing-platform-logos\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroBillingPlatformLogos\n      heading=\"Simplified billing for modern businesses\"\n      description=\"Accept payments, manage subscriptions, and handle invoicing all in one place. Trusted by thousands of companies worldwide.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Pricing\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      mainImage={{ src: imagePlaceholders[122], alt: \"Billing dashboard\" }}\n      logos={[\n        { src: brandLogoPlaceholders.black[0], alt: \"Partner 1\" },\n        { src: brandLogoPlaceholders.black[1], alt: \"Partner 2\" },\n        { src: brandLogoPlaceholders.black[2], alt: \"Partner 3\" },\n        { src: brandLogoPlaceholders.black[3], alt: \"Partner 4\" },\n        { src: brandLogoPlaceholders.black[4], alt: \"Partner 5\" },\n        { src: brandLogoPlaceholders.black[5], alt: \"Partner 6\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"mainImage":{"type":"object","description":"Main hero image","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","required":false},"overlayImages":{"type":"array","description":"Floating overlay images","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides mainImage and overlayImages)","typeLabel":"React.ReactNode","required":false},"logosTagline":{"type":"object","description":"Logos tagline text","typeLabel":"React.ReactNode","required":false},"logos":{"type":"array","description":"Array of logo items for the carousel","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for logos (overrides logos array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos section","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","billing","platform","logos","payment","fintech","trust","carousel"],"performance":{},"importantUsageNotes":"Only use if you can use 6-8 valid logos for the 'logos' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-software-growth-video-dialog","name":"Software Growth Video Dialog Hero","title":"Hero Software Growth Video Dialog","category":"Hero","categorySlug":"hero","description":"A hero focused on software growth with a video dialog modal. Features scattered images and growth-focused messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290334/f1n1bezyudyrs7l7d07qv9iyaxu2/cleanshot-2026-02-18-at-08-51-12.png","mobile":"https://cdn.ing/assets/i/r/290334/f1n1bezyudyrs7l7d07qv9iyaxu2/cleanshot-2026-02-18-at-08-51-12.png"},"componentPath":"blocks/hero/hero-software-growth-video-dialog.tsx","code":"import { imagePlaceholders, videoPlaceholders } from \"@/lib/media\";\nimport { HeroSoftwareGrowthVideoDialog } from \"@opensite/ui/blocks/hero/hero-software-growth-video-dialog\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSoftwareGrowthVideoDialog\n      heading=\"Accelerate your growth with data-driven insights\"\n      description=\"See how top companies use our platform to scale faster, make smarter decisions, and achieve sustainable growth.\"\n      videoAction={{\n        label: \"Watch Demo\",\n        variant: \"outline\",\n        iconAfter: <DynamicIcon name=\"lucide/play\" size={16} />,\n      }}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"ghost\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      showcaseImages={[\n        { src: imagePlaceholders[1], alt: \"Growth metric 1\" },\n        { src: imagePlaceholders[2], alt: \"Growth metric 2\" },\n        { src: imagePlaceholders[3], alt: \"Growth metric 3\" },\n        { src: imagePlaceholders[4], alt: \"Growth metric 4\" },\n      ]}\n      modalVideo={{\n        video: {\n          src: videoPlaceholders[25],\n          title: \"See how it works\",\n        },\n      }}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"videoAction":{"type":"object","description":"Video action object","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"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},"showcaseImages":{"type":"array","description":"Array of showcase images (expects 4 images)","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},"showcaseImagesSlot":{"type":"object","description":"Custom slot for showcase images (overrides showcaseImages array)","typeLabel":"React.ReactNode","required":false},"modalVideo":{"type":"object","description":"Video configuration for modal/dialog","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoDialogTitle":{"type":"string","description":"Video dialog title","required":false},"videoDialog":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Dialog title","required":false},"videoUrl":{"type":"string","description":"Video embed URL","required":false}},"typeLabel":"VideoDialogConfig","required":false},"onVideoClick":{"type":"object","description":"Callback when video button is clicked","typeLabel":"() => void","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"showcaseClassName":{"type":"string","description":"Additional CSS classes for the showcase area","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},"videoAspectRatio":{"type":"string","description":"Video aspect ratio","typeLabel":"\"horizontal\" | \"vertical\"","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","software","growth","video","dialog","modal","saas","startup"],"performance":{},"importantUsageNotes":"Only use if you have a modalVideo.video prop object and then ensure to supply a 'videoAction' prop. Do not exceed 50 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Only use at max 1 action object in the 'actions' array. Follow the example props closely for this block."},{"id":"hero-conversion-video-play","name":"Conversion Video Play Hero","title":"Hero Conversion Video Play","category":"Hero","categorySlug":"hero","description":"A conversion-focused hero with a prominent video play button and brand logos. Designed to drive engagement and conversions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290336/o2vr3twzbv2erfeoqnx55s4ntecv/cleanshot-2026-02-18-at-08-52-30.png","mobile":"https://cdn.ing/assets/i/r/290335/1nj6chywh9tgtlrh5dd1d6wkmui2/cleanshot-2026-02-18-at-08-52-41.png"},"componentPath":"blocks/hero/hero-conversion-video-play.tsx","code":"import { brandLogoPlaceholders, optixFlowApiKey } from \"@/lib/media\";\nimport { HeroConversionVideoPlay } from \"@opensite/ui/blocks/hero/hero-conversion-video-play\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nimport {\n  loadSkinFromJsDelivr,\n  resolveVideoClasses,\n  getSkinStyleObject,\n} from \"@page-speed/skins\";\nconst skin = await loadSkinFromJsDelivr(\n  \"0.1.2\",\n  \"skins/video/youtube-classic.json\",\n);\n\nconst skinClasses = resolveVideoClasses(skin);\nconst skinStyle = getSkinStyleObject(skin);\n\nexport default function Demo() {\n  return (\n    <HeroConversionVideoPlay\n      heading=\"Turn visitors into customers\"\n      description=\"Optimize your conversion funnel with data-driven insights and smart automation. See how top companies boost conversions by 300%.\"\n      primaryAction={{\n        label: \"Get Started\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      videoButtonLabel=\"Watch Demo\"\n      modalVideo={{\n        video: {\n          masterPlaylistUrl:\n            \"https://octane.cdn.ing/api/v1/video/01db8743-8d85-50e5-a293-7d0f0f000db3/master_playlist\",\n          fallbackSrc:\n            \"https://octane.cdn.ing/api/v1/video/01db8743-8d85-50e5-a293-7d0f0f000db3/progressive.mp4\",\n          src: \"https://toastability-production.s3.amazonaws.com/e6b0u26kl3g06gooq2voz48xzh3z\",\n          poster:\n            \"https://cdn.ing/assets/i/r/209106/variants/i86gmxxj6rpf6i1pisg9o3l2ycsp/ffa771bd373b30a1a63111797ef5dd88627acefa289ede100f7c545462724c63/354071-nightlife-bar-smiling-talking-by-azulroto-artlist-4k.webp\",\n          optixFlowApiKey: optixFlowApiKey,\n          skinClasses: skinClasses,\n          skinStyle: skinStyle,\n        },\n      }}\n      videoDialogTitle=\"Conversion Optimization Demo\"\n      logos={[\n        { src: brandLogoPlaceholders.white[0], alt: \"Partner 1\" },\n        { src: brandLogoPlaceholders.white[1], alt: \"Partner 2\" },\n        { src: brandLogoPlaceholders.white[2], alt: \"Partner 3\" },\n        { src: brandLogoPlaceholders.white[3], alt: \"Partner 4\" },\n        { src: brandLogoPlaceholders.white[4], alt: \"Partner 5\" },\n        { src: brandLogoPlaceholders.white[5], alt: \"Partner 6\" },\n      ]}\n      background=\"dark\"\n      pattern=\"grid1\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"primaryAction":{"type":"object","description":"Primary action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"videoButtonLabel":{"type":"object","description":"Video play button label","typeLabel":"React.ReactNode","required":false},"modalVideo":{"type":"object","description":"Video configuration for modal/dialog","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoDialogTitle":{"type":"string","description":"Video dialog title","required":false},"videoUrl":{"type":"string","description":"","required":false},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides primaryAction and video button)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Main image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"logosTagline":{"type":"object","description":"Logos tagline text","typeLabel":"React.ReactNode","required":false},"logos":{"type":"array","description":"Array of logo items","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for logos (overrides logos array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos 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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","conversion","video","play","engagement","logos","cta","marketing"],"performance":{},"importantUsageNotes":"Only use if you have a modalVideo.video prop object. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-design-showcase-logos","name":"Design Showcase Logos Hero","title":"Hero Design Showcase Logos","category":"Hero","categorySlug":"hero","description":"A hero showcasing design work with trusted design team logos. Perfect for design agencies and creative studios.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290338/7jsrni9mxchzobjdjkvvrtuvs243/cleanshot-2026-02-18-at-08-53-23.png","mobile":"https://cdn.ing/assets/i/r/290337/gnpi56pqmr2v174g1zv17oe256id/cleanshot-2026-02-18-at-08-53-35.png"},"componentPath":"blocks/hero/hero-design-showcase-logos.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroDesignShowcaseLogos } from \"@opensite/ui/blocks/hero/hero-design-showcase-logos\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDesignShowcaseLogos\n      heading=\"Trusted by leading brands worldwide\"\n      description=\"Join thousands of companies who have transformed their design workflow with our platform.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Case Studies\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      logos={[\n        { src: brandLogoPlaceholders.black[0], alt: \"Partner 1\" },\n        { src: brandLogoPlaceholders.black[1], alt: \"Partner 2\" },\n        { src: brandLogoPlaceholders.black[2], alt: \"Partner 3\" },\n        { src: brandLogoPlaceholders.black[3], alt: \"Partner 4\" },\n        { src: brandLogoPlaceholders.black[4], alt: \"Partner 5\" },\n        { src: brandLogoPlaceholders.black[5], alt: \"Partner 6\" },\n      ]}\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"logosLabel":{"type":"object","description":"Text above logos section","typeLabel":"React.ReactNode","required":false},"logos":{"type":"array","description":"Array of logo items","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","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 logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for logos (overrides logos array)","typeLabel":"React.ReactNode","required":false},"showcaseImage":{"type":"object","description":"Showcase image configuration","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","required":false},"showcaseSlot":{"type":"object","description":"Custom slot for showcase image (overrides showcaseImage prop)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos container","required":false},"showcaseClassName":{"type":"string","description":"Additional CSS classes for the showcase 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","design","showcase","logos","agency","creative","studio","portfolio"],"performance":{},"importantUsageNotes":"Only use this block if you have 3-6 valid logo img urls since the focal point of this block is to showcase a collection of 'logos'. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-video-overlay-stars","name":"Video Overlay Stars Hero","title":"Hero Video Overlay Stars","category":"Hero","categorySlug":"hero","description":"A hero with video overlay, star rating, and testimonial. Combines video content with social proof elements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290340/sqea7vkk446xfgnzk4lwx1e38sdl/cleanshot-2026-02-18-at-08-57-11.png","mobile":"https://cdn.ing/assets/i/r/290339/869rctro6gur2nq38vdo48smt9v5/cleanshot-2026-02-18-at-08-57-21.png"},"componentPath":"blocks/hero/hero-video-overlay-stars.tsx","code":"import { masterPlaylistUrls, videoPlaceholders } from \"@/lib/media\";\nimport { HeroVideoOverlayStars } from \"@opensite/ui/blocks/hero/hero-video-overlay-stars\";\n\nexport default function Demo() {\n  return (\n    <HeroVideoOverlayStars\n      heading=\"Testimonials\"\n      description=\"Our CRM solution is designed to streamline your business operations and improve efficiency.\"\n      actions={[\n        {\n          label: \"Try It Free\",\n          href: \"#\",\n          icon: \"lucide/arrow-right\",\n        },\n      ]}\n      backgroundVideo={{\n        video: {\n          masterPlaylistUrl:\n            \"https://octane.cdn.ing/api/v1/video/58e2b1e3-e1e2-50ee-81e3-62ff540b6115/master_playlist\",\n          fallbackSrc:\n            \"https://octane.cdn.ing/api/v1/video/58e2b1e3-e1e2-50ee-81e3-62ff540b6115/progressive.mp4\",\n          src: \"https://toastability-production.s3.amazonaws.com/7bjxoh95etcr699ztg0593d043gq\",\n          optixFlowApiKey: \"os-bcf1c82f-0c47-49ec-a303-807eec0a25c6\",\n        },\n      }}\n      trust={{\n        starCount: 5,\n        message: \"Trusted by 2,500+ customers worldwide\",\n      }}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Action buttons configuration","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 actions (overrides action prop)","typeLabel":"React.ReactNode","required":false},"trust":{"type":"object","description":"Trust/rating section configuration","fields":{"starCount":{"type":"number","description":"Number of stars to display","required":false},"message":{"type":"string","description":"Trust message text","required":false}},"typeLabel":"TrustConfig","required":false},"trustSlot":{"type":"object","description":"Custom slot for trust section (overrides trust prop)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"backgroundVideo":{"type":"object","description":"Background video configuration","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoSlot":{"type":"object","description":"Custom slot for video background (overrides backgroundVideo)","typeLabel":"React.ReactNode","required":false},"videoSrc":{"type":"string","description":"","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","video","overlay","stars","rating","testimonial","social-proof","reviews"],"performance":{},"importantUsageNotes":"Only populate the 'trust' prop if you have actual rating data to display. Only use if the media query returns a video that is appropriate for the backgroundVideo (b-roll style video). Do not exceed 40 characters for the 'heading' prop. Do not exceed 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."},{"id":"hero-productivity-launcher-video","name":"Productivity Launcher Video Hero","title":"Hero Productivity Launcher Video","category":"Hero","categorySlug":"hero","description":"A hero for productivity apps with video background and download buttons. Features app store badges and launcher-style design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290310/p9mbyd57q1ae33qrq7kv25w2forx/cleanshot-2026-02-18-at-05-43-19.png","mobile":"https://cdn.ing/assets/i/r/290309/c8xq5jx0mxbzr0x3tmb6mo2fivmw/cleanshot-2026-02-18-at-05-43-27.png"},"componentPath":"blocks/hero/hero-productivity-launcher-video.tsx","code":"import { videoPlaceholders } from \"@/lib/media\";\nimport { HeroProductivityLauncherVideo } from \"@opensite/ui/blocks/hero/hero-productivity-launcher-video\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroProductivityLauncherVideo\n      heading=\"Supercharge your productivity\"\n      description=\"The ultimate productivity launcher for modern professionals. Access everything you need with a single keystroke.\"\n      actions={[\n        {\n          label: \"Download Free\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/download\" size={16} />,\n        },\n        {\n          label: \"Watch Tour\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/play-circle\" size={16} />,\n        },\n      ]}\n      videoSrc={videoPlaceholders[18]}\n      versionInfo={{\n        version: \"v2.0\",\n        osRequirement: \"All platforms\",\n      }}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"versionInfo":{"type":"object","description":"Version information display","fields":{"version":{"type":"string","description":"Version number (e.g., \"v1.87.5\")","required":false},"osRequirement":{"type":"string","description":"OS requirement (e.g., \"macOS 12+\")","required":false},"installMethod":{"type":"string","description":"Install method text (e.g., \"Install via homebrew\")","required":false},"installAction":{"type":"object","description":"Install method action","typeLabel":"() => void","required":false}},"typeLabel":"VersionInfo","required":false},"versionInfoSlot":{"type":"object","description":"Custom slot for version info (overrides versionInfo prop)","typeLabel":"React.ReactNode","required":false},"backgroundVideo":{"type":"object","description":"Background video configuration","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoSlot":{"type":"object","description":"Custom slot for video (overrides backgroundVideo prop)","typeLabel":"React.ReactNode","required":false},"videoSrc":{"type":"string","description":"","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","productivity","launcher","video","download","app","mobile","desktop"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-hiring-animated-text","name":"Hiring Animated Text Hero","title":"Hero Hiring Animated Text","category":"Hero","categorySlug":"hero","description":"A hero for hiring platforms with animated rotating text. Dynamic design that showcases different job roles or skills.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306383/y9xvr6gbzmzzyf315rnx8ti5568o/hero-hiring-animated-text-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306384/j5b3o2uwhxovlhtv4lwpplw9rdtl/hero-hiring-animated-text-mobile.jpg"},"componentPath":"blocks/hero/hero-hiring-animated-text.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroHiringAnimatedText } from \"@opensite/ui/blocks/hero/hero-hiring-animated-text\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroHiringAnimatedText\n      headingPrefix=\"We're hiring\"\n      animatedTexts={[\n        \"Developers\",\n        \"Designers\",\n        \"Marketers\",\n        \"Product Managers\",\n      ]}\n      description=\"We're building the future of work and we want you to be part of it. Competitive salary, great benefits, and a culture you'll love.\"\n      actions={[\n        {\n          label: \"View Open Roles\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn About Us\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      backgroundImage={imagePlaceholders[39]}\n    />\n  );\n}","propsSchema":{"headingPrefix":{"type":"object","description":"Static heading prefix text","typeLabel":"React.ReactNode","required":false},"animatedTexts":{"type":"array","description":"Array of animated text items to cycle through","items":{"type":"string","description":""},"required":false},"headingSlot":{"type":"object","description":"Custom slot for heading (overrides heading props)","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},"backgroundImage":{"type":"string","description":"Background image URL","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","hiring","animated","text","jobs","recruitment","careers","dynamic"],"performance":{},"importantUsageNotes":"Only use if you can generate a heading prefix that will work with an array of animated text pairings, e.g. headingPrefix='We are hiring' and then animatedTexts={['Devs', 'Designers', ...]}. 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":"hero-split-image-newsletter","name":"Split Image Newsletter Hero","title":"Hero Split Image Newsletter","category":"Hero","categorySlug":"hero","description":"A split-layout hero with image and newsletter signup form. Perfect for content creators and newsletter-focused businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290449/1edn83krupk1z0qhhck69fkli8n5/cleanshot-2026-02-19-at-03-45-33-2x.png","mobile":"https://cdn.ing/assets/i/r/290448/i5nbc6qfwp8f5c5xdk5dl6dc1xty/cleanshot-2026-02-19-at-03-45-52-2x.png"},"componentPath":"blocks/hero/hero-split-image-newsletter.tsx","code":"\"use client\";\n\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSplitImageNewsletter } from \"@opensite/ui/blocks/hero/hero-split-image-newsletter\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { demoFormConfig } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroSplitImageNewsletter\n      heading=\"Stay updated with our newsletter\"\n      description=\"Get the latest insights, tips, and updates delivered to your inbox every week. Join 20,000+ subscribers.\"\n      formFields={formFields}\n      formConfig={{\n        ...demoFormConfig,\n        formLayout: \"button-group\",\n        buttonGroupSize: \"default\",\n      } as any}\n      buttonAction={{\n        label: \"Subscribe\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      successMessage=\"Thank you for subscribing! Check your inbox for a confirmation email.\"\n      helperText=\"We respect your privacy. Unsubscribe at any time.\"\n      image={{\n        src: imagePlaceholders[13],\n        alt: \"Newsletter preview\",\n      }}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"formFields":{"type":"array","description":"Form field configuration","items":{"type":"object","description":"","typeLabel":"FormFieldConfig"},"typeLabel":"FormFieldConfig[]","required":false},"formConfig":{"type":"object","description":"Form configuration for submission","typeLabel":"PageSpeedFormConfig","required":false},"onSubmit":{"type":"object","description":"Custom submit handler","typeLabel":"(values: Record<string, any>) => void | Promise<void>","required":false},"onSuccess":{"type":"object","description":"Success callback","typeLabel":"(data: unknown) => void","required":false},"onError":{"type":"object","description":"Error callback","typeLabel":"(error: Error) => void","required":false},"successMessage":{"type":"object","description":"Success message to display","typeLabel":"React.ReactNode","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for form (overrides form props)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Feature image on the right side","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","split","image","newsletter","signup","email","content","subscription"],"performance":{},"importantUsageNotes":"Ensure to find or create a newsletter contact category to wire up to this newsletter block. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-centered-gradient-cta","name":"Centered Gradient CTA Hero","title":"Hero Centered Gradient CTA","category":"Hero","categorySlug":"hero","description":"A centered hero with gradient background and prominent CTA. Features highlight badges and feature callouts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290341/u02dl41opywayzfwhamzx2le01ih/cleanshot-2026-02-18-at-08-58-12.png","mobile":"https://cdn.ing/assets/i/r/290342/vhtbpjog2avb5offh7a7msy034be/cleanshot-2026-02-18-at-08-58-23.png"},"componentPath":"blocks/hero/hero-centered-gradient-cta.tsx","code":"import { HeroCenteredGradientCta } from \"@opensite/ui/blocks/hero/hero-centered-gradient-cta\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCenteredGradientCta\n      badge=\"Limited Time Offer\"\n      heading=\"Transform your workflow today\"\n      description=\"Join thousands of teams who have revolutionized their productivity. Get started in minutes with our intuitive platform.\"\n      actions={[\n        {\n          label: \"Get Started Free\",\n          href: \"#\",\n          variant: \"secondary\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Schedule Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/video\" size={16} />,\n        },\n      ]}\n      background=\"gradient\"\n      features={[\n        {\n          title: \"Lightning Fast Performance\",\n          description:\n            \"Optimized for speed with sub-100ms response times globally. Edge computing and intelligent caching ensure your users get the best experience.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/bolt\" size={16} />,\n        },\n        {\n          title: \"Enterprise Security\",\n          description:\n            \"Bank-level encryption with SOC 2 Type II compliance. Automated security scanning and regular penetration testing keep your data safe.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/shield-check\" size={16} />,\n        },\n        {\n          title: \"Seamless Scalability\",\n          description:\n            \"From zero to millions of users without configuration. Auto-scaling infrastructure handles demand spikes automatically.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/server\" size={16} />,\n        },\n        {\n          title: \"Real-Time Collaboration\",\n          description:\n            \"Built-in tools for team communication, code review, and project management. Keep everyone aligned and productive.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/users\" size={16} />,\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/announcement content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"headingHighlight":{"type":"string","description":"Highlighted text within heading (gradient styled)","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},"features":{"type":"array","description":"Array of feature/benefit 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},"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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"gradientClassName":{"type":"string","description":"Additional CSS classes for the gradient background","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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","centered","gradient","cta","features","highlights","modern","vibrant"],"performance":{},"importantUsageNotes":"Do not exceed 20 characters for the 'badge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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."},{"id":"hero-stats-social-proof","name":"Stats Social Proof Hero","title":"Hero Stats Social Proof","category":"Hero","categorySlug":"hero","description":"A hero featuring prominent statistics and social proof elements. Includes dashboard image and key metrics display.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290344/lg1h8mu1h1fgl9o85pqn9inygzy6/cleanshot-2026-02-18-at-08-59-14.png","mobile":"https://cdn.ing/assets/i/r/290343/niluxvh23hsyq2j83jp6b4m0blem/cleanshot-2026-02-18-at-08-59-28.png"},"componentPath":"blocks/hero/hero-stats-social-proof.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroStatsSocialProof } from \"@opensite/ui/blocks/hero/hero-stats-social-proof\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroStatsSocialProof\n      badge=\"Industry Expertise\"\n      badgeIcon={<DynamicIcon name=\"lucide/star\" size={16} />}\n      heading=\"Trusted by thousands of businesses\"\n      description=\"Join the companies already experiencing transformative results with our platform.\"\n      imageSrc={imagePlaceholders[100]}\n      imageAlt=\"Banner image\"\n      statusCard={{\n        title: \"Rated 4.9/5 by over 1,000 users\",\n        subtitle: \"Based on real user reviews from across the globe\",\n        icon: <DynamicIcon name=\"lucide/star\" size={20} />,\n      }}\n      stats={[\n        { value: \"50K+\", label: \"Active Users\" },\n        { value: \"99.9%\", label: \"Uptime\" },\n        { value: \"4.9/5\", label: \"User Rating\" },\n      ]}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          asButton: true,\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Case Studies\",\n          href: \"#\",\n          variant: \"outline\",\n          asButton: true,\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/status indicator content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","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},"stats":{"type":"array","description":"Array of stat items to display","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","required":false},"statusCard":{"type":"object","description":"Status card content","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"icon":{"type":"object","description":"","typeLabel":"React.ReactNode | string","required":false}},"typeLabel":"{ title?: React.ReactNode; subtitle?: React.ReactNode; icon?: React.ReactNode | string; }","required":false},"statusCardSlot":{"type":"object","description":"Custom slot for status card (overrides statusCard)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","stats","social-proof","metrics","dashboard","numbers","credibility","data"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' since the 'stats' element is a 3 column layout. Ensure to keep the statusCard.title/statusCard.subtitle content succinct to ensure it doesn't distort the layout. Do not exceed 20 characters for the 'badge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-feature-cards-grid","name":"Feature Cards Grid Hero","title":"Hero Feature Cards Grid","category":"Hero","categorySlug":"hero","description":"A hero with feature cards arranged in a grid layout. Each card has an icon and description for key features.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290346/4b8j2sc3e9t1hfhthpjdggomau9m/cleanshot-2026-02-18-at-09-01-02.png","mobile":"https://cdn.ing/assets/i/r/290345/2e6y30oq48t0zammlb4tfd4gjj5a/cleanshot-2026-02-18-at-09-01-17.png"},"componentPath":"blocks/hero/hero-feature-cards-grid.tsx","code":"import { HeroFeatureCardsGrid } from \"@opensite/ui/blocks/hero/hero-feature-cards-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroFeatureCardsGrid\n      heading=\"Everything you need in one place\"\n      description=\"Powerful features that work together seamlessly to help you achieve more.\"\n      features={[\n        {\n          icon: <DynamicIcon name=\"lucide/layout-dashboard\" size={24} />,\n          title: \"Intuitive Dashboard\",\n          href: \"#\",\n          description:\n            \"Get insights at a glance with our beautiful, customizable dashboard\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/users\" size={24} />,\n          title: \"Team Collaboration\",\n          href: \"#\",\n          description:\n            \"Work together seamlessly with real-time updates and comments\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/bar-chart\" size={24} />,\n          title: \"Advanced Analytics\",\n          href: \"#\",\n          description:\n            \"Make data-driven decisions with comprehensive reporting\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/zap\" size={24} />,\n          title: \"Automation\",\n          href: \"#\",\n          description: \"Save time with smart workflows and automated processes\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Talk to Sales\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","typeLabel":"FeatureItem & { iconName?: string }"},"typeLabel":"FeatureItem & { iconName?: string }[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","feature","cards","grid","icons","benefits","showcase","product"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 `features` since the features element is a 4 column layout. 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":"hero-testimonial-image-grid","name":"Testimonial Image Grid Hero","title":"Hero Testimonial Image Grid","category":"Hero","categorySlug":"hero","description":"A hero combining testimonials with an image grid layout. Shows customer feedback alongside visual content.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290348/do85q13ta1010srw4u5teae8yppl/cleanshot-2026-02-18-at-09-02-09.png","mobile":"https://cdn.ing/assets/i/r/290347/0h6qx647ixl6d1ffirwqz6956g9a/cleanshot-2026-02-18-at-09-02-20.png"},"componentPath":"blocks/hero/hero-testimonial-image-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\nimport { HeroTestimonialImageGrid } from \"@opensite/ui/blocks/hero/hero-testimonial-image-grid\";\n\nexport default function Demo() {\n  return (\n    <HeroTestimonialImageGrid\n      heading=\"Loved by customers worldwide\"\n      description=\"See why thousands of businesses trust us to power their operations and drive growth.\"\n      testimonial={{\n        quote:\n          \"This platform transformed how we work. Absolutely game-changing.\",\n        author: \"Sarah Johnson\",\n        role: \"CEO\",\n        company: \"TechCorp\",\n        avatars: [{ image: imagePlaceholders[24], fallback: \"SJ\" }],\n      }}\n      gridImages={[\n        { src: imagePlaceholders[25], alt: \"Customer success story 1\" },\n        { src: imagePlaceholders[26], alt: \"Customer success story 2\" },\n        { src: imagePlaceholders[27], alt: \"Customer success story 3\" },\n        { src: imagePlaceholders[28], alt: \"Customer success story 4\" },\n      ]}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"testimonial":{"type":"object","description":"Testimonial configuration","fields":{"quote":{"type":"string","description":"Testimonial quote text","required":true},"author":{"type":"string","description":"Author name","required":true},"avatar":{"type":"object","description":"Author avatar image","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","required":false}},"typeLabel":"TestimonialConfig","required":false},"testimonialSlot":{"type":"object","description":"Custom slot for testimonial (overrides testimonial prop)","typeLabel":"React.ReactNode","required":false},"gridImages":{"type":"array","description":"Grid images configuration (4 images for the grid)","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for the image","required":false}},"typeLabel":"GridImageConfig"},"typeLabel":"GridImageConfig[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for images grid (overrides gridImages)","typeLabel":"React.ReactNode","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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","testimonial","image","grid","reviews","customers","feedback","social-proof"],"performance":{},"importantUsageNotes":"Only use if you have a valid testimonial - DO NOT MAKE UP A TESTIMONIAL/REVIEW. Supply exactly 4 images to the 'gridImages' prop. Do not exceed 80 characters for the 'testimonial.quote' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-design-system-3d","name":"Design System 3D Hero","title":"Hero Design System 3D","category":"Hero","categorySlug":"hero","description":"A hero showcasing design systems with 3D perspective images. Modern and innovative design for design tool products.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290350/g2n65xer8r53i9v5hkc16s2o9kyt/cleanshot-2026-02-18-at-09-03-19.png","mobile":"https://cdn.ing/assets/i/r/290349/jor599pzgxbhmrl6ol9aubpjsded/cleanshot-2026-02-18-at-09-03-34.png"},"componentPath":"blocks/hero/hero-design-system-3d.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroDesignSystem3d } from \"@opensite/ui/blocks/hero/hero-design-system-3d\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDesignSystem3d\n      trustBadge=\"Design System\"\n      heading=\"Build with a comprehensive design system\"\n      description=\"Create consistent, beautiful interfaces with our complete set of components, patterns, and guidelines. Built for scale and flexibility.\"\n      actions={[\n        {\n          label: \"Explore Components\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Documentation\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/book-open\" size={16} />,\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[100], alt: \"Design system component 1\" },\n        { src: imagePlaceholders[101], alt: \"Design system component 2\" },\n        { src: imagePlaceholders[102], alt: \"Design system component 3\" },\n      ]}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"trustBadge":{"type":"object","description":"Trust badge text","typeLabel":"React.ReactNode","required":false},"trustBadgeSlot":{"type":"object","description":"Custom slot for trust badge (overrides trustBadge prop)","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},"logoMarkSrc":{"type":"string","description":"Logo mark image for preview button","required":false},"images":{"type":"array","description":"Array of 3D stacked images (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","design-system","3d","perspective","modern","innovative","tools","creative"],"performance":{},"importantUsageNotes":"Only use for client websites that have an ultra modern UI since this implements skewed elements that will not work for traditional UI designs. Supply exactly 3 images to the 'images' prop. Do not exceed 20 characters for the 'trustBadge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block. 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":"hero-architecture-fullscreen","name":"Architecture Fullscreen Hero","title":"Hero Architecture Fullscreen","category":"Hero","categorySlug":"hero","description":"A fullscreen hero with architecture or real estate imagery. Features overlay content for property or construction businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306283/a0q27avk2yabiem7lszi8thbb18k/hero-architecture-fullscreen-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306284/r41vm5wnq705shv4n0xe8jlxzjxx/hero-architecture-fullscreen-mobile.jpg"},"componentPath":"blocks/hero/hero-architecture-fullscreen.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroArchitectureFullscreen } from \"@opensite/ui/blocks/hero/hero-architecture-fullscreen\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroArchitectureFullscreen\n      heading=\"Designing spaces that inspire\"\n      description=\"Award-winning architecture firm specializing in sustainable, innovative designs that blend form and function seamlessly.\"\n      action={{\n        label: \"View Projects\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      backgroundImage={imagePlaceholders[30]}\n    />\n  );\n}","propsSchema":{"tagline":{"type":"object","description":"Tagline/label 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","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"CTA action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for rendering action (overrides action)","typeLabel":"React.ReactNode","required":false},"backgroundImage":{"type":"string","description":"Background image URL","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","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},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","architecture","fullscreen","real-estate","property","construction","overlay","immersive"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-innovation-image-grid","name":"Innovation Image Grid Hero","title":"Hero Innovation Image Grid","category":"Hero","categorySlug":"hero","description":"A hero focused on innovation with an image grid layout. Showcases innovative products or research visually.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290368/butcxgkqfo6ei481n33fqkpc4ms1/cleanshot-2026-02-18-at-09-28-14.png","mobile":"https://cdn.ing/assets/i/r/290367/gltb7cmf3eptn3got56saz2iz0jm/cleanshot-2026-02-18-at-09-28-27.png"},"componentPath":"blocks/hero/hero-innovation-image-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroInnovationImageGrid } from \"@opensite/ui/blocks/hero/hero-innovation-image-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroInnovationImageGrid\n      heading=\"Pioneering the future of technology\"\n      description=\"Pushing boundaries and exploring new frontiers. Join us on our mission to shape tomorrow's world.\"\n      actions={[\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[27], alt: \"Innovation 1\" },\n        { src: imagePlaceholders[28], alt: \"Innovation 2\" },\n        { src: imagePlaceholders[29], alt: \"Innovation 3\" },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Action configuration for CTA button","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 action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"images":{"type":"array","description":"Array of images for the grid (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","innovation","image","grid","research","technology","showcase","modern"],"performance":{},"importantUsageNotes":"Supply exactly 3 images to the 'images' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-video-dialog-gradient","name":"Video Dialog Gradient Hero","title":"Hero Video Dialog Gradient","category":"Hero","categorySlug":"hero","description":"A hero with gradient background and video dialog modal. Combines visual appeal with video content engagement.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290352/3ruvw7dmg7vm0ovnlchjadflsfrv/cleanshot-2026-02-18-at-09-06-30.png","mobile":"https://cdn.ing/assets/i/r/290351/ayqliqpcf4s5dfe99gamkd70hw8p/cleanshot-2026-02-18-at-09-06-45.png"},"componentPath":"blocks/hero/hero-video-dialog-gradient.tsx","code":"import { imagePlaceholders, videoPlaceholders } from \"@/lib/media\";\nimport { HeroVideoDialogGradient } from \"@opensite/ui/blocks/hero/hero-video-dialog-gradient\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroVideoDialogGradient\n      heading=\"See our platform in action\"\n      description=\"Get a 3-minute walkthrough of our most powerful features and see why teams love working with us.\"\n      videoAction={{\n        label: \"Watch Demo\",\n        variant: \"outline\",\n        iconAfter: <DynamicIcon name=\"lucide/play\" size={16} />,\n      }}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"ghost\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      image={{\n        src: imagePlaceholders[35],\n        alt: \"Platform demo preview\",\n      }}\n      videoDialog={{\n        title: \"Platform Demo\",\n        videoUrl: videoPlaceholders[35],\n      }}\n      background=\"gradient\"\n      pattern=\"circuitBoardFadeTop\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"videoAction":{"type":"object","description":"Video action object","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"image":{"type":"object","description":"Showcase image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"modalVideo":{"type":"object","description":"Video configuration for modal/dialog","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoDialogTitle":{"type":"string","description":"Video dialog title","required":false},"videoDialog":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Dialog title","required":false},"videoUrl":{"type":"string","description":"Video embed URL","required":false}},"typeLabel":"VideoDialogConfig","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"videoAspectRatio":{"type":"string","description":"Video aspect ratio","typeLabel":"\"horizontal\" | \"vertical\"","required":false},"onVideoClick":{"type":"object","description":"Callback when video button is clicked","typeLabel":"() => void","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","video","dialog","gradient","modal","engagement","media","modern"],"performance":{},"importantUsageNotes":"Only use if you have a 'videoDialog' prop object and then ensure to supply a 'videoAction' prop. Only use at max 1 action object in the 'actions' array. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-minimal-centered-dark","name":"Minimal Centered Dark Hero","title":"Hero Minimal Centered Dark","category":"Hero","categorySlug":"hero","description":"A minimal dark-themed centered hero with beta badge. Clean and focused design for product launches.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290356/f3m3055iz8f576ccgei2hsyqoqxk/cleanshot-2026-02-18-at-09-08-59.png","mobile":"https://cdn.ing/assets/i/r/290355/8t7ldz8f6jzb5q95964ad7vjaqpu/cleanshot-2026-02-18-at-09-09-12.png"},"componentPath":"blocks/hero/hero-minimal-centered-dark.tsx","code":"import { HeroMinimalCenteredDark } from \"@opensite/ui/blocks/hero/hero-minimal-centered-dark\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroMinimalCenteredDark\n      heading=\"Simplicity is the ultimate sophistication\"\n      description=\"Clean, focused, and purposeful. Experience the power of minimalism in design and functionality.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      badge=\"Industry Leader\"\n      background=\"dark\"\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.75}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/status indicator content","typeLabel":"React.ReactNode","required":false},"showStatusDot":{"type":"boolean","description":"Show animated status dot","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"headingHighlight":{"type":"string","description":"Highlighted text within heading (gradient styled)","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},"stats":{"type":"array","description":"Array of stat/trust indicators","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","minimal","centered","dark","beta","launch","clean","focused"],"performance":{},"importantUsageNotes":"Do not exceed 60 characters for the 'heading' prop. Do not exceed 160 characters for the 'description' prop. Do not exceed 20 characters for the 'badge' 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":"hero-product-showcase-floating","name":"Product Showcase Floating Hero","title":"Hero Product Showcase Floating","category":"Hero","categorySlug":"hero","description":"A hero with floating stats cards around a product showcase. Dynamic design highlighting key metrics and features.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290353/be22zbvrrqprz6b306evz4ql1xtt/cleanshot-2026-02-18-at-09-07-50.png","mobile":"https://cdn.ing/assets/i/r/290354/awbnvfo5q8bfyc1b73nzu6savmd4/cleanshot-2026-02-18-at-09-08-13.png"},"componentPath":"blocks/hero/hero-product-showcase-floating.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroProductShowcaseFloating } from \"@opensite/ui/blocks/hero/hero-product-showcase-floating\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroProductShowcaseFloating\n      badgeText=\"New Arrival\"\n      badgeIcon=\"lucide/sparkles\"\n      heading=\"Introducing our latest innovation\"\n      description=\"Experience the perfect blend of style, functionality, and cutting-edge technology. Designed to elevate your everyday.\"\n      userCount={{\n        count: \"300+\",\n        label: \"Websites Powered\",\n        avatars: [\n          {\n            src: imagePlaceholders[1],\n            alt: \"User Avatar 1\",\n          },\n          {\n            src: imagePlaceholders[2],\n            alt: \"User Avatar 2\",\n          },\n          {\n            src: imagePlaceholders[3],\n            alt: \"User Avatar 3\",\n          },\n        ],\n      }}\n      floatingStat={{\n        label: \"Clients\",\n        value: \"300+\",\n        icon: \"lucide/users\",\n        position: \"top-right\",\n      }}\n      actions={[\n        {\n          label: \"Shop Now\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n          iconAfter: <DynamicIcon name=\"lucide/shopping-bag\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          size: \"lg\",\n          variant: \"outline\",\n        },\n      ]}\n      productImage={{ src: imagePlaceholders[103], alt: \"Product showcase\" }}\n      background=\"dark\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text with icon","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"productImage":{"type":"object","description":"Main product image","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","required":false},"productImageSlot":{"type":"object","description":"Custom slot for product image (overrides productImage prop)","typeLabel":"React.ReactNode","required":false},"floatingStat":{"type":"object","description":"Floating stat configuration","fields":{"value":{"type":"string","description":"Stat value (e.g., \"+127%\")","required":true},"label":{"type":"string","description":"Stat label (e.g., \"Growth\")","required":true},"icon":{"type":"string","description":"Icon name for the stat","required":false},"position":{"type":"string","description":"Position of the floating stat","typeLabel":"\"top-right\" | \"bottom-left\"","required":false}},"typeLabel":"FloatingStatItem","required":false},"floatingStatSlot":{"type":"object","description":"Custom slot for floating stat (overrides floatingStat prop)","typeLabel":"React.ReactNode","required":false},"userCount":{"type":"object","description":"User count configuration","fields":{"count":{"type":"string","description":"User count value (e.g., \"2.5K+\")","required":true},"label":{"type":"string","description":"User count label (e.g., \"Active users\")","required":true},"avatars":{"type":"array","description":"Array of user avatar images","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}},"typeLabel":"UserCountItem","required":false},"userCountSlot":{"type":"object","description":"Custom slot for user count (overrides userCount prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"showcaseClassName":{"type":"string","description":"Additional CSS classes for the product showcase","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},"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":["hero","product","showcase","floating","stats","cards","metrics","dynamic"],"performance":{},"importantUsageNotes":"Only use if you have REAL data for the 'floatingStat' and/or 'userCount' props and a 'productImage' prop object. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-saas-dashboard-preview","name":"SaaS Dashboard Preview Hero","title":"Hero SaaS Dashboard Preview","category":"Hero","categorySlug":"hero","description":"A hero featuring a SaaS dashboard preview with email signup. Perfect for software products showing their interface.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290451/rb4nlzuaqaytmocazqfb41w6m50p/cleanshot-2026-02-19-at-03-49-38-2x.png","mobile":"https://cdn.ing/assets/i/r/290450/i7thwrr15st3x9d0plscxmqyar1e/cleanshot-2026-02-19-at-03-50-02-2x.png"},"componentPath":"blocks/hero/hero-saas-dashboard-preview.tsx","code":"\"use client\";\n\nimport { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSaasDashboardPreview } from \"@opensite/ui/blocks/hero/hero-saas-dashboard-preview\";\nimport { demoFormConfig } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n    className: \"w-full\",\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroSaasDashboardPreview\n      badgeText=\"SaaS Platform\"\n      badgeIcon=\"lucide/box\"\n      heading=\"The operating system for your business\"\n      description=\"All-in-one platform to run your business efficiently. From analytics to automation, everything you need is here.\"\n      formFields={formFields}\n      formConfig={\n        {\n          ...demoFormConfig,\n          formLayout: \"button-group\",\n          buttonGroupSize: \"lg\",\n        } as any\n      }\n      buttonAction={{\n        label: \"Start Free Trial\",\n        variant: \"default\",\n      }}\n      successMessage=\"Welcome aboard! Check your email to get started.\"\n      helperText=\"No credit card required. Cancel anytime.\"\n      browserPreview={{\n        url: \"yourbrand.com/showcase\",\n        image: {\n          src: imagePlaceholders[83],\n          alt: \"Dashboard\",\n        },\n      }}\n      spacing=\"xl\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text with icon","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"formFields":{"type":"array","description":"Form field configuration","items":{"type":"object","description":"","typeLabel":"FormFieldConfig"},"typeLabel":"FormFieldConfig[]","required":false},"formConfig":{"type":"object","description":"Form configuration for submission","typeLabel":"PageSpeedFormConfig","required":false},"onSubmit":{"type":"object","description":"Custom submit handler","typeLabel":"(values: Record<string, any>) => void | Promise<void>","required":false},"onSuccess":{"type":"object","description":"Success callback","typeLabel":"(data: unknown) => void","required":false},"onError":{"type":"object","description":"Error callback","typeLabel":"(error: Error) => void","required":false},"successMessage":{"type":"object","description":"Success message to display","typeLabel":"React.ReactNode","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for form (overrides form props)","typeLabel":"React.ReactNode","required":false},"browserPreview":{"type":"object","description":"Browser preview configuration","fields":{"url":{"type":"string","description":"URL displayed in browser bar","required":false},"image":{"type":"object","description":"Dashboard preview image","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","required":false}},"typeLabel":"BrowserPreviewConfig","required":false},"browserPreviewSlot":{"type":"object","description":"Custom slot for browser preview (overrides browserPreview prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"previewClassName":{"type":"string","description":"Additional CSS classes for the preview area","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","saas","dashboard","preview","email","signup","software","product"],"performance":{},"importantUsageNotes":"Ensure to find or create a newsletter contact category to wire up to this newsletter block. IMPORTANT: use the website's url for the prop 'browserPreview.url' - DO NOT USE AN EXAMPLE/PLACEHOLDER URL. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-therapy-testimonial-grid","name":"Therapy Testimonial Grid Hero","title":"Hero Therapy Testimonial Grid","category":"Hero","categorySlug":"hero","description":"A hero for therapy and wellness services with testimonial grid. Features calming design and client feedback.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290358/foiz9yxky9f5imn9h0p2o591qz0u/cleanshot-2026-02-18-at-09-10-30.png","mobile":"https://cdn.ing/assets/i/r/290357/oeh58ujgdm0q7lwzheddn2b2jltf/cleanshot-2026-02-18-at-09-10-48.png"},"componentPath":"blocks/hero/hero-therapy-testimonial-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroTherapyTestimonialGrid } from \"@opensite/ui/blocks/hero/hero-therapy-testimonial-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroTherapyTestimonialGrid\n      heading=\"Real stories, real healing\"\n      description=\"Hear from clients who've found support, growth, and healing through our therapy services.\"\n      testimonial={{\n        quote:\n          \"Therapy changed my life. I finally feel understood and supported. Highly recommend to anyone seeking help. Also, the therapists are amazing!\",\n        author: \"Anonymous Client\",\n        avatar: { src: imagePlaceholders[27], alt: \"Client testimonial\" },\n      }}\n      images={[\n        { src: imagePlaceholders[28], alt: \"Therapy session 1\" },\n        { src: imagePlaceholders[29], alt: \"Therapy session 2\" },\n        { src: imagePlaceholders[30], alt: \"Therapy session 3\" },\n      ]}\n      actions={[\n        {\n          label: \"Find Your Therapist\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Read More Stories\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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 grid images (expects 4 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images grid (overrides images array)","typeLabel":"React.ReactNode","required":false},"testimonial":{"type":"object","description":"Testimonial configuration","fields":{"quote":{"type":"string","description":"Testimonial quote text","required":true},"author":{"type":"string","description":"Author name","required":true},"avatar":{"type":"object","description":"Author avatar image","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","required":false}},"typeLabel":"TestimonialConfig","required":false},"testimonialSlot":{"type":"object","description":"Custom slot for testimonial (overrides testimonial prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"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":["hero","therapy","testimonial","grid","wellness","health","mental-health","calming"],"performance":{},"importantUsageNotes":"Only use if you have a valid testimonial - DO NOT MAKE UP A TESTIMONIAL/REVIEW. Supply exactly 3 images to the 'images' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-mental-health-team","name":"Mental Health Team Hero","title":"Hero Mental Health Team","category":"Hero","categorySlug":"hero","description":"A dark-themed hero showcasing mental health professionals. Features team images and supportive messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290359/s41b8vh4omhdpu4i7lhgqvlch5tr/cleanshot-2026-02-18-at-09-12-29.png","mobile":"https://cdn.ing/assets/i/r/290360/13zji87qvokrncnmbwsrbp4uzxtc/cleanshot-2026-02-18-at-09-13-08.png"},"componentPath":"blocks/hero/hero-mental-health-team.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\nimport { HeroMentalHealthTeam } from \"@opensite/ui/blocks/hero/hero-mental-health-team\";\n\nexport default function Demo() {\n  return (\n    <HeroMentalHealthTeam\n      description=\"Our team of experienced mental health professionals is dedicated to providing compassionate care and support to individuals in need.\"\n      heading=\"Compassionate care for your mental wellbeing\"\n      smallImages={[\n        { src: imagePlaceholders[41], alt: \"Dr. Smith\" },\n        { src: imagePlaceholders[42], alt: \"Dr. Johnson\" },\n      ]}\n      testimonial={{\n        quote:\n          \"The support I received changed my life. I'm so grateful for the compassionate care.\",\n        author: \"Sarah M.\",\n        role: \"Client\",\n        avatarSrc: imagePlaceholders[43],\n      }}\n      featureImage={{\n        src: imagePlaceholders[44],\n        alt: \"Mental health support\",\n      }}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Talk to Sales\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"subtitle":{"type":"object","description":"Subtitle text above heading","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"smallImages":{"type":"array","description":"Array of 2 small images (expects 2 images)","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},"smallImagesSlot":{"type":"object","description":"Custom slot for small images (overrides smallImage array)","typeLabel":"React.ReactNode","required":false},"testimonial":{"type":"object","description":"Testimonial configuration","typeLabel":"TestimonialItem & { avatarSrc?: string }","required":false},"testimonialSlot":{"type":"object","description":"Custom slot for testimonial (overrides testimonial prop)","typeLabel":"React.ReactNode","required":false},"featureImage":{"type":"object","description":"Large feature image","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","required":false},"featureImageSlot":{"type":"object","description":"Custom slot for feature image (overrides featureImage prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","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},"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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","mental-health","team","professionals","dark","support","wellness","healthcare"],"performance":{},"importantUsageNotes":"Only use if you have a valid testimonial - DO NOT MAKE UP A TESTIMONIAL/REVIEW. Supply exactly 2 images to the 'smallImages' prop and ensure you supply a 'featuredImage' prop object. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-mentorship-video-split","name":"Mentorship Video Split Hero","title":"Hero Mentorship Video Split","category":"Hero","categorySlug":"hero","description":"A split-layout hero for mentorship platforms with video preview. Features career growth messaging and video CTA.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290318/h9p4m076wb9e0hkukoedkfalcc7o/cleanshot-2026-02-18-at-08-16-27.png","mobile":"https://cdn.ing/assets/i/r/290317/tr2jb7z8o6c4hjwoqlikm9hk6jsw/cleanshot-2026-02-18-at-08-16-51.png"},"componentPath":"blocks/hero/hero-mentorship-video-split.tsx","code":"import { videoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroMentorshipVideoSplit } from \"@opensite/ui/blocks/hero/hero-mentorship-video-split\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroMentorshipVideoSplit\n      heading=\"Learn from industry experts\"\n      description=\"Get personalized guidance from experienced professionals who have walked the path before you. Accelerate your growth with 1-on-1 mentorship.\"\n      action={{\n        label: \"Find a Mentor\",\n        href: \"#\",\n        variant: \"default\",\n        asButton: true,\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      videoLabel=\"Watch success stories\"\n      videoThumbnail={{ src: imagePlaceholders[45], alt: \"Mentorship video\" }}\n      videoUrl={videoPlaceholders[10]}\n      videoTitle=\"Mentorship Success Stories\"\n      image={{ src: imagePlaceholders[120], alt: \"Video Showcase\" }}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Action configuration for CTA button","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"videoLabel":{"type":"object","description":"Video section label text","typeLabel":"React.ReactNode","required":false},"modalVideo":{"type":"object","description":"Video configuration for modal/dialog","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoTitle":{"type":"string","description":"Video dialog title","required":false},"videoThumbnail":{"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","required":false},"videoUrl":{"type":"string","description":"","required":false},"videoSlot":{"type":"object","description":"Custom slot for video section (overrides video props)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Main feature image","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"videoAspectRatio":{"type":"string","description":"Video aspect ratio","typeLabel":"\"horizontal\" | \"vertical\"","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","mentorship","video","split","career","growth","education","coaching"],"performance":{},"importantUsageNotes":"Only use if you have a valid video to showcase (i.e. a testimonial/how to/explainer/etc video - don't use if the system only has b-roll style videos). Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-business-operations-mosaic","name":"Business Operations Mosaic Hero","title":"Hero Business Operations Mosaic","category":"Hero","categorySlug":"hero","description":"A hero with mosaic image layout for business operations. Features asymmetric grid and professional messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306381/e5tct1y9j5c66pkjfyp6c3khb0gz/hero-business-operations-mosaic-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306382/v0ookz29wy2pneg3gw1tjyoj21aq/hero-business-operations-mosaic-mobile.jpg"},"componentPath":"blocks/hero/hero-business-operations-mosaic.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\nimport { HeroBusinessOperationsMosaic } from \"@opensite/ui/blocks/hero/hero-business-operations-mosaic\";\n\nexport default function Demo() {\n  return (\n    <HeroBusinessOperationsMosaic\n      heading=\"Streamline your business operations\"\n      description=\"Unified platform for managing all aspects of your business. From inventory to accounting, everything in one place. Join use today.\"\n      images={[\n        { src: imagePlaceholders[56], alt: \"Operations 1\" },\n        { src: imagePlaceholders[57], alt: \"Operations 2\" },\n        { src: imagePlaceholders[58], alt: \"Operations 3\" },\n      ]}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Talk to Sales\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"images":{"type":"array","description":"Array of mosaic images (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for mosaic images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"mosaicClassName":{"type":"string","description":"Additional CSS classes for the mosaic 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","business","operations","mosaic","grid","professional","agency","corporate"],"performance":{},"importantUsageNotes":"Use exactly 3 images for the images mosaic. Do not exceed 40 words for the 'heading' prop. Do not exceed 140 characters for the 'description' prop. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' or 'secondary' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"hero-agency-animated-images","name":"Agency Animated Images Hero","title":"Hero Agency Animated Images","category":"Hero","categorySlug":"hero","description":"A hero for agencies with animated image transitions. Dynamic visual design showcasing creative work.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290403/vrelfxlgppylzug24qu5ko04v1dr/cleanshot-2026-02-18-at-15-19-41.png","mobile":"https://cdn.ing/assets/i/r/290402/ramwyhhrz0khqym9rk1tvpn18yvv/cleanshot-2026-02-18-at-15-19-57.png"},"componentPath":"blocks/hero/hero-agency-animated-images.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroAgencyAnimatedImages } from \"@opensite/ui/blocks/hero/hero-agency-animated-images\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroAgencyAnimatedImages\n      heading=\"Creative solutions for modern brands\"\n      description=\"Discover a platform that empowers you to create, collaborate, and achieve amazing results. Welcome to the future of work.\"\n      actions={[\n        {\n          label: \"View Our Work\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[15], alt: \"Project 1\" },\n        { src: imagePlaceholders[16], alt: \"Project 2\" },\n        { src: imagePlaceholders[17], alt: \"Project 3\" },\n        { src: imagePlaceholders[18], alt: \"Project 4\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","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},"images":{"type":"array","description":"Array of images for the grid","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"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},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"imagesContainerClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","agency","animated","images","creative","dynamic","transitions","portfolio"],"performance":{},"importantUsageNotes":"Use exactly 4 images for the 'images' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-welcome-asymmetric-images","name":"Welcome Asymmetric Images Hero","title":"Hero Welcome Asymmetric Images","category":"Hero","categorySlug":"hero","description":"A welcoming hero with asymmetric image layout. Features staggered images and friendly messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290372/vqmoy92aft1vrjto6ckfcprc1fg0/cleanshot-2026-02-18-at-09-39-55.png","mobile":"https://cdn.ing/assets/i/r/290371/do1c747ic1f8nbwez4wfoyg8ik6n/cleanshot-2026-02-18-at-09-40-11.png"},"componentPath":"blocks/hero/hero-welcome-asymmetric-images.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroWelcomeAsymmetricImages } from \"@opensite/ui/blocks/hero/hero-welcome-asymmetric-images\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroWelcomeAsymmetricImages\n      heading=\"Where innovation meets creativity\"\n      description=\"Discover a platform that empowers you to create, collaborate, and achieve amazing results. Welcome to the future of work.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"link\",\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[117], alt: \"Feature 1\" },\n        { src: imagePlaceholders[118], alt: \"Feature 2\" },\n        { src: imagePlaceholders[119], alt: \"Feature 3\" },\n        { src: imagePlaceholders[120], alt: \"Feature 4\" },\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeCenter\"\n      patternOpacity={0.25}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Action buttons configuration","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 actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Images for the asymmetric grid (4 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","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},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","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":["hero","welcome","asymmetric","images","friendly","staggered","modern","landing"],"performance":{},"importantUsageNotes":"Use exactly 4 images for the 'images' prop. Use exactly 4 images for the 'images' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-startup-launch-cta","name":"Startup Launch CTA Hero","title":"Hero Startup Launch CTA","category":"Hero","categorySlug":"hero","description":"A hero designed for startup launches with prominent CTA. Features launch badge, user avatars, and growth messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290385/e10sifo994x9qg0fet9gpprk7oox/cleanshot-2026-02-18-at-13-12-40.png","mobile":"https://cdn.ing/assets/i/r/290384/zs9h4eybhh9se8qgmas7x4z5d9ap/cleanshot-2026-02-18-at-13-12-50.png"},"componentPath":"blocks/hero/hero-startup-launch-cta.tsx","code":"import { imagePlaceholders, logoPlaceholders } from \"@/lib/media\";\nimport { HeroStartupLaunchCta } from \"@opensite/ui/blocks/hero/hero-startup-launch-cta\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroStartupLaunchCta\n      badge=\"We're Launching\"\n      badgeIcon={<DynamicIcon name=\"lucide/rocket\" />}\n      heading=\"The future of startups starts here\"\n      description=\"Join the waitlist for early access to the platform that's changing how startups build, launch, and scale.\"\n      badgeCard={{\n        logoSrc: logoPlaceholders.logoMark,\n        title: \"OpenSite\",\n        subtitle: \"Intelligent Automation\",\n      }}\n      imageSrc={imagePlaceholders[75]}\n      avatars={[\n        { src: imagePlaceholders[6], alt: \"Avatar 1\" },\n        { src: imagePlaceholders[7], alt: \"Avatar 2\" },\n        { src: imagePlaceholders[9], alt: \"Avatar 3\" },\n      ]}\n      socialProofText=\"5,000+ active members\"\n      background=\"dark\"\n      pattern=\"dashedGridFadeBottomLeft\"\n      patternOpacity={0.25}\n      actions={[\n        {\n          label: \"Join Waitlist\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/status indicator content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","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},"avatars":{"type":"array","description":"Social proof avatars","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},"avatarsSlot":{"type":"object","description":"Custom slot for avatars (overrides avatars array)","typeLabel":"React.ReactNode","required":false},"socialProofText":{"type":"object","description":"Social proof text (e.g., \"500+ startups launched\")","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","required":false},"badgeCard":{"type":"object","description":"Badge card content (floating card on image)","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"logoSrc":{"type":"string","description":"","required":false}},"typeLabel":"{ title?: React.ReactNode; subtitle?: React.ReactNode; logoSrc?: string; }","required":false},"badgeCardSlot":{"type":"object","description":"Custom slot for badge card (overrides badgeCard)","typeLabel":"React.ReactNode","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","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},"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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"socialProofClassName":{"type":"string","description":"Additional CSS classes for the social proof section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","startup","launch","cta","badge","avatars","growth","funding"],"performance":{},"importantUsageNotes":"Only use this block if you have a valid value for the 'socialProofText' prop AND 3-6 valid 'avatars' objects for the 'avatars' prop since the focal point of this block is to showcase a collection of 'avatars'. Use exactly 4 images for the 'images' prop. Do not exceed 20 characters for the 'badge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-enterprise-security","name":"Enterprise Security Hero","title":"Hero Enterprise Security","category":"Hero","categorySlug":"hero","description":"A hero focused on enterprise security features. Includes security badges, feature cards, and trust logos.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290387/b93lbuiwruxznjbsaolwlo14db3u/cleanshot-2026-02-18-at-13-14-01.png","mobile":"https://cdn.ing/assets/i/r/290386/nij1wphlno8o8l6tnvh13o1hqdie/cleanshot-2026-02-18-at-13-14-22.png"},"componentPath":"blocks/hero/hero-enterprise-security.tsx","code":"import { HeroEnterpriseSecurity } from \"@opensite/ui/blocks/hero/hero-enterprise-security\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroEnterpriseSecurity\n      badge=\"Enterprise Grade\"\n      heading=\"Security you can trust\"\n      description=\"Protect your business with enterprise-grade security features. SOC 2 compliant, encrypted by default, and monitored 24/7.\"\n      actions={[\n        {\n          label: \"View Security\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/shield-check\" size={16} />,\n        },\n        {\n          label: \"Contact Sales\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      features={[\n        {\n          icon: <DynamicIcon name=\"lucide/lock\" size={24} />,\n          title: \"256-bit Encryption\",\n          description: \"Military-grade data protection\",\n          href: \"#\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/shield\" size={24} />,\n          title: \"SOC 2 Certified\",\n          description: \"Independently audited security\",\n          href: \"#\",\n        },\n        {\n          icon: <DynamicIcon name=\"lucide/eye\" size={24} />,\n          title: \"24/7 Monitoring\",\n          description: \"Always watching for threats\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"circuitBoardFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/status indicator content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","typeLabel":"React.ReactNode","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"features":{"type":"array","description":"Array of security feature items","items":{"type":"object","description":"","typeLabel":"FeatureItem & { iconName?: string }"},"typeLabel":"FeatureItem & { iconName?: string }[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","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","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},"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},"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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","enterprise","security","features","trust","compliance","badges","b2b"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 or 6 'features' since the features grid uses a 3 column layout. Do not exceed 20 characters for the 'badge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-creative-studio-stacked","name":"Creative Studio Stacked Hero","title":"Hero Creative Studio Stacked","category":"Hero","categorySlug":"hero","description":"A hero for creative studios with stacked image layout. Features video CTA and design-focused messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290405/ypcg7i83tx92yyjwnc8tx8syur76/cleanshot-2026-02-18-at-15-20-44.png","mobile":"https://cdn.ing/assets/i/r/290404/wa5mcypnvpc43f2929flo554pk9o/cleanshot-2026-02-18-at-15-20-58.png"},"componentPath":"blocks/hero/hero-creative-studio-stacked.tsx","code":"import { imagePlaceholders, videoPlaceholders } from \"@/lib/media\";\nimport { HeroCreativeStudioStacked } from \"@opensite/ui/blocks/hero/hero-creative-studio-stacked\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCreativeStudioStacked\n      heading=\"Where creativity meets innovation\"\n      description=\"Award-winning creative studio specializing in brand identity, digital experiences, and visual storytelling that makes an impact.\"\n      videoAction={{\n        label: \"Watch Demo\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/play\" size={16} />,\n      }}\n      actions={[\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"outline\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      videoDialog={{\n        videoUrl: videoPlaceholders[25],\n        title: \"See how it works\",\n      }}\n      images={[\n        { src: imagePlaceholders[78], alt: \"Project 1\" },\n        { src: imagePlaceholders[79], alt: \"Project 2\" },\n        { src: imagePlaceholders[80], alt: \"Project 3\" },\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopRight\"\n      patternOpacity={0.25}\n    />\n  );\n}","propsSchema":{"tagline":{"type":"object","description":"Tagline text 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},"videoAction":{"type":"object","description":"Video action object","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"modalVideo":{"type":"object","description":"Video configuration for modal/dialog","fields":{"image":{"type":"object","description":"Image configuration using standard React img attributes.\nWhen both image and video are provided, image may serve as a poster/fallback.","typeLabel":"React.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React.ComponentPropsWithoutRef<\"video\"> & { /** * Direct HLS master playlist URL (skips transform call) */ masterPlaylistUrl?: string; /** * Fallback progressive MP4 URL if HLS fails */ fallbackSrc?: string; /** * OptixFlow API key for poster optimization */ optixFlowApiKey?: string; /** * Skin classes for custom controls (from @page-speed/skins) */ skinClasses?: { container?: string; video?: string; controlsBar?: string; playButton?: string; timeline?: string; timelineProgress?: string; timelineBuffered?: string; timeText?: string; volumeControl?: string; fullscreenButton?: string; settingsButton?: string; loadingSpinner?: string; playOverlay?: string; playOverlayButton?: string; }; /** * CSS custom properties from skin tokens */ skinStyle?: Record<string, string>; /** * Enable debug logging */ debug?: boolean; }","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the media container element.","required":false}},"typeLabel":"MediaItem","required":false},"videoDialogTitle":{"type":"string","description":"Video dialog title","required":false},"videoDialog":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Dialog title","required":false},"videoUrl":{"type":"string","description":"Video embed URL","required":false}},"typeLabel":"VideoDialogConfig","required":false},"images":{"type":"array","description":"Array of stacked images (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"videoAspectRatio":{"type":"string","description":"Video aspect ratio","typeLabel":"\"horizontal\" | \"vertical\"","required":false},"onVideoClick":{"type":"object","description":"Callback when video button is clicked","typeLabel":"() => void","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","creative","studio","stacked","images","video","design","agency"],"performance":{},"importantUsageNotes":"Only use if you have a 'videoDialog' prop object and then ensure to supply a 'videoAction' prop. Only use at max 1 action object in the 'actions' array. Use exactly 3 image objects in the 'images' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-digital-agency-fullscreen","name":"Digital Agency Fullscreen Hero","title":"Hero Digital Agency Fullscreen","category":"Hero","categorySlug":"hero","description":"A fullscreen hero for digital agencies with background image. Features location info and scroll indicator.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290408/0n27k8hvsn7oilx38wfcsz62r72m/cleanshot-2026-02-18-at-15-21-54.png","mobile":"https://cdn.ing/assets/i/r/290407/x77il7iynqq6w1egnjj84an4g9ks/cleanshot-2026-02-18-at-15-22-03.png"},"componentPath":"blocks/hero/hero-digital-agency-fullscreen.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroDigitalAgencyFullscreen } from \"@opensite/ui/blocks/hero/hero-digital-agency-fullscreen\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDigitalAgencyFullscreen\n      heading=\"Digital experiences that inspire\"\n      description=\"Full-service digital agency creating award-winning websites, apps, and brand experiences for forward-thinking companies.\"\n      actions={[\n        {\n          label: \"View Our Work\",\n          href: \"/work\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Start Project\",\n          href: \"/contact\",\n          variant: \"outline\",\n        },\n      ]}\n      backgroundImage={imagePlaceholders[104]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"backgroundImage":{"type":"string","description":"Background image URL","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","digital","agency","fullscreen","background","location","immersive","creative"],"performance":{},"importantUsageNotes":"Only use if you have a relevant 'backgroundImage' object. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-customer-support-layered","name":"Customer Support Layered Hero","title":"Hero Customer Support Layered","category":"Hero","categorySlug":"hero","description":"A hero for customer support platforms with layered image design. Features support messaging and dashboard previews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290388/frahxbhlmrh8jvlqs9371zabwzj2/cleanshot-2026-02-18-at-13-24-37.png","mobile":"https://cdn.ing/assets/i/r/290389/7jd1ebdx3gqyrww2g647kncwq76s/cleanshot-2026-02-18-at-13-24-46.png"},"componentPath":"blocks/hero/hero-customer-support-layered.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\nimport { HeroCustomerSupportLayered } from \"@opensite/ui/blocks/hero/hero-customer-support-layered\";\n\nexport default function Demo() {\n  return (\n    <HeroCustomerSupportLayered\n      heading=\"Support that your customers love\"\n      description=\"Deliver exceptional customer experiences with our multi-channel support platform. Fast, efficient, and always there when you need it.\"\n      tagline=\"Customer Support\"\n      images={[\n        { src: imagePlaceholders[85], alt: \"Support interface 1\" },\n        { src: imagePlaceholders[86], alt: \"Support interface 2\" },\n        { src: imagePlaceholders[87], alt: \"Support interface 3\" },\n      ]}\n      actions={[\n        {\n          label: \"Browse Marketplace\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      background=\"secondary\"\n      pattern=\"gridFadeBottomRight\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"tagline":{"type":"object","description":"Tagline text 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},"images":{"type":"array","description":"Array of layered images (expects 3 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","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},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","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":["hero","customer","support","layered","helpdesk","service","dashboard","saas"],"performance":{},"importantUsageNotes":"Supply exactly 3 images to the 'images' prop. Do not exceed 20 characters for the 'tagline' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-shared-inbox-layered","name":"Shared Inbox Layered Hero","title":"Hero Shared Inbox Layered","category":"Hero","categorySlug":"hero","description":"A hero for shared inbox and email tools with layered screenshots. Features inbox organization messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290411/1f0ymx78lotiw4k3x9vxf91k1q7f/cleanshot-2026-02-18-at-15-25-16.png","mobile":"https://cdn.ing/assets/i/r/290410/w6apt2d0akg8ox78hg2tof88p1j5/cleanshot-2026-02-18-at-15-25-29.png"},"componentPath":"blocks/hero/hero-shared-inbox-layered.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroSharedInboxLayered } from \"@opensite/ui/blocks/hero/hero-shared-inbox-layered\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroSharedInboxLayered\n      eyebrow=\"Team Inbox\"\n      heading=\"Collaborate on every customer conversation\"\n      description=\"Shared inbox that brings your team together. Assign emails, add notes, and deliver exceptional customer support together.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"ghost\",\n        },\n      ]}\n      layeredImages={{\n        backgroundImage: {\n          src: imagePlaceholders[113],\n          alt: \"Shared inbox background\",\n        },\n        foregroundImage: {\n          src: imagePlaceholders[110],\n          alt: \"Inbox foreground\",\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeCenter\"\n      patternOpacity={0.25}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"eyebrow text above heading","typeLabel":"React.ReactNode","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow","required":false},"heading":{"type":"object","description":"Main heading content (can include line breaks)","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"layeredImages":{"type":"object","description":"Layered images configuration","fields":{"backgroundImage":{"type":"object","description":"Background layer image","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","required":false},"foregroundImage":{"type":"object","description":"Foreground layer image","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","required":false}},"typeLabel":"LayeredImageConfig","required":false},"layeredImagesSlot":{"type":"object","description":"Custom slot for layered images (overrides layeredImages prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","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},"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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"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":["hero","shared","inbox","layered","email","collaboration","team","communication"],"performance":{},"importantUsageNotes":"Only use if you can supply relevant 'layeredImages.backgroundImage' and 'layeredImages.foregroundImage' prop objects. Do not exceed 20 characters for the 'eyebrow' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-conversation-intelligence","name":"Conversation Intelligence Hero","title":"Hero Conversation Intelligence","category":"Hero","categorySlug":"hero","description":"A hero for conversation intelligence and sales tools. Features gradient background and centered screenshot.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290379/ffl9m26q6vzl4iiuupmqdunk0m5x/cleanshot-2026-02-18-at-10-27-17.png","mobile":"https://cdn.ing/assets/i/r/290378/u3ktjibso64jsprecvrjdvef0582/cleanshot-2026-02-18-at-10-27-33.png"},"componentPath":"blocks/hero/hero-conversation-intelligence.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroConversationIntelligence } from \"@opensite/ui/blocks/hero/hero-conversation-intelligence\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroConversationIntelligence\n      headingPrimary=\"Unlock insights from\"\n      description=\"Analyze calls, meetings, and customer interactions with advanced AI. Get actionable insights that drive better decisions and outcomes.\"\n      actions={[\n        {\n          label: \"Start Analyzing\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Watch Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/play-circle\" size={16} />,\n        },\n      ]}\n      image={{\n        src: imagePlaceholders[75],\n        alt: \"Conversation intelligence dashboard\",\n      }}\n      background=\"dark\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.25}\n    />\n  );\n}","propsSchema":{"headingPrimary":{"type":"object","description":"Main heading content (first part)","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},"image":{"type":"object","description":"Main image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image area (overrides image)","typeLabel":"React.ReactNode","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","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},"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},"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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","conversation","intelligence","sales","ai","analytics","gradient","saas"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'headingPrimary' prop. Do not exceed 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":"hero-business-carousel-dots","name":"Business Carousel Dots Hero","title":"Hero Business Carousel Dots","category":"Hero","categorySlug":"hero","description":"A business hero with image carousel and dot navigation. Features premium badge and professional messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290391/4f8ypk6e68t3kk4unpxqqbi3y2te/cleanshot-2026-02-18-at-13-34-32.png","mobile":"https://cdn.ing/assets/i/r/290390/n66wstq7x3jbpeqbpboqsmcvraxh/cleanshot-2026-02-18-at-13-34-58.png"},"componentPath":"blocks/hero/hero-business-carousel-dots.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroBusinessCarouselDots } from \"@opensite/ui/blocks/hero/hero-business-carousel-dots\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroBusinessCarouselDots\n      heading=\"Business solutions that scale with you\"\n      description=\"From startups to enterprises, our platform grows alongside your business with powerful tools and seamless integrations.\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Book Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/calendar\" size={16} />,\n        },\n      ]}\n      carouselImages={[\n        { src: imagePlaceholders[52], alt: \"Business feature 1\" },\n        { src: imagePlaceholders[53], alt: \"Business feature 2\" },\n        { src: imagePlaceholders[54], alt: \"Business feature 3\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"badgeVariant":{"type":"string","description":"Badge variant","typeLabel":"\"default\" | \"secondary\" | \"destructive\" | \"outline\"","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},"carouselImages":{"type":"array","description":"Array of carousel images","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},"carouselSlot":{"type":"object","description":"Custom slot for carousel content (overrides carouselImages)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel 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},"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":["hero","business","carousel","dots","navigation","premium","professional","enterprise"],"performance":{},"importantUsageNotes":"Supply at least 3 images to the 'carouselImages' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-developer-tools-code","name":"Developer Tools Code Hero","title":"Hero Developer Tools Code","category":"Hero","categorySlug":"hero","description":"A hero for developer tools featuring a terminal/code preview. Shows CLI commands and developer-focused messaging.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290393/3riw58rsbz72fmx33tpiqnljmfie/cleanshot-2026-02-18-at-13-36-30.png","mobile":"https://cdn.ing/assets/i/r/290392/eb2q1d6asc32f08lfzqp0690fg3e/cleanshot-2026-02-18-at-13-36-43.png"},"componentPath":"blocks/hero/hero-developer-tools-code.tsx","code":"import { HeroDeveloperToolsCode } from \"@opensite/ui/blocks/hero/hero-developer-tools-code\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroDeveloperToolsCode\n      badgeText=\"For Developers\"\n      heading=\"Developer tools that just work\"\n      description=\"Build faster with modern APIs, comprehensive docs, and tools designed by developers, for developers.\"\n      actions={[\n        {\n          label: \"Read Docs\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View GitHub\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/github\" size={16} />,\n        },\n      ]}\n      terminalTitle=\"quickstart.tsx\"\n      terminalLines={[\n        {\n          text: \"import { Hero } from '@opensite/ui';\",\n          colorClass: \"text-blue-400\",\n        },\n        { text: \"\", colorClass: \"\" },\n        {\n          text: \"export default function Page() {\",\n          colorClass: \"text-purple-400\",\n        },\n        {\n          text: '  return <Hero heading=\"Hello World\" />;',\n          colorClass: \"text-green-400\",\n        },\n        { text: \"}\", colorClass: \"text-purple-400\" },\n      ]}\n      spacing=\"xl\"\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.25}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"terminalTitle":{"type":"string","description":"Terminal window title","required":false},"terminalLines":{"type":"array","description":"Array of terminal output lines","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Text content of the line","required":true},"colorClass":{"type":"string","description":"Color class for the line","required":false},"prefix":{"type":"string","description":"Prefix text (e.g., \"info\", \"success\")","required":false},"prefixColorClass":{"type":"string","description":"Color class for the prefix","required":false}},"typeLabel":"TerminalLine"},"typeLabel":"TerminalLine[]","required":false},"terminalSlot":{"type":"object","description":"Custom slot for terminal content (overrides terminalLines)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"terminalClassName":{"type":"string","description":"Additional CSS classes for the terminal container","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":["hero","developer","tools","code","terminal","cli","programming","technical"],"performance":{},"importantUsageNotes":"Only use for clients that are developer centric tech companies since this showcases a code editor component. Supply exactly 3 images to the 'images' prop. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-ecommerce-product-showcase","name":"Ecommerce Product Showcase Hero","title":"Hero Ecommerce Product Showcase","category":"Hero","categorySlug":"hero","description":"A hero for ecommerce with product image grid. Features new collection badge and shopping statistics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290395/ehanooo9hh05r5sgb1g7z98abewi/cleanshot-2026-02-18-at-13-37-36.png","mobile":"https://cdn.ing/assets/i/r/290394/7h7mm2g6fzoph7kcib27dst7ptb2/cleanshot-2026-02-18-at-13-37-53.png"},"componentPath":"blocks/hero/hero-ecommerce-product-showcase.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroEcommerceProductShowcase } from \"@opensite/ui/blocks/hero/hero-ecommerce-product-showcase\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroEcommerceProductShowcase\n      badgeText=\"New Collection\"\n      badgeIcon=\"lucide/star\"\n      heading=\"Premium products for modern living\"\n      description=\"Discover our curated collection of handpicked items designed to elevate your everyday life. Quality craftsmanship, timeless style.\"\n      actions={[\n        {\n          label: \"Shop Now\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/shopping-bag\" size={16} />,\n        },\n        {\n          label: \"View Lookbook\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      stats={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/briefcase\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"500+\",\n          label: \"Projects Completed\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"50M+\",\n          label: \"Users Reached\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/star\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"98%\",\n          label: \"Client Satisfaction\",\n        },\n      ]}\n      images={[\n        { src: imagePlaceholders[104], alt: \"Product 1\" },\n        { src: imagePlaceholders[105], alt: \"Product 2\" },\n        { src: imagePlaceholders[106], alt: \"Product 3\" },\n        { src: imagePlaceholders[107], alt: \"Product 4\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"stats":{"type":"array","description":"Array of stat items","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"images":{"type":"array","description":"Array of product images (expects 4 images)","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},"imagesSlot":{"type":"object","description":"Custom slot for images (overrides images array)","typeLabel":"React.ReactNode","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","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},"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},"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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","ecommerce","product","showcase","shopping","retail","collection","store"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' for the 'stats' prop since the stats element is a 3 column layout - and ensure to only use numerical values for each of the stats 'value' prop element, e.g. 500, 50M+, etc, and only use 1-3 words for each of the stat label strings to prevent the components from overflowing. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-mobile-app-download","name":"Mobile App Download Hero","title":"Hero Mobile App Download","category":"Hero","categorySlug":"hero","description":"A hero for mobile apps with download buttons. Features app store badges, phone mockup, and ratings.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290383/coe3dhtbdvx93i1wgqtjhxoed51p/cleanshot-2026-02-18-at-12-56-33.png","mobile":"https://cdn.ing/assets/i/r/290382/f0nnmsvdp90i04ezpuukbgwsvsa6/cleanshot-2026-02-18-at-12-56-47.png"},"componentPath":"blocks/hero/hero-mobile-app-download.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroMobileAppDownload } from \"@opensite/ui/blocks/hero/hero-mobile-app-download\";\n\nexport default function Demo() {\n  return (\n    <HeroMobileAppDownload\n      badgeText=\"Now on Mobile\"\n      badgeIcon=\"lucide/smartphone\"\n      heading=\"Take us with you, everywhere\"\n      description=\"Download our mobile app and access all your favorite features on the go. Available for iOS and Android.\"\n      storeActions={[\n        {\n          href: \"#\",\n          label: \"Download on the\",\n          storePrefix: \"Download on the\",\n          storeName: \"App Store\",\n          storeIcon: \"cib/apple\",\n        },\n        {\n          href: \"#\",\n          label: \"Get it on\",\n          storePrefix: \"Get it on\",\n          storeName: \"Google Play\",\n          storeIcon: \"cib/google\",\n        },\n      ]}\n      ratingValue=\"4.9\"\n      ratingLabel=\"from 50K+ reviews\"\n      starCount={5}\n      image={{ src: imagePlaceholders[110], alt: \"Mobile app screenshot\" }}\n      background=\"gray\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"storeActions":{"type":"array","description":"Array of app store 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},"storePrefix":{"type":"string","description":"Store label prefix (e.g., \"Download on the\")","required":false},"storeName":{"type":"string","description":"Store name (e.g., \"App Store\")","required":false},"storeIcon":{"type":"string","description":"Store icon name","required":false}},"typeLabel":"AppStoreAction"},"typeLabel":"AppStoreAction[]","required":false},"storeActionsSlot":{"type":"object","description":"Custom slot for store actions (overrides storeActions array)","typeLabel":"React.ReactNode","required":false},"ratingValue":{"type":"string","description":"Rating value (e.g., \"4.9\")","required":false},"ratingLabel":{"type":"object","description":"Rating label (e.g., \"rating from 50K+ reviews\")","typeLabel":"React.ReactNode","required":false},"starCount":{"type":"number","description":"Number of stars to display","required":false},"ratingSlot":{"type":"object","description":"Custom slot for rating section (overrides rating props)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Mobile app screenshot image","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"notification":{"type":"object","description":"Notification popup configuration","fields":{"icon":{"type":"string","description":"Notification icon name","required":false},"iconBgClass":{"type":"string","description":"Icon background class","required":false},"iconColorClass":{"type":"string","description":"Icon color class","required":false},"title":{"type":"string","description":"Notification title","required":false},"subtitle":{"type":"string","description":"Notification subtitle","required":false}},"typeLabel":"NotificationItem","required":false},"notificationSlot":{"type":"object","description":"Custom slot for notification (overrides notification prop)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","mobile","app","download","ios","android","phone","ratings"],"performance":{},"importantUsageNotes":"Only use if you have valid app store links to supply for the 'storeActions' prop. Only populate the 'ratingValue', 'starCount' and 'ratingLabel' props if you have accurate values to provide - DO NOT MAKE THEM UP. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-newsletter-minimal","name":"Newsletter Minimal Hero","title":"Hero Newsletter Minimal","category":"Hero","categorySlug":"hero","description":"A minimal hero focused on newsletter signup. Clean design with email input and subscriber count.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290453/ah5y926oavppt9bhfoehmvmu5mdk/cleanshot-2026-02-19-at-03-54-53-2x.png","mobile":"https://cdn.ing/assets/i/r/290452/foyhiqvrcotykb6snlghxagwc1ub/cleanshot-2026-02-19-at-03-55-07-2x.png"},"componentPath":"blocks/hero/hero-newsletter-minimal.tsx","code":"\"use client\";\n\nimport { HeroNewsletterMinimal } from \"@opensite/ui/blocks/hero/hero-newsletter-minimal\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    className: \"w-full\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroNewsletterMinimal\n      heading=\"Stay in the loop\"\n      description=\"Get weekly insights, tips, and updates delivered straight to your inbox. Join 50,000+ subscribers who never miss a beat.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      buttonAction={{\n        label: \"Subscribe\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      stats={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/briefcase\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"500+\",\n          label: \"Projects Completed\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"50M+\",\n          label: \"Users Reached\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/star\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"98%\",\n          label: \"Client Satisfaction\",\n        },\n      ]}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"disclaimer":{"type":"object","description":"Disclaimer text below form","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stat/trust indicators","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"inputClassName":{"type":"string","description":"Additional CSS classes for the input","required":false},"disclaimerClassName":{"type":"string","description":"Additional CSS classes for the disclaimer","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","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":["hero","newsletter","minimal","signup","email","subscription","clean","focused"],"performance":{},"importantUsageNotes":"Ensure to find or create a newsletter contact category to wire up to this newsletter block. IMPORTANT: only use if you have exactly 3 'stats' values to populate the 'stats' prop with - DO NOT MAKE UP ANY STATS and only use numerical values for each of the stats 'value' prop element. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-coming-soon-countdown","name":"Coming Soon Countdown Hero","title":"Hero Coming Soon Countdown","category":"Hero","categorySlug":"hero","description":"A dark-themed hero with countdown timer for launches. Features email signup and social links.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290455/rhiz034g76v22c6dpkjs9phmnpqs/cleanshot-2026-02-19-at-03-56-15-2x.png","mobile":"https://cdn.ing/assets/i/r/290454/s2jsui75kg5ow71edyg5qtdfaxyl/cleanshot-2026-02-19-at-03-56-47-2x.png"},"componentPath":"blocks/hero/hero-coming-soon-countdown.tsx","code":"\"use client\";\n\nimport { HeroComingSoonCountdown } from \"@opensite/ui/blocks/hero/hero-coming-soon-countdown\";\nimport moment from \"moment\";\nimport { demoFormConfig } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"email\",\n    type: \"email\",\n    placeholder: \"Enter your email\",\n    required: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <HeroComingSoonCountdown\n      badgeIcon=\"lucide/rocket\"\n      badgeText=\"Launching Soon\"\n      heading=\"Something amazing is on the way\"\n      description=\"Be the first to know when we launch. Sign up now for exclusive early access and special launch pricing.\"\n      countdownDate={moment().add(3, \"weeks\").toDate()}\n      formFields={formFields}\n      formConfig={{\n        ...demoFormConfig,\n      }}\n      buttonAction={{\n        label: \"Notify Me\",\n        variant: \"default\",\n      }}\n      successMessage=\"Thank you! We'll notify you as soon as we launch.\"\n      helperText=\"We respect your privacy. Unsubscribe anytime.\"\n      socialLinks={[\n        { href: \"https://twitter.com\" },\n        { href: \"https://facebook.com\" },\n        { href: \"https://instagram.com\" },\n        { href: \"https://linkedin.com\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badgeIcon":{"type":"string","description":"Badge icon name (DynamicIcon format)","required":false},"badgeText":{"type":"object","description":"Badge text content","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},"countdownDate":{"type":"object","description":"Target date for the countdown. If in the past or not provided, countdown is hidden.","typeLabel":"Date","required":false},"countdownSlot":{"type":"object","description":"Custom slot for countdown (overrides countdownDate)","typeLabel":"React.ReactNode","required":false},"formFields":{"type":"array","description":"Form field configuration","items":{"type":"object","description":"","typeLabel":"FormFieldConfig"},"typeLabel":"FormFieldConfig[]","required":false},"formConfig":{"type":"object","description":"Form configuration for submission","typeLabel":"PageSpeedFormConfig","required":false},"onSubmit":{"type":"object","description":"Custom submit handler","typeLabel":"(values: Record<string, any>) => void | Promise<void>","required":false},"onSuccess":{"type":"object","description":"Success callback","typeLabel":"(data: unknown) => void","required":false},"onError":{"type":"object","description":"Error callback","typeLabel":"(error: Error) => void","required":false},"successMessage":{"type":"object","description":"Success message to display","typeLabel":"React.ReactNode","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social link items","items":{"type":"object","description":"","typeLabel":"SocialLinkItem & { iconName?: string }"},"typeLabel":"SocialLinkItem & { iconName?: string }[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for social links (overrides socialLinks array)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"countdownClassName":{"type":"string","description":"Additional CSS classes for the countdown container","required":false},"formClassName":{"type":"string","description":"Additional CSS classes for the form container","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","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":["hero","coming-soon","countdown","launch","timer","dark","teaser","anticipation"],"performance":{},"importantUsageNotes":"Only use if you've been supplied with a valid date to supply to the 'countdownDate'. Ensure to find or create a newsletter contact category to wire up to this newsletter block. IMPORTANT: only supply 'socialLinks' that are valid - DO NOT MAKE UP, USE PLACEHOLDERS OR GUESS ANY OF THEIR SOCIAL LINKS. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."},{"id":"hero-event-registration","name":"Event Registration Hero","title":"Hero Event Registration","category":"Hero","categorySlug":"hero","description":"A hero for event registration with date badge. Features speaker count, workshop info, and venue location.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306279/bplk6c5pa11zmz21t2b0wqijorug/hero-event-registration-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306280/2l1smrwhw6zcm3nv52jcmvvb2j5w/hero-event-registration-mobile.jpg"},"componentPath":"blocks/hero/hero-event-registration.tsx","code":"import { brandLogoPlaceholders, imagePlaceholders } from \"@/lib/media\";\nimport { HeroEventRegistration } from \"@opensite/ui/blocks/hero/hero-event-registration\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroEventRegistration\n      badgeText=\"Annual Conference\"\n      badgeIcon=\"lucide/calendar\"\n      heading=\"Join us for the event of the year\"\n      description=\"Three days of inspiring talks, hands-on workshops, and networking with industry leaders. September 15-17, 2026 in San Francisco.\"\n      actions={[\n        {\n          label: \"Register Now\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Agenda\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/calendar\" size={16} />,\n        },\n      ]}\n      stats={[\n        {\n          value: \"2k+\",\n          label: \"Attendees\",\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n        },\n        {\n          value: \"50+\",\n          label: \"Speakers\",\n          icon: (\n            <DynamicIcon\n              name=\"lucide/mic-vocal\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n        },\n        {\n          value: \"3 Days\",\n          label: \"Duration\",\n          icon: (\n            <DynamicIcon\n              name=\"lucide/timer\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n        },\n      ]}\n      image={{ src: imagePlaceholders[108], alt: \"Event venue\" }}\n      logo={{ src: brandLogoPlaceholders.white[4], alt: \"Event venue\" }}\n      locationLabel=\"San Francisco, CA\"\n      locationSublabel=\"September 15-17, 2026\"\n      background=\"dark\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge text content (e.g., event date)","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"string","description":"Badge icon name","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge props)","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},"stats":{"type":"array","description":"Array of stat items","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Event image configuration","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","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","required":false},"locationLabel":{"type":"object","description":"Location label content","typeLabel":"React.ReactNode","required":false},"locationSublabel":{"type":"object","description":"Location sublabel content","typeLabel":"React.ReactNode","required":false},"locationSlot":{"type":"object","description":"Custom slot for location card (overrides location props)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image 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},"logo":{"type":"object","description":"Logo image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","event","registration","conference","workshop","speakers","venue","date"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' for the 'stats' prop since the stats element is a 3 column layout - and ensure to only use numerical values for each of the stats 'value' prop element, e.g. 500, 50M+, etc, and only use 1-3 words for each of the stat label strings to prevent the components from overflowing. Do not exceed 20 characters for the 'badgeText' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 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":"hero-portfolio-creative","name":"Portfolio Creative Hero","title":"Hero Portfolio Creative","category":"Hero","categorySlug":"hero","description":"A hero for creative portfolios with profile and project grid. Features social links and personal branding.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290220/x14gg6zoc1rxtmuzs3uz4mqrelb9/cleanshot-2026-02-18-at-02-13-13.png","mobile":"https://cdn.ing/assets/i/r/290219/vwr1ing467t5pbidmdvdv52eoc81/cleanshot-2026-02-18-at-02-13-25.png"},"componentPath":"blocks/hero/hero-portfolio-creative.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroPortfolioCreative } from \"@opensite/ui/blocks/hero/hero-portfolio-creative\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPortfolioCreative\n      heading=\"Creative work that stands out\"\n      description=\"Award-winning portfolio showcasing our best projects in design, branding, and digital experiences.\"\n      portfolioImages={[\n        { src: imagePlaceholders[92], alt: \"Brand Identity Project\" },\n        { src: imagePlaceholders[98], alt: \"Web Design Project\" },\n        { src: imagePlaceholders[99], alt: \"Mobile App Project\" },\n        { src: imagePlaceholders[100], alt: \"Mobile App Project\" },\n      ]}\n      actions={[\n        {\n          label: \"View All Work\",\n          href: \"/portfolio\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"profile":{"type":"object","description":"Profile information","fields":{"avatar":{"type":"object","description":"Profile avatar image","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","required":false},"name":{"type":"string","description":"Profile name","required":false},"title":{"type":"string","description":"Profile title/role","required":false}},"typeLabel":"ProfileInfo","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile (overrides profile prop)","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},"socialLinks":{"type":"array","description":"Array of social link configurations","items":{"type":"object","description":"","typeLabel":"SocialLinkItem & { iconName?: string }"},"typeLabel":"SocialLinkItem & { iconName?: string }[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"portfolioImages":{"type":"array","description":"Array of portfolio images (expects 4 images)","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},"portfolioImagesSlot":{"type":"object","description":"Custom slot for portfolio images (overrides portfolioImages array)","typeLabel":"React.ReactNode","required":false},"background":{"type":"string","description":"","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"portfolioClassName":{"type":"string","description":"Additional CSS classes for the portfolio grid","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","portfolio","creative","profile","projects","personal","designer","freelancer"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for the 'heading' prop. Do not exceed 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."}]},"timestamp":"2026-05-13T10:11:34.632Z"}