Studio
Category: Footers
<footer class="relative w-full border-t border-white/10" style="">
<div class="absolute inset-0 pointer-events-none bg-[radial-gradient(40%_40%_at_80%_10%,rgba(34,211,238,0.12),transparent_60%)]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<a href="#" class="flex items-center space-x-3">
<span class="inline-flex h-8 w-8 items-center justify-center ring-1 ring-white/10 bg-zinc-800 rounded-full">
<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="orbit" class="lucide lucide-orbit h-4 w-4 text-zinc-200"><path d="M20.341 6.484A10 10 0 0 1 10.266 21.85" class=""></path><path d="M3.659 17.516A10 10 0 0 1 13.74 2.152" class=""></path><circle cx="12" cy="12" r="3" class=""></circle><circle cx="19" cy="5" r="2" class=""></circle><circle cx="5" cy="19" r="2" class=""></circle></svg>
</span>
<span class="text-xl font-semibold tracking-tight">Marine</span>
</a>
<div class="w-full md:w-auto md:min-w-[440px]">
<form class="flex items-center gap-3">
<div class="flex-1 relative">
<input type="email" placeholder="Subscribe for charter updates" class="w-full rounded-xl bg-white/5 border border-white/10 focus:border-cyan-400/40 focus:outline-none px-4 py-2.5 text-sm placeholder:text-white/40" style="">
<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="anchor" class="lucide lucide-anchor absolute right-3 top-2.5 h-5 w-5 text-white/40"><path d="M12 22V8" class=""></path><path d="M5 12H2a10 10 0 0 0 20 0h-3" class=""></path><circle cx="12" cy="5" r="3" class=""></circle></svg>
</div>
<button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-cyan-400/90 hover:bg-cyan-400 text-black px-4 py-2.5 text-sm font-medium transition" style="">
<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" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
Subscribe
</button>
</form>
</div>
</div>
<div class="mt-8 grid grid-cols-2 sm:flex sm:items-center sm:justify-between gap-4 text-sm">
<div class="flex items-center gap-3">
<a href="#" class="h-9 w-9 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center" style="">
<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-5 w-5"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
</a>
<a href="#" class="h-9 w-9 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center" style="">
<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-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" class=""></path></svg>
</a>
<a href="#" class="h-9 w-9 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center" style="">
<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="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" class=""></path><path d="m10 15 5-3-5-3z" class=""></path></svg>
</a>
</div>
<div class="flex gap-6 justify-end col-span-2 sm:col-span-1">
<a class="text-white/70 hover:text-white" href="#" style="">Fleet</a>
<a class="text-white/70 hover:text-white" href="#" style="">Charters</a>
<a class="text-white/70 hover:text-white" href="#" style="">Services</a>
<a class="text-white/70 hover:text-white" href="#" style="">Sales</a>
</div>
</div>
<div class="mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between text-xs text-white/50">
<p>© <span id="year">2025</span> MarineElite. All rights reserved.</p>
<div class="flex gap-4 mt-2 sm:mt-0">
<a href="#" class="hover:text-white/80">Privacy</a>
<a href="#" class="hover:text-white/80">Terms</a>
</div>
</div>
</div>
</footer>
create a canvas to display a navbar component. we want the navbar component to be centered and the space around it to be flexible empty.
reproduce this navbar component
Created by: LandingHero
