<!--
@type: Hero
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="pt-16 md:pt-20">
<div
class="min-h-screen relative overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
>
<div class="absolute inset-0">
<div
class="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-full blur-3xl animate-pulse"
></div>
<div
class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-full blur-3xl animate-pulse delay-1000"
></div>
</div>
<div class="relative z-10 container mx-auto px-4 py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center min-h-[80vh]">
<div class="space-y-8">
<div class="space-y-6">
<div class="inline-block">
<span
class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 backdrop-blur-md border border-white/20 text-white"
>🚀 Next-Gen Financial Platform</span
>
</div>
<h1 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"
>Future of</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Finance</span
>
</h1>
<p class="text-xl text-gray-300 max-w-lg leading-relaxed">
Experience seamless digital banking with AI-powered insights,
instant transactions, and enterprise-grade security.
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<button
class="ring-offset-background focus-visible:outline-hidden focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-primary/90 h-11 rounded-md bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-0 px-8 py-6 text-lg font-semibold group"
>
Get Started<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 h-5 w-5 group-hover:translate-x-1 transition-transform"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></button
><button
class="ring-offset-background focus-visible:outline-hidden focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:text-accent-foreground border h-11 rounded-md border-white/20 bg-white/10 backdrop-blur-md text-white hover:bg-white/20 px-8 py-6 text-lg"
>
Watch Demo
</button>
</div>
<div class="flex items-center gap-4 max-w-4xl py-4">
<div class="flex items-center">
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3"
alt="Profile"
/>
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3"
alt="Profile"
/>
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3"
alt="Profile"
/>
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-11.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3"
alt="Profile"
/>
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-9.webp"
class="w-10 h-10 rounded-full border-2 border-white object-cover -mr-3"
alt="Profile"
/>
</div>
<div class="flex flex-col gap-1">
<div class="flex items-center gap-1">
<svg
class="w-5 h-5 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="w-5 h-5 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="w-5 h-5 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="w-5 h-5 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
class="w-5 h-5 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="text-sm text-gray-300">
<span class="font-semibold">4.9/5</span>
<span>(1200 customers)</span>
</div>
</div>
</div>
</div>
<div class="relative transform rotate-2">
<div class="grid grid-cols-2 gap-6">
<div class="col-span-2 group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6 transform transition-all duration-500 hover:scale-105 hover:rotate-1 hover:shadow-2xl hover:shadow-purple-500/25"
>
<div class="flex items-center justify-between mb-4">
<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 h-8 w-8 text-green-400"
>
<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
><span class="text-sm text-gray-400">Live Stats</span>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<div class="text-gray-400 text-sm">Total Volume</div>
<span class="font-bold text-2xl md:text-3xl text-white"
>$2,400,000</span
>
</div>
<div>
<div class="text-gray-400 text-sm">Active Users</div>
<span class="font-bold text-2xl md:text-3xl text-white"
>150,000+</span
>
</div>
</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 transform transition-all duration-500 hover:scale-105 hover:-rotate-2 hover:shadow-2xl hover:shadow-blue-500/25"
>
<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 h-8 w-8 text-blue-400 mb-4"
>
<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>
<h3 class="text-white font-semibold mb-2">
Bank-Grade Security
</h3>
<p class="text-gray-400 text-sm">
256-bit encryption with multi-factor authentication
</p>
<div class="mt-4">
<span class="font-bold text-2xl md:text-3xl text-white"
>99%</span
>
<div class="text-xs text-gray-500">Uptime</div>
</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 transform transition-all duration-500 hover:scale-105 hover:rotate-2 hover:shadow-2xl hover:shadow-purple-500/25"
>
<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 h-8 w-8 text-yellow-400 mb-4"
>
<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>
<h3 class="text-white font-semibold mb-2">Lightning Fast</h3>
<p class="text-gray-400 text-sm">
Instant transfers and real-time processing
</p>
<div class="mt-4">
<span class="font-bold text-2xl md:text-3xl text-white"
>0s</span
>
<div class="text-xs text-gray-500">Avg. Transaction</div>
</div>
</div>
</div>
<div class="col-span-2 group cursor-pointer">
<div
class="bg-gradient-to-r from-blue-600/20 to-purple-600/20 backdrop-blur-md border border-white/20 rounded-2xl p-6 transform transition-all duration-500 hover:scale-105 hover:-rotate-1 hover:shadow-2xl hover:shadow-indigo-500/25"
>
<div class="flex items-center justify-between mb-4">
<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-users h-8 w-8 text-purple-400"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
><span class="text-sm text-gray-400">Growing Community</span>
</div>
<div class="flex justify-between items-end">
<div>
<h3 class="text-white font-semibold mb-2">
Join millions of users
</h3>
<p class="text-gray-400 text-sm">
Trusted by businesses worldwide
</p>
</div>
<div class="text-right">
<span class="font-bold text-2xl md:text-3xl text-white"
>50+</span
>
<div class="text-xs text-gray-500">Countries</div>
</div>
</div>
</div>
</div>
</div>
<div
class="absolute -top-4 -right-4 w-20 h-20 bg-gradient-to-r from-blue-500/30 to-purple-500/30 rounded-full blur-xl animate-bounce"
></div>
<div
class="absolute -bottom-4 -left-4 w-16 h-16 bg-gradient-to-r from-purple-500/30 to-blue-500/30 rounded-full blur-xl animate-bounce delay-500"
></div>
</div>
</div>
<div class="mt-20">
<div
class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6"
>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div>
<span class="font-bold text-2xl md:text-3xl text-white"
>500M+</span
>
<div class="text-gray-400 text-sm mt-1">Transactions</div>
</div>
<div>
<span class="font-bold text-2xl md:text-3xl text-white">99%</span>
<div class="text-gray-400 text-sm mt-1">Reliability</div>
</div>
<div>
<span class="font-bold text-2xl md:text-3xl text-white"
>24/7</span
>
<div class="text-gray-400 text-sm mt-1">Support</div>
</div>
<div>
<span class="font-bold text-2xl md:text-3xl text-white"
>150+</span
>
<div class="text-gray-400 text-sm mt-1">Countries</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
