<!--
@type: Integration
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Support, 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 Integrations</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"
>Seamless</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Integrations</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Connect your existing tools and services with our comprehensive
integration ecosystem. Build powerful financial applications with our
robust APIs and pre-built connectors.
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Payment Gateways
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Payment Processing</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Connect with leading payment processors to accept payments from
customers worldwide.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Multi-currency support</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Real-time processing</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Fraud detection</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>PCI compliance</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
< 200ms
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Response Time
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
99.99%
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Uptime
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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-database w-6 h-6"
>
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
<path d="M3 12A9 3 0 0 0 21 12"></path>
</svg>
</div>
<div>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Banking APIs
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Core Banking</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Seamlessly integrate with major banks for account verification
and transaction processing.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Account verification</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Balance inquiries</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Transaction history</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Direct deposits</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
500+
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Banks
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
50+
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Countries
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Analytics Platforms
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Data & Analytics</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Integrate with business intelligence tools for comprehensive
financial reporting and insights.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Real-time dashboards</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Custom reports</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Data visualization</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Predictive analytics</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
1M+
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Data Points
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
1s
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Refresh Rate
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Security Services
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Security & Compliance</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Advanced security integrations for fraud prevention and
regulatory compliance.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Identity verification</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Risk scoring</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Compliance monitoring</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Audit trails</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
99.8%
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Accuracy
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
Real-time
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Processing
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Mobile SDKs
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Mobile Development</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Native mobile SDKs for iOS and Android to build seamless mobile
financial experiences.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Native UI components</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Biometric auth</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Offline support</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Push notifications</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
iOS/Android
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Platforms
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
< 2MB
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Size
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</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 justify-between">
<div class="flex items-center space-x-4">
<div class="p-3 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-cloud w-6 h-6"
>
<path
d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
></path>
</svg>
</div>
<div>
<h3
class="text-lg font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Cloud Infrastructure
</h3>
<span
class="text-sm text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>Infrastructure</span
>
</div>
</div>
<div class="px-2 py-1 bg-green-500/20 rounded-full">
<span class="text-xs text-green-400 font-medium">Active</span>
</div>
</div>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Scalable cloud infrastructure integrations for enterprise-grade
performance and reliability.
</p>
<div class="space-y-2">
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Auto-scaling</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Load balancing</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Global CDN</span
>
</div>
<div class="flex items-center space-x-3">
<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-circle-check-big w-4 h-4 text-green-400 group-hover:scale-110 transition-transform duration-300"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>Disaster recovery</span
>
</div>
</div>
<div class="border-t border-white/10 pt-4">
<div class="grid grid-cols-2 gap-3">
<div class="text-center">
<div
class="text-sm 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"
>
99.99%
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Availability
</div>
</div>
<div class="text-center">
<div
class="text-sm 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"
>
< 50ms
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Latency
</div>
</div>
</div>
</div>
<button
class="w-full py-2 bg-gradient-to-r from-blue-600/50 to-purple-600/50 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-medium transition-all duration-300 hover:scale-105 group-hover:shadow-lg"
>
Connect Integration
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mb-20">
<div
class="bg-gradient-to-r from-blue-600/20 to-purple-600/20 backdrop-blur-md border border-white/20 rounded-3xl p-8 max-w-6xl mx-auto"
>
<div class="text-center mb-8">
<div class="flex items-center justify-center space-x-4 mb-4">
<div class="p-4 rounded-2xl text-white">
<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-code w-8 h-8"
>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<div>
<h3 class="text-3xl font-bold text-white">
Developer-Friendly APIs
</h3>
<p class="text-gray-300">Simple, powerful, and well-documented</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div
class="transform transition-all duration-700 translate-y-0 opacity-100"
>
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6"
>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<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-terminal w-5 h-5 text-green-400"
>
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" x2="20" y1="19" y2="19"></line>
</svg>
<div>
<h4 class="font-semibold text-white">Process Payment</h4>
<p class="text-sm text-gray-400">
Simple payment processing with our REST API
</p>
</div>
</div>
<div class="bg-slate-900/50 rounded-lg p-4 overflow-x-auto">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-gray-400 uppercase"
>JavaScript</span
><button
class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
>
Copy
</button>
</div>
<pre
class="text-sm text-gray-300 overflow-x-auto"
><code>const payment = await fintech.payments.create({
amount: 1000,
currency: 'USD',
source: 'card_token',
description: 'Payment for services'
});
console.log(payment.status); // 'succeeded'</code></pre>
</div>
</div>
</div>
</div>
<div
class="transform transition-all duration-700 translate-y-0 opacity-100"
>
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6"
>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<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-terminal w-5 h-5 text-green-400"
>
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" x2="20" y1="19" y2="19"></line>
</svg>
<div>
<h4 class="font-semibold text-white">Verify Account</h4>
<p class="text-sm text-gray-400">
Bank account verification using our banking API
</p>
</div>
</div>
<div class="bg-slate-900/50 rounded-lg p-4 overflow-x-auto">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-gray-400 uppercase">Python</span
><button
class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
>
Copy
</button>
</div>
<pre
class="text-sm text-gray-300 overflow-x-auto"
><code>import fintech
client = fintech.Client(api_key='your_key')
verification = client.accounts.verify(
account_number='123456789',
routing_number='021000021'
)
print(verification.status) # 'verified'</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button
class="px-6 py-3 flex items-center justify-center mx-auto bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-xl font-semibold transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-purple-500/25 group"
>
View Full Documentation<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-arrow-right ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
