{"success":true,"data":{"block":{"id":"about-split-hero","name":"About Split Hero","title":"About Split Hero","category":"About","categorySlug":"about","description":"A split-screen hero section with dark theme styling, featuring text content on the left and a large image on the right. Includes brand text with gradient highlight, prominent heading, description, and CTA button. Best for premium/pro tier landing pages, product launches, and upgrade prompts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308371/19ro2prdvrjhcwr1kco04stp3te0/about-split-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308372/5z40ed3k4y7j9bhm74q7jbnr5hqv/about-split-hero-mobile.jpg"},"componentPath":"blocks/about/about-split-hero.tsx","code":"import { AboutSplitHero } from \"@opensite/ui/blocks/about/about-split-hero\";\n\nexport default function Demo() {\n  return (\n    <AboutSplitHero\n      brandText=\"Enterprise\"\n      brandHighlight=\"PRO\"\n      heading=\"Achieve More with Elite Access Pro\"\n      description=\"Enhance your business growth with increased visibility, advanced analytics, and priority support that scales with your success.\"\n      ctaAction={{\n        label: \"Upgrade to Premium\",\n        href: \"#\",\n        variant: \"default\",\n        size: \"lg\",\n      }}\n      imageSrc={\"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\"}\n      imageAlt=\"Enterprise team collaboration\"\n      background=\"dark\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.15}\n      directionConfig={{\n        desktop: \"mediaLeft\",\n        mobile: \"mediaBottom\",\n      }}\n    />\n  );\n}","propsSchema":{"brandText":{"type":"object","description":"Brand/logo text","typeLabel":"React$1.ReactNode","required":false,"maxLength":30},"brandTextClassName":{"type":"string","description":"Additional CSS classes for the brand text","required":false},"brandHighlight":{"type":"object","description":"Highlighted brand text (e.g., \"PRO\")","typeLabel":"React$1.ReactNode","required":false,"maxLength":20},"brandHighlightClassName":{"type":"string","description":"Additional CSS classes for the brand highlight","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React$1.ReactNode","required":true,"maxLength":70},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React$1.ReactNode","required":true,"maxLength":180},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"ctaAction":{"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},"ctaSlot":{"type":"object","description":"Custom slot for rendering CTA (overrides ctaAction)","typeLabel":"React$1.ReactNode","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":true,"mediaHints":{"path":"imageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Split hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"imageAlt":{"type":"string","description":"Image alt text","required":true,"maxLength":120},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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":"Section background variant","typeLabel":"SectionBackground","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","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":{"brandText":"Business","brandHighlight":"PRO","heading":"Achieve More with Elite Access","description":"Give your team a polished about experience with clear positioning and a strong visual.","ctaAction":{"label":"Upgrade to premium","href":"/upgrade","variant":"default"},"imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Premium team workspace"},"dependencies":["@opensite/ui"],"tags":["about","hero","split","dark-theme","premium","upgrade","cta","brand","landing"],"performance":{},"importantUsageNotes":"Use for premium, launch, or upgrade-oriented about hero sections. Use ctaAction, not ctaText or ctaUrl. imageSrc must be an absolute image URL and must not be a logo, favicon, or video asset.","usageRequirements":{"requiredProps":["heading","description","imageSrc"],"propConstraints":{"brandText":{"maxLength":30},"brandHighlight":{"maxLength":20},"heading":{"required":true,"maxLength":70},"description":{"required":true,"maxLength":180},"ctaAction":{"note":"Use ActionConfig with label and href."},"imageSrc":{"required":true},"imageAlt":{"required":true,"maxLength":120}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Split hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T19:52:44.356Z"}