<!--
@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>
