<!--
@type: Testimonial
@industry: Fintech
@style: Glassmorphism
@category: Social Proof, Feedback, 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="mb-12">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-bold text-white">What Our Customers Say</h3>
</div>
<div class="grid md: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-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<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 space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"This platform transformed our payment processing completely.
We've seen a 300% increase in transaction speed and our
customers love the seamless experience."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Sarah Chen"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Sarah Chen
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
CTO
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
TechFlow Solutions
</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-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<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 space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"The security features are unmatched. We've had zero fraud
incidents since switching, and the compliance tools saved us
months of work."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Michael Rodriguez"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Michael Rodriguez
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Head of Security
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
SecureBank Corp
</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-8 h-full"
>
<div class="space-y-6">
<div class="flex justify-between items-start">
<div
class="p-3 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl"
>
<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-6 h-6 text-blue-400 group-hover:text-purple-400 transition-colors duration-300"
>
<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 space-x-1">
<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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 0ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 50ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 100ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 150ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon></svg
><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-star w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style="transition-delay: 200ms"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
</div>
</div>
<blockquote
class="text-gray-200 text-lg leading-relaxed group-hover:text-white transition-colors duration-300"
>
"Integration was incredibly smooth. Their API documentation is
excellent, and we were up and running in just two weeks instead
of the usual months."
</blockquote>
<div
class="flex items-center space-x-4 pt-4 border-t border-white/10"
>
<div
class="w-12 h-12 rounded-full overflow-hidden ring-2 ring-white/20 group-hover:ring-purple-400/50 transition-all duration-300"
>
<img
alt="Emily Watson"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
/>
</div>
<div>
<div
class="font-semibold text-white group-hover:text-blue-300 transition-colors duration-300"
>
Emily Watson
</div>
<div
class="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300"
>
Lead Developer
</div>
<div
class="text-xs text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
>
FinTech Innovations
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
