{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-stats-stats-with-icons","type":"registry:block","title":"Stats With Icons","files":[{"path":"components/blocks/marketing/stats/stats-with-icons.tsx","content":"import { ArrowUpRight, Users, Clock, DollarSign, Target } from \"lucide-react\";\n\nexport default function StatsWithIcons() {\n  return (\n    <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px] py-24 lg:py-32\">\n      <div className=\"mx-auto max-w-5xl\">\n        <div className=\"text-center mb-10\">\n          <h2 className=\"text-3xl font-bold md:text-4xl\">\n            Our Growth in Numbers\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            Key metrics that showcase our impact in the market\n          </p>\n        </div>\n\n        <div className=\"grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          {/* Stat Item 1 */}\n          <div className=\"relative overflow-hidden rounded-xl border bg-background p-6\">\n            <div className=\"flex justify-between items-start\">\n              <div>\n                <p className=\"font-medium text-muted-foreground\">\n                  Active Users\n                </p>\n                <h3 className=\"mt-4 text-4xl font-bold\">120K+</h3>\n                <p className=\"mt-1 flex items-center text-sm text-emerald-500 font-medium\">\n                  <ArrowUpRight className=\"mr-1 h-4 w-4\" />\n                  <span>18% growth</span>\n                </p>\n              </div>\n              <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10\">\n                <Users className=\"h-6 w-6 text-primary\" />\n              </div>\n            </div>\n          </div>\n\n          {/* Stat Item 2 */}\n          <div className=\"relative overflow-hidden rounded-xl border bg-background p-6\">\n            <div className=\"flex justify-between items-start\">\n              <div>\n                <p className=\"font-medium text-muted-foreground\">\n                  Avg. Session\n                </p>\n                <h3 className=\"mt-4 text-4xl font-bold\">4:30</h3>\n                <p className=\"mt-1 flex items-center text-sm text-emerald-500 font-medium\">\n                  <ArrowUpRight className=\"mr-1 h-4 w-4\" />\n                  <span>+2 min</span>\n                </p>\n              </div>\n              <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10\">\n                <Clock className=\"h-6 w-6 text-primary\" />\n              </div>\n            </div>\n          </div>\n\n          {/* Stat Item 3 */}\n          <div className=\"relative overflow-hidden rounded-xl border bg-background p-6\">\n            <div className=\"flex justify-between items-start\">\n              <div>\n                <p className=\"font-medium text-muted-foreground\">Revenue</p>\n                <h3 className=\"mt-4 text-4xl font-bold\">$3.2M</h3>\n                <p className=\"mt-1 flex items-center text-sm text-emerald-500 font-medium\">\n                  <ArrowUpRight className=\"mr-1 h-4 w-4\" />\n                  <span>32% increase</span>\n                </p>\n              </div>\n              <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10\">\n                <DollarSign className=\"h-6 w-6 text-primary\" />\n              </div>\n            </div>\n          </div>\n\n          {/* Stat Item 4 */}\n          <div className=\"relative overflow-hidden rounded-xl border bg-background p-6\">\n            <div className=\"flex justify-between items-start\">\n              <div>\n                <p className=\"font-medium text-muted-foreground\">Conversion</p>\n                <h3 className=\"mt-4 text-4xl font-bold\">9.5%</h3>\n                <p className=\"mt-1 flex items-center text-sm text-emerald-500 font-medium\">\n                  <ArrowUpRight className=\"mr-1 h-4 w-4\" />\n                  <span>2.1% higher</span>\n                </p>\n              </div>\n              <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10\">\n                <Target className=\"h-6 w-6 text-primary\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/stats/stats-with-icons.tsx"}],"description":"Each figure sits beside an icon that signals what the number measures. Use it to make a stats row scannable and add visual cues to every metric.","dependencies":["lucide-react"]}