Gradient Footer with Navigation & Social Icons

<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 &gt; body:nth-of-type(1) &gt; 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>