{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-stats-gradient-grid","type":"registry:block","title":"Gradient Grid","files":[{"path":"components/blocks/marketing/stats/gradient-grid.tsx","content":"import { ChevronUp, ChevronDown } from \"lucide-react\";\n\nexport default function GradientGrid() {\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=\"rounded-xl bg-gradient-to-br from-primary/10 via-secondary/10 to-primary/5 p-8 md:p-10 lg:p-14 relative overflow-hidden\">\n          <div className=\"absolute inset-0 bg-grid-white/25 [mask-image:linear-gradient(0deg,transparent,rgba(255,255,255,0.7),transparent)] pointer-events-none\" />\n\n          <div className=\"text-center mb-10 relative\">\n            <h2 className=\"text-3xl font-bold md:text-4xl\">Company Metrics</h2>\n            <p className=\"mt-3 text-muted-foreground max-w-xl mx-auto\">\n              Tracking our growth and impact with real-time analytics\n            </p>\n          </div>\n\n          <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-4 relative\">\n            {/* Stat 1 */}\n            <div className=\"rounded-lg border bg-card p-6 backdrop-blur-sm shadow-sm\">\n              <div className=\"flex flex-col items-center\">\n                <div className=\"flex items-center justify-center h-12 w-12 rounded-full bg-primary/15 mb-4\">\n                  <ChevronUp className=\"h-6 w-6 text-emerald-500\" />\n                </div>\n                <h3 className=\"text-4xl font-bold\">97K</h3>\n                <p className=\"mt-2 font-medium\">Active Users</p>\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  +24.3% this month\n                </p>\n              </div>\n            </div>\n\n            {/* Stat 2 */}\n            <div className=\"rounded-lg border bg-card p-6 backdrop-blur-sm shadow-sm\">\n              <div className=\"flex flex-col items-center\">\n                <div className=\"flex items-center justify-center h-12 w-12 rounded-full bg-primary/15 mb-4\">\n                  <ChevronUp className=\"h-6 w-6 text-emerald-500\" />\n                </div>\n                <h3 className=\"text-4xl font-bold\">$2.4M</h3>\n                <p className=\"mt-2 font-medium\">Revenue</p>\n                <p className=\"text-sm text-muted-foreground mt-1\">+10.8% YTD</p>\n              </div>\n            </div>\n\n            {/* Stat 3 */}\n            <div className=\"rounded-lg border bg-card p-6 backdrop-blur-sm shadow-sm\">\n              <div className=\"flex flex-col items-center\">\n                <div className=\"flex items-center justify-center h-12 w-12 rounded-full bg-primary/15 mb-4\">\n                  <ChevronDown className=\"h-6 w-6 text-rose-500\" />\n                </div>\n                <h3 className=\"text-4xl font-bold\">0.8%</h3>\n                <p className=\"mt-2 font-medium\">Churn Rate</p>\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  -2.1% from last quarter\n                </p>\n              </div>\n            </div>\n\n            {/* Stat 4 */}\n            <div className=\"rounded-lg border bg-card p-6 backdrop-blur-sm shadow-sm\">\n              <div className=\"flex flex-col items-center\">\n                <div className=\"flex items-center justify-center h-12 w-12 rounded-full bg-primary/15 mb-4\">\n                  <ChevronUp className=\"h-6 w-6 text-emerald-500\" />\n                </div>\n                <h3 className=\"text-4xl font-bold\">94%</h3>\n                <p className=\"mt-2 font-medium\">Customer Satisfaction</p>\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  +3% this quarter\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/stats/gradient-grid.tsx"}],"description":"A grid of stat tiles washed in soft gradients for a vivid, modern look. Use it to display headline metrics when you want the section to feel premium.","dependencies":["lucide-react"]}