{"success":true,"data":{"block":{"id":"about-story-expertise","name":"Story & Expertise Spotlight","title":"About Story Expertise","category":"About","categorySlug":"about","description":"A two-part about section that pairs a narrative story with CTA buttons alongside a highlighted image card, followed by a grid of expertise tiles. Ideal for trust-building pages that need both brand story and capability proof points.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293115/2ovc61etdk0vhyya9mflrjr6khm1/cleanshot-2026-03-03-at-20-33-09.png","mobile":"https://cdn.ing/assets/i/r/293114/67hpsafnchq1acqvmpex97uwpafl/cleanshot-2026-03-03-at-20-33-29.png"},"componentPath":"blocks/about/about-story-expertise.tsx","code":"import { AboutStoryExpertise } from \"@opensite/ui/blocks/about/about-story-expertise\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStoryExpertise\n      eyebrow=\"Our Story\"\n      heading=\"From Garage Startup to Global Impact\"\n      storyParagraphs={[\n        \"What began as a two-person operation in 2010 has grown into a team of over 200 professionals serving clients across 30 countries.\",\n        \"Our journey hasn't always been smooth. We've faced challenges, made mistakes, and learned invaluable lessons along the way. But through it all, our commitment to our clients and our craft has never wavered.\",\n        \"Today, we're proud to be trusted partners to some of the world's most innovative organizations, helping them navigate digital transformation and achieve their most ambitious goals.\",\n      ]}\n      actions={[\n        {\n          label: \"Read Our Full Story\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Meet the Team\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      image={{\n        src: imagePlaceholders[12],\n        alt: \"Team collaboration\",\n      }}\n      highlight={{\n        icon: \"lucide/award\",\n        label: \"Recognition\",\n        title: \"Top 100 Tech Companies\",\n        description:\n          \"Named among the fastest-growing technology companies for three consecutive years.\",\n      }}\n      expertiseHeading=\"Areas of Expertise\"\n      expertiseDescription=\"We've developed deep expertise across multiple domains, enabling us to tackle complex challenges with confidence.\"\n      expertiseAreas={[\n        {\n          icon: \"lucide/layout\",\n          title: \"Product Design\",\n          description:\n            \"User-centered design that balances aesthetics with functionality.\",\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Engineering\",\n          description:\n            \"Scalable, maintainable code built with modern best practices.\",\n        },\n        {\n          icon: \"lucide/bar-chart\",\n          title: \"Data & Analytics\",\n          description:\n            \"Insights-driven strategies powered by advanced analytics.\",\n        },\n        {\n          icon: \"lucide/cloud\",\n          title: \"Cloud Infrastructure\",\n          description: \"Reliable, secure, and cost-effective cloud solutions.\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label for the story section","typeLabel":"React.ReactNode","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow","required":false},"heading":{"type":"object","description":"Main heading for the story section","typeLabel":"React.ReactNode","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"storyParagraphs":{"type":"array","description":"Story paragraphs displayed in order","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"storySlot":{"type":"object","description":"Custom slot for rendering story content (overrides storyParagraphs)","typeLabel":"React.ReactNode","required":false},"storyClassName":{"type":"string","description":"Additional CSS classes for the story content","required":false},"actions":{"type":"array","description":"Array of action configurations for CTAs","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"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","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","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},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"image":{"type":"object","description":"Feature image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"highlight":{"type":"object","description":"Highlight badge content overlaid on the image","fields":{"icon":{"type":"object","description":"","typeLabel":"React.ReactNode | string","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ icon?: React.ReactNode | string; label?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; }","required":false},"highlightSlot":{"type":"object","description":"Custom slot for rendering highlight (overrides highlight object)","typeLabel":"React.ReactNode","required":false},"highlightClassName":{"type":"string","description":"Additional CSS classes for the highlight","required":false},"expertiseHeading":{"type":"object","description":"Expertise section heading","typeLabel":"React.ReactNode","required":false},"expertiseHeadingClassName":{"type":"string","description":"Additional CSS classes for the expertise heading","required":false},"expertiseDescription":{"type":"object","description":"Expertise section description","typeLabel":"React.ReactNode","required":false},"expertiseDescriptionClassName":{"type":"string","description":"Additional CSS classes for the expertise description","required":false},"expertiseAreas":{"type":"array","description":"Expertise area cards","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element or icon name","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Expertise title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description","typeLabel":"React.ReactNode","required":false}},"typeLabel":"AboutStoryExpertiseArea"},"typeLabel":"AboutStoryExpertiseArea[]","required":false},"expertiseAreasSlot":{"type":"object","description":"Custom slot for rendering expertise areas (overrides expertiseAreas array)","typeLabel":"React.ReactNode","required":false},"expertiseAreasClassName":{"type":"string","description":"Additional CSS classes for the expertise areas container","required":false},"expertiseSectionClassName":{"type":"string","description":"Additional CSS classes for the expertise section","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","story","expertise","narrative","cta","image","highlight","grid","trust","capabilities"],"performance":{},"importantUsageNotes":"Ensure to only generate 2 or 4 `expertiseAreas` since the expertiseAreas element uses a 2 column layout. Keep the highlight prop's label, title, and description succinct since too long of content will distort the layout. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:45:31.712Z"}