{"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/291536/64j57yikw5ax35wci5ipb9pxung4/cleanshot-2026-02-25-at-22-02-37-2x.png","mobile":"https://cdn.ing/assets/i/r/291535/4z2pacrvobzg28ywxxgp9sjo402q/cleanshot-2026-02-25-at-22-03-07-2x.png"},"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":false},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false},"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":false},"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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","stats","sidebar","metrics","features","icons","sticky","organized"],"performance":{},"importantUsageNotes":"Ensure to only generate 2 or 4 `stats` since the stats element uses a 2 column layout. Only use numerical style strings for each stat 'value' prop, e.g. '1000' or '10K', avoid using longer strings like 'Over 1000 developers' since that will distort the layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:08.871Z"}