Glassmorphic Tailwind Footer with Newsletter Sign-Up

<footer class="relative z-10 mt-32">
  <!-- Background Elements -->
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute bottom-0 left-1/4 w-[40vmin] h-[40vmin] rounded-full bg-cyan-500/5 blur-[100px]"></div>
    <div class="absolute top-0 right-1/4 w-[30vmin] h-[30vmin] rounded-full bg-purple-500/5 blur-[80px]"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-6 md:px-8">
    <!-- Main Footer Content -->
    <div class="rounded-3xl border border-white/10 bg-white/[0.02] backdrop-blur overflow-hidden">
      <!-- Top Section -->
      <div class="md:p-12 border-white/10 border-b pt-8 pr-8 pb-8 pl-8">
        <div class="grid md:grid-cols-2 gap-12 items-center">
          <!-- Left: Brand & Mission -->
          <div class="space-y-6">
            <!-- Logo -->
            <div class="flex items-center gap-4">
              <div class="h-9 w-9 shadow-cyan-500/10 grid place-items-center bg-[conic-gradient(from_315deg,var(--tw-gradient-stops))] from-cyan-400 via-emerald-300 to-cyan-500 rounded-lg shadow-lg">
                <span class="text-base font-semibold text-white/90 tracking-tight">EX</span>
              </div>
              <div class="text-3xl md:text-4xl font-semibold tracking-tight leading-none">
                <span class="text-white/95">EXO</span><span class="text-cyan-400">9</span>
              </div>
            </div>
            
            <p class="text-lg text-white/70 max-w-md">
              Where deep space meets design. Exploring the cosmos through immersive science experiences and cutting-edge technology.
            </p>

            <!-- Mission Statement -->
            <div class="p-4 rounded-xl bg-white/5 border border-white/10">
              <p class="text-sm text-emerald-300 uppercase tracking-wide font-medium mb-2">Our Mission</p>
              <p class="text-white/80">Making space science accessible, engaging, and inspiring for curious minds of all ages.</p>
            </div>
          </div>

          <!-- Right: Newsletter Signup -->
          <div class="space-y-6">
            <div class="">
              <h3 class="text-2xl font-semibold tracking-tight text-white/95 mb-2">Stay Connected</h3>
              <p class="text-white/60">Get updates on new exhibits, live streams, and cosmic discoveries.</p>
            </div>
            
            <div class="space-y-3">
              <div class="relative rounded-xl border border-white/10 bg-white/5 backdrop-blur overflow-hidden">
                <input type="email" placeholder="Enter your email address" class="h-12 w-full bg-transparent px-4 text-white/90 placeholder-white/50 focus:outline-none focus:ring-0">
              </div>
              <button class="w-full h-12 hover:from-slate-900 hover:to-slatee-700 transition font-medium text-slate-400 bg-gradient-to-t from-slate-900 to-slate-700/25 border-slate-50/10 border rounded-xl shadow-lg">
                Subscribe to Updates
              </button>
            </div>

            <!-- Social Links -->
            <div class="flex gap-3 items-center">
              <span class="text-sm text-white/60">Follow us:</span>
              <div class="flex items-center gap-2">
                <a href="#" class="h-10 w-10 hover:bg-white/10 grid place-items-center transition group bg-white/5 border-white/10 border rounded-xl">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-5 h-5 text-white/70 group-hover:text-white"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
                </a>
                <a href="#" class="h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 grid place-items-center transition group">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube" class="lucide lucide-youtube w-5 h-5 text-white/70 group-hover:text-white"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" class=""></path><path d="m10 15 5-3-5-3z" class=""></path></svg>
                </a>
                <a href="#" class="h-10 w-10 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 grid place-items-center transition group">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-5 h-5 text-white/70 group-hover: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>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Links Section -->
      <div class="p-8 md:p-12 border-b border-white/10">
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <!-- Visit -->
          <div class="space-y-4">
            <h4 class="text-sm font-medium text-emerald-300 uppercase tracking-wide">Visit</h4>
            <ul class="space-y-3">
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Plan Your Visit</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Tickets &amp; Pricing</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Hours &amp; Location</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Group Tours</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Accessibility</a></li>
            </ul>
          </div>

          <!-- Experience -->
          <div class="space-y-4">
            <h4 class="text-sm font-medium text-emerald-300 uppercase tracking-wide">Experience</h4>
            <ul class="space-y-3">
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Virtual Dome</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Live Observatory</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Interactive Galleries</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Workshops</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Special Events</a></li>
            </ul>
          </div>

          <!-- Learn -->
          <div class="space-y-4">
            <h4 class="text-sm font-medium text-emerald-300 uppercase tracking-wide">Learn</h4>
            <ul class="space-y-3">
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Educational Programs</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Teacher Resources</a></li>
              <li class=""><a href="#" class="text-white/70 hover:text-white transition text-sm">Research Library</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Science Blog</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Publications</a></li>
            </ul>
          </div>

          <!-- Support -->
          <div class="space-y-4">
            <h4 class="text-sm font-medium text-emerald-300 uppercase tracking-wide">Support</h4>
            <ul class="space-y-3"> hover:text-white transition text-sm"&gt;Contact Us
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">FAQ</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Membership</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Donate</a></li>
              <li><a href="#" class="text-white/70 hover:text-white transition text-sm">Gift Shop</a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Contact Info -->
      

      <!-- Bottom Section -->
      <div class="p-8 md:p-12">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
          <!-- Copyright -->
          <div class="text-sm text-white/60">
            <p class="">© 2024 EXO9 Observatory. All rights reserved.</p>
          </div>

          <!-- Legal Links -->
          <div class="flex items-center gap-6 text-sm">
            <a href="#" class="text-white/60 hover:text-white transition">Privacy Policy</a>
            <span class="text-white/30">•</span>
            <a href="#" class="text-white/60 hover:text-white transition">Terms of Service</a>
            <span class="text-white/30">•</span>
            <a href="#" class="text-white/60 hover:text-white transition">Accessibility</a>
          </div>

          <!-- Back to Top -->
          <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="inline-flex items-center gap-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-2 text-sm font-medium text-white/80 hover:text-white transition">
            <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" data-lucide="arrow-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
            Back to Top
          </button>
        </div>
      </div>
    </div>

    <!-- Final Spacing -->
    <div class="h-8"></div>
  </div>
</footer>