Responsive Tailwind Footer with Links & Newsletter

<footer class="md:py-8 py-6 w-full">
      <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
        <div class="ring-1 ring-white/10 bg-slate-900 rounded-3xl pt-8 pr-8 pb-8 pl-8">
  <!-- Company Links Section -->
  <div class="grid md:grid-cols-4 gap-8 mb-8">
    <div class="">
      <h4 class="text-sm font-semibold text-white mb-4 font-sans">Product</h4>
      <ul class="space-y-3">
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Features</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Integrations</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">API</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Mobile Apps</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">What's New</a></li>
      </ul>
    </div>
    <div class="">
      <h4 class="text-sm font-semibold text-white mb-4 font-sans">Solutions</h4>
      <ul class="space-y-3">
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Engineering Teams</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Product Teams</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Startups</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Enterprise</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Remote Teams</a></li>
      </ul>
    </div>
    <div class="">
      <h4 class="text-sm font-semibold text-white mb-4 font-sans">Resources</h4>
      <ul class="space-y-3">
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Documentation</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Blog</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Community</a></li>
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Help Center</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Changelog</a></li>
      </ul>
    </div>
    <div class="">
      <h4 class="text-sm font-semibold text-white mb-4 font-sans">Company</h4>
      <ul class="space-y-3">
        <li class=""><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">About</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Careers</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Press</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Brand Assets</a></li>
        <li><a href="#" class="text-xs text-slate-400 hover:text-white transition font-sans" title="Link disabled in preview mode">Investors</a></li>
      </ul>
    </div>
  </div>

  <!-- Newsletter Signup -->
  <div class="border-t border-white/10 pt-8 mb-8">
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
      <div class="">
        <h4 class="text-sm font-semibold text-white mb-2 font-sans">Stay updated</h4>
        <p class="text-xs text-slate-400 font-sans">Get the latest features and insights delivered to your inbox.</p>
      </div>
      <div class="flex gap-3 w-full md:w-auto">
        <input type="email" placeholder="Enter your email" class="flex-1 md:w-64 px-3 py-2 text-sm bg-slate-800 border border-white/10 rounded-md text-white placeholder-slate-400 focus:outline-none focus:border-white/20 font-sans">
        <button class="px-4 py-2 text-sm font-medium text-white bg-slate-700 hover:bg-slate-600 rounded-md transition font-sans">Subscribe</button>
      </div>
    </div>
  </div>

  <!-- Main Footer -->
  <div class="flex flex-col md:flex-row items-center justify-between gap-6">
    <div class="flex gap-0 items-center">
            <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2" style="width: 36px; height: 36px;;">
  <path d="M24 8 L36 16 L36 32 L24 40 L12 32 L12 16 Z" fill="white" class=""></path>
</svg>
            <span class="text-base text-white font-semibold tracking-tight font-sans">Flow</span>
          </div>
    <nav class="flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-slate-400">
      <a href="#" class="hover:text-white font-sans" title="Link disabled in preview mode">Privacy</a>
      <a href="#" class="hover:text-white font-sans" title="Link disabled in preview mode">Terms</a>
      <a href="#" class="hover:text-white font-sans" title="Link disabled in preview mode">Security</a>
      <a href="#" class="hover:text-white font-sans" title="Link disabled in preview mode">Status</a>
      <a href="#" class="hover:text-white font-sans" title="Link disabled in preview mode">Contact</a>
    </nav>
  </div>
  <div class="mt-6 h-px bg-white/10"></div>
  <div class="mt-4 flex flex-col md:flex-row items-center justify-between gap-4">
    <p class="text-xs text-slate-500 font-sans">© 2025 AdaFlow, Inc. All rights reserved.</p>
    <div class="flex items-center gap-4">
      <a href="#" class="text-slate-400 hover:text-white transition" aria-label="Twitter" title="Link disabled in preview mode">
        <svg class="h-4 w-4" fill="white" viewBox="0 0 24 24"><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"></path></svg>
      </a>
      <a href="#" class="text-slate-400 hover:text-white transition" aria-label="GitHub" title="Link disabled in preview mode">
        <svg class="h-4 w-4" fill="white" viewBox="0 0 24 24"><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"></path></svg>
      </a>
      <a href="#" class="text-slate-400 hover:text-white transition" aria-label="LinkedIn" title="Link disabled in preview mode">
        <svg class="h-4 w-4" fill="white" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
      </a>
    </div>
  </div>
</div>
      </div>
    </footer>