<!--
@type: Stats
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Social Proof
@framework: Tailwind
@license: Free
-->
<section
class="relative py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10 container mx-auto px-4">
<div class="text-center mb-20 space-y-8">
<div class="inline-block">
<span
class="px-6 py-3 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>📊 Platform Statistics</span
>
</div>
<h2 class="text-5xl md:text-7xl font-bold leading-tight">
<span
class="bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent"
>Numbers That</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Speak Volumes</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our platform's performance metrics showcase the scale, reliability, and
trust that thousands of businesses place in our financial infrastructure
every day.
</p>
</div>
<div class="mb-20">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-dollar-sign w-6 h-6"
>
<line x1="12" x2="12" y1="2" y2="22"></line>
<path
d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>45%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>$50B+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Transaction Volume
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Total value processed through our platform monthly
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Growth this quarter
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 5%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-users w-6 h-6"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>32%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>2,500,000+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Active Users
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Businesses and individuals using our platform daily
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
New users this month
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 100%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-globe w-6 h-6"
>
<circle cx="12" cy="12" r="10"></circle>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>15%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>180+</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Global Reach
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Countries where our services are available
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
New markets this year
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 18%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-zap w-6 h-6"
>
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>60%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>0.3s</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Processing Speed
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Average transaction processing time
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Faster than industry average
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 0.03%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-shield w-6 h-6"
>
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
></path>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>5%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>99.99%</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Security Score
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Fraud prevention and security effectiveness
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Improvement this year
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 9.999%"
></div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400 group-hover:scale-110 group-hover:text-purple-400 transition-all duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-clock w-6 h-6"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div
class="flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 group-hover:scale-105 transition-transform duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trending-up w-3 h-3"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline></svg
><span>2%</span>
</div>
</div>
<div class="space-y-2">
<div
class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent group-hover:from-purple-400 group-hover:to-blue-400 transition-all duration-300"
>
<span class="font-bold text-3xl md:text-4xl text-white"
>99.98%</span
>
</div>
<div
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Uptime
</div>
</div>
<div class="space-y-2">
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Platform availability and reliability
</p>
<p
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Above SLA target
</p>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
style="width: 9.998%"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-20">
<div
class="bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-8 max-w-6xl mx-auto"
>
<h3 class="text-3xl font-bold text-center text-white mb-8">
Industry Comparison
</h3>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Processing Speed</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>0.3s</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[95%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">3.2s</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[30%]"
></div>
</div>
</div>
</div>
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Success Rate</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>99.99%</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[100%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">97.5%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[75%]"
></div>
</div>
</div>
</div>
<div class="text-center space-y-4">
<div class="text-gray-400 text-sm">Cost Efficiency</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-white text-sm">Our Platform</span
><span class="text-green-400 font-bold"
><span class="font-bold text-3xl md:text-4xl text-white"
>75%</span
></span
>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-green-500 to-blue-500 rounded-full w-[90%]"
></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-400 text-sm">Industry Average</span
><span class="text-red-400 font-bold">45%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div
class="h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full w-[45%]"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
