{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[12],\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":false},"subtitle":{"type":"object","description":"Subtitle/tagline text","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Main content/body text","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","story","hero","image","narrative","team","visual","impact"],"performance":{},"importantUsageNotes":"Only populate 'heroImage.src' if you have a real image to use — DO NOT USE PLACEHOLDER IMAGES. Only populate the 'teamInfo' object if you have real team/organization data to display; do not invent team sizes or office counts. Keep the 'content' prop to 2-3 paragraphs of narrative text since excessive content will distort the two-column layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:45:10.494Z"}