Component:
Integration Fintech Glassmorphism
Colors:
Description:
This carefully crafted Integration component is perfect for Fintech landing pages, featuring a Glassmorphic design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page