Responsive Footer with Social & Newsletter

<footer class="max-w-7xl mt-16 mr-auto ml-auto pr-6 pb-12 pl-6">
  <div class="lg:p-16 border-white/10 border rounded-3xl pt-12 pr-12 pb-12 pl-12 backdrop-blur-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-12 mb-16">
      <div class="lg:col-span-1">
        <div class="flex items-center mb-6">
          <span class="text-xl font-semibold tracking-tight text-white">AI Factory</span>
        </div>
        <p class="leading-relaxed text-sm text-white/60 mb-8">
          Operationalize AI with reliable, trustworthy inference. Join the waitlist to get early access to our secure platform.
        </p>
        <div class="flex items-center gap-4">
          <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 bg-white/[0.03]" aria-label="Twitter">
            <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">
              <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="w-10 h-10 rounded-xl flex items-center justify-center border border-white/10 hover:border-white/20 transition-all duration-300 hover:bg-white/5 bg-white/[0.03]" aria-label="LinkedIn">
            <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">
              <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 class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Platform</h4>
        <ul class="space-y-4">
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Evaluation Pipeline</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Model Orchestration</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Compliance &amp; Safety</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">API Gateway</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Solutions</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Enterprise AI</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Production Inference</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Model Testing</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Company</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">About</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Blog</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Careers</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Contact</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="border-t border-white/10 pt-12 mb-12">
      <div class="max-w-2xl mx-auto text-center">
        <h4 class="text-lg font-medium text-white mb-4">Stay up to date</h4>
        <p class="text-sm text-white/60 mb-6">Get the latest updates on platform features, model releases, and enterprise AI best practices.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <input type="email" placeholder="Enter your email address" class="flex-1 max-w-md px-4 py-3 rounded-xl text-sm text-white placeholder-white/40 border border-white/10 focus:border-lime-400/40 focus:outline-none transition-all duration-300 bg-white/5">
          <button class="hover:border-lime-300/80 transition-all duration-300 text-sm font-medium text-neutral-900 bg-gradient-to-br from-lime-400 to-emerald-500 rounded-xl pt-3 pr-8 pb-3 pl-8">Subscribe</button>
        </div>
      </div>
    </div>
    <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
      <div class="flex flex-wrap items-center gap-6 text-xs text-white/40">
        <span>© 2024 AI Factory. All rights reserved.</span>
        <a href="#" class="hover:text-white/60 transition-colors duration-300">Privacy Policy</a>
        <a href="#" class="hover:text-white/60 transition-colors duration-300">Terms of Service</a>
      </div>
      <div class="flex items-center gap-4 text-xs text-white/40">
        <span class="flex items-center gap-2">
          SOC2 Compliant
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-400">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
        </span>
        <span class="flex items-center gap-2">
          99.9% Uptime
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-lime-300">
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
</footer>