{"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/291534/tsmsqzvjndaa64bh3h1f0unc9eiu/cleanshot-2026-02-25-at-19-06-07-2x.png","mobile":"https://cdn.ing/assets/i/r/291533/kqb8f5pjitk3ue35acnhvkrbjkx0/cleanshot-2026-02-25-at-19-06-34-2x.png"},"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[12],\n        alt: \"Team working together\",\n      }}\n      missionBackgroundImage={{\n        src: imagePlaceholders[85],\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":false},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false},"missionLabel":{"type":"object","description":"Mission section label","typeLabel":"React.ReactNode","required":false},"missionText":{"type":"object","description":"Mission section text","typeLabel":"React.ReactNode","required":false},"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":false},"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":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","mission","features","values","company","icons","cards","hero","image-grid"],"performance":{},"importantUsageNotes":"Ensure to generate either 3 or 6 `features` since the features grid is a 3 column layout."}},"timestamp":"2026-05-13T10:41:16.456Z"}