Componente Mappa del sito

<footer class="bg-gray-950 text-gray-300 py-8 md:py-12 lg:py-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 text-center md:text-left">

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 inline-block">Product</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Features</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Integrations</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Roadmap</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-500 via-blue-500 to-indigo-500 inline-block">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Partners</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 inline-block">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Documentation</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Support</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">API Status</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-orange-500 to-red-500 inline-block">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Compliance</a></li>
        </ul>
      </div>

      <div class="col-span-1 md:col-span-3 lg:col-span-1 flex flex-col items-center md:items-start space-y-4">
        <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 via-green-400 via-blue-400 via-indigo-400 to-purple-500 inline-block">YourApp</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left">Building the future of SaaS.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.83 0-3.32-.49-4.81-1.48C2.18 17.77 1 15.53 1 12.5c0-2.88 1.18-5.11 3.29-6.42.06-.03.1-.05.15-.07.08-.03.17-.06.25-.09.32-.12.65-.22.99-.31 1.7-.49 3.5-.83 5.3-.83 1.94 0 3.79.34 5.56.96.96.34 1.87.8 2.72 1.34.85.54 1.63 1.18 2.34 1.89.71.71 1.35 1.49 1.89 2.34.54.85.98 1.76 1.34 2.73.62 1.77.96 3.63.96 5.56 0 2.8-1.04 4.86-3.13 6.18-2.09 1.32-4.57 1.98-7.44 1.98zM9.5 13.91l8.77-8.77 2.11 2.11-8.77 8.77-4.11-4.11L9.5 13.91z" fill="currentColor"/>
              <path d="M22.251 17.581c-.552 0-1 .448-1 1s.448 1 1 1h.75c.552 0 1-.448 1-1s-.448-1-1-1h-.75zM1.751 17.581c.552 0 1 .448 1 1s-.448 1-1 1h-.75c-.552 0-1-.448-1-1s.448-1 1-1h.75z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.73a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM19 19h-3v-4.75c0-1.4-.47-2.37-1.76-2.37-1.35 0-2.14 1.02-2.14 2.37V19h-3V8h3v1.75s.9-1.63 2.87-1.63c2.25 0 3.13 1.55 3.13 4.88V19z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="GitHub">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.087.687-.206.687-.456 0-.227-.007-.75-.011-1.849-2.782.607-3.368-1.341-3.368-1.341-.454-1.15-.111-1.458-.111-1.458.37-.26.02-.255.02-.255.407-.03.62.261.62.261.363.626.953.444 1.187.34.037-.266.142-.444.258-.546-1.076-.123-2.203-.538-2.203-2.404 0-.53.192-.964.507-1.304-.05-.123-.22-.616.04-.123 0 0 .415.13.882.3.82-.254 1.69-.395 2.578-.395.888 0 1.758.14 2.578.395.467-.17.882-.3.882-.3.268.51.098.393.04.123.315.34.507.773.507 1.304 0 1.868-1.127 2.278-2.208 2.399.14.12.27.359.27.727 0 .524-.005 1.894-.01 2.146 0 .252.213.547.688.455C21.139 20.19 24 16.435 24 12.017c0-5.533-4.477-10.017-10-10.017H12z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm dark:border-gray-700">
      <p>&copy; 2023 YourApp, Inc. All rights reserved.</p>
    </div>
  </div>
</footer>