Component:
Footer Fintech Glassmorphism
Colors:
Description:
This carefully crafted Footer 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: Footer
@industry: Fintech
@style: Glassmorphism
@category: Navigation, Page Section, Contact
@framework: Tailwind
@license: Free
-->
<footer
class="relative bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden"
>
<div class="relative z-10">
<div class="py-16">
<div class="container mx-auto px-4">
<div class="grid lg:grid-cols-6 gap-8 max-w-7xl mx-auto">
<div class="lg:col-span-2 space-y-8">
<div class="space-y-6">
<div class="flex items-center space-x-3">
<div
class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl flex items-center justify-center transform hover:scale-110 transition-transform duration-300"
>
<div
class="w-8 h-8 bg-white rounded-lg transform rotate-45"
></div>
</div>
<span
class="text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
>FinTech</span
>
</div>
<p class="text-gray-300 leading-relaxed">
Empowering businesses worldwide with cutting-edge financial
technology. Build the future of finance with our comprehensive
platform.
</p>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-3 text-gray-300">
<div
class="p-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg"
>
<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-4 h-4"
>
<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>
<span class="text-sm">[email protected]</span>
</div>
<div class="flex items-center space-x-3 text-gray-300">
<div
class="p-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg"
>
<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-phone w-4 h-4"
>
<path
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
></path>
</svg>
</div>
<span class="text-sm">1-800-FINTECH</span>
</div>
<div class="flex items-center space-x-3 text-gray-300">
<div
class="p-2 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-lg"
>
<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-map-pin w-4 h-4"
>
<path
d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"
></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<span class="text-sm">San Francisco, CA</span>
</div>
</div>
</div>
<div>
<div class="space-y-6">
<h3 class="text-lg font-bold text-white mb-4 relative">
Products
<div
class="absolute -bottom-2 left-0 w-12 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full"
></div>
</h3>
<div class="space-y-3">
<a
href="/payments"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-4 h-4"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<span class="text-sm">Payment Processing</span></a
><a
href="/analytics"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-bar-chart3 w-4 h-4"
>
<path d="M3 3v18h18"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>
</div>
<span class="text-sm">Analytics Dashboard</span></a
><a
href="/api"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-code w-4 h-4"
>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<span class="text-sm">Developer APIs</span></a
><a
href="/mobile"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-4 h-4"
>
<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-sm">Mobile SDKs</span></a
><a
href="/security"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-4 h-4"
>
<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>
<span class="text-sm">Security Center</span></a
><a
href="/integrations"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-4 h-4"
>
<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>
<span class="text-sm">Integrations</span></a
>
</div>
</div>
</div>
<div>
<div class="space-y-6">
<h3 class="text-lg font-bold text-white mb-4 relative">
Company
<div
class="absolute -bottom-2 left-0 w-12 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full"
></div>
</h3>
<div class="space-y-3">
<a
href="/about"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-building w-4 h-4"
>
<rect
width="16"
height="20"
x="4"
y="2"
rx="2"
ry="2"
></rect>
<path d="M9 22v-4h6v4"></path>
<path d="M8 6h.01"></path>
<path d="M16 6h.01"></path>
<path d="M12 6h.01"></path>
<path d="M12 10h.01"></path>
<path d="M12 14h.01"></path>
<path d="M16 10h.01"></path>
<path d="M16 14h.01"></path>
<path d="M8 10h.01"></path>
<path d="M8 14h.01"></path>
</svg>
</div>
<span class="text-sm">About Us</span></a
><a
href="/careers"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-briefcase w-4 h-4"
>
<path
d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"
></path>
<rect width="20" height="14" x="2" y="6" rx="2"></rect>
</svg>
</div>
<span class="text-sm">Careers</span></a
><a
href="/press"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-file-text w-4 h-4"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>
</div>
<span class="text-sm">Press Kit</span></a
><a
href="/investors"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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 w-4 h-4"
>
<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>
</div>
<span class="text-sm">Investors</span></a
><a
href="/blog"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-book-open w-4 h-4"
>
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
></path>
</svg>
</div>
<span class="text-sm">Blog</span></a
><a
href="/events"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-calendar w-4 h-4"
>
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
</svg>
</div>
<span class="text-sm">Events</span></a
>
</div>
</div>
</div>
<div>
<div class="space-y-6">
<h3 class="text-lg font-bold text-white mb-4 relative">
Support
<div
class="absolute -bottom-2 left-0 w-12 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full"
></div>
</h3>
<div class="space-y-3">
<a
href="/help"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-help w-4 h-4"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>
</div>
<span class="text-sm">Help Center</span></a
><a
href="/docs"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-book-open w-4 h-4"
>
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
></path>
</svg>
</div>
<span class="text-sm">Documentation</span></a
><a
href="/status"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-globe w-4 h-4"
>
<circle cx="12" cy="12" r="10"></circle>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
></path>
<path d="M2 12h20"></path>
</svg>
</div>
<span class="text-sm">System Status</span></a
><a
href="/contact"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-message-circle w-4 h-4"
>
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
</svg>
</div>
<span class="text-sm">Contact Support</span></a
><a
href="/community"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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 w-4 h-4"
>
<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>
</div>
<span class="text-sm">Community</span></a
><a
href="/training"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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"
>
<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>
<span class="text-sm">Training</span></a
>
</div>
</div>
</div>
<div class="space-y-8">
<div class="space-y-6">
<h3 class="text-lg font-bold text-white mb-4 relative">
Resources
<div
class="absolute -bottom-2 left-0 w-12 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 rounded-full"
></div>
</h3>
<div class="space-y-3">
<a
href="/guides"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-book-open w-4 h-4"
>
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
></path>
</svg>
</div>
<span class="text-sm">Developer Guides</span></a
><a
href="/api-reference"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-code w-4 h-4"
>
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
<span class="text-sm">API Reference</span></a
><a
href="/changelog"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-file-text w-4 h-4"
>
<path
d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
<path d="M10 9H8"></path>
<path d="M16 13H8"></path>
<path d="M16 17H8"></path>
</svg>
</div>
<span class="text-sm">Changelog</span></a
><a
href="/downloads"
class="group flex items-center space-x-2 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 transform translate-y-0 opacity-100 transition-all duration-500"
target="_self"
><div
class="p-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded group-hover:from-blue-500/30 group-hover:to-purple-500/30 transition-all duration-300"
>
<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-download w-4 h-4"
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" x2="12" y1="15" y2="3"></line>
</svg>
</div>
<span class="text-sm">Downloads</span></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-white/10 py-8">
<div class="container mx-auto px-4">
<div
class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 max-w-7xl mx-auto"
>
<div
class="flex flex-col lg:flex-row items-center justify-between space-y-4 lg:space-y-0"
>
<div class="text-center lg:text-left">
<p class="text-gray-400 text-sm">
© 2025 FinTech Platform. All rights reserved.
</p>
<p class="text-gray-500 text-xs mt-1">
Built with ❤️ for the future of finance
</p>
</div>
<div class="flex flex-wrap items-center justify-center gap-6">
<a
href="/privacy"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Privacy Policy</a
><a
href="/terms"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Terms of Service</a
><a
href="/cookies"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Cookie Policy</a
><a
href="/compliance"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Compliance</a
><a
href="/security"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Security</a
><a
href="/licenses"
class="text-gray-400 hover:text-white text-sm transition-colors duration-300 hover:underline"
>Licenses</a
>
</div>
<div class="flex items-center space-x-4">
<button
class="flex items-center space-x-2 px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-gray-300 hover:text-white hover:bg-white/20 transition-all duration-300 hover:scale-105"
>
<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-globe w-4 h-4"
>
<circle cx="12" cy="12" r="10"></circle>
<path
d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
></path>
<path d="M2 12h20"></path></svg
><span class="text-sm">English (US)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
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