Luxus-SaaS-Fußzeile

<footer class="bg-gradient-to-r from-blue-900 to-indigo-900 text-blue-200 dark:from-gray-950 dark:to-gray-800 dark:text-gray-300 py-12 md:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 md:gap-12 lg:gap-16">

      <!-- Company Info & Logo -->
      <div class="lg:col-span-2 space-y-6">
        <a href="#" class="flex items-center space-x-3">
          <svg class="h-8 w-8 text-blue-400 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5m0 0l-3 3m3-3l3 3M6.75 20h10.5c.75 0 1.5-.75 1.5-1.5V11.25c0-1.25-1-2.25-2.25-2.25H6.75C5.5 9 4.5 10.25 4.5 11.25v7.25c0 .75.75 1.5 1.5 1.5z" />
          </svg>
          <span class="text-3xl font-extrabold tracking-tight text-white dark:text-gray-100">AQUA</span><span class="text-3xl font-extrabold tracking-tight text-blue-300 dark:text-blue-400">DRIFT</span>
        </a>
        <p class="text-blue-300 dark:text-gray-400 leading-relaxed text-sm lg:text-base pr-8">
          Revolutionizing the way you manage and scale your digital presence with cutting-edge cloud solutions.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06.02-.09.03-.46.163-1.02.242-1.59.242-2.24 0-4.06-1.803-4.06-4.025 0-.75.21-1.427.67-2.008C3.77 14.1 4.7 15.657 6.24 16.7L7.2 16.27c.45.16 1 .25 1.56.25 2.23 0 4.04-1.79 4.04-4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251zm-5.75-8.5v.02c.03-.01.06-.02.09-.03.46-.163 1.02-.242 1.59-.242 2.24 0 4.06 1.803 4.06 4.025 0 .75-.21 1.427-.67 2.008-1.1.9-2.03 2.457-3.57 3.55l-1.05.47c-.45-.16-1-.25-1.56-.25-2.23 0-4.04 1.79-4.04 4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251z" />
              <path d="M8 0c4.417 0 8 3.582 8 8s-3.583 8-8 8-8-3.582-8-8 3.583-8 8-8zm0 2.2C4.1 2.2 1 5.3 1 9.2s3.1 7 7 7 7-3.1 7-7S11.9 2.2 8 2.2z" fill="#1da1f2" />
              <path d="M17.448 3.858c-.851.378-1.748.636-2.613.743.975-.583 1.724-1.503 2.072-2.593-.91.54-1.921.93-3.003 1.15a5.59 5.59 0 00-9.605 5.093c-4.664-.22-8.78-2.455-11.542-5.836C.68 6.968 1 8.878 2.2 9.489c-.7.01-1.35-.21-1.9-.53v.07c0 2.12 1.5 3.89 3.5 4.3c-.3.08-.6.12-.9.12-.2 0-.4 0-.6-.05.5 1.7 2.1 2.9 3.9 2.94-1.5 1.2-3.4 1.9-5.4 1.9-.3 0-.6 0-.8-.04C2.5 21.2 4.7 22 7.1 22c8.6 0 13-7.1 13-13 0-.2 0-.4 0-.6.9-2 1.7-4 2.2-6.1z" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.903.417 10.579 2.083 10.998 10.998.043.93.056 1.286.056 3.715 0 2.43-.013 2.784-.056 3.715-.417 8.903-2.083 10.579-10.998 10.998-.93.043-1.286.056-3.715.056-2.43 0-2.784-.013-3.715-.056-8.903-.417-10.579-2.083-10.998-10.998-.043-.93-.056-1.286-.056-3.715 0-2.43.013-2.784.056-3.715.417-8.903 2.083-10.579 10.998-10.998.93-.043 1.286-.056 3.715-.056zm0 2.18c-2.427 0-2.753.011-3.693.051-7.16 0-8.498 1.4-8.89 8.89-.04.94-.051 1.266-.051 3.693 0 2.427.011 2.753.051 3.693.392 7.16 1.73 8.498 8.89 8.89.94.04 1.266.051 3.693.051 2.427 0 2.753-.011 3.693-.051 7.16-.392 8.498-1.73 8.89-8.89.04-.94.051-1.266.051-3.693 0-2.427-.011-2.753-.051-3.693-.392-7.16-1.73-8.498-8.89-8.89zM12.315 9.255c-1.68 0-3.056 1.376-3.056 3.056s1.376 3.056 3.056 3.056 3.056-1.376 3.056-3.056-1.376-3.056-3.056-3.056zm0 5.011c-1.076 0-1.955-.879-1.955-1.955s.879-1.955 1.955-1.955 1.955.879 1.955 1.955-.879 1.955-1.955 1.955zm6.606-5.87a1.442 1.442 0 100-2.884 1.442 1.442 0 000 2.884z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.308 3.435 9.799 8.203 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.016-2.03-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.334-1.758-1.334-1.758-1.09-.744.08-.729.08-.729 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.809 1.303 3.492.996.108-.775.419-1.303.762-1.602-2.665-.304-5.467-1.334-5.467-5.932 0-1.31.465-2.383 1.235-3.22-.124-.303-.535-1.52.117-3.176 0 0 1.008-.323 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.292-1.553 3.3-1.23 3.3-1.23.653 1.656.242 2.873.118 3.176.77.837 1.233 1.91 1.233 3.22 0 4.61-2.809 5.624-5.474 5.922.43.37.817 1.109.817 2.23 0 1.61-.015 2.904-.015 3.29 0 .322.218.698.827.576C20.565 21.795 24 17.308 24 12 24 5.372 18.627 0 12 0z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Navigation Sections -->
      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Product</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Features</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Pricing</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Integrations</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Testimonials</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Blog</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Press</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">API Docs</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Status</a></li>
        </ul>
      </div>

      <!-- Newsletter Signup -->
      <div class="lg:col-span-1 space-y-6 md:col-span-2">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Stay Updated</h3>
        <p class="text-blue-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest news and updates.</p>
        <form class="flex flex-col sm:flex-row gap-3">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-blue-800/50 dark:bg-gray-700/50 px-3.5 py-2 text-white dark:text-gray-200 shadow-sm ring-1 ring-inset ring-blue-700/50 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-400 dark:focus:ring-indigo-400 sm:text-sm sm:leading-6 placeholder:text-blue-300/80 dark:placeholder:text-gray-400" placeholder="Enter your email">
          <button type="submit" class="flex-none rounded-md bg-blue-500 dark:bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 dark:hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400 dark:focus-visible:outline-indigo-500 transition duration-300 ease-in-out">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <!-- Divider -->
    <div class="mt-12 md:mt-16 lg:mt-20 border-t border-blue-700/50 dark:border-gray-700 pt-8">
      <div class="flex flex-col md:flex-row items-center justify-between text-blue-400 dark:text-gray-500 text-sm space-y-4 md:space-y-0">
        <p>&copy; 2023 AquaDrift. All rights reserved.</p>
        <div class="flex space-x-6">
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Privacy Policy</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Terms of Service</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Cookies Settings</a>
        </div>
      </div>
    </div>
  </div>
</footer>