{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","numbers","achievements","performance","grid","simple","minimal","kpi"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column grid layout. Only use real, verifiable stat values from the system — do not invent metrics. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","icons","cards","growth","trends","dashboard","analytics","kpi"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column grid layout. Only use real, verifiable stat values from the system — do not invent metrics. Each stat requires a 'growth' field and an 'isPositive' flag — only supply growth indicators that are backed by real data; do not fabricate percentage changes. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","tabs","timeline","periods","trends","analytics","dashboard","time-series"],"performance":{},"importantUsageNotes":"Use this block only when you have real, verifiable performance data across multiple distinct time periods (e.g., weekly, monthly, quarterly, yearly). Supply 2–4 'periods', each containing exactly 4 'stats' to match the 4-column grid layout per tab. All stat 'value', 'change', and 'trend' fields must reflect actual tracked metrics — do not invent figures or percentage changes. Only use real, verifiable stat values from the system. Follow the example props closely for this block."},{"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":false},"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":false},"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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","metrics","primary","secondary","highlight","achievement","badge","two-column"],"performance":{},"importantUsageNotes":"Supply exactly 1 prominent 'primaryValue' and 3 'secondaryStats' to match the primary-plus-3-column layout. Only use real, verifiable stat values from the system — do not invent metrics. The 'primaryBadge' field (e.g., '+7% this month') must also reflect a real, documented change figure. Follow the example props closely for this block."},{"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":false},"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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","timeline","milestones","growth","history","journey","company","about","achievements"],"performance":{},"importantUsageNotes":"Use this block only when you have real company milestone data with verifiable dates, metrics, and descriptions — do not invent funding amounts, team sizes, or growth figures. Supply 4–6 'milestones', each with a real 'year', 'title', 'description', and 'metric' backed by actual data. The 'currentStats' section is a 4-column grid — supply exactly 4 real current stats. If you supply 'actions', use a variant of 'default' for the first action and 'outline' for the second. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","impact","roi","comparison","metrics","icons","cards","cta","benefits"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' since the impact stats grid is a 3-item layout. Only use real, verifiable stat values from the system — do not invent metrics. All 'value', 'prefix', and 'suffix' fields must reflect actual, documented performance data. The comparison section ('baselinePercent', 'targetPercent', 'baselineValue', 'targetValue') also requires real before/after figures — do not fabricate percentage improvements. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","circular","progress","tabs","categories","kpi","dashboard","visualization"],"performance":{},"importantUsageNotes":"Organize 'categories' into 2–4 named groups, each containing exactly 4 'stats' to fill the circular progress grid per category. Only use real, verifiable stat values (0–100 numeric values representing actual percentages) from the system — do not invent KPI scores or performance percentages. Each stat's 'info' field should reflect a genuine measurement context (e.g., 'Year over year', 'Last 12 months'). Follow the example props closely for this block."},{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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        {\n          src: imagePlaceholders[109],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[102],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[67],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[77],\n          alt: \"Customer avatar\",\n        },\n        {\n          src: imagePlaceholders[88],\n          alt: \"Customer avatar\",\n        },\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":false},"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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","cards","icons","avatars","social-proof","trust","compact","group"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'stats' since the stats element is a 3-column card layout. Only use real, verifiable stat values from the system — do not invent metrics. If a stat uses 'showAvatars', supply real avatar image URLs from the media library via the 'avatars' array (5 avatars is the canonical count). DO NOT USE this block if you do not have real stat data to display. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","animated","counter","numbers","scroll","intersection","impact","achievements"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column animated counter layout. The 'value' field must be a real numeric figure — only use real, verifiable stat values from the system; do not invent metrics. Use 'prefix' and 'suffix' to format the display value (e.g., prefix '$', suffix 'M+'). Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","ticker","animated","numbers","scroll","cards","metrics","landing-page"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'stats' since the stats element is a 4-column ticker layout. The 'value' field must be a real numeric figure — only use real, verifiable stat values from the system; do not invent metrics. Use 'prefix' and 'suffix' to format the display (e.g., suffix '+', suffix '%', suffix 'ms'). Each stat should include a 'description' for supporting context. Follow the example props closely for this block."},{"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","milestones","timeline","sidebar","sticky","history","company","about"],"performance":{},"importantUsageNotes":"Use this block only when you have real, chronological company milestones with verifiable years, titles, and descriptions — do not invent funding rounds, product launches, or growth events. Supply 4–7 'milestones' in ascending year order. Only use real, verifiable data from the system. Follow the example props closely for this block."},{"id":"stats-bar-comparison","name":"Stats Bar Comparison","title":"Stats Bar Comparison","category":"Stats","categorySlug":"stats","description":"A visual comparison section featuring animated horizontal bar charts that compare platform metrics against industry averages. Each group displays a title and two bars with labels and values. Bars animate from 0 to their target width when scrolled into view. Ideal for competitive analysis, benchmark comparisons, or showcasing platform advantages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288930/pxzc1pdqynjduhm6z3j8eb6irlvg/stats-bar-comparison-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/288931/c05qqffxc9bnl0f5tarsidnvpiey/stats-bar-comparison-mobile.jpg"},"componentPath":"blocks/stats/stats-bar-comparison.tsx","code":"import { StatsBarComparison } from \"@opensite/ui/blocks/stats/stats-bar-comparison\";\n\nexport default function Demo() {\n  return (\n    <StatsBarComparison\n      badge=\"Competitive Edge\"\n      heading=\"How We Compare\"\n      description=\"See how our platform outperforms industry benchmarks across key metrics\"\n      comparisons={[\n        {\n          title: \"Revenue Growth\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 89,\n              displayValue: \"$2.4M\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 34,\n              displayValue: \"$920K\",\n            },\n          ],\n        },\n        {\n          title: \"Customer Retention\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 94,\n              displayValue: \"94%\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 67,\n              displayValue: \"67%\",\n            },\n          ],\n        },\n        {\n          title: \"Time to Value\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 85,\n              displayValue: \"2 weeks\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 35,\n              displayValue: \"6 weeks\",\n            },\n          ],\n        },\n        {\n          title: \"Support Response\",\n          bars: [\n            {\n              label: \"Our Platform\",\n              value: 92,\n              displayValue: \"< 1 hour\",\n              color: \"bg-primary\",\n            },\n            {\n              label: \"Industry Average\",\n              value: 45,\n              displayValue: \"24 hours\",\n            },\n          ],\n        },\n      ]}\n      animate={true}\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content above the heading","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides badge)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content below the heading","typeLabel":"React.ReactNode","required":false},"comparisons":{"type":"array","description":"Array of comparison groups","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title for the comparison group","typeLabel":"React.ReactNode","required":true},"bars":{"type":"array","description":"Bars to compare","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"The label for the bar","typeLabel":"React.ReactNode","required":true},"value":{"type":"number","description":"The value (0-100 for percentage width)","required":true},"displayValue":{"type":"object","description":"Display value text (e.g., \"$2.4M\", \"89%\")","typeLabel":"React.ReactNode","required":true},"color":{"type":"string","description":"Color class for the bar (e.g., \"bg-primary\", \"bg-emerald-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the bar","required":false}},"typeLabel":"ComparisonBar"},"typeLabel":"ComparisonBar[]","required":true},"className":{"type":"string","description":"Additional CSS classes for the group","required":false}},"typeLabel":"ComparisonGroup"},"typeLabel":"ComparisonGroup[]","required":false},"comparisonsSlot":{"type":"object","description":"Custom slot for rendering comparisons (overrides comparisons array)","typeLabel":"React.ReactNode","required":false},"animate":{"type":"boolean","description":"Whether to animate bars on scroll","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"comparisonsClassName":{"type":"string","description":"Additional CSS classes for the comparisons container","required":false},"groupCardClassName":{"type":"string","description":"Additional CSS classes for comparison group cards","required":false},"groupTitleClassName":{"type":"string","description":"Additional CSS classes for group titles","required":false},"barLabelClassName":{"type":"string","description":"Additional CSS classes for bar labels","required":false},"barValueClassName":{"type":"string","description":"Additional CSS classes for bar values","required":false},"barTrackClassName":{"type":"string","description":"Additional CSS classes for bar tracks","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["stats","comparison","bars","charts","animated","benchmark","competitive","industry"],"performance":{},"importantUsageNotes":"Supply 3–5 'comparisons' (comparison groups), each containing exactly 2 'bars' (e.g., 'Our Platform' vs. 'Industry Average'). Only use real, verifiable stat values from the system — do not invent revenue figures, retention rates, or benchmark comparisons. Each bar's 'value' (0–100) drives the visual bar width, and 'displayValue' must reflect the actual formatted figure. Use 'bg-primary' for the brand bar and the default color for the competitor/baseline bar. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:35.999Z"}