Space Company Footer

<footer class="max-w-7xl mx-auto px-6 pb-12">
  <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="text-xl font-semibold tracking-tight text-white">Astrolux</span>
        </div>
        <p class="text-sm text-white/60 leading-relaxed mb-8">
          Pioneering the future of space tourism with safe, sustainable, and accessible journeys beyond Earth's
          atmosphere.
        </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>
        </div>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Missions</h4>
        <ul class="space-y-4">
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Suborbital
              Flights</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Orbital
              Missions</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Lunar Flyby</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Space Station
              Visits</a>
          </li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Experience</h4>
        <ul class="space-y-4">
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Training
              Programs</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover</a></li> <li><a href=" #"="">Safety Protocols</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Traveler
              Stories</a>
          </li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white mb-6 uppercase tracking-wide">Support</h4>
        <ul class="space-y-4">
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Help Center</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Contact Us</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Booking
              Support</a>
          </li>
          <li>
            <a href="#" class="text-sm text-white/60 hover:text-white transition-colors duration-300">Insurance</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 Connected to the Stars</h4>
        <p class="text-sm text-white/60 mb mission packages, and exclusive space tourism insights.</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">
          <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">Subscribe</button>
        </p>
      </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>© 2024 Astrolux Space Tourism. 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">
        NASA Certified
        <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>
      </span>
      <span class="flex items-center gap-2">
        100% Safe
        <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-blue-400">
          <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"></path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
      </span>
    </div>
  </div>
</footer>