<!--
@type: Quote
@industry: Fintech
@style: Glassmorphism
@category: Social Proof, Feedback
@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>
<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"
>
<div class="grid md:grid-cols-3 gap-8 items-center">
<div class="md:col-span-2 space-y-6">
<div class="flex items-start space-x-4">
<div
class="p-4 bg-gradient-to-r from-blue-500/30 to-purple-500/30 rounded-2xl"
>
<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-quote w-8 h-8 text-white"
>
<path
d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"
></path>
<path
d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"
></path>
</svg>
</div>
<div class="flex-1">
<blockquote
class="text-xl md:text-2xl text-white leading-relaxed mb-6"
>
"Since implementing this platform, we've reduced our payment
processing costs by 60% while improving transaction success
rates to 99.8%. It's been a game-changer for our business."
</blockquote>
<div class="flex items-center space-x-4">
<div
class="w-16 h-16 rounded-full overflow-hidden ring-2 ring-white/30"
>
<img
alt="Alexandra Foster"
class="w-full h-full object-cover"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div class="font-bold text-white text-lg">
Alexandra Foster
</div>
<div class="text-gray-300">Chief Financial Officer</div>
<div class="text-purple-400 font-medium">
Enterprise Solutions Ltd
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div
class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 transform hover:scale-105 transition-all duration-300"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
60%
</div>
<div class="text-sm text-gray-400">Cost Reduction</div>
</div>
<div
class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 transform hover:scale-105 transition-all duration-300"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
99.8%
</div>
<div class="text-sm text-gray-400">Success Rate</div>
</div>
<div
class="bg-white/10 backdrop-blur-sm rounded-2xl p-4 transform hover:scale-105 transition-all duration-300"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
10x
</div>
<div class="text-sm text-gray-400">Processing Speed</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
