<!--
@type: Problem/Solution
@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"
>💡 Problems We Solve</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"
>Transform Your</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Financial Operations</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Traditional financial systems are holding businesses back. Our modern
platform eliminates these pain points with cutting-edge technology and
innovative solutions.
</p>
</div>
<div class="mb-20">
<div class="text-center mb-12">
<h3 class="text-3xl md:text-4xl font-bold text-white mb-4">
Current Industry Challenges
</h3>
<p class="text-gray-300 max-w-2xl mx-auto">
These persistent problems are costing businesses billions and limiting
growth potential across industries.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group cursor-pointer">
<div
class="bg-red-900/20 backdrop-blur-md border border-red-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-red-500/20 rounded-xl text-red-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-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-1">
<h3 class="text-lg font-semibold text-white mb-2">
Slow Transaction Processing
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Traditional banking systems take days to process transactions,
causing delays and frustration for businesses and customers.
</p>
</div>
</div>
<div class="border-t border-red-500/20 pt-4">
<div class="text-2xl font-bold text-red-400">3-5 days</div>
<div class="text-xs text-gray-400">Average processing time</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-red-900/20 backdrop-blur-md border border-red-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-red-500/20 rounded-xl text-red-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-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-1">
<h3 class="text-lg font-semibold text-white mb-2">
High Transaction Fees
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Legacy payment systems charge excessive fees, eating into
profit margins and making micro-transactions unviable.
</p>
</div>
</div>
<div class="border-t border-red-500/20 pt-4">
<div class="text-2xl font-bold text-red-400">2.9% + $0.30</div>
<div class="text-xs text-gray-400">Typical transaction fee</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-red-900/20 backdrop-blur-md border border-red-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-red-500/20 rounded-xl text-red-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-triangle-alert w-6 h-6"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Security Vulnerabilities
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Outdated security protocols leave financial data exposed to
breaches and fraud, risking customer trust and compliance.
</p>
</div>
</div>
<div class="border-t border-red-500/20 pt-4">
<div class="text-2xl font-bold text-red-400">68%</div>
<div class="text-xs text-gray-400">Increase in cyber attacks</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-red-900/20 backdrop-blur-md border border-red-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-red-500/20 rounded-xl text-red-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-trending-down w-6 h-6"
>
<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"></polyline>
<polyline points="16 17 22 17 22 11"></polyline>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Limited Global Reach
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Complex international regulations and currency exchanges make
global expansion difficult and expensive for businesses.
</p>
</div>
</div>
<div class="border-t border-red-500/20 pt-4">
<div class="text-2xl font-bold text-red-400">40%</div>
<div class="text-xs text-gray-400">
Failed international payments
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mb-20 text-center">
<div
class="inline-flex items-center space-x-4 bg-gradient-to-r from-blue-600/20 to-purple-600/20 backdrop-blur-md border border-white/20 rounded-full px-8 py-4"
>
<span class="text-white font-semibold">Our Solution</span>
<div
class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center animate-pulse"
>
<svg
class="w-6 h-6 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
></path>
</svg>
</div>
</div>
</div>
<div class="mb-20">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="group cursor-pointer">
<div
class="bg-green-900/20 backdrop-blur-md border border-green-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-green-500/20 rounded-xl text-green-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 Processing
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Our advanced infrastructure processes transactions in
real-time, enabling immediate settlements and improved cash
flow.
</p>
</div>
</div>
<div class="border-t border-green-500/20 pt-4">
<div class="text-2xl font-bold text-green-400">< 1 second</div>
<div class="text-xs text-gray-400">Average processing time</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-green-900/20 backdrop-blur-md border border-green-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-green-500/20 rounded-xl text-green-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-trending-up w-6 h-6"
>
<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>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Transparent Pricing
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Flat-rate pricing with no hidden fees makes financial planning
predictable and enables profitable micro-transactions.
</p>
</div>
</div>
<div class="border-t border-green-500/20 pt-4">
<div class="text-2xl font-bold text-green-400">0.5% flat</div>
<div class="text-xs text-gray-400">All-inclusive fee</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-green-900/20 backdrop-blur-md border border-green-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-green-500/20 rounded-xl text-green-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">
Bank-Grade Security
</h3>
<p class="text-gray-300 text-sm leading-relaxed">
Military-grade encryption and multi-layer security protocols
protect against fraud while ensuring regulatory compliance.
</p>
</div>
</div>
<div class="border-t border-green-500/20 pt-4">
<div class="text-2xl font-bold text-green-400">99.99%</div>
<div class="text-xs text-gray-400">Fraud prevention rate</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-green-900/20 backdrop-blur-md border border-green-500/30 rounded-2xl p-6 h-full"
>
<div class="flex items-start space-x-4 mb-4">
<div class="p-3 bg-green-500/20 rounded-xl text-green-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-circle-check-big w-6 h-6"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-white mb-2">
Global Infrastructure
</h3>
<p
class="text-gray-300 text-sm leading-relaxed group-hover:text-gray-200 transition-colors duration-300"
>
Native support for 150+ currencies and local payment methods
makes international expansion seamless and cost-effective.
</p>
</div>
</div>
<div class="border-t border-green-500/20 pt-4">
<div
class="text-2xl font-bold text-green-400 group-hover:text-green-300 transition-colors duration-300"
>
180+
</div>
<div
class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Countries supported
</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">
Before vs After
</h3>
<div class="grid md:grid-cols-2 gap-8">
<div class="space-y-6">
<h4 class="text-xl font-semibold text-red-400 flex items-center">
<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-triangle-alert w-5 h-5 mr-2"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
></path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
Traditional Systems
</h4>
<div class="space-y-4">
<div
class="flex justify-between items-center p-3 bg-red-900/20 rounded-lg"
>
<span class="text-gray-300">Processing Time</span
><span class="text-red-400 font-semibold">3-5 days</span>
</div>
<div
class="flex justify-between items-center p-3 bg-red-900/20 rounded-lg"
>
<span class="text-gray-300">Transaction Fees</span
><span class="text-red-400 font-semibold">2.9% + $0.30</span>
</div>
<div
class="flex justify-between items-center p-3 bg-red-900/20 rounded-lg"
>
<span class="text-gray-300">Security Incidents</span
><span class="text-red-400 font-semibold"
><span class="font-bold text-2xl md:text-3xl text-white"
>68%</span
></span
>
</div>
<div
class="flex justify-between items-center p-3 bg-red-900/20 rounded-lg"
>
<span class="text-gray-300">Global Coverage</span
><span class="text-red-400 font-semibold">Limited</span>
</div>
</div>
</div>
<div class="space-y-6">
<h4 class="text-xl font-semibold text-green-400 flex items-center">
<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-5 h-5 mr-2"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
>Our Platform
</h4>
<div class="space-y-4">
<div
class="flex justify-between items-center p-3 bg-green-900/20 rounded-lg"
>
<span class="text-gray-300">Processing Time</span
><span class="text-green-400 font-semibold">< 1 second</span>
</div>
<div
class="flex justify-between items-center p-3 bg-green-900/20 rounded-lg"
>
<span class="text-gray-300">Transaction Fees</span
><span class="text-green-400 font-semibold">0.5% flat</span>
</div>
<div
class="flex justify-between items-center p-3 bg-green-900/20 rounded-lg"
>
<span class="text-gray-300">Security Rate</span
><span class="text-green-400 font-semibold"
><span class="font-bold text-2xl md:text-3xl text-white"
>99.99%</span
></span
>
</div>
<div
class="flex justify-between items-center p-3 bg-green-900/20 rounded-lg"
>
<span class="text-gray-300">Global Coverage</span
><span class="text-green-400 font-semibold"
><span class="font-bold text-2xl md:text-3xl text-white"
>180+ countries</span
></span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
