{"success":true,"data":{"block":{"id":"about-stats-showcase","name":"About Stats Showcase","title":"About Stats Showcase","category":"About","categorySlug":"about","description":"A comprehensive about section featuring a hero with image grid, statistics display, trusted company logos, and benefit cards with testimonials. Perfect for showcasing company achievements, social proof, and key metrics in a visually engaging layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290850/aut1gp6v4g16yvszz8kf88ce0hym/cleanshot-2026-02-25-at-08-16-31.png","mobile":"https://cdn.ing/assets/i/r/290851/e9zsypyn21mlakr7nrtrwfkk64ax/cleanshot-2026-02-25-at-08-16-20.png"},"componentPath":"blocks/about/about-stats-showcase.tsx","code":"import { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\nimport { AboutStatsShowcase } from \"@opensite/ui/blocks/about/about-stats-showcase\";\n\nexport default function Demo() {\n  return (\n    <AboutStatsShowcase\n      title=\"Driving Results That Matter\"\n      description=\"We measure our success by the impact we create for our clients. Here's what the numbers say about our work.\"\n      images={[\n        {\n          src: imagePlaceholders[23],\n          alt: \"Team collaboration\",\n        },\n        {\n          src: imagePlaceholders[33],\n          alt: \"Modern office\",\n        },\n      ]}\n      statsTitle=\"Numbers That Speak for Themselves\"\n      stats={[\n        { value: \"500+\", label: \"Projects Delivered\" },\n        { value: \"98%\", label: \"Client Satisfaction\" },\n        { value: \"50M+\", label: \"Users Impacted\" },\n        { value: \"15+\", label: \"Years of Experience\" },\n        { value: \"200+\", label: \"Team Members\" },\n        { value: \"30+\", label: \"Countries Served\" },\n      ]}\n      logosTitle=\"Trusted by Leading Organizations\"\n      logos={[\n        {\n          src: brandLogoPlaceholders.white[0],\n          alt: \"Partner logo\",\n          name: \"Acme\",\n        },\n        {\n          src: brandLogoPlaceholders.white[2],\n          alt: \"Partner logo\",\n          name: \"Initech\",\n        },\n        {\n          src: brandLogoPlaceholders.white[3],\n          alt: \"Partner logo\",\n          name: \"Umbrella\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      benefitsTitle=\"The Impact We Create\"\n      benefits={[\n        {\n          image: {\n            src: imagePlaceholders[44],\n            alt: \"Growth analytics\",\n          },\n        },\n        {\n          stat: {\n            value: \"312%\",\n            label: \"Average ROI\",\n            description:\n              \"Our clients see significant returns on their technology investments within the first year.\",\n          },\n        },\n        {\n          testimonial: {\n            company: \"TechCorp\",\n            quote:\n              \"Working with this team transformed our digital presence. The results exceeded our expectations.\",\n            author: \"Jennifer Lee\",\n            role: \"Chief Digital Officer\",\n          },\n        },\n      ]}\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},"images":{"type":"array","description":"Array of images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"ShowcaseImageItem"},"typeLabel":"ShowcaseImageItem[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"statsTitle":{"type":"object","description":"Stats section title","typeLabel":"React.ReactNode","required":false},"statsTitleClassName":{"type":"string","description":"Additional CSS classes for the stats title","required":false},"stats":{"type":"array","description":"Array of stats","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ShowcaseStatItem"},"typeLabel":"ShowcaseStatItem[]","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},"logosTitle":{"type":"object","description":"Logos section title","typeLabel":"React.ReactNode","required":false},"logosTitleClassName":{"type":"string","description":"Additional CSS classes for the logos title","required":false},"logos":{"type":"array","description":"Array of logos","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true},"name":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ShowcaseLogoItem"},"typeLabel":"ShowcaseLogoItem[]","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},"benefitsTitle":{"type":"object","description":"Benefits section title","typeLabel":"React.ReactNode","required":false},"benefitsTitleClassName":{"type":"string","description":"Additional CSS classes for the benefits title","required":false},"benefits":{"type":"array","description":"Array of benefits","items":{"type":"object","description":"","fields":{"image":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"stat":{"type":"object","description":"","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ value?: React.ReactNode; label?: React.ReactNode; description?: React.ReactNode; }","required":false},"testimonial":{"type":"object","description":"","fields":{"logo":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"company":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"quote":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"author":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"role":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ logo?: { src: string; alt: string; }; company?: React.ReactNode; quote?: React.ReactNode; author?: React.ReactNode; role?: React.ReactNode; }","required":false}},"typeLabel":"ShowcaseBenefitItem"},"typeLabel":"ShowcaseBenefitItem[]","required":false},"benefitsSlot":{"type":"object","description":"Custom slot for rendering benefits (overrides benefits array)","typeLabel":"React.ReactNode","required":false},"benefitsClassName":{"type":"string","description":"Additional CSS classes for the benefits container","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","stats","statistics","metrics","logos","testimonials","benefits","social-proof","achievements"],"performance":{},"importantUsageNotes":"Ensure to only generate 3 or 6 `stats` since the stats showcase is a 3 column layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:16.648Z"}