{"success":true,"data":{"block":{"id":"about-mission-dual-image","name":"About Mission Media Split","title":"About Mission Dual Image","category":"About","categorySlug":"about","description":"A mission/vision section with content and CTA buttons beside a responsive image or video panel. Ideal for companies that want focused messaging with flexible visual media.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/314972/fq6d9oea9gqr3pd2xjyrrwdau9ii/about-mission-dual-image-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/314973/l0v0cqu788cvrgu8nkdlgxv6xta5/about-mission-dual-image-mobile.jpg"},"componentPath":"blocks/about/about-mission-dual-image.tsx","code":"import { AboutMissionDualImage } from \"@opensite/ui/blocks/about/about-mission-dual-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionDualImage\n      missionTitle=\"Our Mission\"\n      missionContent=\"To democratize access to powerful technology by creating intuitive tools that help businesses of all sizes compete and thrive in the digital economy.\"\n      visionTitle=\"Our Vision\"\n      visionContent=\"A world where every entrepreneur and organization has the digital capabilities they need to bring their ideas to life and make a meaningful impact.\"\n      mediaItem={{\n        image: {\n          src: \"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp\",\n          alt: \"Team mission planning\",\n        },\n      }}\n      actions={[\n        {\n          label: \"Learn Our Story\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Meet the Team\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n          iconAfter: <DynamicIcon name=\"lucide/users\" size={16} />,\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={0.33}\n    />\n  );\n}","propsSchema":{"missionTitle":{"type":"object","description":"Mission section title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"missionContent":{"type":"object","description":"Mission section content","typeLabel":"React.ReactNode","required":true,"maxLength":240},"visionTitle":{"type":"object","description":"Vision section title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"visionContent":{"type":"object","description":"Vision section content","typeLabel":"React.ReactNode","required":true,"maxLength":240},"mediaItem":{"type":"object","description":"Dynamic media configuration for an image or video.\nVideo takes priority when both are provided.","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.video.src","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"required":false,"note":"Mission/vision media video. VIDEO MEDIA ONLY. Supply a directly playable video URL."}},"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},"primaryImage":{"type":"object","description":"Primary image configuration.","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"secondaryImage":{"type":"object","description":"Secondary image configuration.","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","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\"","enum":["default","destructive","outline","secondary","ghost","link"],"required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","enum":["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 | string","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode | string","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},"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},"missionTitleClassName":{"type":"string","description":"Additional CSS classes for the mission title","required":false},"missionContentClassName":{"type":"string","description":"Additional CSS classes for the mission content","required":false},"visionTitleClassName":{"type":"string","description":"Additional CSS classes for the vision title","required":false},"visionContentClassName":{"type":"string","description":"Additional CSS classes for the vision content","required":false},"primaryImageClassName":{"type":"string","description":"Additional CSS classes for the primary image.","required":false},"secondaryImageClassName":{"type":"string","description":"Additional CSS classes for the secondary 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},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","enum":["default","white","gray","dark","gradient","primary","secondary","transparent","muted"],"required":false},"spacing":{"type":"string","description":"Section spacing variant","typeLabel":"SectionSpacing","enum":["none","sm","md","lg","xl","hero"],"required":false},"pattern":{"type":"string","description":"Pattern background key or URL","typeLabel":"PatternName","enum":["squareAltGrid","grid1","noise","dotPattern","dotPattern2","circles","waves","crossPattern","architect","tinyCheckers","p6","dots","circuitBoardBasic","circuitBoardFadeTop","circuitBoardFadeBottom","circuitBoardFadeCenter","circuitBoardFadeTopLeft","circuitBoardFadeTopRight","circuitBoardFadeBottomLeft","circuitBoardFadeBottomRight","dashedGridBasic","dashedGridFadeTop","dashedGridFadeBottom","dashedGridFadeCenter","dashedGridFadeTopLeft","dashedGridFadeTopRight","dashedGridFadeBottomLeft","dashedGridFadeBottomRight","diagonalCrossBasic","diagonalCrossFadeTop","diagonalCrossFadeBottom","diagonalCrossFadeCenter","diagonalCrossFadeTopLeft","diagonalCrossFadeTopRight","diagonalCrossFadeBottomLeft","diagonalCrossFadeBottomRight","gridBasic","gridFadeTop","gridFadeBottom","gridFadeCenter","gridFadeTopLeft","gridFadeTopRight","gridFadeBottomLeft","gridFadeBottomRight","gridDotsBasic","gridDotsFadeCenter","gradientGlowTop","gradientGlowBottom","spotlightLeft","spotlightRight","radialGradientTop","radialGradientBottom"],"required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"missionTitle":"Our Mission","missionContent":"To make professional digital operations easier for every growing team.","visionTitle":"Our Vision","visionContent":"A world where every business can keep its customer experience current.","mediaItem":{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team mission planning"}},"actions":[{"label":"Join Our Journey","href":"/careers","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["about","mission","vision","media","image","video","cta","two-column","responsive","visual"],"performance":{},"importantUsageNotes":"`mediaItem` accepts either `image` or `video`; video takes priority when both are provided. Supply `mediaItem.image.src` or `mediaItem.video.src` as an absolute URL to a real hosted asset. The default media crop is square on desktop and horizontal (16:9) on mobile, and `mediaAspectRatios` can override either viewport. Use when both mission and vision copy are available, and keep each content block specific. `primaryImage` and `secondaryImage` are deprecated runtime compatibility props — never author them for new pages.","usageRequirements":{"requiredProps":["missionTitle","missionContent","visionTitle","visionContent","mediaItem"],"propConstraints":{"missionTitle":{"required":true,"maxLength":70},"missionContent":{"required":true,"maxLength":240},"visionTitle":{"required":true,"maxLength":70},"visionContent":{"required":true,"maxLength":240},"mediaItem":{"required":true,"note":"Provide an image or video object. Do not use deprecated primaryImage or secondaryImage."},"actions":{"maxItems":2}},"mediaSlots":{"mediaItem.image.src":{"path":"mediaItem.image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"preferredAspect":"1:1","note":"Mission/vision media image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"mediaItem.video.src":{"path":"mediaItem.video.src","roles":[],"disallowedRoles":["logo","favicon","hero","feature","profile","thumbnail"],"required":false,"note":"Mission/vision media video. VIDEO MEDIA ONLY. Supply a directly playable video URL."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Use mediaItem for all new pages. primaryImage and secondaryImage remain runtime-only fallbacks for existing sites and must not be generated."]}}},"timestamp":"2026-08-27T08:43:37.900Z"}