{"success":true,"data":{"block":{"id":"stats-bar-comparison","name":"Stats Bar Comparison","title":"Stats Bar Comparison","category":"Stats","categorySlug":"stats","description":"A visual comparison section featuring animated horizontal bar charts that compare platform metrics against industry averages. Each group displays a title and two bars with labels and values. Bars animate from 0 to their target width when scrolled into view. Ideal for competitive analysis, benchmark comparisons, or showcasing platform advantages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288930/pxzc1pdqynjduhm6z3j8eb6irlvg/stats-bar-comparison-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288931/c05qqffxc9bnl0f5tarsidnvpiey/stats-bar-comparison-mobile.jpg"},"componentPath":"blocks/stats/stats-bar-comparison.tsx","code":"import { StatsBarComparison } from \"@opensite/ui/blocks/stats/stats-bar-comparison\";\n\nexport default function Demo() {\n  return (\n    <StatsBarComparison\n      badge=\"Competitive Edge\"\n      heading=\"How We Compare\"\n      description=\"See how our platform outperforms industry benchmarks across key metrics\"\n      comparisons={[\n        {\n          title: \"Revenue Growth\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 89,\n              displayValue: \"$2.4M\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 34,\n              displayValue: \"$920K\",\n            },\n          ],\n        },\n        {\n          title: \"Customer Retention\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 94,\n              displayValue: \"94%\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 67,\n              displayValue: \"67%\",\n            },\n          ],\n        },\n        {\n          title: \"Time to Value\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 85,\n              displayValue: \"2 weeks\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 35,\n              displayValue: \"6 weeks\",\n            },\n          ],\n        },\n        {\n          title: \"Support Response\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 92,\n              displayValue: \"< 1 hour\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 45,\n              displayValue: \"24 hours\",\n            },\n          ],\n        },\n      ]}\n      animate={true}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides badge)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"comparisons":{"type":"array","description":"Array of comparison groups","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title for the comparison group","typeLabel":"React.ReactNode","required":true},"bars":{"type":"array","description":"Bars to compare","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the bar","typeLabel":"React.ReactNode","required":true},"value":{"type":"number","description":"The value (0-100 for percentage width)","required":true},"displayValue":{"type":"object","description":"Display value text (e.g., \"$2.4M\", \"89%\")","typeLabel":"React.ReactNode","required":true},"color":{"type":"string","description":"Color class for the bar (e.g., \"bg-primary\", \"bg-emerald-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the bar","required":false}},"typeLabel":"ComparisonBar"},"typeLabel":"ComparisonBar[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the group","required":false}},"typeLabel":"ComparisonGroup"},"typeLabel":"ComparisonGroup[]","required":false},"comparisonsSlot":{"type":"object","description":"Custom slot for rendering comparisons (overrides comparisons array)","typeLabel":"React.ReactNode","required":false},"animate":{"type":"boolean","description":"Whether to animate bars on scroll","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"comparisonsClassName":{"type":"string","description":"Additional CSS classes for the comparisons container","required":false},"groupCardClassName":{"type":"string","description":"Additional CSS classes for comparison group cards","required":false},"groupTitleClassName":{"type":"string","description":"Additional CSS classes for group titles","required":false},"barLabelClassName":{"type":"string","description":"Additional CSS classes for bar labels","required":false},"barValueClassName":{"type":"string","description":"Additional CSS classes for bar values","required":false},"barTrackClassName":{"type":"string","description":"Additional CSS classes for bar tracks","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","comparison","bars","charts","animated","benchmark","competitive","industry"],"performance":{},"importantUsageNotes":"Supply 3–5 'comparisons' (comparison groups), each containing exactly 2 'bars' (e.g., 'Our Platform' vs. 'Industry Average'). Only use real, verifiable stat values from the system — do not invent revenue figures, retention rates, or benchmark comparisons. Each bar's 'value' (0–100) drives the visual bar width, and 'displayValue' must reflect the actual formatted figure. Use 'bg-primary' for the brand bar and the default color for the competitor/baseline bar. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:24.651Z"}