Dark Social Links Footer with Newsletter Signup

<footer class="bg-black text-white border-t border-white/10 font-sans relative overflow-hidden">
      <!-- Top Glow Effect -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-px bg-gradient-to-r from-transparent via-white/40 to-transparent"></div>
      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-lg h-32 bg-white/5 blur-[80px] rounded-full pointer-events-none"></div>

      <div class="max-w-7xl mx-auto border-x border-white/10 relative z-10">
        <!-- Social Media Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 border-b border-white/10">
          <!-- YouTube -->
          <a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
            <div class="flex items-center gap-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" class=""></path>
              </svg>
              <span class="text-sm font-medium text-white">YouTube</span>
            </div>
            <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 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>

          <!-- Twitter -->
          <a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
            <div class="flex items-center gap-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" class=""></path>
              </svg>
              <span class="text-sm font-medium text-white">Twitter</span>
            </div>
            <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 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>

          <!-- Instagram -->
          <a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 md:border-r border-white/10 hover:bg-white/[0.03] transition-colors">
            <div class="flex items-center gap-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                <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>
              <span class="text-sm font-medium text-white">Instagram</span>
            </div>
            <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 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>

          <!-- Facebook -->
          <a href="#" class="group flex items-center justify-between p-6 border-b md:border-b-0 hover:bg-white/[0.03] transition-colors">
            <div class="flex items-center gap-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-white">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
              </svg>
              <span class="text-sm font-medium text-white">Facebook</span>
            </div>
            <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 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>

        <!-- Links Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 min-h-[300px]">
          <!-- Column 1 -->
          <div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
            <h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
              Product
            </h4>
            <ul class="space-y-4">
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Technology
                </a>
              </li>
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Integrations
                </a>
              </li>
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Releases
                </a>
              </li>
            </ul>
          </div>

          <!-- Column 2 -->
          <div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
            <h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
              Resources
            </h4>
            <ul class="space-y-4">
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Docs
                </a>
              </li>
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  API Reference
                </a>
              </li>
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Tutorials
                </a>
              </li>
            </ul>
          </div>

          <!-- Column 3 -->
          <div class="p-8 md:p-12 border-r border-white/10 border-b md:border-b-0">
            <h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
              Company
            </h4>
            <ul class="space-y-4">
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Team
                </a>
              </li>
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Culture
                </a>
              </li>
              <li class="">
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Jobs
                </a>
              </li>
            </ul>
          </div>

          <!-- Column 4 -->
          <div class="p-8 md:p-12">
            <h4 class="text-xs font-semibold text-zinc-600 uppercase tracking-widest mb-8">
              Legal
            </h4>
            <ul class="space-y-4">
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Imprint
                </a>
              </li>
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Data Policy
                </a>
              </li>
              <li>
                <a href="#" class="text-sm text-zinc-300 hover:text-white transition-colors block">
                  Cookie Policy
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- Bottom Section -->
        <div class="px-8 md:px-12 pb-24 pt-20 flex flex-col lg:flex-row items-start lg:items-end justify-between gap-12">
          <div class="max-w-md">
            <div class="flex items-center gap-3 mb-6">
              <!-- Geometric Logo -->

              <span class="text-3xl font-semibold tracking-tighter text-white">
                FINEX.
              </span>
            </div>
            <p class="text-sm text-zinc-500 leading-relaxed max-w-xs font-medium">
              Optimizing the internet for the next generation of competitive
              gaming.
            </p>
          </div>

          <div class="w-full lg:w-auto flex flex-col md:flex-row gap-0">
            <div class="relative w-full md:w-80 group">
              <input type="email" placeholder="GAMER@EMAIL.COM" class="bg-white text-black text-xs font-mono font-medium placeholder:text-black/50 px-5 py-4 w-full h-full outline-none uppercase transition-colors rounded-none">
            </div>
            <button class="bg-zinc-900 text-white text-[11px] tracking-wide font-semibold px-8 py-4 border border-zinc-800 hover:bg-zinc-800 transition-colors uppercase whitespace-nowrap">
              Subscribe
            </button>
          </div>
        </div>
      </div>
    </footer>