<!--
@type: Feature
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content
@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 Features</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"
>Powerful Features</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Built for Scale</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our comprehensive platform combines cutting-edge technology with
intuitive design to deliver unmatched performance and reliability for
your financial operations.
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-1">
<h3 class="text-lg font-semibold text-white mb-2">
Instant Payments
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Process payments in real-time with our lightning-fast
infrastructure and advanced routing algorithms.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>0.3s</span
>
</div>
<div class="text-xs text-gray-400">Avg Response</div>
</div>
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>99.99%</span
>
</div>
<div class="text-xs text-gray-400">Uptime</div>
</div>
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-1">
<h3 class="text-lg font-semibold text-white mb-2">
Advanced Security
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Military-grade encryption and multi-layer security protocols
protect every transaction and data point.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>256</span
>
</div>
<div class="text-xs text-gray-400">Bit Encryption</div>
</div>
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>99.9%</span
>
</div>
<div class="text-xs text-gray-400">Fraud Prevention</div>
</div>
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-1">
<h3 class="text-lg font-semibold text-white mb-2">
Global Reach
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Connect with customers worldwide through our extensive
network of local payment methods and currencies.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>180+</span
>
</div>
<div class="text-xs text-gray-400">Countries</div>
</div>
<div class="text-center">
<div
class="text-lg 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-xl md:text-2xl text-white"
>150+</span
>
</div>
<div class="text-xs text-gray-400">Currencies</div>
</div>
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-bar-chart3 w-6 h-6"
>
<path d="M3 3v18h18"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Smart Analytics
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
AI-powered insights and real-time analytics help you make
data-driven decisions and optimize performance.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>95%</span
>
</div>
<div class="text-xs text-gray-400">Accuracy</div>
</div>
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>24/7</span
>
</div>
<div class="text-xs text-gray-400">Real-time</div>
</div>
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-smartphone w-6 h-6"
>
<rect
width="14"
height="20"
x="5"
y="2"
rx="2"
ry="2"
></rect>
<path d="M12 18h.01"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Mobile First
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Native mobile SDKs and responsive design ensure seamless
experiences across all devices and platforms.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>50ms</span
>
</div>
<div class="text-xs text-gray-400">Load Time</div>
</div>
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>98%</span
>
</div>
<div class="text-xs text-gray-400">Mobile Score</div>
</div>
</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-start space-x-4">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl text-blue-400"
>
<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-credit-card w-6 h-6"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Payment Methods
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Support for all major payment methods including cards,
wallets, bank transfers, and emerging technologies.
</p>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-4">
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>100+</span
>
</div>
<div class="text-xs text-gray-400">Payment Types</div>
</div>
<div class="text-center">
<div
class="text-lg font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
<span class="font-bold text-xl md:text-2xl text-white"
>40+</span
>
</div>
<div class="text-xs text-gray-400">Wallets</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
