{"success":true,"data":{"category":{"slug":"stats","name":"Stats","description":"Collection of stats components"},"blocks":[{"id":"stats-simple-grid","name":"Stats Simple Grid","title":"Stats Simple Grid","category":"Stats","categorySlug":"stats","description":"A clean, minimal stats section with a heading, action buttons, and a responsive grid of key metrics. Features a 2x2 grid on mobile that expands to 4 columns on larger screens. Ideal for showcasing company achievements, platform performance, or key business metrics with prominent numerical values.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288948/6lxanoy3dgk4cmpokifjxfzbln7v/stats-simple-grid-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288949/6uyhqrb9o62330c3hrzadhqhk8qh/stats-simple-grid-mobile.jpg"},"componentPath":"blocks/stats/stats-simple-grid.tsx","code":"import { StatsSimpleGrid } from \"@opensite/ui/blocks/stats/stats-simple-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <StatsSimpleGrid\n      heading=\"Platform Performance Insights\"\n      stats={[\n        { value: \"90%\", label: \"Customer Satisfaction\" },\n        { value: \"200+\", label: \"Enterprise Clients\" },\n        { value: \"99%\", label: \"Uptime Guarantee\" },\n        { value: \"150+\", label: \"Team Members\" },\n      ]}\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"/signup\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn More\",\n          href: \"/about\",\n          variant: \"outline\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stat items to display","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}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":true,"minItems":2,"maxItems":8},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"statItemClassName":{"type":"string","description":"Additional CSS classes for individual stat items","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true},"actions[0].variant":{"type":"object","description":"","pinnedValues":{"variant":"default"}},"actions[1].variant":{"type":"object","description":"","pinnedValues":{"variant":"outline"}}},"exampleProps":{"heading":"Platform Performance Insights","stats":[{"value":"90%","label":"Customer Satisfaction"},{"value":"200+","label":"Enterprise Clients"},{"value":"99%","label":"Uptime Guarantee"},{"value":"150+","label":"Team Members"}],"actions":[{"label":"Get Started","href":"/signup","variant":"default"},{"label":"Learn More","href":"/about","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","numbers","achievements","performance","grid","simple","minimal","kpi"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The grid renders in a fixed 4-column layout on large screens — provide exactly 4 stats for best visual balance. Actions are optional but if provided, the first should use variant 'default' and the second 'outline'.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid layout."},"stats[].value":{"required":true,"note":"Source-backed metric value string, e.g. '90%', '200+'. Never fabricated."},"stats[].label":{"required":true,"note":"Short label describing the metric."},"actions[0].variant":{"pinnedValues":{"variant":"default"}},"actions[1].variant":{"pinnedValues":{"variant":"outline"}}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"id":"stats-icon-cards","name":"Stats Icon Cards","title":"Stats Icon Cards","category":"Stats","categorySlug":"stats","description":"A modern stats grid featuring bordered cards with icons, large numerical values, and growth indicators. Each card displays a metric with a circular icon badge, prominent value, and color-coded growth trend. Ideal for dashboards, analytics sections, or showcasing key performance indicators with visual hierarchy.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288938/urt7yb9mjarmi4emo69k4gdz6bi3/stats-icon-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288939/hyynr6l3xvzxygjo0ovp3rk4j3on/stats-icon-cards-mobile.jpg"},"componentPath":"blocks/stats/stats-icon-cards.tsx","code":"import { StatsIconCards } from \"@opensite/ui/blocks/stats/stats-icon-cards\";\n\nexport default function Demo() {\n  return (\n    <StatsIconCards\n      heading=\"Our Growth in Numbers\"\n      description=\"Key metrics that showcase our impact across the platform\"\n      stats={[\n        {\n          label: \"Active Users\",\n          value: \"120K+\",\n          growth: \"18% growth\",\n          isPositive: true,\n          icon: \"lucide/users\",\n        },\n        {\n          label: \"Revenue\",\n          value: \"$3.2M\",\n          growth: \"32% increase\",\n          isPositive: true,\n          icon: \"lucide/dollar-sign\",\n        },\n        {\n          label: \"Response Time\",\n          value: \"45ms\",\n          growth: \"12% faster\",\n          isPositive: true,\n          icon: \"lucide/clock\",\n        },\n        {\n          label: \"Support Tickets\",\n          value: \"234\",\n          growth: \"8% decrease\",\n          isPositive: true,\n          icon: \"lucide/ticket\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"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},"stats":{"type":"array","description":"Array of stat items to display","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label describing the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"object","description":"The stat value (e.g., \"120K+\", \"$3.2M\", \"9.5%\")","typeLabel":"React.ReactNode","required":true},"growth":{"type":"object","description":"Growth indicator text (e.g., \"18% growth\", \"+2 min\")","typeLabel":"React.ReactNode","required":true},"isPositive":{"type":"boolean","description":"Whether the growth is positive (green) or negative (red)","required":false},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\", \"lucide/clock\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"StatIconItem"},"typeLabel":"StatIconItem[]","required":true,"minItems":2,"maxItems":8},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statGrowthClassName":{"type":"string","description":"Additional CSS classes for stat growth indicators","required":false},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].label":{"type":"object","description":"","required":true},"stats[].value":{"type":"object","description":"","required":true},"stats[].growth":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Growth in Numbers","description":"Key metrics that showcase our impact across the platform","stats":[{"label":"Active Users","value":"120K+","growth":"18% growth","isPositive":true,"icon":"lucide/users"},{"label":"Revenue","value":"$3.2M","growth":"32% increase","isPositive":true,"icon":"lucide/dollar-sign"},{"label":"Response Time","value":"45ms","growth":"12% faster","isPositive":true,"icon":"lucide/clock"},{"label":"Support Tickets","value":"234","growth":"8% decrease","isPositive":true,"icon":"lucide/ticket"}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","icons","cards","growth","trends","dashboard","analytics","kpi"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each card requires a value, label, and growth field. The 'growth' text describes the trend (e.g. '18% growth', '} ${2 min'). Set isPositive correctly — false renders in destructive color. Icon names use 'prefix/name' format (e.g. 'lucide/users'). The grid renders 4 columns on large screens — provide 4 stats for best visual balance.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid layout."},"stats[].label":{"required":true,"note":"Short metric label."},"stats[].value":{"required":true,"note":"Source-backed metric value."},"stats[].growth":{"required":true,"note":"Trend text like '18% growth' or '8% decrease'."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-timeline-tabs","name":"Stats Timeline Tabs","title":"Stats Timeline Tabs","category":"Stats","categorySlug":"stats","description":"A tabbed stats display showing metrics across different time periods (weekly, monthly, quarterly, yearly). Features a badge header, centered tab navigation, and a responsive grid of stat cards with color-coded trend indicators. Each stat shows the value, percentage change, and comparison period. Ideal for analytics dashboards, performance reports, or any time-series data visualization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288950/qqma1bduvtkiw0emx54p8faznbq8/stats-timeline-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288951/0n55r6asbot6nldpwksguhmqa8e0/stats-timeline-tabs-mobile.jpg"},"componentPath":"blocks/stats/stats-timeline-tabs.tsx","code":"import { StatsTimelineTabs } from \"@opensite/ui/blocks/stats/stats-timeline-tabs\";\n\nexport default function Demo() {\n  return (\n    <StatsTimelineTabs\n      badge=\"Performance Timeline\"\n      heading=\"Growth Progression\"\n      description=\"Track our key metrics over different time periods\"\n      defaultPeriod=\"monthly\"\n      periods={[\n        {\n          id: \"weekly\",\n          label: \"Weekly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"1,284\",\n              change: 12,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"32,891\",\n              change: 8,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"5.2%\",\n              change: 3,\n              trend: \"up\",\n              previousLabel: \"last week\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"89\",\n              change: 15,\n              trend: \"down\",\n              previousLabel: \"last week\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"monthly\",\n          label: \"Monthly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"5,432\",\n              change: 24,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"142,567\",\n              change: 18,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"6.1%\",\n              change: 7,\n              trend: \"up\",\n              previousLabel: \"last month\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"312\",\n              change: 22,\n              trend: \"down\",\n              previousLabel: \"last month\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"quarterly\",\n          label: \"Quarterly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"18,921\",\n              change: 45,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"456,234\",\n              change: 32,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"7.3%\",\n              change: 12,\n              trend: \"up\",\n              previousLabel: \"last quarter\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"876\",\n              change: 28,\n              trend: \"down\",\n              previousLabel: \"last quarter\",\n              inversePositive: true,\n            },\n          ],\n        },\n        {\n          id: \"yearly\",\n          label: \"Yearly\",\n          stats: [\n            {\n              label: \"New Signups\",\n              value: \"72,456\",\n              change: 89,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Active Sessions\",\n              value: \"1.8M\",\n              change: 67,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Conversion Rate\",\n              value: \"8.9%\",\n              change: 34,\n              trend: \"up\",\n              previousLabel: \"last year\",\n            },\n            {\n              label: \"Support Tickets\",\n              value: \"2,341\",\n              change: 41,\n              trend: \"down\",\n              previousLabel: \"last year\",\n              inversePositive: true,\n            },\n          ],\n        },\n      ]}\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 slot for badge (overrides badge prop)","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},"periods":{"type":"array","description":"Array of time periods with their stats","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the period","required":true},"label":{"type":"object","description":"Display label for the period","typeLabel":"React.ReactNode","required":true},"stats":{"type":"array","description":"Stats for this time period","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"object","description":"The stat value (e.g., \"1,284\", \"32,891\", \"5.2%\")","typeLabel":"React.ReactNode","required":true},"change":{"type":"number","description":"The percentage change","required":true},"trend":{"type":"string","description":"Whether the trend is up or down","typeLabel":"\"up\" | \"down\"","required":true},"previousLabel":{"type":"object","description":"Label for the comparison period","typeLabel":"React.ReactNode","required":true},"inversePositive":{"type":"boolean","description":"If true, a downward trend is considered positive (e.g., for support tickets)","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"TimelineStat"},"typeLabel":"TimelineStat[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the period","required":false}},"typeLabel":"TimePeriod"},"typeLabel":"TimePeriod[]","required":true,"minItems":2,"maxItems":6},"tabsSlot":{"type":"object","description":"Custom slot for tabs content (overrides periods array)","typeLabel":"React.ReactNode","required":false},"defaultPeriod":{"type":"string","description":"Default selected period ID","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},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabsListClassName":{"type":"string","description":"Additional CSS classes for the tabs list","required":false},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"periods[].id":{"type":"object","description":"","required":true},"periods[].label":{"type":"object","description":"","required":true},"periods[].stats":{"type":"object","description":"","required":true,"minItems":2,"maxItems":6},"periods[].stats[].change":{"type":"object","description":"","required":true},"periods[].stats[].trend":{"type":"object","description":"","required":true},"periods[].stats[].previousLabel":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Performance Timeline","heading":"Growth Progression","description":"Track our key metrics over different time periods","defaultPeriod":"monthly","periods":[{"id":"weekly","label":"Weekly","stats":[{"label":"New Signups","value":"1,284","change":12,"trend":"up","previousLabel":"last week"},{"label":"Active Sessions","value":"32,891","change":8,"trend":"up","previousLabel":"last week"},{"label":"Conversion Rate","value":"5.2%","change":3,"trend":"up","previousLabel":"last week"},{"label":"Support Tickets","value":"89","change":15,"trend":"down","previousLabel":"last week","inversePositive":true}]},{"id":"monthly","label":"Monthly","stats":[{"label":"New Signups","value":"5,432","change":24,"trend":"up","previousLabel":"last month"},{"label":"Active Sessions","value":"142,567","change":18,"trend":"up","previousLabel":"last month"},{"label":"Conversion Rate","value":"6.1%","change":7,"trend":"up","previousLabel":"last month"},{"label":"Support Tickets","value":"312","change":22,"trend":"down","previousLabel":"last month","inversePositive":true}]}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","tabs","timeline","periods","trends","analytics","dashboard","time-series"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each period's stats must include a numeric 'change' (percentage), a 'trend' of 'up' or 'down', and a 'previousLabel' for comparison context. Use 'inversePositive: true' for metrics where decrease is good (e.g. support tickets, error rates). Provide at least 2 time periods. The defaultPeriod must match an existing period id.","usageRequirements":{"requiredProps":["periods"],"propConstraints":{"periods":{"required":true,"minItems":2,"maxItems":6},"periods[].id":{"required":true,"note":"Unique string identifier for the period."},"periods[].label":{"required":true,"note":"Display label shown in the tab (e.g. 'Weekly', 'Monthly')."},"periods[].stats":{"required":true,"minItems":2,"maxItems":6},"periods[].stats[].change":{"required":true,"note":"Numeric percentage change value."},"periods[].stats[].trend":{"required":true,"note":"'up' or 'down'."},"periods[].stats[].previousLabel":{"required":true,"note":"Context label like 'last week'."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-primary-secondary","name":"Stats Primary Secondary","title":"Stats Primary Secondary","category":"Stats","categorySlug":"stats","description":"A two-column stats layout featuring one prominent primary metric with a badge indicator, alongside a row of secondary supporting stats. The primary stat is emphasized with large typography and a verification badge, while secondary stats are displayed in a clean grid with a vertical divider. Ideal for highlighting a key achievement with supporting metrics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288946/bsfdnq1evrm3yh18diynkhbzy5p0/stats-primary-secondary-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288947/dfoy9qym72kwb09pt2bihg4u0qev/stats-primary-secondary-mobile.jpg"},"componentPath":"blocks/stats/stats-primary-secondary.tsx","code":"import { StatsPrimarySecondary } from \"@opensite/ui/blocks/stats/stats-primary-secondary\";\n\nexport default function Demo() {\n  return (\n    <StatsPrimarySecondary\n      primaryValue=\"92%\"\n      primaryBadge=\"+7% this month\"\n      primaryDescription=\"of users report improved productivity after adopting our platform\"\n      secondaryStats={[\n        { value: \"99.95%\", label: \"Uptime reliability\" },\n        { value: \"2,000+\", label: \"Enterprise partners\" },\n        { value: \"85%\", label: \"Cost reduction\" },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"primaryValue":{"type":"object","description":"Primary stat value (large, prominent)","typeLabel":"React.ReactNode","required":true},"primaryBadge":{"type":"object","description":"Primary stat badge content","typeLabel":"React.ReactNode","required":false},"primaryBadgeSlot":{"type":"object","description":"Custom slot for primary badge (overrides primaryBadge)","typeLabel":"React.ReactNode","required":false},"primaryDescription":{"type":"object","description":"Primary stat description","typeLabel":"React.ReactNode","required":true},"primarySlot":{"type":"object","description":"Custom slot for primary section (overrides primaryValue/primaryBadge/primaryDescription)","typeLabel":"React.ReactNode","required":false},"secondaryStats":{"type":"array","description":"Array of secondary stats to display","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"The stat value (e.g., \"99.95%\", \"2,000+\", \"85%\")","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The label describing the stat","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"SecondaryStat"},"typeLabel":"SecondaryStat[]","required":false,"minItems":2,"maxItems":4},"secondaryStatsSlot":{"type":"object","description":"Custom slot for rendering secondary stats (overrides secondaryStats array)","typeLabel":"React.ReactNode","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},"primaryClassName":{"type":"string","description":"Additional CSS classes for the primary section","required":false},"primaryValueClassName":{"type":"string","description":"Additional CSS classes for the primary value","required":false},"primaryBadgeClassName":{"type":"string","description":"Additional CSS classes for the primary badge","required":false},"primaryDescriptionClassName":{"type":"string","description":"Additional CSS classes for the primary description","required":false},"secondaryClassName":{"type":"string","description":"Additional CSS classes for the secondary section","required":false},"secondaryValueClassName":{"type":"string","description":"Additional CSS classes for secondary stat values","required":false},"secondaryLabelClassName":{"type":"string","description":"Additional CSS classes for secondary stat labels","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"secondaryStats[].value":{"type":"object","description":"","required":true},"secondaryStats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"primaryValue":"92%","primaryBadge":"+7% this month","primaryDescription":"of users report improved productivity after adopting our platform","secondaryStats":[{"value":"99.95%","label":"Uptime reliability"},{"value":"2,000+","label":"Enterprise partners"},{"value":"85%","label":"Cost reduction"}]},"dependencies":["@opensite/ui"],"tags":["stats","metrics","primary","secondary","highlight","achievement","badge","two-column"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The primaryValue is displayed at very large scale — keep it concise (e.g. '92%', '$3.2M'). The primaryBadge appears inline with the value as a verification badge — use a short trend indicator. The primaryDescription provides context for the primary value. Secondary stats appear in a grid below — provide 2 to 4 for balanced layout.","usageRequirements":{"requiredProps":["primaryValue"],"propConstraints":{"primaryValue":{"required":true,"note":"Prominent headline metric. Source-backed. Concise (e.g. '92%', '$3.2M')."},"primaryDescription":{"required":true,"note":"Context sentence for the primary metric."},"secondaryStats":{"minItems":2,"maxItems":4},"secondaryStats[].value":{"required":true,"note":"Source-backed metric value."},"secondaryStats[].label":{"required":true,"note":"Short label for the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-growth-timeline","name":"Stats Growth Timeline","title":"Stats Growth Timeline","category":"Stats","categorySlug":"stats","description":"A vertical timeline showcasing company milestones and growth journey. Features alternating left/right content placement, year badges, milestone cards with icons and metrics, a 'Where We Are Today' summary section, and a future roadmap CTA. Ideal for about pages, investor presentations, or company history sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288936/otkldz7km9w9q43k1f1moppu0frk/stats-growth-timeline-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288937/toqnx92kq668q01mbqfi7enlxqbp/stats-growth-timeline-mobile.jpg"},"componentPath":"blocks/stats/stats-growth-timeline.tsx","code":"import { StatsGrowthTimeline } from \"@opensite/ui/blocks/stats/stats-growth-timeline\";\n\nexport default function Demo() {\n  return (\n    <StatsGrowthTimeline\n      badge=\"Our Journey\"\n      heading=\"Growing From Startup to Industry Leader\"\n      description=\"A decade of innovation, growth, and commitment to excellence\"\n      milestones={[\n        {\n          id: \"launch\",\n          year: \"2018\",\n          title: \"Company Founded\",\n          description:\n            \"Started with a small team and a big vision to transform how businesses operate online.\",\n          metric: { value: \"5\", label: \"Team Members\" },\n          icon: \"lucide/calendar-days\",\n        },\n        {\n          id: \"seed\",\n          year: \"2019\",\n          title: \"Seed Funding\",\n          description:\n            \"Secured initial investment to accelerate product development and expand the team.\",\n          metric: { value: \"$2M\", label: \"Raised\" },\n          icon: \"lucide/banknote\",\n        },\n        {\n          id: \"product\",\n          year: \"2020\",\n          title: \"Product Launch\",\n          description:\n            \"Released our flagship platform to the market, gaining rapid adoption.\",\n          metric: { value: \"10K\", label: \"Early Adopters\" },\n          icon: \"lucide/rocket\",\n        },\n        {\n          id: \"series-a\",\n          year: \"2022\",\n          title: \"Series A\",\n          description:\n            \"Major funding round enabled global expansion and enterprise features.\",\n          metric: { value: \"$25M\", label: \"Raised\" },\n          icon: \"lucide/trending-up\",\n        },\n        {\n          id: \"global\",\n          year: \"2024\",\n          title: \"Global Expansion\",\n          description:\n            \"Opened offices in Europe and Asia, serving customers worldwide.\",\n          metric: { value: \"50+\", label: \"Countries\" },\n          icon: \"lucide/globe\",\n        },\n      ]}\n      currentStats={[\n        { value: \"500K+\", label: \"Active Users\" },\n        { value: \"150+\", label: \"Team Members\" },\n        { value: \"$50M\", label: \"ARR\" },\n        { value: \"99.9%\", label: \"Uptime\" },\n      ]}\n      currentStatsHeading=\"Where We Are Today\"\n      futureHeading=\"What's Next\"\n      futureDescription=\"We're just getting started. Our roadmap includes AI-powered features, deeper integrations, and continued global expansion.\"\n      actions={[\n        {\n          label: \"View Our Roadmap\",\n          href: \"/roadmap\",\n          variant: \"default\",\n        },\n      ]}\n      spacing=\"xl\"\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},"milestones":{"type":"array","description":"Array of milestones to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the milestone","required":true},"year":{"type":"object","description":"Year of the milestone","typeLabel":"React.ReactNode","required":true},"title":{"type":"object","description":"Title of the milestone","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description of the milestone","typeLabel":"React.ReactNode","required":true},"metric":{"type":"object","description":"Metric associated with the milestone","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"{ value: React.ReactNode; label: React.ReactNode; }","required":true},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/calendar-days\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the milestone","required":false}},"typeLabel":"Milestone"},"typeLabel":"Milestone[]","required":true,"minItems":2,"maxItems":8},"milestonesSlot":{"type":"object","description":"Custom slot for rendering milestones (overrides milestones array)","typeLabel":"React.ReactNode","required":false},"currentStats":{"type":"array","description":"Current stats for the \"Where We Are Today\" section","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"The stat value","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The stat label","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"CurrentStat"},"typeLabel":"CurrentStat[]","required":false,"minItems":2,"maxItems":6},"currentStatsSlot":{"type":"object","description":"Custom slot for rendering current stats (overrides currentStats array)","typeLabel":"React.ReactNode","required":false},"currentStatsHeading":{"type":"object","description":"Current stats section heading","typeLabel":"React.ReactNode","required":false},"futureHeading":{"type":"object","description":"Future section heading","typeLabel":"React.ReactNode","required":false},"futureDescription":{"type":"object","description":"Future section description","typeLabel":"React.ReactNode","required":false},"futureSlot":{"type":"object","description":"Custom slot for the future section (overrides futureHeading/futureDescription/actions)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Actions for the future section (replaces roadmapLinkText/roadmapLinkUrl)","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","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},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline","required":false},"milestoneClassName":{"type":"string","description":"Additional CSS classes for milestone cards","required":false},"currentStatsClassName":{"type":"string","description":"Additional CSS classes for the current stats section","required":false},"futureClassName":{"type":"string","description":"Additional CSS classes for the future section","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].id":{"type":"object","description":"","required":true},"milestones[].year":{"type":"object","description":"","required":true},"milestones[].title":{"type":"object","description":"","required":true},"milestones[].description":{"type":"object","description":"","required":true},"milestones[].metric":{"type":"object","description":"","required":true},"currentStats[].value":{"type":"object","description":"","required":true},"currentStats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Our Journey","heading":"Growing From Startup to Industry Leader","description":"A decade of innovation, growth, and commitment to excellence","milestones":[{"id":"launch","year":"2018","title":"Company Founded","description":"Started with a small team and a big vision to transform how businesses operate online.","metric":{"value":"5","label":"Team Members"},"icon":"lucide/calendar-days"},{"id":"series-a","year":"2022","title":"Series A","description":"Major funding round enabled global expansion and enterprise features.","metric":{"value":"$25M","label":"Raised"},"icon":"lucide/trending-up"}],"currentStats":[{"value":"500K+","label":"Active Users"},{"value":"150+","label":"Team Members"},{"value":"$50M","label":"ARR"},{"value":"99.9%","label":"Uptime"}],"currentStatsHeading":"Where We Are Today","futureHeading":"What's Next","futureDescription":"Our roadmap includes AI-powered features, deeper integrations, and continued global expansion.","actions":[{"label":"View Our Roadmap","href":"/roadmap","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["stats","timeline","milestones","growth","history","journey","company","about","achievements"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each milestone requires an 'id', 'year', 'title', 'description', and a 'metric' with 'value' and 'label'. Milestone years should be actual dates in chronological order. The 'metric' should be a real measurable data point for that milestone. currentStats are the present-day summary stats — provide 4 for the 4-column grid. The icon string uses 'prefix/name' format.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"milestones":{"required":true,"minItems":2,"maxItems":8},"milestones[].id":{"required":true,"note":"Unique identifier string."},"milestones[].year":{"required":true,"note":"Year string like '2018'. Must be real."},"milestones[].title":{"required":true,"note":"Milestone event title."},"milestones[].description":{"required":true,"note":"Brief narrative for the milestone."},"milestones[].metric":{"required":true,"note":"Object with 'value' and 'label' fields. Source-backed."},"currentStats":{"minItems":2,"maxItems":6,"note":"4 items recommended for the 4-column layout."},"currentStats[].value":{"required":true,"note":"Source-backed metric value."},"currentStats[].label":{"required":true,"note":"Short label for the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-impact-grid","name":"Stats Impact Grid","title":"Stats Impact Grid","category":"Stats","categorySlug":"stats","description":"A comprehensive stats section featuring a grid of impact metrics with icons, an industry comparison bar chart, and a call-to-action. Each stat card displays an icon, large value with prefix/suffix, label, and description. Includes a visual comparison between industry average and platform performance. Ideal for showcasing ROI, business impact, or platform benefits with social proof.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288940/71bf2g13yafem6q5lp74mo32vswj/stats-impact-grid-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288941/rqu3gscky1darnaew4rd2hknwflz/stats-impact-grid-mobile.jpg"},"componentPath":"blocks/stats/stats-impact-grid.tsx","code":"import { StatsImpactGrid } from \"@opensite/ui/blocks/stats/stats-impact-grid\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <StatsImpactGrid\n      badge=\"Proof in the Numbers\"\n      heading=\"Impact You Can Measure\"\n      description=\"See how teams translate insight into meaningful outcomes across growth, efficiency, and retention.\"\n      stats={[\n        {\n          id: \"growth\",\n          value: \"312\",\n          suffix: \"%\",\n          label: \"Revenue Growth\",\n          description: \"Average year-over-year lift after launch.\",\n          icon: \"lucide/trending-up\",\n        },\n        {\n          id: \"velocity\",\n          value: \"4.6\",\n          suffix: \"x\",\n          label: \"Delivery Speed\",\n          description: \"Faster time-to-value compared to baseline.\",\n          icon: \"lucide/rocket\",\n          iconColor: \"text-primary\",\n        },\n        {\n          id: \"retention\",\n          prefix: \"+\",\n          value: \"29\",\n          suffix: \"%\",\n          label: \"Customer Retention\",\n          description: \"Retention gains within the first 90 days.\",\n          icon: \"lucide/user-check\",\n          iconColor: \"text-primary\",\n        },\n      ]}\n      comparisonHeading=\"Before vs. After\"\n      comparisonDescription=\"Track the measurable shift between your baseline and optimized performance.\"\n      baselineLabel=\"Baseline\"\n      baselineValue=\"24%\"\n      baselinePercent={24}\n      targetLabel=\"Optimized\"\n      targetValue=\"89%\"\n      targetPercent={89}\n      ctaHeading=\"Ready to build your own impact story?\"\n      actions={[\n        {\n          label: \"Start the audit\",\n          href: \"/audit\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View case studies\",\n          href: \"/case-studies\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom slot for badge (overrides badge prop)","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},"stats":{"type":"array","description":"Array of impact stats to display in the grid","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the stat","required":true},"value":{"type":"object","description":"The stat value (e.g., \"437\", \"2.4\", \"89\")","typeLabel":"React.ReactNode","required":true},"prefix":{"type":"object","description":"Prefix for the value (e.g., \"$\", \"€\", \"£\")","typeLabel":"React.ReactNode","required":false},"suffix":{"type":"object","description":"Suffix for the value (e.g., \"%\", \"B+\", \"x\", \"K\")","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description or context for the stat","typeLabel":"React.ReactNode","required":false},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/line-chart\")","required":false},"iconSlot":{"type":"object","description":"Custom slot for icon (overrides icon prop)","typeLabel":"React.ReactNode","required":false},"iconColor":{"type":"string","description":"Icon color class (e.g., \"text-primary\", \"text-emerald-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"ImpactStat"},"typeLabel":"ImpactStat[]","required":true,"minItems":2,"maxItems":6},"statsSlot":{"type":"object","description":"Custom slot for stats grid (overrides stats array)","typeLabel":"React.ReactNode","required":false},"comparisonHeading":{"type":"object","description":"Comparison section heading","typeLabel":"React.ReactNode","required":false},"comparisonDescription":{"type":"object","description":"Comparison section description","typeLabel":"React.ReactNode","required":false},"baselineValue":{"type":"object","description":"Baseline comparison value (displayed as the first/lower comparison point)","typeLabel":"React.ReactNode","required":false},"targetValue":{"type":"object","description":"Target comparison value (displayed as the second/higher comparison point)","typeLabel":"React.ReactNode","required":false},"baselineLabel":{"type":"object","description":"Label for the baseline comparison bar","typeLabel":"React.ReactNode","required":false},"targetLabel":{"type":"object","description":"Label for the target comparison bar","typeLabel":"React.ReactNode","required":false},"baselinePercent":{"type":"number","description":"Percentage width for the baseline progress bar (0-100)","required":false},"targetPercent":{"type":"number","description":"Percentage width for the target progress bar (0-100)","required":false},"comparisonSlot":{"type":"object","description":"Custom slot for comparison section (overrides comparison props)","typeLabel":"React.ReactNode","required":false},"ctaHeading":{"type":"object","description":"CTA section heading","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action buttons for the CTA section","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides ctaHeading and actions)","typeLabel":"React.ReactNode","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},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"comparisonClassName":{"type":"string","description":"Additional CSS classes for the comparison section","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].id":{"type":"object","description":"","required":true},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true},"actions[0].variant":{"type":"object","description":"","pinnedValues":{"variant":"default"}},"actions[1].variant":{"type":"object","description":"","pinnedValues":{"variant":"outline"}}},"exampleProps":{"badge":"Proof in the Numbers","heading":"Impact You Can Measure","description":"See how teams translate insight into meaningful outcomes.","stats":[{"id":"growth","value":"312","suffix":"%","label":"Revenue Growth","description":"Average year-over-year lift after launch.","icon":"lucide/trending-up"},{"id":"velocity","value":"4.6","suffix":"x","label":"Delivery Speed","description":"Faster time-to-value compared to baseline.","icon":"lucide/rocket","iconColor":"text-primary"},{"id":"retention","prefix":"+","value":"29","suffix":"%","label":"Customer Retention","description":"Retention gains within the first 90 days.","icon":"lucide/user-check","iconColor":"text-primary"}],"comparisonHeading":"Before vs. After","comparisonDescription":"Track the measurable shift between your baseline and optimized performance.","baselineLabel":"Baseline","baselineValue":"24%","baselinePercent":24,"targetLabel":"Optimized","targetValue":"89%","targetPercent":89,"ctaHeading":"Ready to build your own impact story?","actions":[{"label":"Start the audit","href":"/audit","variant":"default"},{"label":"View case studies","href":"/case-studies","variant":"outline"}]},"dependencies":["@opensite/ui"],"tags":["stats","impact","roi","comparison","metrics","icons","cards","cta","benefits"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each stat requires an 'id', 'value', and 'label'. The 'prefix' and 'suffix' props appear adjacent to the value (e.g. prefix='$', suffix='%'). The comparison section renders progress bars — 'baselinePercent' and 'targetPercent' are 0–100 integers representing bar widths, NOT the displayed values. Provide between 2 and 6 stats; 3 recommended for the 3-column grid. Icon names use 'prefix/name' format.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":6,"note":"3 items recommended for the 3-column grid."},"stats[].id":{"required":true,"note":"Unique string identifier."},"stats[].value":{"required":true,"note":"Source-backed numeric string."},"stats[].label":{"required":true,"note":"Short metric label."},"baselinePercent":{"note":"Integer 0–100 for progress bar width. Not the displayed value."},"targetPercent":{"note":"Integer 0–100 for progress bar width. Not the displayed value."},"actions[0].variant":{"pinnedValues":{"variant":"default"}},"actions[1].variant":{"pinnedValues":{"variant":"outline"}}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-circular-progress","name":"Stats Circular Progress","title":"Stats Circular Progress","category":"Stats","categorySlug":"stats","description":"A tabbed stats display featuring circular progress indicators organized by category (Business, Technical, Customer). Each stat shows a visual circular progress ring with the value centered inside, along with a label and additional info. Includes both desktop tabs and mobile dropdown for category selection. Ideal for KPI dashboards, performance reports, or multi-dimensional metrics visualization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288934/fmr3zi2q1zsd628mldxv04exv2s6/stats-circular-progress-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288935/xn1o1ztka52gs1lb7m18cc0rnvnk/stats-circular-progress-mobile.jpg"},"componentPath":"blocks/stats/stats-circular-progress.tsx","code":"import { StatsCircularProgress } from \"@opensite/ui/blocks/stats/stats-circular-progress\";\n\nexport default function Demo() {\n  return (\n    <StatsCircularProgress\n      badge=\"Performance\"\n      heading=\"Key Performance Indicators\"\n      description=\"Track our progress across business, technical, and customer success metrics\"\n      defaultCategory=\"business\"\n      categories={[\n        {\n          id: \"business\",\n          name: \"Business\",\n          stats: [\n            {\n              label: \"Revenue Growth\",\n              value: 84,\n              suffix: \"%\",\n              info: \"Year over year\",\n            },\n            {\n              label: \"Market Share\",\n              value: 67,\n              suffix: \"%\",\n              info: \"In target segment\",\n            },\n            {\n              label: \"Profit Margin\",\n              value: 42,\n              suffix: \"%\",\n              info: \"Net margin\",\n            },\n            {\n              label: \"Customer LTV\",\n              value: 91,\n              suffix: \"%\",\n              info: \"Above industry avg\",\n            },\n          ],\n        },\n        {\n          id: \"technical\",\n          name: \"Technical\",\n          stats: [\n            {\n              label: \"System Uptime\",\n              value: 99,\n              suffix: \"%\",\n              info: \"Last 12 months\",\n            },\n            {\n              label: \"API Response\",\n              value: 95,\n              suffix: \"%\",\n              info: \"Under 100ms\",\n            },\n            {\n              label: \"Code Coverage\",\n              value: 88,\n              suffix: \"%\",\n              info: \"Unit tests\",\n            },\n            {\n              label: \"Security Score\",\n              value: 96,\n              suffix: \"%\",\n              info: \"SOC 2 compliant\",\n            },\n          ],\n        },\n        {\n          id: \"customer\",\n          name: \"Customer\",\n          stats: [\n            {\n              label: \"Satisfaction\",\n              value: 92,\n              suffix: \"%\",\n              info: \"CSAT score\",\n            },\n            {\n              label: \"Retention Rate\",\n              value: 89,\n              suffix: \"%\",\n              info: \"Annual retention\",\n            },\n            {\n              label: \"NPS Score\",\n              value: 78,\n              suffix: \"\",\n              info: \"Net promoter\",\n            },\n            {\n              label: \"Support Rating\",\n              value: 94,\n              suffix: \"%\",\n              info: \"5-star reviews\",\n            },\n          ],\n        },\n      ]}\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},"categories":{"type":"array","description":"Array of stat categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the category","required":true},"name":{"type":"object","description":"Display name for the category","typeLabel":"React.ReactNode","required":true},"stats":{"type":"array","description":"Stats for this category","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"value":{"type":"number","description":"The stat value (0-100 for percentage display)","required":true},"suffix":{"type":"string","description":"Suffix for the value (e.g., \"%\", \"\")","required":false},"info":{"type":"object","description":"Additional info text","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"CircularStat"},"typeLabel":"CircularStat[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the category","required":false}},"typeLabel":"StatCategory"},"typeLabel":"StatCategory[]","required":true,"minItems":2,"maxItems":5},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React.ReactNode","required":false},"defaultCategory":{"type":"string","description":"Default selected category ID","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},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statInfoClassName":{"type":"string","description":"Additional CSS classes for stat info","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"categories[].id":{"type":"object","description":"","required":true},"categories[].name":{"type":"object","description":"","required":true},"categories[].stats":{"type":"object","description":"","required":true,"minItems":2,"maxItems":6},"categories[].stats[].value":{"type":"object","description":"","required":true},"categories[].stats[].label":{"type":"object","description":"","required":true},"categories[].stats[].info":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"Performance","heading":"Key Performance Indicators","description":"Track our progress across business, technical, and customer success metrics","defaultCategory":"business","categories":[{"id":"business","name":"Business","stats":[{"label":"Revenue Growth","value":84,"suffix":"%","info":"Year over year"},{"label":"Market Share","value":67,"suffix":"%","info":"In target segment"},{"label":"Profit Margin","value":42,"suffix":"%","info":"Net margin"},{"label":"Customer LTV","value":91,"suffix":"%","info":"Above industry avg"}]},{"id":"technical","name":"Technical","stats":[{"label":"System Uptime","value":99,"suffix":"%","info":"Last 12 months"},{"label":"API Response","value":95,"suffix":"%","info":"Under 100ms"},{"label":"Code Coverage","value":88,"suffix":"%","info":"Unit tests"},{"label":"Security Score","value":96,"suffix":"%","info":"SOC 2 compliant"}]}]},"dependencies":["@opensite/ui"],"tags":["stats","circular","progress","tabs","categories","kpi","dashboard","visualization"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. Each stat's 'value' is a NUMBER (0–100) used both for the circular progress ring and for display. The 'info' field provides brief context below the label. Provide at least 2 categories; each category should have 3–4 stats for a balanced 4-column grid. The defaultCategory must match an existing category id.","usageRequirements":{"requiredProps":["categories"],"propConstraints":{"categories":{"required":true,"minItems":2,"maxItems":5},"categories[].id":{"required":true,"note":"Unique identifier string."},"categories[].name":{"required":true,"note":"Display name for the tab."},"categories[].stats":{"required":true,"minItems":2,"maxItems":6,"note":"4 items recommended for the 4-column grid."},"categories[].stats[].value":{"required":true,"note":"Number 0–100 used for the SVG progress ring."},"categories[].stats[].label":{"required":true,"note":"Metric label."},"categories[].stats[].info":{"required":true,"note":"Short context string displayed below the label."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-card-group","name":"Stats Card Group","title":"Stats Card Group","category":"Stats","categorySlug":"stats","description":"A compact stats display featuring three metrics in a bordered card with icons and optional avatar stacks. Each stat shows an icon, large value, and label. The first stat can include a stacked avatar group to represent users or customers. Ideal for social proof sections, trust indicators, or compact dashboard summaries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288932/5buz4db6pgoluc9omsplob8yvavj/stats-card-group-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288933/x5f9vc44qyvfdhraqsq2hw65kb46/stats-card-group-mobile.jpg"},"componentPath":"blocks/stats/stats-card-group.tsx","code":"import { StatsCardGroup } from \"@opensite/ui/blocks/stats/stats-card-group\";\n\nconst AVATAR_URL =\n  \"https://toastability-production.s3.amazonaws.com/0kx9umbfmv881wt9dfqnohv8efgi\";\n\nexport default function Demo() {\n  return (\n    <StatsCardGroup\n      stats={[\n        {\n          icon: \"lucide/users\",\n          value: \"2,000+\",\n          label: \"Happy Customers\",\n          showAvatars: true,\n        },\n        {\n          icon: \"lucide/star\",\n          value: \"4.9/5\",\n          label: \"Average Rating\",\n        },\n        {\n          icon: \"lucide/shield-check\",\n          value: \"99.9%\",\n          label: \"Uptime Guarantee\",\n        },\n      ]}\n      avatars={[\n        { src: AVATAR_URL, alt: \"Customer avatar\" },\n        { src: AVATAR_URL, alt: \"Customer avatar\" },\n        { src: AVATAR_URL, alt: \"Customer avatar\" },\n        { src: AVATAR_URL, alt: \"Customer avatar\" },\n        { src: AVATAR_URL, alt: \"Customer avatar\" },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"stats":{"type":"array","description":"Array of stats to display","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"value":{"type":"object","description":"The stat value (e.g., \"2,000+\", \"4.9/5\", \"99.9%\")","typeLabel":"React.ReactNode","required":true},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"showAvatars":{"type":"boolean","description":"Whether to show avatar stack","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat","required":false}},"typeLabel":"CardGroupStat"},"typeLabel":"CardGroupStat[]","required":true,"count":3},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"avatars":{"type":"array","description":"Avatar images to display in the stack","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Avatar image source URL","required":true},"alt":{"type":"string","description":"Alt text for the avatar","required":true},"className":{"type":"string","description":"Additional CSS classes for the avatar","required":false}},"typeLabel":"AvatarItem"},"typeLabel":"AvatarItem[]","required":false,"minItems":2,"maxItems":6,"mediaHints":{"path":"avatars[].src","roles":["avatar","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Customer or user avatar image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarsSlot":{"type":"object","description":"Custom slot for rendering avatars (overrides avatars array)","typeLabel":"React.ReactNode","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},"cardClassName":{"type":"string","description":"Additional CSS classes for the card wrapper","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"avatarsClassName":{"type":"string","description":"Additional CSS classes for the avatar stack","required":false},"optixFlowConfig":{"type":"object","description":"Optional 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true},"avatars[].src":{"type":"object","description":"","required":true}},"exampleProps":{"stats":[{"icon":"lucide/users","value":"2,000+","label":"Happy Customers","showAvatars":true},{"icon":"lucide/star","value":"4.9/5","label":"Average Rating"},{"icon":"lucide/shield-check","value":"99.9%","label":"Uptime Guarantee"}],"avatars":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer avatar"}]},"dependencies":["@opensite/ui"],"tags":["stats","cards","icons","avatars","social-proof","trust","compact","group"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The component renders exactly 3 stats in a bordered card (the grid is fixed at md:grid-cols-3). Set 'showAvatars: true' on at most one stat to display the avatar stack alongside it. The 'avatars' array is only rendered when a stat has showAvatars=true. All avatar src values must be absolute URLs to real images — never use placeholder variables.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"count":3,"note":"Exactly 3 stats for the 3-column card layout."},"stats[].value":{"required":true,"note":"Source-backed metric value."},"stats[].label":{"required":true,"note":"Short label for the metric."},"avatars":{"minItems":2,"maxItems":6,"note":"Only rendered when a stat has showAvatars=true. Must be absolute URLs."},"avatars[].src":{"required":true,"note":"Absolute URL to a real image asset."}},"mediaSlots":{"avatars[].src":{"path":"avatars[].src","roles":["avatar","profile"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Customer or user avatar image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"id":"stats-animated-counter","name":"Stats Animated Counter","title":"Stats Animated Counter","category":"Stats","categorySlug":"stats","description":"A stats section featuring animated number counters that trigger when scrolled into view. Each stat displays an optional icon, animated value with prefix/suffix, and label. Uses intersection observer to start the animation only when visible. Ideal for impact sections, achievements, or any metrics that benefit from engaging number animations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288928/2dihbv54sh18i33vb0x430kdzlkd/stats-animated-counter-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288929/q0mz3rzjtncypcevls5kl4n9myl4/stats-animated-counter-mobile.jpg"},"componentPath":"blocks/stats/stats-animated-counter.tsx","code":"import { StatsAnimatedCounter } from \"@opensite/ui/blocks/stats/stats-animated-counter\";\n\nexport default function Demo() {\n  return (\n    <StatsAnimatedCounter\n      heading=\"Our Impact in Numbers\"\n      description=\"See the measurable difference we've made for businesses worldwide\"\n      stats={[\n        {\n          value: 500,\n          suffix: \"+\",\n          label: \"Projects Completed\",\n          icon: \"lucide/folder-check\",\n        },\n        {\n          value: 98,\n          suffix: \"%\",\n          label: \"Client Satisfaction\",\n          icon: \"lucide/heart\",\n        },\n        {\n          value: 50,\n          prefix: \"$\",\n          suffix: \"M+\",\n          label: \"Revenue Generated\",\n          icon: \"lucide/trending-up\",\n        },\n        {\n          value: 24,\n          suffix: \"/7\",\n          label: \"Support Available\",\n          icon: \"lucide/headphones\",\n        },\n      ]}\n      animationDuration={2000}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"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},"stats":{"type":"array","description":"Array of stats to display with animated counters","items":{"type":"object","description":"","fields":{"value":{"type":"number","description":"The end value for the counter animation","required":true},"prefix":{"type":"string","description":"Prefix for the value (e.g., \"$\", \"+\")","required":false},"suffix":{"type":"string","description":"Suffix for the value (e.g., \"%\", \"K\", \"M\", \"+\")","required":false},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/users\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat item","required":false}},"typeLabel":"AnimatedStat"},"typeLabel":"AnimatedStat[]","required":true,"minItems":2,"maxItems":8},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"animationDuration":{"type":"number","description":"Animation duration in milliseconds","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statIconClassName":{"type":"string","description":"Additional CSS classes for stat icons","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Impact in Numbers","description":"See the measurable difference we've made for businesses worldwide","stats":[{"value":500,"suffix":"+","label":"Projects Completed","icon":"lucide/folder-check"},{"value":98,"suffix":"%","label":"Client Satisfaction","icon":"lucide/heart"},{"value":50,"prefix":"$","suffix":"M+","label":"Revenue Generated","icon":"lucide/trending-up"},{"value":24,"suffix":"/7","label":"Support Available","icon":"lucide/headphones"}],"animationDuration":2000},"dependencies":["@opensite/ui"],"tags":["stats","animated","counter","numbers","scroll","intersection","impact","achievements"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The 'value' prop is a NUMBER — the counter animates from 0 to this value on scroll. Use 'prefix' and 'suffix' strings to build the full display (e.g. prefix='$', value=50, suffix='M} ${'). The grid renders 4 columns on large screens — provide 4 stats for best visual balance. Icon names use 'prefix/name' format (e.g. 'lucide/users').","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid."},"stats[].value":{"required":true,"note":"Number that the counter animates to. Source-backed."},"stats[].label":{"required":true,"note":"Short label describing the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-number-ticker","name":"Stats Number Ticker","title":"Stats Number Ticker","category":"Stats","categorySlug":"stats","description":"A stats section featuring smooth number ticker animations that count up when scrolled into view. Each stat card displays an animated value with optional prefix/suffix, label, and description. Uses exponential easing for a polished counting effect. Supports both integer and decimal values. Ideal for landing pages, dashboards, or any section showcasing impressive metrics.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288944/ca3col5wx2hgmrrqmbnk3cmzz69q/stats-number-ticker-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288945/w4qfcfre8mppb87n3be8nq4of2gb/stats-number-ticker-mobile.jpg"},"componentPath":"blocks/stats/stats-number-ticker.tsx","code":"import { StatsNumberTicker } from \"@opensite/ui/blocks/stats/stats-number-ticker\";\n\nexport default function Demo() {\n  return (\n    <StatsNumberTicker\n      badge=\"By The Numbers\"\n      heading=\"Platform Statistics\"\n      description=\"Real-time metrics that showcase our platform's reach and reliability\"\n      stats={[\n        {\n          value: 10000,\n          suffix: \"+\",\n          label: \"Active Users\",\n          description: \"Growing community of professionals\",\n        },\n        {\n          value: 99.9,\n          suffix: \"%\",\n          label: \"Uptime\",\n          description: \"Enterprise-grade reliability\",\n        },\n        {\n          value: 480,\n          label: \"Processed\",\n          description: \"Transactions this month\",\n        },\n        {\n          value: 45,\n          suffix: \"ms\",\n          label: \"Avg Response\",\n          description: \"Lightning-fast performance\",\n        },\n      ]}\n      animationDuration={2500}\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 slot for badge (overrides badge prop)","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},"stats":{"type":"array","description":"Array of stats to display with ticker animation","items":{"type":"object","description":"","fields":{"value":{"type":"number","description":"The end value for the ticker animation","required":true},"prefix":{"type":"object","description":"Prefix for the value (e.g., \"$\", \"+\")","typeLabel":"React.ReactNode","required":false},"suffix":{"type":"object","description":"Suffix for the value (e.g., \"%\", \"K\", \"M\", \"+\")","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"The label for the stat","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false}},"typeLabel":"TickerStat"},"typeLabel":"TickerStat[]","required":true,"minItems":2,"maxItems":8},"statsSlot":{"type":"object","description":"Custom slot for stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"animationDuration":{"type":"number","description":"Animation duration in milliseconds","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},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for stat cards","required":false},"statValueClassName":{"type":"string","description":"Additional CSS classes for stat values","required":false},"statLabelClassName":{"type":"string","description":"Additional CSS classes for stat labels","required":false},"statDescriptionClassName":{"type":"string","description":"Additional CSS classes for stat descriptions","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"stats[].value":{"type":"object","description":"","required":true},"stats[].label":{"type":"object","description":"","required":true}},"exampleProps":{"badge":"By The Numbers","heading":"Platform Statistics","description":"Real-time metrics that showcase our platform's reach and reliability","stats":[{"value":10000,"suffix":"+","label":"Active Users","description":"Growing community of professionals"},{"value":99.9,"suffix":"%","label":"Uptime","description":"Enterprise-grade reliability"},{"value":480,"label":"Transactions Processed","description":"This month"},{"value":45,"suffix":"ms","label":"Avg Response Time","description":"Lightning-fast performance"}],"animationDuration":2500},"dependencies":["@opensite/ui"],"tags":["stats","ticker","animated","numbers","scroll","cards","metrics","landing-page"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics. The 'value' prop is a NUMBER — the ticker animates smoothly from 0 to this value. Decimal values (e.g. 99.9) are automatically formatted with one decimal place. The 'suffix' appears after the animated number. Each stat card also supports an optional 'description' line below the label. The grid renders 4 columns on large screens — provide 4 stats for best visual balance.","usageRequirements":{"requiredProps":["stats"],"propConstraints":{"stats":{"required":true,"minItems":2,"maxItems":8,"note":"4 items recommended for the 4-column grid."},"stats[].value":{"required":true,"note":"Number that the ticker animates to. Supports decimals (e.g. 99.9). Source-backed."},"stats[].label":{"required":true,"note":"Short label describing the metric."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"id":"stats-milestone-sidebar","name":"Stats Milestone Sidebar","title":"Stats Milestone Sidebar","category":"Stats","categorySlug":"stats","description":"A two-column layout featuring a sticky sidebar with heading and description, alongside a scrollable list of company milestones. Each milestone displays a year badge, title, and description. The sidebar remains fixed while users scroll through the timeline. Ideal for company history pages, about sections, or investor presentations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288942/i4phziz7u7qi7d18e8yhgmmlhcoy/stats-milestone-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288943/p2hrvhjs7we5ihjnuflw2caj1qul/stats-milestone-sidebar-mobile.jpg"},"componentPath":"blocks/stats/stats-milestone-sidebar.tsx","code":"import { StatsMilestoneSidebar } from \"@opensite/ui/blocks/stats/stats-milestone-sidebar\";\n\nexport default function Demo() {\n  return (\n    <StatsMilestoneSidebar\n      heading=\"Our Journey\"\n      description=\"Key moments that shaped who we are today and continue to drive our mission forward\"\n      milestones={[\n        {\n          year: \"2018\",\n          title: \"Company Founded\",\n          description:\n            \"Started with a vision to transform how businesses operate online. Our founding team of five engineers set out to build something meaningful.\",\n        },\n        {\n          year: \"2019\",\n          title: \"First Major Client\",\n          description:\n            \"Landed our first enterprise customer, validating our product-market fit and setting the stage for rapid growth.\",\n        },\n        {\n          year: \"2020\",\n          title: \"Series A Funding\",\n          description:\n            \"Raised $15M to accelerate product development and expand our team. Opened our first international office.\",\n        },\n        {\n          year: \"2021\",\n          title: \"Platform 2.0 Launch\",\n          description:\n            \"Released a completely redesigned platform with AI-powered features, receiving industry recognition and awards.\",\n        },\n        {\n          year: \"2022\",\n          title: \"Global Expansion\",\n          description:\n            \"Expanded to 30+ countries with localized support. Grew our team to over 100 employees across three continents.\",\n        },\n        {\n          year: \"2023\",\n          title: \"Industry Leadership\",\n          description:\n            \"Recognized as a market leader by major analysts. Surpassed 100,000 active users on the platform.\",\n        },\n        {\n          year: \"2024\",\n          title: \"Series B & Beyond\",\n          description:\n            \"Secured $50M in Series B funding to fuel our next phase of growth and innovation in AI-driven solutions.\",\n        },\n      ]}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content for the sidebar","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content for the sidebar","typeLabel":"React.ReactNode","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for sidebar content (overrides heading/description)","typeLabel":"React.ReactNode","required":false},"milestones":{"type":"array","description":"Array of milestones to display","items":{"type":"object","description":"","fields":{"year":{"type":"object","description":"The year of the milestone","typeLabel":"React.ReactNode","required":true},"title":{"type":"object","description":"Title of the milestone","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description of the milestone","typeLabel":"React.ReactNode","required":true},"className":{"type":"string","description":"Additional CSS classes for the milestone","required":false}},"typeLabel":"MilestoneItem"},"typeLabel":"MilestoneItem[]","required":true,"minItems":3,"maxItems":10},"milestonesSlot":{"type":"object","description":"Custom slot for milestones (overrides milestones array)","typeLabel":"React.ReactNode","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},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"milestonesClassName":{"type":"string","description":"Additional CSS classes for the milestones container","required":false},"milestoneItemClassName":{"type":"string","description":"Additional CSS classes for individual milestone items","required":false},"milestoneYearClassName":{"type":"string","description":"Additional CSS classes for milestone year badges","required":false},"milestoneTitleClassName":{"type":"string","description":"Additional CSS classes for milestone titles","required":false},"milestoneDescriptionClassName":{"type":"string","description":"Additional CSS classes for milestone descriptions","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].year":{"type":"object","description":"","required":true},"milestones[].title":{"type":"object","description":"","required":true},"milestones[].description":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Our Journey","description":"Key moments that shaped who we are today and continue to drive our mission forward","milestones":[{"year":"2018","title":"Company Founded","description":"Started with a vision to transform how businesses operate online."},{"year":"2019","title":"First Major Client","description":"Landed our first enterprise customer, validating product-market fit."},{"year":"2020","title":"Series A Funding","description":"Raised $15M to accelerate product development and expand the team."},{"year":"2022","title":"Global Expansion","description":"Expanded to 30+ countries with localized support."}]},"dependencies":["@opensite/ui"],"tags":["stats","milestones","timeline","sidebar","sticky","history","company","about"],"performance":{},"importantUsageNotes":"Milestone years and descriptions must come from real, source-backed data. Do not fabricate company history. Each milestone requires a 'year', 'title', and 'description'. Years should be real calendar years in chronological order. The sidebar heading and description appear sticky on large screens while users scroll through the timeline. Provide at least 3 milestones for meaningful timeline depth.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"milestones":{"required":true,"minItems":3,"maxItems":10},"milestones[].year":{"required":true,"note":"Real calendar year string, e.g. '2018'."},"milestones[].title":{"required":true,"note":"Event or achievement title."},"milestones[].description":{"required":true,"note":"Narrative description of the milestone. Source-backed."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}},{"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":true,"minItems":2,"maxItems":6},"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},"comparisons[].title":{"type":"object","description":"","required":true},"comparisons[].bars":{"type":"object","description":"","required":true,"count":2},"comparisons[].bars[].label":{"type":"object","description":"","required":true},"comparisons[].bars[].value":{"type":"object","description":"","required":true},"comparisons[].bars[].displayValue":{"type":"object","description":"","required":true},"comparisons[].bars[0].color":{"type":"object","description":"","pinnedValues":{"color":"bg-primary"}}},"exampleProps":{"badge":"Competitive Edge","heading":"How We Compare","description":"See how our platform outperforms industry benchmarks across key metrics","comparisons":[{"title":"Revenue Growth","bars":[{"label":"Our Platform","value":89,"displayValue":"$2.4M","color":"bg-primary"},{"label":"Industry Average","value":34,"displayValue":"$920K"}]},{"title":"Customer Retention","bars":[{"label":"Our Platform","value":94,"displayValue":"94%","color":"bg-primary"},{"label":"Industry Average","value":67,"displayValue":"67%"}]},{"title":"Time to Value","bars":[{"label":"Our Platform","value":85,"displayValue":"2 weeks","color":"bg-primary"},{"label":"Industry Average","value":35,"displayValue":"6 weeks"}]}],"animate":true},"dependencies":["@opensite/ui"],"tags":["stats","comparison","bars","charts","animated","benchmark","competitive","industry"],"performance":{},"importantUsageNotes":"Stat values and labels must come from real, source-backed data. Do not fabricate metrics or benchmark comparisons. Each comparison group requires a 'title' and exactly 2 bars. The bar 'value' is a NUMBER (0–100) controlling the animated bar width — it is NOT the displayed value (use 'displayValue' for the label shown to users). Use 'color: \"bg-primary\"' on the first bar to highlight your platform. Provide 2–6 comparison groups.","usageRequirements":{"requiredProps":["comparisons"],"propConstraints":{"comparisons":{"required":true,"minItems":2,"maxItems":6},"comparisons[].title":{"required":true,"note":"Metric category title."},"comparisons[].bars":{"required":true,"count":2,"note":"Exactly 2 bars per group."},"comparisons[].bars[].label":{"required":true,"note":"Bar label (e.g. 'Our Platform', 'Industry Average')."},"comparisons[].bars[].value":{"required":true,"note":"Integer 0–100 controlling bar width. Not the display value."},"comparisons[].bars[].displayValue":{"required":true,"note":"Human-readable metric value shown next to the bar."},"comparisons[].bars[0].color":{"pinnedValues":{"color":"bg-primary"},"note":"First bar should use bg-primary to highlight your platform."}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"]}}]},"timestamp":"2026-06-27T18:46:58.502Z"}