<!--
@type: Login
@industry: Fintech
@style: Glassmorphism
@category: Sale, Page Section, UI Element, Content
@framework: Tailwind
@license: Free
-->
<section
class="relative min-h-screen py-20 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden flex items-center justify-center"
>
<div class="relative z-10 container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div
class="space-y-8 transform transition-all duration-1000 translate-x-0 opacity-100"
>
<div class="space-y-6">
<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"
>🔐 Secure Access</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"
>Welcome to</span
><br /><span
class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>FinTech Pro</span
>
</h1>
<p class="text-xl text-gray-300 leading-relaxed">
Access your financial dashboard with enterprise-grade security and
seamless user experience.
</p>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-bold text-white">Why Choose Us?</h3>
<div class="grid gap-4">
<div
class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
style="animation-delay: 0ms"
>
<div
class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
>
<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 w-6 h-6"
>
<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>
</div>
<span class="text-white font-medium">Bank-level Security</span>
</div>
<div
class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
style="animation-delay: 200ms"
>
<div
class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
>
<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-fingerprint w-6 h-6"
>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"></path>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"></path>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"></path>
<path d="M2 12a10 10 0 0 1 18-6"></path>
<path d="M2 16h.01"></path>
<path d="M21.8 16c.2-2 .131-5.354 0-6"></path>
<path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"></path>
<path d="M8.65 22c.21-.66.45-1.32.57-2"></path>
<path d="M9 6.8a6 6 0 0 1 9 5.2v2"></path>
</svg>
</div>
<span class="text-white font-medium"
>Biometric Authentication</span
>
</div>
<div
class="flex items-center space-x-4 p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
style="animation-delay: 400ms"
>
<div
class="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white"
>
<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-smartphone w-6 h-6"
>
<rect
width="14"
height="20"
x="5"
y="2"
rx="2"
ry="2"
></rect>
<path d="M12 18h.01"></path>
</svg>
</div>
<span class="text-white font-medium">2FA Protection</span>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div
class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
99.9%
</div>
<div class="text-gray-300 text-sm">Uptime</div>
</div>
<div
class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
256-bit
</div>
<div class="text-gray-300 text-sm">Encryption</div>
</div>
<div
class="text-center p-4 bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl"
>
<div
class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"
>
24/7
</div>
<div class="text-gray-300 text-sm">Support</div>
</div>
</div>
</div>
<div
class="transform transition-all duration-1000 delay-300 translate-x-0 opacity-100"
>
<div
class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-8"
>
<div class="flex mb-8 bg-white/5 backdrop-blur-sm rounded-2xl p-1">
<button
id="signInBtn"
class="flex-1 py-3 px-6 rounded-xl font-medium transition-all duration-300 bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg"
onclick="toggleForm('signin')"
>
Sign In</button
><button
id="signUpBtn"
class="flex-1 py-3 px-6 rounded-xl font-medium transition-all duration-300 text-gray-300 hover:text-white hover:bg-white/10"
onclick="toggleForm('signup')"
>
Sign Up
</button>
</div>
<form id="signinForm" class="space-y-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Email Address</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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-mail w-5 h-5 text-gray-400"
>
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path
d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
></path>
</svg>
</div>
<input
class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Enter your email"
type="email"
value=""
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Password</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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-lock w-5 h-5 text-gray-400"
>
<rect
width="18"
height="11"
x="3"
y="11"
rx="2"
ry="2"
></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<input
class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Enter your password"
type="password"
value=""
/><button
type="button"
class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-white transition-colors duration-200"
>
<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-eye w-5 h-5"
>
<path
d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"
></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<label class="flex items-center space-x-3 cursor-pointer"
><input
class="w-4 h-4 rounded border-white/20 bg-white/5 text-purple-600 focus:ring-purple-500/50"
type="checkbox"
/><span class="text-sm text-gray-300"
>Remember me</span
></label
><button
type="button"
class="text-sm text-purple-400 hover:text-purple-300 transition-colors duration-200"
>
Forgot password?
</button>
</div>
<button
type="submit"
class="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-2xl transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<span>Sign In</span
><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 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</form>
<form id="signupForm" class="space-y-6 hidden">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Full Name</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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 w-5 h-5 text-gray-400"
>
<path
d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<input
class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Enter your full name"
type="text"
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Email Address</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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-mail w-5 h-5 text-gray-400"
>
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path
d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"
></path>
</svg>
</div>
<input
class="w-full pl-12 pr-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Enter your email"
type="email"
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Password</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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-lock w-5 h-5 text-gray-400"
>
<rect
width="18"
height="11"
x="3"
y="11"
rx="2"
ry="2"
></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<input
class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Create a password"
type="password"
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-300"
>Confirm Password</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
>
<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-lock w-5 h-5 text-gray-400"
>
<rect
width="18"
height="11"
x="3"
y="11"
rx="2"
ry="2"
></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<input
class="w-full pl-12 pr-12 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-500/50 focus:bg-white/10 transition-all duration-300"
placeholder="Confirm your password"
type="password"
/>
</div>
</div>
<button
type="submit"
class="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-2xl transition-all duration-300 hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<span>Create Account</span
><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 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</form>
<div class="my-8 flex items-center">
<div
class="flex-1 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
></div>
<span class="px-4 text-sm text-gray-400">or continue with</span>
<div
class="flex-1 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
></div>
</div>
<div class="grid grid-cols-2 gap-4">
<button
class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<div
class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
>
<img
src="https://landinggo.com/assets/img/stock/login/google.svg"
alt="Google"
class="w-5 h-5"
/>
</div>
<span
class="group-hover:translate-x-1 transition-transform duration-200"
>Google</span
></button
><button
class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<div
class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
>
<img
src="https://landinggo.com/assets/img/stock/login/github.svg"
alt="GitHub"
class="w-5 h-5"
/>
</div>
<span
class="group-hover:translate-x-1 transition-transform duration-200"
>GitHub</span
></button
><button
class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<div
class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
>
<img
src="https://landinggo.com/assets/img/stock/login/linkedin.svg"
alt="LinkedIn"
class="w-5 h-5"
/>
</div>
<span
class="group-hover:translate-x-1 transition-transform duration-200"
>LinkedIn</span
></button
><button
class="py-3 px-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-2xl text-white font-medium transition-all duration-300 hover:scale-105 hover:bg-white/10 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 group"
>
<div
class="w-5 h-5 rounded p-0.5 flex items-center justify-center"
>
<img
src="https://landinggo.com/assets/img/stock/login/facebook.svg"
alt="Facebook"
class="w-5 h-5"
/>
</div>
<span
class="group-hover:translate-x-1 transition-transform duration-200"
>Facebook</span
>
</button>
</div>
<div class="mt-8 text-center space-y-4">
<div class="text-sm text-gray-400">
Need help?
<button
class="text-purple-400 hover:text-purple-300 transition-colors duration-200"
>
Contact Support
</button>
</div>
<div
class="flex items-center justify-center space-x-4 text-xs text-gray-500"
>
<button
class="hover:text-gray-300 transition-colors duration-200"
>
Privacy</button
><span>•</span
><button
class="hover:text-gray-300 transition-colors duration-200"
>
Terms</button
><span>•</span
><button
class="hover:text-gray-300 transition-colors duration-200"
>
Security
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleForm(formType) {
const signinForm = document.getElementById('signinForm')
const signupForm = document.getElementById('signupForm')
const signinBtn = document.getElementById('signInBtn')
const signupBtn = document.getElementById('signUpBtn')
if (formType === 'signin') {
signinForm.classList.remove('hidden')
signupForm.classList.add('hidden')
signinBtn.classList.add(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
signinBtn.classList.remove('text-gray-300')
signupBtn.classList.remove(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
signupBtn.classList.add('text-gray-300')
} else {
signinForm.classList.add('hidden')
signupForm.classList.remove('hidden')
signupBtn.classList.add(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
signupBtn.classList.remove('text-gray-300')
signinBtn.classList.remove(
'bg-gradient-to-r',
'from-blue-600',
'to-purple-600',
'text-white',
'shadow-lg'
)
signinBtn.classList.add('text-gray-300')
}
}
</script>
</section>
