{"success":true,"data":{"block":{"id":"about-developer-story","name":"About Developer Story","title":"About Developer Story","category":"About","categorySlug":"about","description":"A developer-focused about section with hero title, dual CTAs, logo showcase, statistics bar, and a story section with image. Ideal for developer tools, SaaS platforms, and tech companies targeting technical audiences.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290839/in5f3qpizkcnkpxwbpiic1vw8gqg/cleanshot-2026-02-25-at-04-59-13.png","mobile":"https://cdn.ing/assets/i/r/290838/zj14vxefyand4fs2ksymtk70oxhz/cleanshot-2026-02-25-at-04-58-56.png"},"componentPath":"blocks/about/about-developer-story.tsx","code":"import { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\nimport { AboutDeveloperStory } from \"@opensite/ui/blocks/about/about-developer-story\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutDeveloperStory\n      title=\"From Curiosity to Craft\"\n      description=\"My journey into software development began with a simple question: 'How does this work?' That curiosity has driven me through 15 years of building, breaking, and rebuilding digital experiences that matter.\"\n      storyTitle=\"The Path Forward\"\n      storyContent=\"What started as tinkering with HTML in my teenage years evolved into a deep passion for creating meaningful technology. I've had the privilege of working with startups and Fortune 500 companies alike, learning that the best solutions come from understanding people first and technology second.\"\n      storyImage={{\n        src: imagePlaceholders[12],\n        alt: \"Developer workspace\",\n      }}\n      actions={[\n        {\n          label: \"Read My Blog\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Portfolio\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      logos={[\n        {\n          src: brandLogoPlaceholders.black[0],\n          alt: \"Company logo\",\n        },\n        {\n          src: brandLogoPlaceholders.black[1],\n          alt: \"Company logo\",\n        },\n        {\n          src: brandLogoPlaceholders.black[2],\n          alt: \"Company logo\",\n        },\n      ]}\n      stats={[\n        { value: \"200+\", label: \"Projects Shipped\" },\n        { value: \"15\", label: \"Years Experience\" },\n        { value: \"30+\", label: \"Technologies Mastered\" },\n      ]}\n      pattern=\"p6\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"title":{"type":"object","description":"Main title","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actions":{"type":"array","description":"Array of action configurations","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},"logos":{"type":"array","description":"Array of logo items","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for rendering logos (overrides logos array)","typeLabel":"React.ReactNode","required":false},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos container","required":false},"stats":{"type":"array","description":"Array of stat items","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"storyTitle":{"type":"object","description":"Story section title","typeLabel":"React.ReactNode","required":false},"storyTitleClassName":{"type":"string","description":"Additional CSS classes for the story title","required":false},"storyContent":{"type":"object","description":"Story section content","typeLabel":"React.ReactNode","required":false},"storyContentClassName":{"type":"string","description":"Additional CSS classes for the story content","required":false},"storyImage":{"type":"object","description":"Story image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"storyImageClassName":{"type":"string","description":"Additional CSS classes for the story image","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},"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","developer","story","tech","saas","logos","stats","cta","technical"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 `stats` since the stats showcase is a 3 column layout. Follow the example props closely for this block. Only populate the 'logos' prop if you have actual logos to display, otherwise the layout will be distorted by empty logo placeholders. 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:41:02.044Z"}