Animated Radial Gradient Footer with Links & Newsletter

<footer class="relative z-10 animate-[fadeInUp_1s_ease-out_1.6s_forwards] pt-2 pr-2 pb-2 pl-2 w-full" style="transform: translateY(50px);">
      <div class="bg-[radial-gradient(circle_at_top_left,var(--tw-gradient-stops))] from-neutral-950 to-neutral-800 border-white/10 rounded-xl border-t">
  <div class="mx-auto max-w-7xl px-6 py-16">
    <div class="grid gap-12 md:grid-cols-3">
      <div class="flex flex-col gap-6">
        <a href="#" class="flex items-center gap-3 hover:opacity-80 transition-opacity group">
          
          <div class="flex flex-col leading-none">
            <span class="text-lg font-semibold text-white font-sans tracking-tight">NovaFlow</span>
            <span class="text-sm text-neutral-400 font-sans">Ship Better Products</span>
          </div>
        </a>
        
        <div class="mt-4 flex items-center gap-3">
          <a href="#" class="grid h-10 w-10 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 hover:ring-white/20 transition-all duration-200" aria-label="Twitter">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-300">
              <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="grid h-10 w-10 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 hover:ring-white/20 transition-all duration-200" aria-label="GitHub">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-300">
              <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="grid h-10 w-10 place-items-center rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 hover:scale-110 hover:ring-white/20 transition-all duration-200" aria-label="LinkedIn">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-300">
              <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 class="mt-4 space-y-2">
          <p class="text-sm text-neutral-400 font-sans">© 2024 NovaFlow. All rights reserved.</p>
          <p class="text-xs text-neutral-500 font-sans">Built for the next generation of product teams.</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-12 md:col-span-2">
        <div class="space-y-8">
          <div class="">
            <h4 class="mb-4 text-sm font-semibold tracking-tight text-white font-sans">Platform</h4>
            <ul class="space-y-3 text-sm text-neutral-400">
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Features</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Integrations</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">API &amp; SDK</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Security</a></li>
            </ul>
          </div>
          
          <div class="">
            <h4 class="mb-4 text-sm font-semibold tracking-tight text-white font-sans">Resources</h4>
            <ul class="space-y-3 text-sm text-neutral-400">
              <li><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Documentation</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Tutorials</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Blog</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Changelog</a></li>
            </ul>
          </div>
        </div>
        
        <div class="space-y-8">
          <div class="">
            <h4 class="mb-4 text-sm font-semibold tracking-tight text-white font-sans">Support</h4>
            <ul class="space-y-3 text-sm text-neutral-400">
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Help Center</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Contact Us</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Community</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Status</a></li>
            </ul>
          </div>
          
          <div class="">
            <h4 class="mb-4 text-sm font-semibold tracking-tight text-white font-sans">Company</h4>
            <ul class="space-y-3 text-sm text-neutral-400">
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">About</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Careers</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Press</a></li>
              <li class=""><a class="hover:text-white hover:translate-x-1 transition-all duration-200 inline-block font-sans" href="#">Legal</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom section -->
    <div class="mt-16 pt-8 border-t border-white/10">
      <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
        <div class="flex flex-wrap gap-6 text-xs text-neutral-500">
          <a href="#" class="hover:text-neutral-300 transition-colors font-sans">Privacy Policy</a>
          <a href="#" class="hover:text-neutral-300 transition-colors font-sans">Terms of Service</a>
          <a href="#" class="hover:text-neutral-300 transition-colors font-sans">Cookie Settings</a>
          <a href="#" class="hover:text-neutral-300 transition-colors font-sans">Sitemap</a>
        </div>
        
        <div class="flex items-center gap-4">
          <span class="text-xs text-neutral-500 font-sans">Stay updated</span>
          <div class="flex items-center gap-2">
            <input type="email" placeholder="Enter your email" class="bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500/50 transition-all">
            <button class="inline-flex items-center justify-center h-10 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium transition-all duration-200 hover:scale-105">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                <path d="M5 12h14" class=""></path>
                <path d="m12 5 7 7-7 7" class=""></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    </footer>