Component:
Hero Fintech Glassmorphism
Colors:
Description:
This carefully crafted Hero 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: 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>
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