{"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/308377/gtnsoic5lors0w6cxl11v6qbhkrk/about-stats-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308378/v95pf96xh0ybe4zpqsbdnxfayrsj/about-stats-showcase-mobile.jpg"},"componentPath":"blocks/about/about-stats-showcase.tsx","code":"import { 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: \"https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv\",\n          alt: \"Team collaboration\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm\",\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: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n          alt: \"Partner logo\",\n          name: \"Acme\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288966/0ls9to9jqnrc4gcxty9rx2c4udjv/ui-placeholder-logo-white-2.png\",\n          alt: \"Partner logo\",\n          name: \"Initech\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288971/sow5o2s8dp1cr159rxexm0yhov5w/ui-placeholder-logo-white-3.png\",\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: \"https://cdn.ing/assets/i/r/289100/qx79hnpbzbm229nfaeceafv6b3a8/cooking-citrus-and-pistachio-bundt-cake-on-rusty-t-2024-10-18-04-31-33-utc.webp\",\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":true,"maxLength":70},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":false,"maxLength":180},"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,"minItems":2,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"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},"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,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Trusted company 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},"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,"maxItems":3,"mediaHints":{"path":"benefits[].testimonial.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Logo shown inside testimonial card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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},"benefits[].testimonial":{"type":"object","description":""}},"exampleProps":{"title":"Our Background","description":"We help teams launch reliable digital experiences at scale.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team workspace"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Planning session"}],"stats":[{"value":"21M","label":"Audience reach"},{"value":"12+","label":"Years of expertise"}],"benefits":[{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer operations team"},"stat":{"value":"98%","label":"Retention","description":"Measured across supported accounts"}}]},"dependencies":["@opensite/ui"],"tags":["about","stats","statistics","metrics","logos","testimonials","benefits","social-proof","achievements"],"performance":{},"importantUsageNotes":"Only use when metrics, social proof, and any testimonial-style content are sourced. Do not fabricate stats, company logos, testimonial quotes, authors, or roles. Image props must use absolute image URLs and must not receive video assets.","usageRequirements":{"requiredProps":["title","stats"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"images":{"minItems":2,"maxItems":4},"stats":{"required":true,"minItems":2,"maxItems":4,"note":"Metrics must be sourced from the site or client data."},"logos":{"maxItems":8,"note":"Only include real customer or partner logos."},"benefits":{"maxItems":3},"benefits[].testimonial":{"note":"Must be a real testimonial. Do not fabricate."}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero showcase images. 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":"Trusted company logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"benefits[].image":{"path":"benefits[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Benefit card image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"benefits[].testimonial.logo":{"path":"benefits[].testimonial.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Logo shown inside testimonial card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","reviews_or_testimonials","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:11:03.839Z"}