{"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/308383/ont62j24mpo5999ndx7l60zqd65v/about-developer-story-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308384/ybokfbcy8kcxzktkdf1mjypuzcup/about-developer-story-mobile.jpg"},"componentPath":"blocks/about/about-developer-story.tsx","code":"import { 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: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\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: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\",\n          alt: \"Company 1\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\",\n          alt: \"Company 2\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\",\n          alt: \"Company 3\",\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":true,"maxLength":80},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":true,"maxLength":190},"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,"maxItems":2},"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,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"minItems":2,"maxItems":4},"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":true,"mediaHints":{"path":"storyImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story section image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"title":"Developer-Focused Solutions for Modern Teams","description":"We build tools that developers and operators can both trust.","actions":[{"label":"Get Started","href":"/contact","variant":"default"},{"label":"View Docs","href":"/docs","variant":"outline"}],"stats":[{"value":"200+","label":"Projects completed"},{"value":"50+","label":"Integrated workflows"}],"storyTitle":"Built from the work itself","storyContent":"Our platform grew from years of solving the same operational problems for real teams.","storyImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Developer workspace"}},"dependencies":["@opensite/ui"],"tags":["about","developer","story","tech","saas","logos","stats","cta","technical"],"performance":{},"importantUsageNotes":"Use for technical about pages with real metrics and a credible product story. Actions must use ActionConfig objects. Any stats or logos must come from sourced site data, and storyImage must be an image asset only.","usageRequirements":{"requiredProps":["title","description","storyImage"],"propConstraints":{"title":{"required":true,"maxLength":80},"description":{"required":true,"maxLength":190},"actions":{"maxItems":2},"stats":{"minItems":2,"maxItems":4,"note":"Stats must be sourced."},"logos":{"maxItems":8,"note":"Only include real customer or partner logos."},"storyImage":{"required":true}},"mediaSlots":{"storyImage":{"path":"storyImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story section image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","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:10:30.685Z"}