Загрузка...
Адаптивный тёмный футер с формой подписки на рассылку и ссылками на соцсети. Реализован на Tailwind CSS, поддерживает "темный режим" и "стекломорфизм".
<footer class="max-w-7xl mx-auto pb-12">
<div class="p-12 lg:p-16 border border-white/10 rounded-3xl bg-white/[0.03] backdrop-blur-2xl">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-16">
<div class="lg:col-span-1">
<div class="flex items-center mb-6">
<span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-800 ring-1 ring-white/10 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-300">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M3 9h18" class=""></path>
<path d="M3 15h18" class=""></path>
<path d="M9 3v18" class=""></path>
<path d="M15 3v18" class=""></path>
</svg>
</span>
<span class="text-xl font-semibold tracking-tight text-white">StackFoundry</span>
</div>
<p class="text-sm text-white/60 leading-relaxed mb-8">
Experiment, explore, and choose your next tool stack. We help designers discover the best modern tools through hands-on trials and expert curation.
</p>
<div class="flex items-center gap-4">
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 bg-white/[0.03]" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<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" class=""></path>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 bg-white/[0.03]" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<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" class=""></path>
<rect width="4" height="12" x="2" y="9" class=""></rect>
<circle cx="4" cy="4" r="2" class=""></circle>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 bg-white/[0.03]" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<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" class=""></path>
<path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
</svg>
</a>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Resources</h4>
<ul class="space-y-4">
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Design Kits</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">AI Workflows</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Tutorials</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Guides</a>
</li>
</ul>
</div>
<div>
<h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Content</h4>
<ul class="space-y-4">
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Articles</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Episodes</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Tool Reviews</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Case Studies</a>
</li>
</ul>
</div>
<div>
<h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Support</h4>
<ul class="space-y-4">
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Help Center</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Contact Us</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Bundle Support</a>
</li>
<li>
<a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Terms & Conditions</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10 pt-12 mb-12">
<div class="max-w-2xl mx-auto text-center">
<h4 class="text-lg font-medium text-white mb-4">Stay in the Loop</h4>
<p class="text-sm text-white/60 mb-6">Get notified about new tool bundles, exclusive deals, and design workflow insights.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<input type="email" placeholder="Enter your email address" class="flex-1 max-w-md px-4 py-3 rounded-xl text-sm text-white placeholder-white/40 border border-white/10 focus:border-fuchsia-500/30 focus:outline-none transition-all duration-300 bg-white/5">
<button class="px-8 py-3 rounded-xl text-sm font-medium text-neutral-900 bg-fuchsia-400 hover:bg-fuchsia-300 transition-all duration-300">Subscribe</button>
</div>
</div>
</div>
</div>
<div class="pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-wrap items-center gap-6 text-xs text-white/40">
<span>© 2024 StackFoundry. All rights reserved.</span>
<a href="#" class="hover:text-white/60 transition-colors duration-300">Privacy Policy</a>
<a href="#" class="hover:text-white/60 transition-colors duration-300">Terms of Service</a>
</div>
<div class="flex items-center gap-4 text-xs text-white/40">
<span class="flex items-center gap-2">
Bundle Limited
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-fuchsia-400">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</span>
<span class="flex items-center gap-2">
Trusted Partners
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<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" class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
</span>
</div>
</div>
</footer>