{"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/308442/5k7scwer42zsuh8nvmb39qj96fa4/hero-overlay-cta-grid-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308443/vqoam07axrkku7h66s2h5uk2i7fa/hero-overlay-cta-grid-mobile.jpg"},"componentPath":"blocks/hero/hero-overlay-cta-grid.tsx","code":"import { 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={\n        \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\"\n      }\n      description=\"Multiple ways to engage with our platform. Select the option that best fits your needs.\"\n      spacing=\"none\"\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/288969/h9k3b0ett73u3pouc2w15ibvl7tc/ui-placeholder-logo-white-4.png\",\n        alt: \"Brand Logo\",\n      }}\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":true,"maxLength":40},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"count":3,"minItems":3,"maxItems":3},"cardsSlot":{"type":"object","description":"Custom slot for cards (overrides cards array)","typeLabel":"React.ReactNode","required":false},"backgroundImage":{"type":"string","description":"Background image URL","required":true,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Choose your path","description":"Multiple ways to engage with our platform.","backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","cards":[{"label":"New Features","subtitle":"New AI features to automate workflows","icon":"lucide/bot","href":"#"},{"label":"Automation","subtitle":"Dedicated agents to streamline tasks","icon":"lucide/bell","href":"#"},{"label":"Performance","subtitle":"Enterprise speed for all business sizes","icon":"lucide/bolt","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["hero","overlay","background-image","cta","grid","cards","icons","landing","services","navigation"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImage' (absolute URL, not a placeholder). Supply exactly 3 'cards' objects — the layout is calibrated for that count. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundImage","cards"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundImage":{"required":true},"cards":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"requiresSiteCapabilities":["media_library"]}},{"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/308444/027mimm3oqtpxgwz0hu9jaowshaf/hero-split-icon-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308444/027mimm3oqtpxgwz0hu9jaowshaf/hero-split-icon-cards-desktop.jpg"},"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":true,"maxLength":40},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"count":3,"minItems":2,"maxItems":4},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"eyebrow":"For Developers","heading":"Built for teams that ship fast","description":"Powerful features designed for modern development teams.","primaryCta":{"label":"Get Started","href":"#"},"secondaryCta":{"label":"View Demo","href":"#"},"cardItems":[{"title":"New Features","subtitle":"New AI features to automate workflows","icon":"lucide/bot","href":"#"},{"title":"Automation","subtitle":"Dedicated agents to streamline tasks","icon":"lucide/bell","href":"#"},{"title":"Performance","subtitle":"Enterprise speed for all business sizes","icon":"lucide/bolt","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["hero","split","two-column","icon-cards","benefits","cta","services","features","callouts"],"performance":{},"importantUsageNotes":"Supply exactly 3 'cardItems' objects. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Follow the example props closely.","usageRequirements":{"requiredProps":["heading","cardItems"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"cardItems":{"required":true,"count":3,"minItems":2,"maxItems":4}},"mediaSlots":{}}},{"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/308447/kfnh3v0cx1inkyeao6wwlersddwi/hero-floating-images-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308448/fohcugnky8vl4zysfhls8ffqeexy/hero-floating-images-mobile.jpg"},"componentPath":"blocks/hero/hero-floating-images.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/308446/g4ykz8o4phw84yo9ly1lxhv0hqsd/logo-light.webp\",\n        alt: \"Brand Logo\",\n      }}\n      actions={[\n        {\n          label: \"View Portfolio\",\n          href: \"#\",\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: \"#\",\n          size: \"lg\",\n          variant: \"outline\",\n        },\n      ]}\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/vrezhtksoqbw1nyo4hwnoqizrus5\",\n          alt: \"Floating Image 1\",\n          className: \"rounded-lg shadow-lg\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\n          alt: \"Floating Image 2\",\n          className: \"rounded-lg shadow-lg\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo\",\n          alt: \"Floating Image 3\",\n          className: \"rounded-lg shadow-lg\",\n        },\n      ]}\n      optixFlowConfig={{ apiKey: \"os-bcf1c82f-0c47-49ec-a303-807eec0a25c6\" }}\n      className=\"flex items-center justify-center\"\n      background=\"dark\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Brand logo configuration — renders centered above the heading.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default"}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Floating decorative images. Use varied, visually interesting photos. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badge":"Featured Work","heading":"Build Stunning Websites","description":"We design and build beautiful digital products.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 2"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 3"}],"background":"dark"},"dependencies":["@opensite/ui","@page-speed/img","@page-speed/lightbox"],"tags":["hero","floating","images","centered","decorative","playful","brand","landing","visual"],"performance":{},"importantUsageNotes":"Supply exactly 3 images. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' or 'link' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Floating decorative images. Use varied, visually interesting photos. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\"}\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":true,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":160},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Right-side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"New Release","heading":"Build faster with our platform","description":"Everything you need to ship your product in record time.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Platform dashboard","actions":[{"label":"Get Started","href":"/signup","variant":"default"},{"label":"Learn More","href":"/about","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","landing","split","badge","image","cta","logos","trust","saas","business"],"performance":{},"importantUsageNotes":"Requires a real image in 'imageSrc'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":60},"description":{"maxLength":160},"imageSrc":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Right-side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/ehgbcugs782765ke1l2dtbtzd918\"}\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":true,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":160},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Left-side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Product showcase","heading":"Beautiful design meets powerful functionality","description":"Create stunning experiences with our intuitive platform.","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"View Demo","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","landing","split","image","content","cta","product","visual"],"performance":{},"importantUsageNotes":"Requires a real image in 'imageSrc'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":60},"description":{"maxLength":160},"imageSrc":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Left-side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/t4cidbsfz3z468bn45yqdrkbx7ou\", alt: \"Slide 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu\", alt: \"Slide 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd\", alt: \"Slide 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\", 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":true,"maxLength":40},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"minItems":3,"maxItems":6,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Slider images. Use varied, high-quality photos. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Explore our collection","description":"Browse through our carefully curated selection.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Slide 1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Slide 2"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Slide 3"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Slide 4"}]},"dependencies":["@opensite/ui"],"tags":["hero","slider","carousel","images","background","overlay","cta","storytelling","visual","rotating"],"performance":{},"importantUsageNotes":"Supply at least 3 images for the slider. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"images":{"required":true,"minItems":3,"maxItems":6}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Slider images. Use varied, high-quality photos. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308479/9hhqho86yu2mv4nwu5vked09hxiq/hero-centered-image-grid-dektop.jpg","mobile":"https://cdn.ing/assets/i/r/308480/xp6o3ac7sqkco4kk9amfdkmh4dlm/hero-centered-image-grid-mobile.jpg"},"componentPath":"blocks/hero/hero-centered-image-grid.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\n        alt: \"Brand Logo\",\n      }}\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        {\n          src: \"https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z\",\n          alt: \"Project showcase\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n          alt: \"Studio workspace\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.1}\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":6,"minItems":6,"maxItems":6,"mediaHints":{"path":"gridImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Grid gallery images. Use diverse, high-quality content. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Visual storytelling at its finest","description":"Showcase your work with beautiful grid layouts.","gridImages":[{"src":"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn","alt":"Gallery image 1"},{"src":"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t","alt":"Gallery image 2"},{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Gallery image 3"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Gallery image 4"},{"src":"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg","alt":"Gallery image 5"},{"src":"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q","alt":"Gallery image 6"}],"actions":[{"label":"View Gallery","href":"#","variant":"default"},{"label":"Learn More","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","centered","grid","images","gallery","portfolio","showcase"],"performance":{},"importantUsageNotes":"Supply exactly 6 images to 'gridImages'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","gridImages"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"gridImages":{"required":true,"count":6,"minItems":6,"maxItems":6},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"gridImages[]":{"path":"gridImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Grid gallery images. Use diverse, high-quality content. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png\",\n        alt: \"Brand Logo\",\n      }}\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={\n        \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\"\n      }\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":true,"maxLength":42},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default"}},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Central product/app screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"The all-in-one platform for modern teams","description":"Everything you need to collaborate, communicate, and create amazing work.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Product interface screenshot","actions":[{"label":"Try It Free","href":"#","variant":"default","asButton":true,"size":"lg"},{"label":"See Plans","href":"#","variant":"ghost","asButton":true,"size":"lg"}]},"dependencies":["@opensite/ui"],"tags":["hero","centered","screenshot","product","saas","app","software","demo"],"performance":{},"importantUsageNotes":"Do not exceed 42 characters for 'heading'. Do not exceed 130 characters for 'description'. Requires 'imageSrc' — use a real product screenshot. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":42},"description":{"maxLength":130},"imageSrc":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Central product/app screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Customers\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      logos={[\n        {\n          src: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n          alt: \"Company 1\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288966/0ls9to9jqnrc4gcxty9rx2c4udjv/ui-placeholder-logo-white-2.png\",\n          alt: \"Company 2\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288971/sow5o2s8dp1cr159rxexm0yhov5w/ui-placeholder-logo-white-3.png\",\n          alt: \"Company 3\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288969/h9k3b0ett73u3pouc2w15ibvl7tc/ui-placeholder-logo-white-4.png\",\n          alt: \"Company 4\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\",\n          alt: \"Company 5\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\n          alt: \"Company 6\",\n        },\n      ]}\n      pattern=\"architect\"\n      patternOpacity={0.33}\n      background=\"dark\"\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"minItems":4,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"Trusted by Leaders","heading":"Join the world's most innovative companies","description":"Over 10,000 organizations trust our platform.","logos":[{"src":"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png","alt":"Partner logo 1"},{"src":"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png","alt":"Partner logo 2"},{"src":"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png","alt":"Partner logo 3"},{"src":"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png","alt":"Partner logo 4"},{"src":"https://cdn.ing/assets/i/r/288968/nn5xpkit7idgr7i6fa46ez3g9kwn/ui-placeholder-logo-black-5.png","alt":"Partner logo 5"},{"src":"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png","alt":"Partner logo 6"}],"actions":[{"label":"Get Started","href":"/signup","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","pattern","badge","logos","trust","credibility","companies","partners"],"performance":{},"importantUsageNotes":"Only use if you can supply 4-8 valid customer/partner logos. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","logos"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"logos":{"required":true,"minItems":4,"maxItems":8}},"mediaSlots":{"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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/308457/pkv27loo4s37jfnj5w5s6sb0dsar/hero-logo-centered-screenshot-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308458/fhmibtn2e8z6twsyeapqbnydlm7z/hero-logo-centered-screenshot-mobile.jpg"},"componentPath":"blocks/hero/hero-logo-centered-screenshot.tsx","code":"import { 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={{\n        src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\n        alt: \"Company Logo\",\n      }}\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: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      image={{\n        src: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\n        alt: \"Platform screenshot\",\n      }}\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Brand logo configuration — renders above the announcement badge.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":true,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand or company logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/app screenshot below heading. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Company Logo"},"heading":"The platform that powers modern businesses","description":"Trusted by thousands of companies worldwide.","action":{"label":"Get Started","href":"/signup","variant":"default"},"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Platform screenshot"}},"dependencies":["@opensite/ui"],"tags":["hero","logo","centered","screenshot","product","launch","trust","logos"],"performance":{},"importantUsageNotes":"Requires a real logo ('logo') and a product screenshot ('image'). Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","logo","image"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"logo":{"required":true},"image":{"required":true}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand or company logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/app screenshot below heading. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["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/308477/9yj1gctnycctopfo6o1ntdx2s551/hero-pattern-logo-tech-stack-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308478/smogfstw5lw47y2b7s9fu6ppsa79/hero-pattern-logo-tech-stack-mobile.jpg"},"componentPath":"blocks/hero/hero-pattern-logo-tech-stack.tsx","code":"import { 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: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\", 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: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\", alt: \"React\", imgClassName: \"!h-6 !max-h-6\" },\n        { src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\", alt: \"TypeScript\", imgClassName: \"!h-6 !max-h-6\" },\n        { src: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\", alt: \"Node.js\", imgClassName: \"!h-6 !max-h-6\" },\n        { src: \"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png\", alt: \"PostgreSQL\", imgClassName: \"!h-6 !max-h-6\" },\n        { src: \"https://cdn.ing/assets/i/r/288968/nn5xpkit7idgr7i6fa46ez3g9kwn/ui-placeholder-logo-black-5.png\", alt: \"Docker\", imgClassName: \"!h-6 !max-h-6\" },\n        { src: \"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png\", alt: \"AWS\", imgClassName: \"!h-6 !max-h-6\" },\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed prominently. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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":true,"maxLength":50},"highlightedWord":{"type":"string","description":"Highlighted word in heading","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"minItems":3,"maxItems":8,"mediaHints":{"path":"techLogos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Technology stack logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Company Logo"},"heading":"Built with the best technologies","description":"Powered by cutting-edge tools and frameworks.","techLogos":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"React"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"TypeScript"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Node.js"}],"actions":[{"label":"View Docs","href":"/docs","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","pattern","logo","tech","stack","developer","tools","technical","icons"],"performance":{},"importantUsageNotes":"Requires a real 'logo' and at least 3 'techLogos'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"techLogos":{"minItems":3,"maxItems":8}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed prominently. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"techLogos[]":{"path":"techLogos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Technology stack logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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":true,"maxLength":54},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"New Release v2.0","heading":"The future of productivity is here","description":"Experience unprecedented performance and new features.","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"What's New","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","announcement","badge","launch","news","update","cta"],"performance":{},"importantUsageNotes":"Do not exceed 54 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second. Follow the example props closely.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":54},"description":{"maxLength":140},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{}}},{"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/308455/4nge942z2i8js1ph31q529ql885g/hero-tech-carousel-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308456/dd3ucl1quir9tbr89mvwc0fkny58/hero-tech-carousel-mobile.jpg"},"componentPath":"blocks/hero/hero-tech-carousel.tsx","code":"import { 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: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\",\n            alt: \"InsuranceSite\",\n          },\n          title: \"Agency Automation\",\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            {\n              src: \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\",\n              alt: \"Insurance Site Slide 1\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\",\n              alt: \"Insurance Site Slide 2\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n              alt: \"Insurance Site Slide 3\",\n            },\n          ],\n        },\n        {\n          logo: {\n            src: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n            alt: \"OpenSite\",\n          },\n          title: \"Enterprise AI\",\n          content:\n            \"AI-first solutions that help enterprises automate workflows and unlock new efficiencies.\",\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            {\n              src: \"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\",\n              alt: \"OpenSite Slide 1\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4\",\n              alt: \"OpenSite Slide 2\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c\",\n              alt: \"OpenSite Slide 3\",\n            },\n          ],\n        },\n        {\n          logo: {\n            src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\n            alt: \"CastKit\",\n          },\n          title: \"Podcasting on Autopilot\",\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            {\n              src: \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\",\n              alt: \"CastKit Slide 1\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/w41h7890eivogu3sr78vlwkpzz8g\",\n              alt: \"CastKit Slide 2\",\n            },\n            {\n              src: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\n              alt: \"CastKit Slide 3\",\n            },\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":"Brand logo configuration — renders above the announcement badge.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","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},"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":true,"minItems":2,"maxItems":4,"mediaHints":{"path":"items[].logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional logo per panel. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"items":[{"title":"InsuranceSite","content":"Modern broker tooling for independent agents.","actions":[{"label":"Get Started","href":"#","variant":"default"}],"backgroundMedia":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":""},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":""}]},{"title":"RealtorSite","content":"Built for high-volume listing agents.","actions":[{"label":"Get Started","href":"#","variant":"default"}],"backgroundMedia":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":""}]}]},"dependencies":["@opensite/ui"],"tags":["hero","multi-panel","split","full-bleed","fullscreen","background-image","image-carousel","brands","showcase","cta"],"performance":{},"importantUsageNotes":"Supply 2-4 'items'. Each item should have 'title', 'content', and 'backgroundMedia' with at least 1 image. Supply at most 4 items (HERO_TECH_CAROUSEL_MAX_ITEMS = 4).  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["items"],"propConstraints":{"items":{"required":true,"minItems":2,"maxItems":4}},"mediaSlots":{"items[].backgroundMedia[]":{"path":"items[].backgroundMedia[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Background images for each carousel panel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"items[].logo.src":{"path":"items[].logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional logo per panel. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\n        \"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov\"\n      }\n      imageAlt=\"Product showcase\"\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\",\n        alt: \"Brand Logo\",\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=\"gridFadeTop\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Centered hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Clean, simple, effective","description":"Sometimes less is more. Focus on what matters.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Product showcase","actions":[{"label":"Get Started","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","simple","centered","image","minimal","clean","landing"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Requires 'imageSrc'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"imageSrc":{"required":true}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Centered hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308453/axhuo121s22zb4kuj8gvm7stua0c/hero-platform-features-grid-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308454/sdtzm3tjsw2djmwh0rr0ttv99tqr/hero-platform-features-grid-mobile.jpg"},"componentPath":"blocks/hero/hero-platform-features-grid.tsx","code":"import { 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={{\n        src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\",\n        alt: \"Company Logo\",\n      }}\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":"Brand logo configuration — renders above the announcement badge.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional brand logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","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,"maxLength":140},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"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":true,"count":4,"minItems":3,"maxItems":6},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"A complete platform for modern teams","description":"All-in-one solution for communication and collaboration.","action":{"label":"Explore Features","href":"#","variant":"default"},"features":[{"iconName":"lucide/message-square","title":"Team Chat","description":"Real-time messaging","href":"#"},{"iconName":"lucide/video","title":"Video Calls","description":"HD video meetings","href":"#"},{"iconName":"lucide/file-text","title":"Documents","description":"Collaborative editing","href":"#"},{"iconName":"lucide/calendar","title":"Calendar","description":"Schedule meetings","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["hero","platform","features","grid","icons","product","showcase"],"performance":{},"importantUsageNotes":"Supply exactly 4 'features' objects. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'. Each feature should have 'iconName', 'title', and 'description'. Follow the example props closely.","usageRequirements":{"requiredProps":["heading","features"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"features":{"required":true,"count":4,"minItems":3,"maxItems":6}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional brand logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq\", alt: \"Image 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\", alt: \"Image 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Stacked card images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"Innovative Platform","heading":"Innovative solutions that evolve with you","description":"Dynamic, flexible, and always improving.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 2"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 3"}],"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","spiral","pattern","cards","creative","innovative","visual","agency"],"performance":{},"importantUsageNotes":"Supply exactly 3 images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Stacked card images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\", alt: \"Image 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\", alt: \"Image 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Scattered decorative images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badgeText":"Design Excellence","heading":"Where creativity meets precision","description":"Award-winning designs that blend artistic vision with technical excellence.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 2"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Image 3"}],"actions":[{"label":"View Portfolio","href":"/portfolio","variant":"default"},{"label":"Contact Us","href":"/contact","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","split","spiral","shapes","artistic","modern","creative","design"],"performance":{},"importantUsageNotes":"Supply exactly 3 images for the scattered layout. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Scattered decorative images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\",\n          alt: \"Modern design showcase\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z\",\n          alt: \"Creative workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n          alt: \"Bold visual identity\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/uh2vd59np82h8sevbmfnsha89sf1\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":4,"minItems":4,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Geometric masonry layout images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Bold design for bold ideas","description":"Stand out with striking visuals and modern aesthetics.","images":[{"src":"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz","alt":"Design 1"},{"src":"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs","alt":"Design 2"},{"src":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","alt":"Design 3"},{"src":"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x","alt":"Design 4"}],"actions":[{"label":"Explore","href":"/explore","variant":"default"},{"label":"Contact","href":"/contact","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","split","geometric","shapes","modern","professional","tech","patterns"],"performance":{},"importantUsageNotes":"Supply exactly 4 images for the masonry layout. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"count":4,"minItems":4,"maxItems":4},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Geometric masonry layout images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\n        alt: \"Hero Community Survey CTA Image\",\n      }}\n      leftOverlayImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n        alt: \"Hero Community Survey CTA Image Left\",\n      }}\n      rightOverlayImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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":true,"mediaHints":{"path":"mainImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Central hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"mediaHints":{"path":"leftOverlayImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Left overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"mediaHints":{"path":"rightOverlayImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Right overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"announcementPrimary":"Your Voice Matters","announcementLinkText":"Learn More","announcementHref":"#","heading":"Help us build the future","description":"Take our 5-minute survey and share your thoughts.","mainImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Community"},"leftOverlayImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Left"},"rightOverlayImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Right"},"actions":[{"label":"Get Started","href":"#","variant":"outline"},{"label":"Learn More","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","community","survey","feedback","engagement","cta","participation"],"performance":{},"importantUsageNotes":"Requires 'mainImage', 'leftOverlayImage', and 'rightOverlayImage'. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'outline' for the first and 'ghost' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","mainImage","leftOverlayImage","rightOverlayImage"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"mainImage":{"required":true},"leftOverlayImage":{"required":true},"rightOverlayImage":{"required":true}},"mediaSlots":{"mainImage.src":{"path":"mainImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Central hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"leftOverlayImage.src":{"path":"leftOverlayImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Left overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"rightOverlayImage.src":{"path":"rightOverlayImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Right overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu\", alt: \"Product 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o\", alt: \"Product 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\", alt: \"Product 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\", alt: \"Product 4\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\", alt: \"Product 5\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"minItems":5,"maxItems":6,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Scattered product/content images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Discover unique items from creators worldwide","description":"Shop handcrafted goods, vintage treasures, and one-of-a-kind products.","action":{"label":"Browse Marketplace","href":"#","variant":"default"},"images":[{"src":"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc","alt":"Product 1"},{"src":"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v","alt":"Product 2"},{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Product 3"},{"src":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm","alt":"Product 4"},{"src":"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v","alt":"Product 5"}]},"dependencies":["@opensite/ui"],"tags":["hero","marketplace","scattered","images","products","dynamic","ecommerce","shop"],"performance":{},"importantUsageNotes":"Supply exactly 5-6 images for the scattered layout. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"minItems":5,"maxItems":6}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Scattered product/content images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308465/ofgbutdjijhz860e66xfdfg3faz3/hero-badge-shadow-overlay-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308466/z9pq3m5qpqw9eahq4tq50892z280/hero-badge-shadow-overlay-mobile.jpg"},"componentPath":"blocks/hero/hero-badge-shadow-overlay.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n        alt: \"Brand Logo\",\n      }}\n      announcementBadge=\"Launch\"\n      announcementText=\"Premium design system\"\n      announcementHref=\"#\"\n      heading=\"Elevate your brand\"\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={\n        \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\"\n      }\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":true,"maxLength":40},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"backgroundImageUrl","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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,"maxLength":130},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"announcementBadge":"Launch","announcementText":"Premium design system","announcementHref":"#","heading":"Elevate your brand with stunning visuals","description":"Crafted with precision and creativity.","backgroundImageUrl":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","actions":[{"label":"Explore Now","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","badge","shadow","overlay","background","depth","impactful","landing"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImageUrl' — use a large, high-quality photo. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundImageUrl"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundImageUrl":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundImageUrl":{"path":"backgroundImageUrl","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Explore\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      backgroundVideo={{\n        video: {\n          masterPlaylistUrl:\n            \"https://cdn.ing/assets/video/uploads/283390/hls/38857/master.m3u8\",\n          fallbackSrc:\n            \"https://toastability-production.s3.amazonaws.com/eliix1g2jzj7gp9pe2srfquuyt0d\",\n          optixFlowApiKey: \"os-bcf1c82f-0c47-49ec-a303-807eec0a25c6\",\n        },\n      }}\n      background=\"dark\"\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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"Immersive Experience","heading":"Make an unforgettable first impression","description":"Captivate your audience with stunning video backgrounds.","backgroundVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"background":"dark","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Explore","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","video","background","dark","immersive","media","cinematic","landing"],"performance":{},"importantUsageNotes":"Only use this block when you have a real video asset. The 'backgroundVideo.video' prop requires an HLS playlist URL ('masterPlaylistUrl') and a fallback MP4 ('fallbackSrc'). Never supply an image URL as a video. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundVideo"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundVideo":{"required":true,"note":"Must contain a valid video object with masterPlaylistUrl and fallbackSrc."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundVideo.video":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Work smarter, not harder","description":"Maximize productivity with intelligent tools and workflows.","action":{"label":"Boost Productivity","href":"#","variant":"default"},"actionSubtext":"No credit card required"},"dependencies":["@opensite/ui"],"tags":["hero","grid","pattern","efficiency","productivity","business","tools","clean"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. This is a text-only hero — no images required. Follow the example props closely.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130}},"mediaSlots":{}}},{"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/308451/n2zbjv5br0tdg1ggt3jj6sfd9y20/hero-dashed-border-features-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308452/7yn81hwai8ndl4tj8c9i08lbvucb/hero-dashed-border-features-mobile.jpg"},"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      logo={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Brand Logo\",\n      }}\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=\"diagonalCrossFadeCenter\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Brand logo configuration — renders above the announcement badge.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo component above the dashed border content. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":3,"minItems":2,"maxItems":4},"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},"logo.src":{"type":"object","description":""}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Features that make a difference","description":"Discover the powerful capabilities that set us apart.","badgeText":"New Features","announcementText":"Latest innovations","announcementHref":"#","features":[{"iconName":"lucide/zap","title":"Lightning Fast","description":"Optimized for speed","href":"#"},{"iconName":"lucide/shield","title":"Secure by Default","description":"Enterprise-grade security","href":"#"},{"iconName":"lucide/sparkles","title":"AI-Powered","description":"Smart automation","href":"#"}],"actions":[{"label":"Explore Features","href":"#","variant":"default"},{"label":"Contact Sales","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","dashed","border","features","unique","decorative","highlights"],"performance":{},"importantUsageNotes":"The optional 'logo' prop accepts a LogoConfig object and renders via the BrandLogo component — it must be a brand logo image, NEVER a photo or hero image. Supply exactly 3 'features' objects. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.","usageRequirements":{"requiredProps":["heading","features"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"features":{"required":true,"count":3,"minItems":2,"maxItems":4},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"logo.src":{"note":"LOGO MEDIA ONLY. Must be a brand logo image (SVG, PNG, WebP). Never use a photo, hero image, or video asset."}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo component above the dashed border content. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"notes":["The logo prop is optional. When provided, the BrandLogo component renders it above the announcement badge with responsive sizing."]}},{"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 { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Brand Logo\",\n      }}\n      heading=\"Design portfolio that speaks volumes\"\n      description=\"Showcase your best work with beautiful, interactive carousels that captivate and engage your audience.\"\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        {\n          src: \"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\",\n          alt: \"Portfolio project one\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t\",\n          alt: \"Portfolio project two\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j\",\n          alt: \"Portfolio project three\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\",\n          alt: \"Portfolio project four\",\n        },\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo component above the features and heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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":true,"count":3,"minItems":3,"maxItems":3},"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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":4,"minItems":3,"maxItems":5,"mediaHints":{"path":"carouselImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Portfolio showcase images for the carousel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo.src":{"type":"object","description":""}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Design portfolio that speaks volumes","description":"Showcase your best work with beautiful, interactive carousels.","features":[{"iconName":"lucide/target","title":"Strategic Focus","description":"Aligning work with your goals."},{"iconName":"lucide/zap","title":"Rapid Execution","description":"Agile methodology for fast delivery."},{"iconName":"lucide/heart","title":"Human-Centered","description":"Design for people first."}],"carouselImages":[{"src":"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc","alt":"Design 1"},{"src":"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt","alt":"Design 2"},{"src":"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov","alt":"Design 3"},{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","alt":"Design 4"}],"actions":[{"label":"Schedule Chat","href":"#","variant":"default"},{"label":"View Portfolio","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","design","carousel","portfolio","creative","agency","projects","showcase"],"performance":{},"importantUsageNotes":"The 'logo' prop renders via BrandLogo and must be a brand logo image (SVG, PNG, WebP) — NEVER a photo or hero image. The AI Agent must use a real brand logo asset here, not an image placeholder. Supply exactly 4 carousel images for the portfolio. Supply exactly 3 'features'. All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","carouselImages","features"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"carouselImages":{"required":true,"count":4,"minItems":3,"maxItems":5},"features":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"logo.src":{"note":"LOGO MEDIA ONLY. Must be a brand logo image. Never use a photo, hero image, or video asset."}},"mediaSlots":{"carouselImages[]":{"path":"carouselImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Portfolio showcase images for the carousel. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo component above the features and heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\", alt: \"Client success\" }}\n      background=\"gradient\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Your success is our mission","description":"Dedicated to helping you achieve your goals with personalized support.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Client success"},"background":"gradient","actions":[{"label":"Get Started","href":"#","variant":"outline"},{"label":"Talk to Sales","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","gradient","client","focused","testimonials","trust","social-proof","success"],"performance":{},"importantUsageNotes":"Requires a real image. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'outline' for the first and 'ghost' for the second on 'gradient' backgrounds.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"image":{"required":true},"actions":{"maxItems":2}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Side hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\", 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: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\", fallback: \"M1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\", fallback: \"M2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"minItems":2,"maxItems":5,"mediaHints":{"path":"avatars[].src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Member profile avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main hero image on the right side. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"brandName":"Premium","brandSuffix":"Community","heading":"Join an exclusive community","description":"Connect with like-minded professionals and gain access to premium resources.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Community gathering"},"action":{"label":"Join Now","href":"#","variant":"default"},"avatars":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","fallback":"M1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","fallback":"M2"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","fallback":"M3"}],"socialProofText":"5,000+ active members"},"dependencies":["@opensite/ui"],"tags":["hero","premium","split","avatars","social-proof","users","credibility","trust"],"performance":{},"importantUsageNotes":"Requires a real 'image'. Supply 3-5 avatar objects. Only supply real 'socialProofText' — do not fabricate member counts. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"image":{"required":true},"avatars":{"minItems":2,"maxItems":5}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main hero image on the right side. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"avatars[].src":{"path":"avatars[].src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Member profile avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\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: \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\",\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":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional brand logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/UI showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Beautiful components for modern apps","description":"A comprehensive UI library with 100+ components.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"UI component showcase"},"actions":[{"label":"Browse Components","href":"#","variant":"default"},{"label":"View Docs","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","ui","library","showcase","components","design-system","documentation","developer"],"performance":{},"importantUsageNotes":"Requires a real 'image' (product screenshot). Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"image":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional brand logo above heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/UI showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308459/yopdur6guxws89die0c828hytqiq/hero-fullscreen-background-image-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308460/4n6pu25q0w616w8tr2evk7zrcwjf/hero-fullscreen-background-image-mobile.jpg"},"componentPath":"blocks/hero/hero-fullscreen-background-image.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\",\n        alt: \"Brand Logo\",\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      backgroundImage={\n        \"https://toastability-production.s3.amazonaws.com/w41h7890eivogu3sr78vlwkpzz8g\"\n      }\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Experience the extraordinary","description":"Immersive experiences that captivate and inspire.","backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Talk to Sales","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","fullscreen","background","image","overlay","immersive","impactful","landing"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImage' URL — use a large, high-quality full-bleed photo. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundImage"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundImage":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://cdn.ing/assets/i/r/308446/g4ykz8o4phw84yo9ly1lxhv0hqsd/logo-light.webp\", 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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed prominently. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Building the future of work","description":"Join the companies already transforming how they operate.","action":{"label":"Get Started","href":"#","variant":"default"},"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","fullscreen","logo","cta","minimal","brand","focused","landing"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Supply a real 'logo' if provided.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130}},"mediaSlots":{"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed prominently. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo\", alt: \"User 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\", alt: \"User 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\", alt: \"User 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\", alt: \"User 4\" },\n      ]}\n      images={[\n        { src: \"https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u\", alt: \"Hero 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/ms4s4zyqpmboh0slez1cwat9qhw4\", 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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"minItems":2,"maxItems":5,"mediaHints":{"path":"avatars[].src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"User avatars for social proof. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"count":2,"minItems":2,"maxItems":2,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Background decorative images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Loved by thousands of users","description":"Join our community of satisfied customers.","avatars":[{"src":"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82","alt":"User 1"},{"src":"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn","alt":"User 2"},{"src":"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t","alt":"User 3"}],"images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Hero 1"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Hero 2"}],"ratingValue":"4.9","ratingLabel":"10,000+ happy users","background":"gradient","actions":[{"label":"Start Free Trial","href":"#","variant":"outline"},{"label":"Read Reviews","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","gradient","avatars","rating","stars","social-proof","reviews","trust"],"performance":{},"importantUsageNotes":"Supply 3-5 'avatars'. Supply exactly 2 background images. Only use real 'ratingValue' and 'ratingLabel' — do not fabricate review data. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"avatars":{"minItems":2,"maxItems":5},"images":{"count":2,"minItems":2,"maxItems":2},"ratingValue":{"note":"Must be a real rating value. Do not fabricate."}},"mediaSlots":{"avatars[].src":{"path":"avatars[].src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"User avatars for social proof. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Background decorative images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/309643/n7nvlajhxzjc5ms7pqj5zmtxuxrs/hero-task-timer-animated-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/309644/gi13f5dx2xti6s4b43967s03s1fc/hero-task-timer-animated-mobile.jpg"},"componentPath":"blocks/hero/hero-task-timer-animated.tsx","code":"import { 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      taskItems={[\n        \"Design mockups\",\n        \"Code review\",\n        \"Write documentation\",\n        \"Ship feature\",\n      ]}\n      timerMinutes={25}\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      background=\"dark\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"headingSlot":{"type":"object","description":"Custom slot for heading (overrides heading prop)","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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},"taskItems":{"type":"array","description":"Array of task labels that cycle through with animation","items":{"type":"string","description":""},"required":true,"minItems":2,"maxItems":6},"timerMinutes":{"type":"number","description":"Starting minutes for the animated countdown display (default: 25 — Pomodoro style)","required":false},"timerSeconds":{"type":"number","description":"Starting seconds for the animated countdown display (default: 0)","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},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Track time, boost productivity","description":"Stay focused and manage your time effectively.","taskItems":["Design mockups","Code review","Write documentation","Ship feature"],"timerMinutes":25,"timerSeconds":0,"background":"dark","actions":[{"label":"Start Tracking","href":"#","variant":"default"},{"label":"View Features","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","task","timer","animated","countdown","productivity","dynamic","engaging"],"performance":{},"importantUsageNotes":"Supply 2-6 taskItems for cycling animation. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second. timerMinutes defaults to 25 (Pomodoro style). No images required — the animated countdown timer and task list provide the visual element.","usageRequirements":{"requiredProps":["heading","taskItems"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"taskItems":{"required":true,"minItems":2,"maxItems":6},"timerMinutes":{"note":"Defaults to 25 (Pomodoro style)."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{},"requiresSiteCapabilities":[]}},{"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/308467/2moisa3rc2c4uy4wvpf78jq8pmeb/hero-ai-powered-carousel-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308468/qu3jxkkf3xwd5nn3h0m6mm3miv80/hero-ai-powered-carousel-mobile.jpg"},"componentPath":"blocks/hero/hero-ai-powered-carousel.tsx","code":"import { optixFlowApiKey } 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      optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Brand Logo\",\n      }}\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        {\n          src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\",\n          alt: \"AI Feature 1\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs\",\n          alt: \"AI Feature 2\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n          alt: \"AI Feature 3\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\",\n          alt: \"AI Feature 4\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n          alt: \"AI Feature 5\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\n          alt: \"AI Feature 6\",\n        },\n      ]}\n      carouselImages2={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n          alt: \"AI Feature 7\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n          alt: \"AI Feature 8\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v\",\n          alt: \"AI Feature 9\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n          alt: \"AI Feature 10\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt\",\n          alt: \"AI Feature 11\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov\",\n          alt: \"AI Feature 12\",\n        },\n      ]}\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.75}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false,"maxLength":12},"badgeTagline":{"type":"object","description":"Badge tagline text","typeLabel":"React.ReactNode","required":false,"maxLength":26},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":6,"minItems":6,"maxItems":6,"mediaHints":{"path":"carouselImages1[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"First carousel row images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"count":6,"minItems":6,"maxItems":6,"mediaHints":{"path":"carouselImages2[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Second carousel row images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"AI-Powered","badgeTagline":"Next Generation Technology","heading":"Intelligent automation for your workflow","description":"Transform your business with AI-driven solutions.","carouselImages1":[{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Feature 1"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Feature 2"},{"src":"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg","alt":"Feature 3"},{"src":"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q","alt":"Feature 4"},{"src":"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz","alt":"Feature 5"},{"src":"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs","alt":"Feature 6"}],"carouselImages2":[{"src":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","alt":"Feature 1"},{"src":"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x","alt":"Feature 2"},{"src":"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc","alt":"Feature 3"},{"src":"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v","alt":"Feature 4"},{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Feature 5"},{"src":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm","alt":"Feature 6"}],"actions":[{"label":"Start Free Trial","href":"#","variant":"default"},{"label":"Watch Demo","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","ai","powered","carousel","machine-learning","features","technology","innovation"],"performance":{},"importantUsageNotes":"Supply exactly 6 images to 'carouselImages1' and exactly 6 images to 'carouselImages2' — if you don't have 12 unique relevant photos, do not use this block. Do not exceed 12 characters for 'badge'. Do not exceed 26 characters for 'badgeTagline'. Do not exceed 40 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","carouselImages1","carouselImages2"],"propConstraints":{"badge":{"maxLength":12},"badgeTagline":{"maxLength":26},"heading":{"required":true,"maxLength":40},"description":{"maxLength":140},"carouselImages1":{"required":true,"count":6,"minItems":6,"maxItems":6},"carouselImages2":{"required":true,"count":6,"minItems":6,"maxItems":6},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"carouselImages1[]":{"path":"carouselImages1[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"First carousel row images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"carouselImages2[]":{"path":"carouselImages2[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Second carousel row images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"mediaItem.image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Hero media image (when not a video). IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Your ad campaigns excel with AI","description":"Optimize your advertising performance with real-time analytics.","mediaItem":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"directionConfig":{"desktop":"mediaLeft","mobile":"mediaTop"},"actions":[{"label":"Start Free Trial","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","ad","campaign","marketing","advertising","expert","metrics","agency"],"performance":{},"importantUsageNotes":"This block can render an image or video dynamically based on the 'mediaItem' prop — check the prop schema carefully. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","mediaItem"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"mediaItem":{"required":true,"note":"Can be an image or video object."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"mediaItem.video":{"path":"mediaItem.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."},"mediaItem.image.src":{"path":"mediaItem.image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Hero media image (when not a video). IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn\"}\n      imageAlt=\"Product showcase\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Flexible product displays that adapt to your brand","description":"Create stunning product showcases with our adaptable grid system.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Product showcase","background":"dark","actions":[{"label":"Browse Products","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","adaptable","product","grid","flexible","responsive","showcase","features"],"performance":{},"importantUsageNotes":"Do not exceed 60 characters for 'heading'. Do not exceed 130 characters for 'description'. Requires a real 'imageSrc'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":60},"description":{"maxLength":130},"imageSrc":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { optixFlowApiKey } 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      backgroundVideo={{\n        video: {\n          masterPlaylistUrl:\n            \"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8\",\n          fallbackSrc:\n            \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\n          optixFlowApiKey: optixFlowApiKey,\n        },\n      }}\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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"subtitle":"Presentation Platform","heading":"Create stunning presentations in minutes","description":"Beautiful templates, smart layouts, and powerful collaboration tools.","backgroundVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"background":"dark","actions":[{"label":"Start Creating","href":"#","variant":"default"},{"label":"View Templates","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","presentation","platform","video","split","conferencing","tools","communication"],"performance":{},"importantUsageNotes":"Only use when you have a real video asset. The 'backgroundVideo.video' prop requires an HLS playlist URL ('masterPlaylistUrl') and a fallback ('fallbackSrc'). Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundVideo"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundVideo":{"required":true,"note":"Must contain a valid video with masterPlaylistUrl and fallbackSrc."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundVideo.video":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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=\"Trusted by Leaders\"\n      description=\"From startups to enterprises, we provide comprehensive solutions tailored to your unique needs and goals.\"\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n          alt: \"For Business\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\",\n          alt: \"For Developers\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm\",\n          alt: \"For Teams\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\",\n          alt: \"For Teams\",\n        },\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"minItems":3,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Solution category images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"New Version Launched","heading":"Complete solutions for every challenge","description":"From startups to enterprises, we provide comprehensive solutions.","images":[{"src":"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v","alt":"Solution 1"},{"src":"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc","alt":"Solution 2"},{"src":"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt","alt":"Solution 3"}],"actions":[{"label":"Explore Solutions","href":"#","variant":"outline"}],"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","grid","pattern","solutions","business","b2b","professional","services"],"performance":{},"importantUsageNotes":"Supply 3-4 images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"minItems":3,"maxItems":4}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Solution category images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308469/o6o4yangas1fc1ryenjpfw9kwlr6/hero-crm-streamlined-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308470/s68ri0txhcqvgp8dqk5f0thz1rh1/hero-crm-streamlined-mobile.jpg"},"componentPath":"blocks/hero/hero-crm-streamlined.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n        alt: \"Brand Logo\",\n      }}\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={{\n        src: \"https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo\",\n        alt: \"CRM Dashboard\",\n      }}\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,"maxLength":20},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/dashboard screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"tagline":"Simple CRM","heading":"Customer relationships made simple","description":"Manage your entire customer lifecycle in one intuitive platform.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"CRM Dashboard"},"background":"dark","actions":[{"label":"Start Free Trial","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","crm","streamlined","sales","tools","split","product","business"],"performance":{},"importantUsageNotes":"Do not exceed 20 characters for 'tagline'. Do not exceed 40 characters for 'heading'. Do not exceed 140 characters for 'description'. Requires a real 'image'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"tagline":{"maxLength":20},"heading":{"required":true,"maxLength":40},"description":{"maxLength":140},"image":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Product/dashboard screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308471/64i447u90ndubsle1an70gv2wgmm/hero-billing-platform-logos-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308472/uklxyvqyn3xzhk6k9ylargi3h3pm/hero-billing-platform-logos-mobile.jpg"},"componentPath":"blocks/hero/hero-billing-platform-logos.tsx","code":"import { 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=\"Modern Billing\"\n      description=\"Accept payments, subscriptions, and invoices with ease. A powerful billing platform for businesses of all sizes.\"\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      mainImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\n        alt: \"Billing dashboard\",\n      }}\n      overlayImages={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          alt: \"Feature 1\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg\",\n          alt: \"Feature 2\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          alt: \"Feature 3\",\n        },\n      ]}\n      logos={[\n        {\n          src: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\",\n          alt: \"Partner 1\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\",\n          alt: \"Partner 2\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\",\n          alt: \"Partner 3\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png\",\n          alt: \"Partner 4\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288968/nn5xpkit7idgr7i6fa46ez3g9kwn/ui-placeholder-logo-black-5.png\",\n          alt: \"Partner 5\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png\",\n          alt: \"Partner 6\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"mainImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/dashboard image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"overlayImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional overlay images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"minItems":4,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Partner or integration logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Simplified billing for modern businesses","description":"Accept payments, manage subscriptions, and handle invoicing.","mainImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Billing dashboard"},"logos":[{"src":"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png","alt":"Partner logo 1"},{"src":"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png","alt":"Partner logo 2"},{"src":"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png","alt":"Partner logo 3"},{"src":"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png","alt":"Partner logo 4"},{"src":"https://cdn.ing/assets/i/r/288968/nn5xpkit7idgr7i6fa46ez3g9kwn/ui-placeholder-logo-black-5.png","alt":"Partner logo 5"},{"src":"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png","alt":"Partner logo 6"}],"actions":[{"label":"Start Free Trial","href":"#","variant":"default"},{"label":"View Pricing","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","billing","platform","logos","payment","fintech","trust","carousel"],"performance":{},"importantUsageNotes":"Only use if you can supply 6-8 valid logos. Requires a real 'mainImage'. Do not exceed 40 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","mainImage","logos"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":140},"mainImage":{"required":true},"logos":{"required":true,"minItems":4,"maxItems":8},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"mainImage.src":{"path":"mainImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/dashboard image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Partner or integration logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"overlayImages[]":{"path":"overlayImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional overlay images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/a3m42usevv0iet0fpfwa1fsytxmv\", alt: \"Growth metric 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l\", alt: \"Growth metric 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\", alt: \"Growth metric 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq\", alt: \"Growth metric 4\" },\n      ]}\n      modalVideo={{\n        video: {\n          src: \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"minItems":3,"maxItems":4,"mediaHints":{"path":"showcaseImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Product showcase/metric images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Accelerate your growth with data-driven insights","description":"See how top companies use our platform to scale faster.","videoAction":{"label":"Watch Demo","variant":"outline"},"showcaseImages":[{"src":"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov","alt":"Growth metric 1"},{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","alt":"Growth metric 2"},{"src":"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82","alt":"Growth metric 3"},{"src":"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn","alt":"Growth metric 4"}],"modalVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283391/hls/38861/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/lvwp8x0nxf8xmarwganmvzvto3r5"}},"background":"dark","actions":[{"label":"Get Started","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","software","growth","video","dialog","modal","saas","startup"],"performance":{},"importantUsageNotes":"Only use when you have a real video for the 'modalVideo' prop. Supply 3-4 showcase images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","modalVideo","showcaseImages"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"modalVideo":{"required":true,"note":"Must contain a valid video object."},"showcaseImages":{"required":true,"minItems":3,"maxItems":4}},"mediaSlots":{"showcaseImages[]":{"path":"showcaseImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Product showcase/metric images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"modalVideo.video":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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/308473/uqkc9wvusu3eu5pl8fr4w2bzw7ah/hero-conversion-video-play-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308474/acnabdqy2z5sw44jv353xj608myl/hero-conversion-video-play-mobile.jpg"},"componentPath":"blocks/hero/hero-conversion-video-play.tsx","code":"import { 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: \"os-bcf1c82f-0c47-49ec-a303-807eec0a25c6\",\n          skinClasses: skinClasses,\n          skinStyle: skinStyle,\n        },\n      }}\n      videoDialogTitle=\"Conversion Optimization Demo\"\n      logos={[\n        { src: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\", alt: \"Partner 1\" },\n        { src: \"https://cdn.ing/assets/i/r/288966/0ls9to9jqnrc4gcxty9rx2c4udjv/ui-placeholder-logo-white-2.png\", alt: \"Partner 2\" },\n        { src: \"https://cdn.ing/assets/i/r/288971/sow5o2s8dp1cr159rxexm0yhov5w/ui-placeholder-logo-white-3.png\", alt: \"Partner 3\" },\n        { src: \"https://cdn.ing/assets/i/r/288969/h9k3b0ett73u3pouc2w15ibvl7tc/ui-placeholder-logo-white-4.png\", alt: \"Partner 4\" },\n        { src: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\", alt: \"Partner 5\" },\n        { src: \"https://cdn.ing/assets/i/r/288973/lxkmf98s3bmpytziacx1o0rwuun9/ui-placeholder-logo-white-6.png\", 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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional hero side image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"minItems":3,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Partner or customer logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Turn visitors into customers","description":"Optimize your conversion funnel with data-driven insights.","primaryAction":{"label":"Get Started","href":"#","variant":"default"},"videoButtonLabel":"Watch Demo","modalVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"videoDialogTitle":"Conversion Optimization Demo","background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","conversion","video","play","engagement","logos","cta","marketing"],"performance":{},"importantUsageNotes":"Only use if you have a 'modalVideo.video' prop object with a real video URL. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Supply logos only if you have real partner/customer logos.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","modalVideo"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"modalVideo":{"required":true,"note":"Must contain a valid video object."},"logos":{"minItems":3,"maxItems":8}},"mediaSlots":{"modalVideo.video":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."},"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional hero side image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Partner or customer logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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/308475/43zu0rnl5afqphw86x756sg82v40/hero-design-showcase-logos-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308476/aamy9a1lhgqs9w9uan16jlaap111/hero-design-showcase-logos-mobile.jpg"},"componentPath":"blocks/hero/hero-design-showcase-logos.tsx","code":"import { 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: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\", alt: \"Partner 1\" },\n        { src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\", alt: \"Partner 2\" },\n        { src: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\", alt: \"Partner 3\" },\n        { src: \"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png\", alt: \"Partner 4\" },\n        { src: \"https://cdn.ing/assets/i/r/288968/nn5xpkit7idgr7i6fa46ez3g9kwn/ui-placeholder-logo-black-5.png\", alt: \"Partner 5\" },\n        { src: \"https://cdn.ing/assets/i/r/288974/dlb4c51kvgv6ncasqpgr2kvuma7y/ui-placeholder-logo-black-6.png\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"minItems":4,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand or partner logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"mediaHints":{"path":"showcaseImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional product showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Trusted by leading brands worldwide","description":"Join thousands of companies who have transformed their design workflow.","logos":[{"src":"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png","alt":"Partner logo 1"},{"src":"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png","alt":"Partner logo 2"},{"src":"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png","alt":"Partner logo 3"},{"src":"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png","alt":"Partner logo 4"}],"actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"View Case Studies","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","design","showcase","logos","agency","creative","studio","portfolio"],"performance":{},"importantUsageNotes":"Only use if you have 4-8 valid logos. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","logos"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"logos":{"required":true,"minItems":4,"maxItems":8},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand or partner logos. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"showcaseImage.src":{"path":"showcaseImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional product showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}}}},{"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 { HeroVideoOverlayStars } from \"@opensite/ui/blocks/hero/hero-video-overlay-stars\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroVideoOverlayStars\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Brand Logo\",\n      }}\n      heading=\"Trusted by thousands\"\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          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n      ]}\n      backgroundVideo={{\n        video: {\n          masterPlaylistUrl:\n            \"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8\",\n          fallbackSrc:\n            \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\n        },\n      }}\n      trust={{\n        starCount: 5,\n        message: \"Trusted by 2,500+ customers worldwide\",\n      }}\n    />\n  );\n}","propsSchema":{"logo":{"type":"object","description":"Brand logo configuration — renders centered above the heading.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo centered above the heading on the video overlay. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":true,"maxLength":40},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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,"maxLength":130},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"trust.message":{"type":"object","description":""},"logo.src":{"type":"object","description":""}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Trusted by thousands","description":"Our solution is designed to streamline your business operations.","backgroundVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283391/hls/38861/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/lvwp8x0nxf8xmarwganmvzvto3r5"}},"trust":{"starCount":5,"message":"Trusted by 2,500+ customers"},"actions":[{"label":"Try It Free","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["hero","video","overlay","stars","rating","testimonial","social-proof","reviews"],"performance":{},"importantUsageNotes":"The optional 'logo' prop renders via BrandLogo centered above the heading — it must be a brand logo image, NEVER a photo. Only use when you have a real video asset. The 'backgroundVideo.video' prop requires masterPlaylistUrl and fallbackSrc. Only supply real 'trust.message' — do not fabricate review counts. All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundVideo"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundVideo":{"required":true,"note":"Must contain a valid video with masterPlaylistUrl and fallbackSrc."},"trust.message":{"note":"Must be real trust/review data. Do not fabricate."},"logo.src":{"note":"LOGO MEDIA ONLY. Must be a brand logo image. Never use a photo, hero image, or video asset."}},"mediaSlots":{"backgroundVideo.video":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."},"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo rendered via BrandLogo centered above the heading on the video overlay. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","reviews_or_testimonials"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\"}\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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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,"mediaHints":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Supercharge your productivity","description":"The ultimate productivity launcher for modern professionals.","backgroundVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"versionInfo":{"version":"v2.0","osRequirement":"All platforms"},"actions":[{"label":"Download Free","href":"#","variant":"default"},{"label":"Watch Tour","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","productivity","launcher","video","download","app","mobile","desktop"],"performance":{},"importantUsageNotes":"Only use when you have a real video for 'backgroundVideo'. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundVideo.video":{"path":"backgroundVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/5jsc0b4e3gxnjs81iotw2c3e6da3\"}\n    />\n  );\n}","propsSchema":{"headingPrefix":{"type":"object","description":"Static heading prefix text","typeLabel":"React.ReactNode","required":true},"animatedTexts":{"type":"array","description":"Array of animated text items to cycle through","items":{"type":"string","description":""},"required":true,"minItems":2,"maxItems":6},"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,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"headingPrefix":"We're hiring","animatedTexts":["Developers","Designers","Marketers"],"description":"We're building the future of work and want you to be part of it.","actions":[{"label":"View Open Roles","href":"#","variant":"default"},{"label":"Learn About Us","href":"#","variant":"outline"}],"backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},"dependencies":["@opensite/ui"],"tags":["hero","hiring","animated","text","jobs","recruitment","careers","dynamic"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImage'. Supply 3-5 values for 'animatedTexts'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["headingPrefix","animatedTexts"],"propConstraints":{"description":{"maxLength":130},"animatedTexts":{"required":true,"minItems":2,"maxItems":6},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/uh2vd59np82h8sevbmfnsha89sf1\",\n        alt: \"Newsletter preview\",\n      }}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Right-side image for split layout. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Stay updated with our newsletter","description":"Get the latest insights delivered to your inbox.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Newsletter preview"},"buttonAction":{"label":"Subscribe","variant":"default"},"helperText":"We respect your privacy. Unsubscribe at any time."},"dependencies":["@opensite/ui"],"tags":["hero","split","image","newsletter","signup","email","content","subscription"],"performance":{},"importantUsageNotes":"Requires a real 'image'. Ensure proper form implementation: wire up 'formConfig' and 'formFields' for email capture. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"image":{"required":true}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Right-side image for split layout. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","contact_form"]}},{"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,"maxLength":20},"badgeIcon":{"type":"object","description":"Badge icon","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"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,"maxLength":130},"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,"maxItems":2},"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,"minItems":2,"maxItems":4},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"Limited Time Offer","heading":"Transform your workflow today","description":"Join thousands of teams who have revolutionized their productivity.","actions":[{"label":"Get Started Free","href":"#","variant":"secondary"},{"label":"Schedule Demo","href":"#","variant":"outline"}],"background":"gradient"},"dependencies":["@opensite/ui"],"tags":["hero","centered","gradient","cta","features","highlights","modern","vibrant"],"performance":{},"importantUsageNotes":"Do not exceed 20 characters for 'badge'. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default'/'secondary' for the first and 'outline' for the second.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"badge":{"maxLength":20},"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"actions":{"maxItems":2},"features":{"minItems":2,"maxItems":4}},"mediaSlots":{}}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\"}\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"minItems":2,"maxItems":4},"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":true,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero banner image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badge":"Industry Expertise","heading":"Trusted by thousands of businesses","description":"Join the companies already experiencing transformative results.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Banner image","stats":[{"value":"50K+","label":"Active Users"},{"value":"99.9%","label":"Uptime"},{"value":"4.9/5","label":"User Rating"}],"actions":[{"label":"Get Started","href":"#","variant":"default","asButton":true},{"label":"Case Studies","href":"#","variant":"outline","asButton":true}],"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","stats","social-proof","metrics","dashboard","numbers","credibility","data"],"performance":{},"importantUsageNotes":"Requires a real 'imageSrc'. Only supply real stats — do not fabricate metrics. Supply 2-4 stat objects. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","imageSrc"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"imageSrc":{"required":true},"stats":{"minItems":2,"maxItems":4,"note":"Must be real stats. Do not fabricate."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero banner image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","stats_or_metrics"]}},{"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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":4,"minItems":3,"maxItems":6},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Everything you need in one place","description":"Powerful features that work together seamlessly.","features":[{"title":"Intuitive Dashboard","description":"Get insights at a glance.","href":"#"},{"title":"Team Collaboration","description":"Work together seamlessly.","href":"#"},{"title":"Advanced Analytics","description":"Make data-driven decisions.","href":"#"},{"title":"Automation","description":"Save time with smart workflows.","href":"#"}],"actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Talk to Sales","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","feature","cards","grid","icons","benefits","showcase","product"],"performance":{},"importantUsageNotes":"Supply exactly 4 'features' objects. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.","usageRequirements":{"requiredProps":["heading","features"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"features":{"required":true,"count":4,"minItems":3,"maxItems":6},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo\", fallback: \"SJ\" }],\n      }}\n      gridImages={[\n        { src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\", alt: \"Customer success story 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\", alt: \"Customer success story 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\", alt: \"Customer success story 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\", 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":true,"maxLength":50},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"testimonial.avatars[].image","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"count":4,"minItems":4,"maxItems":4,"mediaHints":{"path":"gridImages[].src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Grid showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Loved by customers worldwide","description":"See why thousands of businesses trust us.","testimonial":{"quote":"This platform transformed how we work.","author":"Sarah Johnson","role":"CEO","company":"TechCorp","avatars":[{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","fallback":"SJ"}]},"gridImages":[{"src":"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t","alt":"Customer 1"},{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Customer 2"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Customer 3"},{"src":"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg","alt":"Customer 4"}],"actions":[{"label":"Get Started","href":"#","variant":"default"}],"background":"dark"},"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. Supply exactly 4 grid images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","testimonial","gridImages"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"testimonial":{"required":true,"note":"Must be a real, sourced testimonial. Do not fabricate."},"gridImages":{"required":true,"count":4,"minItems":4,"maxItems":4}},"mediaSlots":{"testimonial.avatars[].image":{"path":"testimonial.avatars[].image","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"gridImages[].src":{"path":"gridImages[].src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Grid showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","reviews_or_testimonials"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08\", alt: \"Design system component 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae\", alt: \"Design system component 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"3D design system showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"trustBadge":"Design System","heading":"Build with a comprehensive design system","description":"Create consistent, beautiful interfaces with our complete set of components.","images":[{"src":"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q","alt":"Component 1"},{"src":"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz","alt":"Component 2"},{"src":"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs","alt":"Component 3"}],"background":"dark","actions":[{"label":"Explore Components","href":"#","variant":"default"},{"label":"Documentation","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","design-system","3d","perspective","modern","innovative","tools","creative"],"performance":{},"importantUsageNotes":"Supply exactly 3 images. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"3D design system showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { HeroArchitectureFullscreen } from \"@opensite/ui/blocks/hero/hero-architecture-fullscreen\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <HeroArchitectureFullscreen\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.white[0],\n        title: \"StartupCo\",\n        alt: \"StartupCo Logo\",\n      }}\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={\n        \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\"\n      }\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":true,"maxLength":40},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Designing spaces that inspire","description":"Award-winning architecture firm specializing in sustainable, innovative designs.","action":{"label":"View Projects","href":"#","variant":"default"},"backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},"dependencies":["@opensite/ui"],"tags":["hero","architecture","fullscreen","real-estate","property","construction","overlay","immersive"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImage'. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundImage"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"backgroundImage":{"required":true}},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\", alt: \"Innovation 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/ytbyjrcvrghc7wl6w1g7g8fwka22\", alt: \"Innovation 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Innovation showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Pioneering the future of technology","description":"Pushing boundaries and exploring new frontiers.","images":[{"src":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","alt":"Innovation 1"},{"src":"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x","alt":"Innovation 2"},{"src":"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc","alt":"Innovation 3"}],"background":"dark","actions":[{"label":"Learn More","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","innovation","image","grid","research","technology","showcase","modern"],"performance":{},"importantUsageNotes":"Supply exactly 3 images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Innovation showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\",\n        alt: \"Platform demo preview\",\n      }}\n      videoDialog={{\n        title: \"Platform Demo\",\n        videoUrl: \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Platform preview image shown before video. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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":true,"mediaHints":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"See our platform in action","description":"Get a 3-minute walkthrough of our most powerful features.","videoAction":{"label":"Watch Demo","variant":"outline"},"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Platform demo preview"},"modalVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"background":"gradient","actions":[{"label":"Get Started","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","video","dialog","gradient","modal","engagement","media","modern"],"performance":{},"importantUsageNotes":"Only use when you have a real video for 'modalVideo'. Requires a real 'image'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image","modalVideo"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"image":{"required":true},"modalVideo":{"required":true,"note":"Must contain a valid video object."}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Platform preview image shown before video. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"modalVideo.video":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":60},"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,"maxLength":130},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Simplicity is the ultimate sophistication","description":"Clean, focused, and purposeful.","badge":"Industry Leader","background":"dark","actions":[{"label":"Get Started","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","minimal","centered","dark","beta","launch","clean","focused"],"performance":{},"importantUsageNotes":"Do not exceed 60 characters for 'heading'. Do not exceed 130 characters for 'description'. This is a text-only hero — no images required. Follow the example props closely.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":60},"description":{"maxLength":130}},"mediaSlots":{}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0\",\n            alt: \"User Avatar 1\",\n          },\n          {\n            src: \"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x\",\n            alt: \"User Avatar 2\",\n          },\n          {\n            src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\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: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"productImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"userCount.avatars[]","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Optional social proof avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"New Arrival","badgeIcon":"lucide/sparkles","heading":"Introducing our latest innovation","description":"Experience the perfect blend of style and technology.","productImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Product showcase"},"background":"dark","actions":[{"label":"Shop Now","href":"#","variant":"default","size":"lg"},{"label":"Learn More","href":"#","size":"lg","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","product","showcase","floating","stats","cards","metrics","dynamic"],"performance":{},"importantUsageNotes":"Requires a real 'productImage'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","productImage"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"productImage":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"productImage.src":{"path":"productImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"userCount.avatars[]":{"path":"userCount.avatars[]","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Optional social proof avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"browserPreview.image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Browser preview screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"SaaS Platform","badgeIcon":"lucide/box","heading":"The operating system for your business","description":"All-in-one platform to run your business efficiently.","buttonAction":{"label":"Start Free Trial","variant":"default"},"browserPreview":{"url":"yourbrand.com","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Dashboard"}},"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","saas","dashboard","preview","email","signup","software","product"],"performance":{},"importantUsageNotes":"Requires a real 'browserPreview.image'. Ensure proper form implementation with 'formConfig' and 'formFields'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","browserPreview"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"browserPreview":{"required":true}},"mediaSlots":{"browserPreview.image.src":{"path":"browserPreview.image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Browser preview screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","contact_form"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\", alt: \"Client testimonial\" },\n      }}\n      images={[\n        { src: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\", alt: \"Therapy session 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\", alt: \"Therapy session 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Therapy/wellness session images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"mediaHints":{"path":"testimonial.avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Real stories, real healing","description":"Hear from clients who've found support and healing.","testimonial":{"quote":"Therapy changed my life. I finally feel understood.","author":"Anonymous Client","avatar":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Client testimonial"}},"images":[{"src":"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v","alt":"Therapy session 1"},{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Therapy session 2"},{"src":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm","alt":"Therapy session 3"}],"actions":[{"label":"Find Your Therapist","href":"#","variant":"default"},{"label":"Read More Stories","href":"#","variant":"outline"}]},"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. Supply exactly 3 images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","testimonial","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"testimonial":{"required":true,"note":"Must be a real, sourced testimonial."},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"testimonial.avatar.src":{"path":"testimonial.avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Therapy/wellness session images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","reviews_or_testimonials"]}},{"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/308204/yzwklffavqn8ymmhqvi5u4g00h1q/hero-mental-health-team-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308205/wt93l1i9dm689ldrtbkjf0mmyfwc/hero-mental-health-team-mobile.jpg"},"componentPath":"blocks/hero/hero-mental-health-team.tsx","code":"import { 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        {\n          src: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\n          alt: \"Dr. Smith\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\",\n          alt: \"Dr. Johnson\",\n        },\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:\n          \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\n      }}\n      featureImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\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":true,"maxLength":40},"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":true,"count":2,"minItems":2,"maxItems":2,"mediaHints":{"path":"smallImages[]","roles":["thumbnail","profile","feature"],"disallowedRoles":["logo","favicon"],"minPixelClass":"small","required":true,"note":"Two team / supporting images. Must not be logos."}},"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":true,"mediaHints":{"path":"testimonial.avatarSrc","roles":["profile","avatar"],"disallowedRoles":["logo","favicon"],"minPixelClass":"small","preferredAspect":"1:1","note":"Headshot/avatar for the testimonial author."}},"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":true,"mediaHints":{"path":"featureImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon"],"minPixelClass":"large","required":true,"note":"Large feature image. Must not be a logo or favicon."}},"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,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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}},"exampleProps":{"heading":"Compassionate care for your mental wellbeing","description":"Our team of experienced mental health professionals is dedicated to providing compassionate care and support to individuals in need.","smallImages":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Dr. Smith"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Dr. Johnson"}],"testimonial":{"quote":"The support I received changed my life. I'm so grateful for the compassionate care.","author":"Sarah M.","role":"Client","avatarSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},"featureImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Mental health support"},"actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Talk to Sales","href":"#","variant":"outline"}],"background":"gray"},"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 'featureImage' 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. All media src values must be absolute URLs to real CDN assets — never relative paths (e.g. '/images/...') or placeholder strings. Follow the example props closely for this block.","usageRequirements":{"requiredProps":["heading","smallImages","featureImage","testimonial"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"smallImages":{"required":true,"count":2,"minItems":2,"maxItems":2},"featureImage":{"required":true},"testimonial":{"required":true,"note":"Must be a real, sourced testimonial. Do not fabricate."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"featureImage":{"path":"featureImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon"],"minPixelClass":"large","required":true,"note":"Large feature image. Must not be a logo or favicon."},"smallImages[]":{"path":"smallImages[]","roles":["thumbnail","profile","feature"],"disallowedRoles":["logo","favicon"],"minPixelClass":"small","required":true,"note":"Two team / supporting images. Must not be logos."},"testimonial.avatarSrc":{"path":"testimonial.avatarSrc","roles":["profile","avatar"],"disallowedRoles":["logo","favicon"],"minPixelClass":"small","preferredAspect":"1:1","note":"Headshot/avatar for the testimonial author."}},"requiresSiteCapabilities":["reviews_or_testimonials","media_library"]}},{"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/308206/ouhz733qne0ysdb9kq7y2tx0iv3l/mentorship-landing-page-hero-with-cta-and-lifestyle-photo.jpg","mobile":"https://cdn.ing/assets/i/r/308207/myv2jvb1i39eo91ge86dgu5q2ora/mentorship-hero-lifestyle-portrait-in-bar-setting.jpg"},"componentPath":"blocks/hero/hero-mentorship-video-split.tsx","code":"import { 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      videoTitle=\"Mentorship Success Stories\"\n      modalVideo={{\n        image: {\n          src: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\n          alt: \"Mentorship video\",\n        },\n        video: {\n          src: \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\n        },\n      }}\n      image={{\n        src: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\n        alt: \"Video Showcase\",\n      }}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":220},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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,"mediaHints":{"path":"modalVideo.image.src","roles":["video-thumbnail","hero","feature"],"disallowedRoles":["logo","favicon"],"minPixelClass":"medium","note":"Poster image shown before the video plays. IMAGE MEDIA ONLY."}},"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":true,"mediaHints":{"path":"image","roles":["hero","feature","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main hero image slot. IMAGE MEDIA ONLY. Do not assign a video URL here."}},"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},"modalVideo.video.src":{"type":"object","description":""},"modalVideo.image.src":{"type":"object","description":""}},"exampleProps":{"heading":"Reclaim Your Peace. Scale Sustainably.","description":"Somatic mindset coaching for high-achieving entrepreneurs ready to lead from strength — not survival mode.","action":{"label":"Book Your Discovery Call","href":"/contact","variant":"default","size":"lg"},"videoLabel":"Watch the Overview","videoTitle":"Coaching Overview","modalVideo":{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Coaching overview poster"},"video":{"src":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Coach portrait"},"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","mentorship","video","split","career","growth","education","coaching"],"performance":{},"importantUsageNotes":"The 'image' prop is the main hero image and MUST be an image asset (poster/photo). The 'modalVideo' prop's nested 'video.src' MUST be a video asset (HLS playlist or MP4) and 'modalVideo.image.src' MUST be an image asset (video poster). NEVER swap these: do not put a video URL into the 'image' prop and do not put an image URL into 'modalVideo.video.src'. All media src values must be absolute URLs to real CDN assets — never relative paths or placeholder strings. Keep 'heading' concise (under 60 characters) for visual balance.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":60},"description":{"maxLength":220},"image":{"required":true,"note":"Main hero image. Must be an image asset (jpg/png/webp), NOT a video URL."},"modalVideo.video.src":{"note":"Must be a video asset URL (HLS .m3u8 master playlist or .mp4). Must NOT be an image URL."},"modalVideo.image.src":{"note":"Video poster image. Must be an image asset, NOT a video URL."}},"mediaSlots":{"image":{"path":"image","roles":["hero","feature","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main hero image slot. IMAGE MEDIA ONLY. Do not assign a video URL here."},"modalVideo.video.src":{"path":"modalVideo.video.src","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile"],"note":"VIDEO MEDIA ONLY (HLS master playlist or MP4). Do not assign an image URL here."},"modalVideo.image.src":{"path":"modalVideo.image.src","roles":["video-thumbnail","hero","feature"],"disallowedRoles":["logo","favicon"],"minPixelClass":"medium","note":"Poster image shown before the video plays. IMAGE MEDIA ONLY."}},"requiresSiteCapabilities":["media_library"],"notes":["Image and video media must never be swapped between the 'image' prop and the 'modalVideo' prop.","All media src values must be absolute URLs to real assets; relative paths are not allowed."]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9\", alt: \"Operations 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\", alt: \"Operations 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp\", 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":true,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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,"maxItems":2,"pinnedValues":{"0.variant":"default"}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Mosaic business/operations images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Streamline your business operations","description":"Unified platform for managing all aspects of your business.","images":[{"src":"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v","alt":"Operations 1"},{"src":"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc","alt":"Operations 2"},{"src":"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt","alt":"Operations 3"}],"background":"gray","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Talk to Sales","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","business","operations","mosaic","grid","professional","agency","corporate"],"performance":{},"importantUsageNotes":"Use exactly 3 images for the mosaic. Do not exceed 40 words for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' or 'secondary' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":80},"description":{"maxLength":140},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Mosaic business/operations images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson\", alt: \"Project 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg\", alt: \"Project 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q\", alt: \"Project 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz\", alt: \"Project 4\" },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"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,"maxItems":2,"pinnedValues":{"0.variant":"default"}},"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":true,"count":4,"minItems":4,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Animated agency/portfolio project images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"maxLength":130},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Creative solutions for modern brands","description":"Discover a platform that empowers you to create and achieve amazing results.","images":[{"src":"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov","alt":"Project 1"},{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","alt":"Project 2"},{"src":"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82","alt":"Project 3"},{"src":"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn","alt":"Project 4"}],"actions":[{"label":"View Our Work","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","agency","animated","images","creative","dynamic","transitions","portfolio"],"performance":{},"importantUsageNotes":"Use exactly 4 images. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"images":{"required":true,"count":4,"minItems":4,"maxItems":4},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Animated agency/portfolio project images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/9z0sbfnskx70vse99e3dfhper7i1\", alt: \"Feature 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\", alt: \"Feature 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8\", alt: \"Feature 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\", 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":true,"maxLength":50},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2},"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":true,"count":4,"minItems":4,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Asymmetric layout images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Where innovation meets creativity","description":"Discover a platform that empowers you to create and collaborate.","images":[{"src":"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t","alt":"Feature 1"},{"src":"https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j","alt":"Feature 2"},{"src":"https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson","alt":"Feature 3"},{"src":"https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg","alt":"Feature 4"}],"background":"dark","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Learn More","href":"#","variant":"link"}]},"dependencies":["@opensite/ui"],"tags":["hero","welcome","asymmetric","images","friendly","staggered","modern","landing"],"performance":{},"importantUsageNotes":"Supply exactly 4 images for the asymmetric layout. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'link' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"images":{"required":true,"count":4,"minItems":4,"maxItems":4},"actions":{"maxItems":2}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Asymmetric layout images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        title: \"OpenSite\",\n        subtitle: \"Intelligent Automation\",\n      }}\n      imageSrc={\"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\"}\n      avatars={[\n        { src: \"https://toastability-production.s3.amazonaws.com/cyhcpla6me8vs936i3fw6wbhypi2\", alt: \"Avatar 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\", alt: \"Avatar 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/y1aezpa78m2fhfvj8whcx337y9cb\", 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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"minItems":2,"maxItems":5,"mediaHints":{"path":"avatars[]","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Social proof member avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Main hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"badgeCard.logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional badge card logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badge":"We're Launching","heading":"The future of startups starts here","description":"Join the waitlist for early access to the platform changing how startups scale.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","background":"dark","actions":[{"label":"Join Waitlist","href":"#","variant":"default"},{"label":"Learn More","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","startup","launch","cta","badge","avatars","growth","funding"],"performance":{},"importantUsageNotes":"Requires a real 'imageSrc'. Only supply real 'socialProofText' — do not fabricate member counts. Supply 3-5 avatars. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"avatars":{"minItems":2,"maxItems":5},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Main hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"avatars[]":{"path":"avatars[]","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Social proof member avatars. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"badgeCard.logoSrc":{"path":"badgeCard.logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional badge card logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"count":3,"minItems":2,"maxItems":4},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badge":"Enterprise Grade","heading":"Security you can trust","description":"Protect your business with enterprise-grade security features. SOC 2 compliant.","features":[{"title":"256-bit Encryption","description":"Military-grade protection","href":"#"},{"title":"SOC 2 Certified","description":"Independently audited","href":"#"},{"title":"24/7 Monitoring","description":"Always watching for threats","href":"#"}],"actions":[{"label":"View Security","href":"#","variant":"default"},{"label":"Contact Sales","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","enterprise","security","features","trust","compliance","badges","b2b"],"performance":{},"importantUsageNotes":"Supply exactly 3 'features' objects. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.","usageRequirements":{"requiredProps":["heading","features"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"features":{"required":true,"count":3,"minItems":2,"maxItems":4},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{}}},{"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/308461/60rkj6aj9hjsuiqwdioqfdzzrrbi/hero-creative-studio-stacked-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308462/wh7etgs81760f7w8f86vfjy80fcl/hero-creative-studio-stacked-mobile.jpg"},"componentPath":"blocks/hero/hero-creative-studio-stacked.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\",\n        alt: \"Brand Logo\",\n      }}\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:\n          \"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1\",\n        title: \"See how it works\",\n      }}\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/vvucxqs128w2d0z3n4s2z131rq7p\",\n          alt: \"Project 1\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\n          alt: \"Project 2\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          alt: \"Project 3\",\n        },\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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":1},"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__default.ComponentPropsWithoutRef","required":false},"video":{"type":"object","description":"Video configuration using","typeLabel":"React__default.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,"mediaHints":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Stacked creative portfolio images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Where creativity meets innovation","description":"Award-winning creative studio specializing in brand identity and digital experiences.","videoAction":{"label":"Watch Demo","variant":"default"},"images":[{"src":"https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q","alt":"Project 1"},{"src":"https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz","alt":"Project 2"},{"src":"https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs","alt":"Project 3"}],"modalVideo":{"video":{"masterPlaylistUrl":"https://cdn.ing/assets/video/uploads/283393/hls/38865/master.m3u8","fallbackSrc":"https://toastability-production.s3.amazonaws.com/4kox2ux0ye1wlqkdwg03s08a67i1"}},"background":"dark","actions":[{"label":"Learn More","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","creative","studio","stacked","images","video","design","agency"],"performance":{},"importantUsageNotes":"Only use if you have a 'modalVideo' with a real video — also supply a 'videoAction'. Use at most 1 action in the 'actions' array. Supply exactly 3 images. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"images":{"required":true,"count":3,"minItems":3,"maxItems":3},"actions":{"maxItems":1}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Stacked creative portfolio images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"modalVideo.video":{"path":"modalVideo.video","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"note":"VIDEO MEDIA ONLY. Must be an HLS playlist or MP4 URL, not an image URL."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg\"}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Digital experiences that inspire","description":"Full-service digital agency creating award-winning websites and brand experiences.","backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","actions":[{"label":"View Our Work","href":"/work","variant":"default"},{"label":"Start Project","href":"/contact","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","digital","agency","fullscreen","background","location","immersive","creative"],"performance":{},"importantUsageNotes":"Requires a real 'backgroundImage'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","backgroundImage"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"backgroundImage":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["hero","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Full-bleed background image. Use a large, high-quality landscape photo."}},"requiresSiteCapabilities":["media_library"]}},{"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/308463/z9o41ngrycs7cwgkwegm1xd36qn8/hero-customer-support-layered-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308464/wvpr490jmwnrrjodlgu31rf1q3ub/hero-customer-support-layered-mobile.jpg"},"componentPath":"blocks/hero/hero-customer-support-layered.tsx","code":"import { 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      logo={{\n        src: \"https://cdn.ing/assets/i/r/288966/0ls9to9jqnrc4gcxty9rx2c4udjv/ui-placeholder-logo-white-2.png\",\n        alt: \"Brand Logo\",\n      }}\n      images={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n          alt: \"Support interface 1\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\n          alt: \"Support interface 2\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\",\n          alt: \"Support interface 3\",\n        },\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,"maxLength":20},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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":true,"count":3,"minItems":3,"maxItems":3,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Layered product/UI screenshots. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Support that your customers love","description":"Deliver exceptional customer experiences with our multi-channel support platform.","tagline":"Customer Support","images":[{"src":"https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0","alt":"Support interface 1"},{"src":"https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x","alt":"Support interface 2"},{"src":"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc","alt":"Support interface 3"}],"actions":[{"label":"Browse Marketplace","href":"#","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","customer","support","layered","helpdesk","service","dashboard","saas"],"performance":{},"importantUsageNotes":"Supply exactly 3 images for the layered layout. Do not exceed 20 characters for 'tagline'. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"tagline":{"maxLength":20},"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"images":{"required":true,"count":3,"minItems":3,"maxItems":3}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Layered product/UI screenshots. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v\",\n          alt: \"Shared inbox background\",\n        },\n        foregroundImage: {\n          src: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":140},"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":true,"mediaHints":{"path":"layeredImages.foregroundImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Foreground overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"maxItems":2},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"eyebrow":"Team Inbox","heading":"Collaborate on every customer conversation","description":"Shared inbox that brings your team together.","layeredImages":{"backgroundImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Inbox background"},"foregroundImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Inbox foreground"}},"background":"dark","actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Learn More","href":"#","variant":"ghost"}]},"dependencies":["@opensite/ui"],"tags":["hero","shared","inbox","layered","email","collaboration","team","communication"],"performance":{},"importantUsageNotes":"Requires both 'layeredImages.backgroundImage' and 'layeredImages.foregroundImage'. Do not exceed 50 characters for 'heading'. Do not exceed 140 characters for 'description'. If you supply multiple 'actions', use 'default' for the first.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","layeredImages"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":140},"layeredImages":{"required":true},"actions":{"maxItems":2}},"mediaSlots":{"layeredImages.backgroundImage.src":{"path":"layeredImages.backgroundImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Background layer image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"layeredImages.foregroundImage.src":{"path":"layeredImages.foregroundImage.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Foreground overlay image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/dashboard image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"headingPrimary":"Unlock insights from","description":"Analyze calls, meetings, and customer interactions with advanced AI.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Intelligence dashboard"},"background":"dark","actions":[{"label":"Start Analyzing","href":"#","variant":"default"},{"label":"Watch Demo","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","conversation","intelligence","sales","ai","analytics","gradient","saas"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for 'headingPrimary'. Do not exceed 130 characters for 'description'. Requires a real 'image'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["headingPrimary","image"],"propConstraints":{"headingPrimary":{"required":true,"maxLength":40},"description":{"maxLength":130},"image":{"required":true},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Main product/dashboard image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l\", alt: \"Business feature 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\", alt: \"Business feature 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq\", 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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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":true,"minItems":3,"maxItems":6,"mediaHints":{"path":"carouselImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Carousel slide images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Business solutions that scale with you","description":"From startups to enterprises, our platform grows alongside your business.","carouselImages":[{"src":"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v","alt":"Feature 1"},{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Feature 2"},{"src":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm","alt":"Feature 3"}],"actions":[{"label":"Get Started","href":"#","variant":"default"},{"label":"Book Demo","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","business","carousel","dots","navigation","premium","professional","enterprise"],"performance":{},"importantUsageNotes":"Supply at least 3 images for the carousel. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","carouselImages"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"carouselImages":{"required":true,"minItems":3,"maxItems":6},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"carouselImages[]":{"path":"carouselImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Carousel slide images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"minItems":2,"maxItems":10},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"For Developers","heading":"Developer tools that just work","description":"Build faster with modern APIs and comprehensive docs.","terminalTitle":"quickstart.tsx","terminalLines":[{"text":"import { Hero } from '@opensite/ui';","colorClass":"text-blue-400"},{"text":"export default function Page() {","colorClass":"text-purple-400"},{"text":"  return <Hero heading='Hello World' />;","colorClass":"text-green-400"},{"text":"}","colorClass":"text-purple-400"}],"background":"dark","actions":[{"label":"Read Docs","href":"#","variant":"default"},{"label":"View GitHub","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","developer","tools","code","terminal","cli","programming","technical"],"performance":{},"importantUsageNotes":"Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Customize 'terminalLines' with real code relevant to the product. If you supply multiple 'actions', use 'default' for the first and 'outline' for the second. This is a code/text hero — no images required.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"terminalLines":{"minItems":2,"maxItems":10}},"mediaSlots":{}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht\", alt: \"Product 1\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8\", alt: \"Product 2\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\", alt: \"Product 3\" },\n        { src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\", 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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"minItems":2,"maxItems":4},"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":true,"count":4,"minItems":3,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Product showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badgeText":"New Collection","heading":"Premium products for modern living","description":"Discover our curated collection of handpicked items.","images":[{"src":"https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v","alt":"Product 1"},{"src":"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc","alt":"Product 2"},{"src":"https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt","alt":"Product 3"},{"src":"https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov","alt":"Product 4"}],"stats":[{"value":"500+","label":"Products"},{"value":"50K+","label":"Customers"},{"value":"98%","label":"Satisfaction"}],"actions":[{"label":"Shop Now","href":"#","variant":"default"},{"label":"View Lookbook","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","ecommerce","product","showcase","shopping","retail","collection","store"],"performance":{},"importantUsageNotes":"Supply exactly 4 product images. Supply 2-3 stats. Only supply real stats — do not fabricate. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","images"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"images":{"required":true,"count":4,"minItems":3,"maxItems":4},"stats":{"minItems":2,"maxItems":4,"note":"Must be real stats. Do not fabricate."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Product showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","products","stats_or_metrics"]}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\", 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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Mobile app screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badgeText":"Now on Mobile","badgeIcon":"lucide/smartphone","heading":"Take us with you, everywhere","description":"Download our mobile app and access all your favorite features on the go.","storeActions":[{"href":"#","label":"Download on the","storePrefix":"Download on the","storeName":"App Store","storeIcon":"cib/apple"},{"href":"#","label":"Get it on","storePrefix":"Get it on","storeName":"Google Play","storeIcon":"cib/google"}],"ratingValue":"4.9","ratingLabel":"from 50K+ reviews","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"App screenshot"}},"dependencies":["@opensite/ui"],"tags":["hero","mobile","app","download","ios","android","phone","ratings"],"performance":{},"importantUsageNotes":"Requires a real app screenshot ('image'). Only supply real 'ratingValue'/'ratingLabel' — do not fabricate review counts. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","image"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"image":{"required":true},"ratingValue":{"note":"Must be a real rating. Do not fabricate."}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Mobile app screenshot. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}},{"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":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"minItems":1,"maxItems":3},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"heading":"Stay in the loop","description":"Get weekly insights delivered straight to your inbox.","buttonAction":{"label":"Subscribe","variant":"default"},"background":"dark"},"dependencies":["@opensite/ui"],"tags":["hero","newsletter","minimal","signup","email","subscription","clean","focused"],"performance":{},"importantUsageNotes":"Ensure 'formEngineSetup' is properly configured with a newsletter contact form. Only supply real stats — do not fabricate subscriber counts. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"stats":{"minItems":1,"maxItems":3,"note":"Must be real stats. Do not fabricate."}},"mediaSlots":{},"requiresSiteCapabilities":["contact_form"]}},{"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,"maxLength":20},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":true,"maxLength":40},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"countdownDate":{"type":"object","description":"Target date for the countdown. If in the past or not provided, countdown is hidden.","typeLabel":"Date","required":true},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"badgeIcon":"lucide/rocket","badgeText":"Launching Soon","heading":"Something amazing is on the way","description":"Be the first to know when we launch.","buttonAction":{"label":"Notify Me","variant":"default"},"successMessage":"Thank you! We'll notify you as soon as we launch.","helperText":"We respect your privacy. Unsubscribe anytime.","background":"gray"},"dependencies":["@opensite/ui"],"tags":["hero","coming-soon","countdown","launch","timer","dark","teaser","anticipation"],"performance":{},"importantUsageNotes":"Only use if you have a valid real date for 'countdownDate'. Only supply 'socialLinks' that are valid — DO NOT MAKE UP, USE PLACEHOLDERS OR GUESS ANY SOCIAL LINKS. Do not exceed 20 characters for 'badgeText'. Do not exceed 40 characters for 'heading'. Do not exceed 130 characters for 'description'. Ensure 'formConfig' and 'formFields' are wired up for email capture.","usageRequirements":{"requiredProps":["heading","countdownDate"],"propConstraints":{"badgeText":{"maxLength":20},"heading":{"required":true,"maxLength":40},"description":{"maxLength":130},"countdownDate":{"required":true,"note":"Must be a real, future date. Do not fabricate."},"socialLinks":{"note":"Only include real, verified social links. Do not guess or use placeholders."}},"mediaSlots":{}}},{"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 { 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={{\n        src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\n        alt: \"Event venue\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/288967/cn6z89c4c23ubohkz6kv3npdn672/ui-placeholder-logo-white-5.png\",\n        alt: \"Event venue\",\n      }}\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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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,"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}},"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,"minItems":1,"maxItems":4},"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,"mediaHints":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Event venue or speaker image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":"Brand logo configuration — renders centered above the heading.\nLOGO MEDIA ONLY. Do not use photos, hero images, or video assets.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional event or sponsor logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Brand Logo"},"badgeText":"Annual Conference","badgeIcon":"lucide/calendar","heading":"Join us for the event of the year","description":"Three days of inspiring talks, workshops, and networking.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Event venue"},"locationLabel":"San Francisco, CA","locationSublabel":"September 15-17, 2026","background":"dark","actions":[{"label":"Register Now","href":"#","variant":"default"},{"label":"View Agenda","href":"#","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["hero","event","registration","conference","workshop","speakers","venue","date"],"performance":{},"importantUsageNotes":"Only use if you have real event details. Only supply real stats and location data — do not fabricate. Requires a real 'image'. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"stats":{"minItems":1,"maxItems":4,"note":"Must be real event stats. Do not fabricate."},"locationLabel":{"note":"Must be a real location. Do not fabricate."},"actions":{"maxItems":2,"pinnedValues":{"0.variant":"default","1.variant":"outline"}}},"mediaSlots":{"image.src":{"path":"image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Event venue or speaker image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logo.src":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Optional event or sponsor logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","events","stats_or_metrics"]}},{"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/308449/ldfi96gy3xu9xqtz8q18jcwzxuke/hero-portfolio-creative-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308450/0v9cv77yeh41svpnxeqml5eyz18x/hero-portfolio-creative-mobile.jpg"},"componentPath":"blocks/hero/hero-portfolio-creative.tsx","code":"import { 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        {\n          src: \"https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo\",\n          alt: \"Brand Identity Project\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc\",\n          alt: \"Web Design Project\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          alt: \"Mobile App Project\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\n          alt: \"Mobile App Project\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"View All Work\",\n          href: \"#\",\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,"mediaHints":{"path":"profile.avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Optional creator/agency profile avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"maxLength":50},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":130},"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":true,"count":4,"minItems":3,"maxItems":5,"mediaHints":{"path":"portfolioImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Creative portfolio/project images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"logo":{"type":"object","description":"Brand logo configuration. LOGO MEDIA ONLY — do not use photos or hero images.","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for logo (overrides logo prop)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo"},"heading":"Creative work that stands out","description":"Award-winning portfolio showcasing our best projects in design and branding.","portfolioImages":[{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","alt":"Portfolio project 1"},{"src":"https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82","alt":"Portfolio project 2"},{"src":"https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn","alt":"Portfolio project 3"},{"src":"https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t","alt":"Portfolio project 4"}],"actions":[{"label":"View All Work","href":"/portfolio","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["hero","portfolio","creative","profile","projects","personal","designer","freelancer"],"performance":{},"importantUsageNotes":"Supply exactly 4 portfolio images. Do not exceed 50 characters for 'heading'. Do not exceed 130 characters for 'description'.  All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","usageRequirements":{"requiredProps":["heading","portfolioImages"],"propConstraints":{"heading":{"required":true,"maxLength":50},"description":{"maxLength":130},"portfolioImages":{"required":true,"count":4,"minItems":3,"maxItems":5}},"mediaSlots":{"portfolioImages[]":{"path":"portfolioImages[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"note":"Creative portfolio/project images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"profile.avatar.src":{"path":"profile.avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Optional creator/agency profile avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"]}}]},"timestamp":"2026-06-27T18:47:36.873Z"}