{"success":true,"data":{"block":{"id":"about-mission-features","name":"About Mission Features","title":"About Mission Features","category":"About","categorySlug":"about","description":"A mission-focused about section featuring a hero title, description, main image, mission statement with background image, and a grid of feature cards with icons. Ideal for company about pages that want to highlight their mission and core values.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308391/0f1z0vr7or2j70bpog37l0nnuezy/about-mission-features-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308392/ddedxugvtjkujel2jknda8nui7fw/about-mission-features-mobile.jpg"},"componentPath":"blocks/about/about-mission-features.tsx","code":"import { AboutMissionFeatures } from \"@opensite/ui/blocks/about/about-mission-features\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionFeatures\n      title=\"Transforming Ideas Into Impact\"\n      description=\"We partner with forward-thinking organizations to build digital experiences that drive growth and create lasting value.\"\n      missionLabel=\"Our Mission\"\n      missionText=\"To empower businesses with technology that simplifies complexity, amplifies creativity, and accelerates success in an ever-evolving digital landscape.\"\n      mainImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\n        alt: \"Team working together\",\n      }}\n      missionBackgroundImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\",\n        alt: \"Abstract background\",\n      }}\n      featuresTitle=\"What Sets Us Apart\"\n      featuresDescription=\"Our unique approach combines deep expertise with genuine partnership to deliver exceptional results.\"\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          href: \"#\",\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          href: \"#\",\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          href: \"#\",\n        },\n      ]}\n      pattern=\"p6\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false,"maxLength":180},"missionLabel":{"type":"object","description":"Mission section label","typeLabel":"React.ReactNode","required":false,"maxLength":35},"missionText":{"type":"object","description":"Mission section text","typeLabel":"React.ReactNode","required":true,"maxLength":180},"mainImage":{"type":"object","description":"Main image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":true,"mediaHints":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary about image beside the mission card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"missionBackgroundImage":{"type":"object","description":"Mission background image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":true,"mediaHints":{"path":"missionBackgroundImage","roles":["background","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Background photo behind the mission statement. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"featuresTitle":{"type":"object","description":"Features section title","typeLabel":"React.ReactNode","required":false},"featuresDescription":{"type":"object","description":"Features section description","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature configurations","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":true,"minItems":3,"maxItems":3},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"missionLabelClassName":{"type":"string","description":"Additional CSS classes for the mission label","required":false},"missionTextClassName":{"type":"string","description":"Additional CSS classes for the mission text","required":false},"mainImageClassName":{"type":"string","description":"Additional CSS classes for the main image","required":false},"missionSectionClassName":{"type":"string","description":"Additional CSS classes for the mission section","required":false},"featuresTitleClassName":{"type":"string","description":"Additional CSS classes for the features title","required":false},"featuresDescriptionClassName":{"type":"string","description":"Additional CSS classes for the features description","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},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"title":"About OpenSite","description":"We help service teams turn daily operations into polished digital experiences.","missionLabel":"Our Mission","missionText":"Make professional site building faster, clearer, and easier to maintain.","mainImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team working together in a cafe"},"missionBackgroundImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Workspace background for mission statement"},"features":[{"icon":"lucide/files","title":"Reusable systems","description":"Blocks stay consistent across every page."},{"icon":"lucide/settings","title":"Operational clarity","description":"Teams can update content without redesigning layouts."},{"icon":"lucide/shield","title":"Reliable delivery","description":"Contracts protect AI-generated pages from unsafe content."}]},"dependencies":["@opensite/ui"],"tags":["about","mission","features","values","company","icons","cards","hero","image-grid"],"performance":{},"importantUsageNotes":"Use when a page needs a mission statement plus feature proof points. Supply both image objects when visual impact matters, and keep feature cards limited to short, concrete benefits. Do not use logos, favicons, or video URLs in image props.","usageRequirements":{"requiredProps":["title","missionText","features"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"missionLabel":{"maxLength":35},"missionText":{"required":true,"maxLength":180},"features":{"required":true,"minItems":3,"maxItems":3},"mainImage":{"required":true},"missionBackgroundImage":{"required":true}},"mediaSlots":{"mainImage":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary about image beside the mission card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"missionBackgroundImage":{"path":"missionBackgroundImage","roles":["background","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Background photo behind the mission statement. 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-27T20:11:03.381Z"}