{"success":true,"data":{"block":{"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"]}}},"timestamp":"2026-06-27T20:15:48.609Z"}