Glassmorphic Footer with Newsletter & Social Links

<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 font-sans">AI Factory</span>
        </div>
        <p class="leading-relaxed text-sm text-white/60 mb-8 font-sans">
          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 font-sans">Platform</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Evaluation Pipeline</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Model Orchestration</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Compliance &amp; Safety</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">API Gateway</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide font-sans">Solutions</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Enterprise AI</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Production Inference</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Model Testing</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide font-sans">Company</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">About</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Blog</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Careers</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-sans">Contact</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="border-white/10 border-t mb-12 pt-12">
      <div class="max-w-2xl text-center mr-auto ml-auto">
        <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 placeholder-white/40 focus:border-neutral-400/40 focus:outline-none transition-all duration-300 text-sm text-white bg-white/5 border-white/10 border rounded-xl pt-3 pr-4 pb-3 pl-4">
          <button type="button" role="button" aria-label="Create Account" class="group relative inline-flex shadow-[0_8px_16px_-4px_rgba(255,255,255,0.05)] hover:shadow-[0_12px_20px_-6px_rgba(255,255,255,0.1)] transition duration-300 ease-out select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 transform-gpu hover:-translate-y-0.5 text-white pt-[1px] pr-[1px] pb-[1px] pl-[1px] items-center justify-center rounded-xl" style="background-image: linear-gradient(144deg,rgba(255,255,255,0.3), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2));">
  <span class="flex items-center justify-center gap-2 text-[15px] leading-none min-w-[140px] w-full h-full transition-colors duration-300 group-hover:bg-black/50 font-medium bg-black/80 rounded-xl pt-3 pr-5 pb-3 pl-5">
    <span class="rounded-xl">Subscribe</span>
    <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="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 rounded-xl">
      <path d="M5 12h14" class="rounded-xl"></path>
      <path d="m12 5 7 7-7 7" class="rounded-xl"></path>
    </svg>
  </span>
</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 class="font-sans">© 2024 AI Factory. All rights reserved.</span>
        <a href="#" class="hover:text-white/60 transition-colors duration-300 font-sans">Privacy Policy</a>
        <a href="#" class="hover:text-white/60 transition-colors duration-300 font-sans">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="w-[12px] h-[12px] text-neutral-500" data-icon-replaced="true" style="width: 12px; height: 12px;">
            <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="w-[12px] h-[12px] text-neutral-500" data-icon-replaced="true" style="width: 12px; height: 12px;">
            <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>