Glassmorphic Footer with Links, Social Icons & Signup

<footer class="max-w-7xl mr-auto ml-auto pr-6 pb-12 pl-6 edit-mode-selected" id="aura-emeqzfb80">
  <div class="p-12 lg:p-16 border border-white/10 rounded-3xl bg-white/[0.03] 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="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 ring-1 ring-white/15 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" class="h-4 w-4 text-white/90">
              <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path>
              <circle cx="12" cy="12" r="10"></circle>
            </svg>
          </span>
          <span class="ml-2 uppercase text-lg font-semibold tracking-tighter font-bricolage text-white">NomadIQ</span>
        </div>
        <p class="text-sm text-white/60 leading-relaxed mb-8 font-geist">
          Adaptive trip planning that learns your travel rhythm. Go anywhere, effortlessly, with journeys crafted just for you.
        </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"></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"></path>
              <rect width="4" height="12" x="2" y="9"></rect>
              <circle cx="4" cy="4" r="2"></circle>
            </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="Instagram">
            <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">
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
              <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
              <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
            </svg>
          </a>
        </div>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide font-geist">Discover</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">AI Trip Planning</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Smart Routing</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Budget Optimization</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Real-time Updates</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide font-geist">Toolkit</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Trip Builder</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Travel Journal</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Offline Maps</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Group Planning</a>
          </li>
        </ul>
      </div>
      <div class="">
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide font-geist">Support</h4>
        <ul class="space-y-4">
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Help Center</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Contact Us</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Community</a>
          </li>
          <li class="">
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300 font-geist">Travel Resources</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 font-geist">Stay in the flow</h4>
        <p class="text-sm text-white/60 mb-6 font-geist">Get travel insights, new features, and destination inspiration delivered to your inbox.</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-blue-500/30 focus:outline-none transition-all duration-300 bg-white/5 font-geist">
          <button class="px-8 py-3 rounded-xl text-sm font-medium text-white border border-blue-500/30 hover:border-blue-500/50 transition-all duration-300 bg-blue-500/15 font-geist">Subscribe</button>
        </div>
      </div>
    </div>
  </div>
  <div class="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-geist">© 2024 NomadIQ. All rights reserved.</span>
      <a href="#" class="hover:text-white/60 transition-colors duration-300 font-geist">Privacy Policy</a>
      <a href="#" class="hover:text-white/60 transition-colors duration-300 font-geist">Terms of Service</a>
    </div>
    <div class="flex items-center gap-4 text-xs text-white/40">
      <span class="flex items-center gap-2 font-geist">
        <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-white/70">
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
        Private by design
      </span>
      <span class="flex items-center gap-2 font-geist">
        <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"></circle>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
        100% Adaptive
      </span>
    </div>
  </div>
</footer>