New

StatsShowcase

Four stats cards with gradient text and decorative borders

Marketing & Landingstatsnumbersmetrics

Dependencies

shadcn/ui components needed:

npx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Card, CardContent } from '@/components/ui/card';
4
5const stats = [
6  { value: '10K+', label: 'Happy Customers' },
7  { value: '99.9%', label: 'Uptime' },
8  { value: '150+', label: 'Countries' },
9  { value: '4.9/5', label: 'Rating' },
10];
11
12export default function StatsShowcase() {
13  return (
14    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6 flex items-center">
15      <div className="container mx-auto max-w-6xl">
16        <div className="text-center mb-16">
17          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
18            Numbers that speak
19          </h2>
20          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
21            Trusted by thousands of companies worldwide
22          </p>
23        </div>
24        
25        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
26          {stats.map((stat, index) => (
27            <Card
28              key={index}
29              className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50 overflow-hidden group hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1"
30            >
31              {/* Decorative top border gradient */}
32              <div className="h-1 w-full bg-gradient-to-r from-purple-500 via-indigo-500 to-purple-500 group-hover:from-purple-400 group-hover:via-indigo-400 group-hover:to-purple-400 transition-all duration-300" />
33              
34              <CardContent className="p-8 text-center">
35                <p className="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-violet-400 to-indigo-400 bg-clip-text text-transparent mb-3">
36                  {stat.value}
37                </p>
38                <p className="text-slate-400 text-lg">{stat.label}</p>
39              </CardContent>
40            </Card>
41          ))}
42        </div>
43        
44        {/* Bottom highlight bar */}
45        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
46          <Card className="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border-purple-500/30">
47            <CardContent className="p-6 text-center">
48              <p className="text-2xl font-bold text-white mb-2">24/7 Support</p>
49              <p className="text-slate-400">Always here when you need us</p>
50            </CardContent>
51          </Card>
52          <Card className="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border-purple-500/30">
53            <CardContent className="p-6 text-center">
54              <p className="text-2xl font-bold text-white mb-2">99.99% SLA</p>
55              <p className="text-slate-400">Enterprise-grade reliability</p>
56            </CardContent>
57          </Card>
58          <Card className="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border-purple-500/30">
59            <CardContent className="p-6 text-center">
60              <p className="text-2xl font-bold text-white mb-2">Free Migration</p>
61              <p className="text-slate-400">We handle the heavy lifting</p>
62            </CardContent>
63          </Card>
64        </div>
65      </div>
66    </div>
67  );
68}