{"success":true,"data":{"block":{"id":"about-story-hero","name":"About Story Hero","title":"About Story Hero","category":"About","categorySlug":"about","description":"A story section with hero image, subtitle, title, narrative content, and team info card. Ideal for company story pages that want to combine visual impact with detailed narrative and team highlights.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289001/jacnqg4889w53zpi3fuus6r8auyw/about-story-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289010/t2cumkis3cfumuseghi18kio32g2/about-story-hero-mobile.jpg"},"componentPath":"blocks/about/about-story-hero.tsx","code":"import { AboutStoryHero } from \"@opensite/ui/blocks/about/about-story-hero\";\n\nexport default function Demo() {\n  return (\n    <AboutStoryHero\n      subtitle=\"About Us\"\n      title=\"We Build Digital Experiences That Matter\"\n      content={`Founded in 2010, we've grown from a small team with big dreams into a global force for digital innovation. Our mission has always been simple: create technology that empowers people and transforms businesses.\n\nWe believe that great products come from understanding people first. That's why we invest deeply in research, collaborate closely with our clients, and never stop iterating until we get it right.`}\n      heroImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c\",\n        alt: \"Team working together\",\n      }}\n      teamInfo={{\n        title: \"200+ Team Members\",\n        description:\n          \"Designers, engineers, and strategists working together across 12 global offices.\",\n      }}\n      background=\"gray\"\n      pattern=\"gridBasic\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":80},"subtitle":{"type":"object","description":"Subtitle/tagline text","typeLabel":"React.ReactNode","required":false,"maxLength":120},"content":{"type":"object","description":"Main content/body text","typeLabel":"React.ReactNode","required":true,"maxLength":320},"heroImage":{"type":"object","description":"Hero image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":true,"mediaHints":{"path":"heroImage","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Large story hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"teamInfo":{"type":"object","description":"Team information section","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"{ title: React.ReactNode; description: React.ReactNode; }","required":false},"teamInfoSlot":{"type":"object","description":"Custom slot for rendering team info (overrides teamInfo object)","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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"bodyClassName":{"type":"string","description":"Additional CSS classes for the body content","required":false},"teamInfoClassName":{"type":"string","description":"Additional CSS classes for the team info section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the hero image","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":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"title":"Our Story","subtitle":"Building the future, one practical system at a time","content":"We started with a bold idea: customer-facing sites should be easier to operate after launch.","heroImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team collaborating in a workspace"},"teamInfo":{"title":"50+ Team Members","description":"Working across product, support, and customer operations"}},"dependencies":["@opensite/ui"],"tags":["about","story","hero","image","narrative","team","visual","impact"],"performance":{},"importantUsageNotes":"Use for about-page hero storytelling with a real image and source-backed team information. Do not fabricate team size or geographic claims. heroImage must be an image asset only.","usageRequirements":{"requiredProps":["title","content","heroImage"],"propConstraints":{"title":{"required":true,"maxLength":80},"subtitle":{"maxLength":120},"content":{"required":true,"maxLength":320},"heroImage":{"required":true},"teamInfo":{"note":"Team facts must be source-backed if provided."}},"mediaSlots":{"heroImage":{"path":"heroImage","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Large story hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["team_members","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:16:13.318Z"}