{"success":true,"data":{"block":{"id":"about-stats-sidebar","name":"About Stats Sidebar","title":"About Stats Sidebar","category":"About","categorySlug":"about","description":"A stats-focused about section with sticky sidebar title/description, stats grid with icons, and feature list. Perfect for showcasing company metrics and key differentiators in a scannable, organized layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308359/544ge3aeqk84yy7uem3hoxnq07id/about-stats-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308360/l3bwen6665y1y6ezcolbgvyke6cc/about-stats-sidebar-mobile.jpg"},"componentPath":"blocks/about/about-stats-sidebar.tsx","code":"import { AboutStatsSidebar } from \"@opensite/ui/blocks/about/about-stats-sidebar\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutStatsSidebar\n      title=\"Our Impact in Numbers\"\n      description=\"We let our results speak for themselves. Here's a snapshot of what we've achieved together with our clients.\"\n      stats={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/briefcase\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"500+\",\n          label: \"Projects Completed\",\n          description: \"Across diverse industries and scales\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"50M+\",\n          label: \"Users Reached\",\n          description: \"Through the products we've built\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/star\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"98%\",\n          label: \"Client Satisfaction\",\n          description: \"Based on post-project surveys\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/globe\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"30+\",\n          label: \"Countries Served\",\n          description: \"Global reach, local understanding\",\n        },\n      ]}\n      features={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/clock\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Fast Turnaround\",\n          description:\n            \"Average project completion 40% faster than industry standard.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/shield-check\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Quality Guaranteed\",\n          description: \"Every project backed by our satisfaction guarantee.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/headphones\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Dedicated Support\",\n          description: \"24/7 support available for all enterprise clients.\",\n        },\n      ]}\n      patternOpacity={0.15}\n      pattern=\"diagonalCrossFadeTop\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false,"maxLength":180},"stats":{"type":"array","description":"Array of stat configurations","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},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ExtendedStatItem"},"typeLabel":"ExtendedStatItem[]","required":true,"minItems":2,"maxItems":6},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false,"minItems":2,"maxItems":4},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","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":"Why Choose Us","description":"We have built a platform that scales with your operational needs.","stats":[{"icon":"lucide/users","value":"10M+","label":"Visitors supported"},{"icon":"lucide/globe","value":"150+","label":"Markets served"}],"features":[{"icon":"lucide/zap","title":"Fast launch cycles","description":"Teams publish updates without waiting on engineering."},{"icon":"lucide/lock","title":"Managed consistency","description":"Shared blocks keep every page aligned."}]},"dependencies":["@opensite/ui"],"tags":["about","stats","sidebar","metrics","features","icons","sticky","organized"],"performance":{},"importantUsageNotes":"Use only when stats are real and source-backed. Do not invent large numbers, geographic reach, or performance claims. Feature cards should explain the metrics rather than introduce unrelated benefits.","usageRequirements":{"requiredProps":["title","stats"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"stats":{"required":true,"minItems":2,"maxItems":6,"note":"Stats must be sourced."},"features":{"minItems":2,"maxItems":4}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"],"notes":["Do not fabricate metrics or quantified claims."]}}},"timestamp":"2026-06-27T20:10:52.903Z"}