<footer class="bg-gradient-to-r from-gray-900 to-gray-950 border-t border-gray-800/50 py-8 mt-auto">
    <div class="container mx-auto px-4">
      <div class="flex flex-col items-center justify-center space-y-4">
        <!-- Logo & Version -->
        <div class="flex items-center space-x-2">
          {{ if .Version }}
          <span class="text-sm md:text-base font-medium text-gray-400">LocalAI Version <span class="text-blue-400">{{.Version}}</span></span>
          {{ end }}
        </div>
  
        <!-- Links -->
        <div class="flex flex-wrap justify-center gap-x-6 gap-y-3">
          <a href="https://github.com/mudler/LocalAI" 
             class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
             target="_blank">
            <i class="fab fa-github mr-2 text-lg"></i>
            <span>GitHub</span>
            <i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
          </a>
          <a href="https://localai.io" 
             class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
             target="_blank">
            <i class="fas fa-book mr-2 text-lg"></i>
            <span>Documentation</span>
            <i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
          </a>
          <a href="https://mudler.pm" 
             class="group flex items-center text-gray-300 hover:text-blue-400 transition duration-300 ease-in-out"
             target="_blank">
            <i class="fas fa-user mr-2 text-lg"></i>
            <span>Author</span>
            <i class="fas fa-external-link-alt text-xs ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
          </a>
        </div>
  
        <!-- Copyright Notice -->
        <div class="mt-4 text-sm text-gray-500">
          <span>© 2023-2025 <a href="https://mudler.pm" class="text-blue-400 hover:text-blue-300 transition duration-300" target="_blank">Ettore Di Giacinto</a></span>
        </div>
      </div>
    </div>
    <script src="static/assets/tw-elements.js"></script>
  </footer>