Загрузка...
Адаптивный футер с стекловидным дизайном: ссылки, подписка на рассылку, соцсети. Идеален для SaaS и корпоративных сайтов.
<footer class="glass-footer mt-32">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
<div class="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
<div class="col-span-2 mb-8">
<a href="#" class="flex items-center gap-3 mb-6">
<span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-indigo-600 ring-1 ring-white/15 shadow-lg backdrop-blur-sm">
<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" data-lucide="hexagon" class="lucide lucide-hexagon h-5 w-5 text-white"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
</span>
<span class="text-xl font-semibold tracking-tight text-white">Nexus</span>
</a>
<p class="text-sm text-white/70 max-w-sm leading-relaxed">The unified workspace that adapts to how you think and work. Built for modern teams who demand excellence.</p>
<div class="flex items-center gap-4 mt-6">
<a href="#" class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github h-5 w-5"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
</a>
<a href="#" class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter h-5 w-5"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
</a>
<a href="#" class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin h-5 w-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
<a href="#" class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube" class="lucide lucide-youtube h-5 w-5"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg>
</a>
</div>
</div>
<div class="space-y-4">
<h4 class="text-sm font-medium text-white mb-4">Product</h4>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="#" class="hover:text-white transition-colors duration-200">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Templates</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Security</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Integrations</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">API</a></li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-sm font-medium text-white mb-4">Solutions</h4>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="#" class="hover:text-white transition-colors duration-200">For Teams</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">For Startups</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Enterprise</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Education</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Non-profit</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Remote Work</a></li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-sm font-medium text-white mb-4">Resources</h4>
<ul class="space-y-3 text-sm text-white/70">
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Documentation</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Changelog</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Status</a></li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-sm font-medium text-white mb-4">Company</h4>
<ul class="space-y-3 text-sm text-white/70">
<li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Press Kit</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Partners</a></li>
<li class=""><a href="#" class="hover:text-white transition-colors duration-200">Contact</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Investors</a></li>
</ul>
</div>
</div>
<!-- Newsletter signup -->
<div class="mt-12 pt-8 border-t border-white/10">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
<div class="max-w-md">
<h4 class="text-lg font-medium text-white mb-2">Stay updated</h4>
<p class="text-sm text-white/70">Get the latest updates, tips, and product announcements delivered to your inbox.</p>
</div>
<div class="flex flex-col sm:flex-row gap-3 max-w-md w-full lg:w-auto">
<div class="relative flex-1">
<input type="email" placeholder="Enter your email address" class="w-full rounded-xl border border-white/15 bg-white/[0.08] px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-violet-500/40 focus:border-violet-500/30 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
</div>
<button class="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-tr from-violet-600 to-fuchsia-600 px-6 py-3 text-sm font-medium text-white shadow-lg hover:from-violet-500 hover:to-fuchsia-500 transition-all duration-200 hover:shadow-xl hover:scale-105 backdrop-blur-sm">
<span class="">Subscribe</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" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</button>
</div>
</div>
</div>
<!-- Bottom section -->
<div class="mt-12 pt-8 border-t border-white/10">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-6 text-sm text-white/60">
<span>© 2024 Nexus Technologies, Inc.</span>
<a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a>
<a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a>
</div>
<div class="flex items-center gap-2 text-xs text-white/50">
<div class="flex h-2 w-2">
<div class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></div>
<div class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></div>
</div>
<span>All systems operational</span>
</div>
</div>
</div>
</div>
</footer>