Gridshow
Category: Footers
<footer class="border-white/5 border-t pt-12 pb-12 relative"
style="border-top: 1px solid rgba(163, 230, 53, 0.15); background: linear-gradient(to bottom, rgba(163, 230, 53, 0.08) 0%, transparent 100px); position: relative;"
data-element-locator="html > body:nth-of-type(1) > footer:nth-of-type(1)">
<!-- Lime glow effect on top border -->
<div
style="position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(163, 230, 53, 0.6) 50%, transparent 100%); filter: blur(4px); pointer-events: none;">
</div>
<div
style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 40px; background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.15) 0%, transparent 70%); filter: blur(20px); pointer-events: none;">
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="">
<div class="flex items-center gap-3">
<span class="text-lg font-semibold tracking-tight w-32 h-14 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ad457b1a-a911-459d-9f7b-35c6d76ae781_1600w.png)] bg-cover"></span>
</div>
<p class="mt-3 text-sm text-neutral-400">
Build faster with AI-powered development.
</p>
</div>
<div class="">
<h4 class="text-sm font-medium">Product</h4>
<ul class="mt-3 space-y-2 text-sm text-neutral-400">
<li>
<a href="#features" class="hover:text-white transition">
Features
</a>
</li>
<li class="">
<a href="#pricing" class="hover:text-white transition">
Pricing
</a>
</li>
<li class="">
<a href="#faqs" class="hover:text-white transition">FAQ</a>
</li>
<li>
<a href="#" class="hover:text-white transition">Changelog</a>
</li>
</ul>
</div>
<div class="">
<h4 class="text-sm font-medium">Company</h4>
<ul class="mt-3 space-y-2 text-sm text-neutral-400">
<li class="">
<a href="#why" class="hover:text-white transition">About</a>
</li>
<li class="">
<a href="#contact" class="hover:text-white transition">
Contact
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition">Careers</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition">Blog</a>
</li>
</ul>
</div>
<div class="">
<h4 class="text-sm font-medium">Legal</h4>
<ul class="mt-3 space-y-2 text-sm text-neutral-400">
<li>
<a href="#" class="hover:text-white transition">Privacy</a>
</li>
<li><a href="#" class="hover:text-white transition">Terms</a></li>
<li>
<a href="#" class="hover:text-white transition">Security</a>
</li>
<li>
<a href="#" class="hover:text-white transition">Compliance</a>
</li>
</ul>
</div>
</div>
<div
class="mt-8 border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-neutral-400">
<p class="">© 2024 Hova. All rights reserved.</p>
<div class="flex items-center gap-6">
<a href="#" class="hover:text-white transition" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<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="hover:text-white transition" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<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>
<a href="#" class="hover:text-white transition" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<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>
</div>
</div>
</div>
</footer>
create a canvas to display a navbar component. we want the footer component to be centered and the space around it to be flexible empty.
reproduce this footer component
Created by: LandingHero
