<!--
@type: Steps
@industry: Fintech
@style: Glassmorphism
@category: Page Section, Content, Sale
@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"
>🚀 Getting Started</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"
>Simple Steps to</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>Get Started</span
>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Launch your financial operations in minutes, not months. Our streamlined
onboarding process gets you up and running with enterprise-grade
capabilities from day one.
</p>
</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-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
1
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">2 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-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-user-plus w-6 h-6"
>
<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>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Create Your Account
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-200 group-hover:text-gray-300"
>
Sign up in minutes with our streamlined onboarding process
and get instant access to our platform.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Secure email verification</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Identity verification (KYC)</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Choose your account type</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-200"
>Set up security preferences</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
2
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">5 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-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-credit-card w-6 h-6"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Connect Your Payment Methods
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
Link your bank accounts, cards, and digital wallets to start
processing payments immediately.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Bank account verification</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Add credit/debit cards</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Connect digital wallets</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Set up payment preferences</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
3
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">10 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-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-settings w-6 h-6"
>
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Configure Your Settings
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
Customize your dashboard, set up notifications, and
configure your business rules and preferences.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Dashboard customization</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Notification preferences</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Business rule configuration</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>API key generation</span
>
</div>
</div>
</div>
</div>
</div>
<div class="group cursor-pointer">
<div
class="bg-white/10 backdrop-blur-md border rounded-2xl p-6 h-full"
>
<div class="space-y-6">
<div class="flex items-center justify-between">
<div
class="w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all duration-300 bg-white/20 text-gray-300 group-hover:bg-gradient-to-r group-hover:from-blue-500 group-hover:to-purple-500 group-hover:text-white group-hover:scale-110"
>
4
</div>
<div
class="flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full"
>
<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-4 h-4 text-blue-400"
>
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline></svg
><span class="text-sm text-gray-300">1 min</span>
</div>
</div>
<div class="space-y-4">
<div
class="p-3 rounded-xl transition-all duration-300 bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-blue-400 group-hover:scale-110 group-hover:text-purple-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-rocket w-6 h-6"
>
<path
d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
></path>
<path
d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
</svg>
</div>
<div>
<h3
class="text-xl font-semibold mb-2 transition-colors duration-300 text-white group-hover:text-blue-300"
>
Start Processing
</h3>
<p
class="text-sm leading-relaxed transition-colors duration-300 text-gray-300 group-hover:text-gray-200"
>
You're all set! Begin processing payments, managing
transactions, and growing your business with our platform.
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Process your first payment</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Access real-time analytics</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Explore advanced features</span
>
</div>
<div class="flex items-start space-x-3">
<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-4 h-4 mt-0.5 transition-all duration-300 text-green-400 scale-110"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path></svg
><span
class="text-sm transition-colors duration-300 text-gray-300"
>Get 24/7 support access</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
