Загрузка...
Адаптивный футер для подписки на рассылку с соцсетями. Tailwind CSS, форма email, ссылки, иконки. Для лендингов, портфолио, SaaS.
<div class="relative overflow-hidden ring-1 ring-white/10 text-white bg-zinc-950 rounded-3xl mb-8">
<div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-white/10"></div>
<div class="relative sm:px-10 lg:px-14 lg:py-16 pt-12 pr-6 pb-12 pl-6">
<!-- Top -->
<div class="flex flex-col lg:flex-row items-start justify-between gap-10">
<div class="max-w-md">
<a href="#" class="inline-flex items-center gap-3">
<span class="inline-flex h-9 w-9 items-center justify-center ring-1 ring-white/10 text-zinc-900 bg-white rounded-full shadow-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="circle" class="lucide lucide-circle h-4 w-4"><circle cx="12" cy="12" r="10"></circle></svg>
</span>
<span class="text-base font-medium tracking-tight font-geist">AURA</span>
</a>
<p class="mt-4 text-sm text-white/70 leading-relaxed font-geist">
We design brands and products that move people to act. Strategy, systems, and craft—delivered with clarity.
</p>
<form id="nl-form" class="mt-6 flex items-center gap-2">
<div class="flex-1">
<label for="nl-email" class="sr-only">Email</label>
<input id="nl-email" type="email" required="" placeholder="Your email" class="w-full rounded-full bg-white/5 text-white placeholder-white/50 px-4 py-3 text-sm ring-1 ring-white/10 focus:ring-2 focus:ring-white/30 outline-none">
</div>
<button type="submit" class="inline-flex items-center gap-2 rounded-full bg-white text-zinc-900 px-4 py-3 text-sm ring-1 ring-white/10 hover:bg-zinc-100 transition font-geist">
Subscribe
<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="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg>
</button>
</form>
<p id="nl-msg" class="mt-2 text-xs text-white/60 font-geist">Monthly updates. No spam.</p>
</div>
<!-- Links -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-8 w-full lg:w-auto">
<div class="">
<p class="text-sm font-medium text-white/80 tracking-tight font-geist">Work</p>
<ul class="mt-3 space-y-2 text-sm text-white/60 font-geist">
<li><a href="#" class="hover:text-white">Case Studies</a></li>
<li class=""><a href="#" class="hover:text-white">Awards</a></li>
<li class=""><a href="#" class="hover:text-white">Clients</a></li>
</ul>
</div>
<div class="">
<p class="text-sm font-medium text-white/80 tracking-tight font-geist">Services</p>
<ul class="mt-3 space-y-2 text-sm text-white/60 font-geist">
<li><a href="#" class="hover:text-white">Brand & Identity</a></li>
<li class=""><a href="#" class="hover:text-white">Product Design</a></li>
<li><a href="#" class="hover:text-white">Motion & Launch</a></li>
</ul>
</div>
<div class="">
<p class="text-sm font-medium text-white/80 tracking-tight font-geist">Resources</p>
<ul class="mt-3 space-y-2 text-sm text-white/60 font-geist">
<li><a href="#" class="hover:text-white">Newsletter</a></li>
<li class=""><a href="#" class="hover:text-white">Playbook</a></li>
<li class=""><a href="#" class="hover:text-white">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Bottom -->
<div class="mt-10 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-xs text-white/60 font-geist">© 2025 AURA Studio. All rights reserved.</p>
<div class="flex items-center gap-2">
<a href="#" class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10">
<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="instagram" class="lucide lucide-instagram h-4 w-4 text-white/80"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>
</a>
<a href="#" class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10">
<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="twitter" class="lucide lucide-twitter h-4 w-4 text-white/80"><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="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/5 ring-1 ring-white/10 hover:bg-white/10">
<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="linkedin" class="lucide lucide-linkedin h-4 w-4 text-white/80"><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>
</div>
</div>
</div>
</div>