Animated Dark Footer with Links & Social Icons

<div class="sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl mr-auto ml-auto pr-4 pl-4">
        <div class="overflow-hidden xl:bg-neutral-950/60 border border-white/20 border-dashed rounded-none mt-6 relative">
          <!-- Background (Unicorn Studio) -->

          <!-- Radial beams / grid overlay -->
          <div class="pointer-events-none absolute inset-0">
            <div class="absolute inset-0 opacity-70 [mask-image:radial-gradient(65%_65%_at_50%_50%,black,transparent)] bg-[radial-gradient(1200px_400px_at_50%_-10%,rgba(16,185,129,0.25),transparent),radial-gradient(1200px_600px_at_50%_120%,rgba(59,130,246,0.2),transparent)]"></div>
            <div class="absolute inset-0 opacity-[0.18] [mask-image:radial-gradient(80%_80%_at_50%_50%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,.7)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.7)_1px,transparent_1px)] bg-[size:28px_28px]"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black"></div>
          </div>

          <!-- Floating utility icon -->
          <div class="absolute left-5 top-5" style="visibility: hidden;">
            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/20 ring-1 ring-sky-400/30 backdrop-blur">
              <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="refresh-cw" class="lucide lucide-refresh-cw h-5 w-5 text-sky-300"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path><path d="M21 3v5h-5" class=""></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path><path d="M8 16H3v5" class=""></path></svg>
            </div>
          </div>

          <!-- Content -->
          <div class="flex flex-col sm:py-16 md:pl-8 md:pr-8 text-center mx-auto pt-16 pr-8 pb-16 pl-8 relative items-center justify-center">
            <div class="w-full max-w-7xl">
              <!-- Footer Top -->
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 pb-12 border-b border-white/10">
                <!-- Brand Column -->
                <div class="lg:col-span-2">
                  <div class="flex flex-col items-start">
                    <!-- 🖼️ Logo at top left -->
                    <div class="inline-flex bg-center mix-blend-multiply w-[40px] h-[40px] bg-[url(https://cdn.midjourney.com/cb5b11d7-075b-41ad-8245-7abae741cd52/0_2.png?w=800&amp;q=80)] bg-cover rounded invert mb-4"></div>

                    <!-- ✨ Text -->
                    <p class="leading-relaxed text-sm text-zinc-400 text-left mb-6">
                      Deploy at warp speed. The fastest way to ship your
                      applications globally with zero configuration.
                    </p>

                    <!-- 🌐 Social icons -->
                    <div class="flex items-center gap-3">
                      <a href="#" class="flex items-center justify-center w-9 h-9 rounded-lg bg-white/5 ring-1 ring-white/10 transition hover:bg-white/10 text-zinc-300">
                        <!-- Twitter -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="">
                          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" class=""></path>
                        </svg>
                      </a>

                      <a href="#" class="flex items-center justify-center w-9 h-9 rounded-lg bg-white/5 ring-1 ring-white/10 transition hover:bg-white/10 text-zinc-300">
                        <!-- GitHub -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="">
                          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" class=""></path>
                        </svg>
                      </a>

                      <a href="#" class="flex items-center justify-center w-9 h-9 rounded-lg bg-white/5 ring-1 ring-white/10 transition hover:bg-white/10 text-zinc-300">
                        <!-- LinkedIn -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class="">
                          <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" class=""></path>
                        </svg>
                      </a>
                    </div>
                  </div>
                </div>

                <!-- Product -->
                <div class="text-left" style="">
                  <h4 class="text-white text-sm font-semibold mb-4 tracking-tight">
                    Product
                  </h4>
                  <ul class="space-y-3">
                    <li>
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Features
                      </a>
                    </li>
                    <li>
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Pricing
                      </a>
                    </li>
                    <li class="">
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Enterprise
                      </a>
                    </li>
                    
                  </ul>
                </div>

                <!-- Resources -->
                <div class="text-left">
                  <h4 class="text-white text-sm font-semibold mb-4 tracking-tight">
                    Resources
                  </h4>
                  <ul class="space-y-3">
                    <li class="">
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Documentation
                      </a>
                    </li>
                    <li>
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Guides
                      </a>
                    </li>
                    <li class="">
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        API Reference
                      </a>
                    </li>
                    
                  </ul>
                </div>

                <!-- Company -->
                <div class="text-left">
                  <h4 class="text-white text-sm font-semibold mb-4 tracking-tight">
                    Company
                  </h4>
                  <ul class="space-y-3">
                    <li class="">
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        About
                      </a>
                    </li>
                    <li>
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Blog
                      </a>
                    </li>
                    <li class="">
                      <a href="#" class="text-sm text-zinc-400 hover:text-white transition">
                        Careers
                      </a>
                    </li>
                    
                  </ul>
                </div>
              </div>

              <!-- Footer Bottom -->
              <div class="flex flex-col md:flex-row items-center justify-between pt-8 gap-4">
                <p class="text-sm text-zinc-500">
                  © 2025 Pulse. All rights reserved.
                </p>
                <div class="flex items-center gap-6">
                  <a href="#" class="text-sm text-zinc-500 hover:text-white transition">
                    Privacy
                  </a>
                  <a href="#" class="text-sm text-zinc-500 hover:text-white transition">
                    Terms
                  </a>
                  <a href="#" class="text-sm text-zinc-500 hover:text-white transition">
                    Security
                  </a>
                  <a href="#" class="text-sm text-zinc-500 hover:text-white transition">
                    Status
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Secondary actions for small screens -->
        <div class="flex md:hidden mt-4 items-center justify-between" style="display: none;">
          <button class="rounded-xl bg-white/5 px-4 py-2 text-sm text-zinc-200 ring-1 ring-white/10">
            Contact
          </button>
          <button class="rounded-xl bg-white px-4 py-2 text-sm text-black ring-1 ring-black/10">
            Join waitlist
          </button>
        </div>
      </div>