Componentes de búsqueda

Categorías

Componentes Navegación de pie de página

Navegación de pie de página

Enlaces de navegación en la parte inferior de la página

Componente de navegación de pie de página

Un componente de navegación de pie de página complejo y receptivo diseñado para un mercado, con una interfaz de usuario de modo oscuro con un esquema de color en blanco y negro y un color de acento brillante (índigo). Incluye múltiples secciones para navegación, información de la empresa, enlaces legales y redes sociales, con soporte completo para el modo oscuro.

Abrir Vista previa

                <footer class="bg-gray-950 text-gray-300 py-12 dark:bg-black dark:text-gray-400">
  <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-4 gap-y-10 gap-x-8">
      
      <!-- Company Info & Logo -->
      <div class="col-span-1 lg:col-span-1">
        <div class="flex items-center space-x-2 mb-4">
          <svg class="h-8 w-8 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-2xl font-bold text-white dark:text-white">Marketify</span>
        </div>
        <p class="text-sm mb-4">The ultimate marketplace for unique items and services around the globe.</p>
        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Subscribe to our Newsletter</h3>
        <form class="flex rounded-md shadow-sm">
          <input type="email" placeholder="Your email" aria-label="Your email" class="flex-1 min-w-0 block w-full px-4 py-2 rounded-l-md border-0 bg-gray-800 text-white placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-600">
          <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out">
            Go
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Home</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Browse Categories</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">How It Works</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Seller Program</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Buyer's Guide</a></li>
        </ul>
      </div>

      <!-- Support & Help -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Help Center</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Contact Us</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Payments</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Shipping</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Returns</a></li>
        </ul>
      </div>

      <!-- Legal & Social -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Legal & Social</h3>
        <ul class="space-y-3 mb-6">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Terms of Service</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Cookie Policy</a></li>
        </ul>

        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Follow Us</h3>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Facebook">
            <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.797c0-2.506 1.492-3.89 3.777-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-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" 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-.03.012-.062.022-.094.031a15.753 15.753 0 01-4.87-1.1c-.6-.248-1.077-.736-1.393-1.314-.316-.578-.46-1.229-.425-1.898L.54 12.012c0-.528.106-1.05.316-1.547.21-.497.51-.946.883-1.319a.75.75 0 011.06 1.06c-.19.19-.347.4-.469.626s-.208.468-.231.716c-.024.248-.005.5-.028.747l-.145 1.54c-.035.352-.027.707.022 1.056.05.349.128.69.231 1.018.104.328.23.64.38.932.15.292.316.566.495.823.18.257.369.497.567.72.198.223.407.43.626.626.22.196.447.375.68.536.234.161.474.303.719.424.246.12.498.21.756.264.258.054.52.062.783.024.263-.038.52-.124.767-.257.247-.133.476-.301.688-.504.212-.203.403-.435.572-.68.169-.244.316-.508.438-.79.122-.284.21-.581.264-.889.054-.308.062-.619.024-.926.004-.047-.008-.094-.031-.14L18.423 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37A15.422 15.422 0 005.817 9.87c-.156.16-.31.332-.46.514-.15.182-.294.376-.432.58-.138.204-.268.419-.389.643-.121.224-.23.457-.324.697-.094.24-.173.486-.237.737-.064.25-.113.5-.147.75-.035.25-.048.5-.038.75s.035.5.094.75a.75.75 0 01-1.463.385l-.014-.044c-.035-.118-.052-.236-.052-.355 0-.203.023-.406.07-.607.046-.2.11-.397.19-.59s.174-.383.277-.565.215-.35.337-.506.26-.302.398-.444.281-.27.429-.39.298-.21.456-.296c.1 L20.25 4.754c.264-.264.55-.498.857-.704.307-.205.63-.377.968-.517.337-.14.686-.245 1.045-.315.359-.07.72-.093 1.082-.068.36.024.717.1.1.75l.135.044c.484.156.953.38 1.402.666.449.287.873.64 1.267 1.055.394.416.758.895 1.08 1.433.323.538.604 1.134.843 1.788.239.654.434 1.353.582 2.09c.147.738.24 1.51.277 2.304l.004.148c.02.483.013.97-.021 1.455-.035.485-.1.968-.194 1.442-.095.474-.221.939-.378 1.392-.158.453-.346.892-.565 1.315-.22.423-.47.828-.753 1.21-.283.381-.598.736-.944 1.066-.347.33-.726.632-1.137.896-.41.264-.845.49-1.299.678-.454.188-.92.338-1.397.449-.477.11-.964.183-1.456.216-.492.033-.984.024-1.472-.027-.488-.05-.968-.142-1.437-.272-.47-.13-.927-.3-1.365-.506-.438-.207-.853-.448-1.246-.723-.393-.275-.76-.583-1.097-.923L8.29 20.25z" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Instagram">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2c2.716 0 3.056.012 4.122.06c.915.042 1.54.2 2.14.444.6.242 1.063.597 1.57.513a.75.75 0 01.513.513c-.084.507.271 1.007.444 1.607.244.6.402 1.225.444 2.14.048 1.066.06 1.406.06 4.122s-.012 3.056-.06 4.122c-.042.915-.2 1.54-.444 2.14-.242.6-.597 1.063-.513 1.57a.75.75 0 01-.513.513c-.507-.084-1.007.271-1.607.444-.6.244-1.225.402-2.14.444-1.066.048-1.406.06-4.122.06s-3.056-.012-4.122-.06c-.915-.042-1.54-.2-2.14-.444-.6-.242-1.063-.597-1.57-.513a.75.75 0 01-.513-.513c.084-.507-.271-1.007-.444-1.607-.244-.6-.402-1.225-.444-2.14-.048-1.066-.06-1.406-.06-4.122s.012-3.056.06-4.122c.042-.915.2-1.54.444-2.14.242-.6.597-1.063.513-1.57a.75.75 0 01.513-.513c.507.084 1.007-.271 1.607-.444.6-.244 1.225-.402 2.14-.444C8.944 2.012 9.284 2 12 2zm0 3.635l.019.001c.74.004 1.01.018 1.8.055.79.037 1.34.168 1.77.348.43.18.73.4.92.59.19.19.41.49.59.92.18.43.31.98.348 1.77.037.79.051 1.06.055 1.8l.001.019v.038c0 .74-.004 1.01-.055 1.8-.037.79-.168 1.34-.348 1.77-.18.43-.4.73-.59.92-.19.19-.49.41-.92.59-.43.18-.98.31-1.77.348-.79.037-1.06.051-1.8.055l-.019.001h-.038c-.74 0-1.01-.004-1.8-.055-.79-.037-1.34-.168-1.77-.348-.43-.18-.73-.4-.92-.59-.19-.19-.41-.49-.59-.92-.18-.43-.31-.98-.348-1.77-.037-.79-.051-1.06-.055-1.8l-.001-.019v-.038c0-.74.004-1.01.055-1.8.037-.79.168-1.34.348-1.77.18-.43.4-.73.59-.92.19-.19.49-.41.92-.59.43-.18.98-.31 1.77-.348.79-.037 1.06-.051 1.8-.055l.019-.001h.038zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm6.5-.25a1.25 1.25 0 11-2.5 0 1.25 1.2.9 0 012.5 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="YouTube">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19.615 3.1c.334-.143.722-.224 1.127-.224.977 0 1.905.39 2.593 1.082l.006.006c.697.697 1.082 1.63 1.082 2.593v8.835c0 .977-.39 1.905-1.082 2.593l-.006.006a3.67 3.67 0 01-2.593 1.082c-.413 0-.806-.082-1.144-.225L10.375 22.8c-.896.385-1.84.453-2.71.215-.87-.238-1.57-.75-1.996-1.42s-.652-1.517-.652-2.457V4.07c0-.94.218-1.83.652-2.457s1.126-1.182 1.996-1.42c.87-.238 1.814-.17 2.71.215L19.615 3.1zm-8.87 5.753l.008 1.722c.002.046.005.092.008.138.003.046.006.092.009.138l.004.062c.01.15.025.298.042.443.017.145.038.286.062.427.024.14.053.277.085.411.032.134.067.264.106.39.039.126.082.249.129.367.047.119.098.234.153.344.055.11.114.215.176.315.063.1.13.193.201.277.142.169.308.318.498.448.19.13.398.24.623.33.225.09.467.16.72.208.253.048.514.075.779.08.265.006.53-.004.79-.03.26-.027.514-.07.76-.13.245-.06.48-.138.705-.236.225-.098.44-.213.64-.34.2-.127.387-.268.56-.423.173-.156.33-.32.47-.492.278-.344.52-.714.735-1.112.215-.398.39-.82.525-1.265.136-.445.234-.908.297-1.385.063-.477.09-.962.08-1.45L20.47 7.64c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37l-.014.013c-.264.264-.55.498-.857.704-.307.205-.63.377-.968.517-.337.14-.686.245-1.045.315-.359.07-.72.093-1.082.068-.36-.024-.717-.1-.75-.75L3.528 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433z" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-gray-800 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-500">
      &copy; <span id="current-year"></span> Marketify. All rights reserved.
      <script>
        document.getElementById('current-year').textContent = new Date().getFullYear();
      </script>
    </div>
  </div>
</footer>

Bauhaus_Retro_News_Footer

Componente de navegación de pie de página complejo y receptivo para sitios web de noticias/periodismo, con un diseño inspirado en la Bauhaus con formas geométricas y una paleta de colores retro/vintage, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <footer class="bg-amber-100 text-stone-800 py-12 px-4 dark:bg-stone-900 dark:text-stone-300 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">

    <!-- Brand & Social -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-3xl font-bold tracking-tight text-red-700 dark:text-red-500 mb-4 uppercase">
        <span class="block">The Daily</span>
        <span class="block text-xl text-stone-700 dark:text-stone-400 -mt-2">Gazette</span>
      </a>
      <p class="text-sm mb-6 max-w-sm text-stone-700 dark:text-stone-400 leading-relaxed">
        Your source for unbiased news and in-depth analysis from around the globe. Stay informed, stay ahead.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Facebook">
          <svg class="w-5 h-5" 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.797c0-2.506 1.492-3.89 3.777-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.33V22c5.965-.949 10-5.605 10-11.267Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Twitter">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.803.957 3.864 1.43 6.096 1.43 7.334 0 11.332-6.04 11.332-11.332 0-.17-.003-.338-.01-.506A8.134 8.134 0 0024 4.992c-.736.326-1.527.54-2.357.643a4.07 4.07 0 001.76-2.267c-.822.489-1.727.842-2.697 1.03a4.043 4.043 0 00-6.924 3.693 11.493 11.493 0 01-8.381-4.22c-.428.73-.67 1.58-.67 2.493 0 1.737.878 3.27 2.217 4.172a4.053 4.053 0 01-1.834-.508v.05c0 2.393 1.706 4.383 3.963 4.834a4.072 4.072 0 01-1.834.07c.628 1.956 2.445 3.393 4.605 3.432-1.688 1.325-3.805 2.124-6.102 2.124-.397 0-.786-.023-1.168-.069a16.052 16.052 0 009.654 3.013Z" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Instagram">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.317 3.093A8.472 8.472 0 0 0 4.542 6.095V10.5h1.996V6.095c0-1.85 1.503-3.35 3.35-3.35h7.224c1.847 0 3.35 1.5 3.35 3.35v7.224a3.35 3.35 0 0 1-3.35 3.35H13.5V18.5h4.417a8.471 8.471 0 0 0-.256-4.542H20a2.001 2.001 0 0 0 2-2V9.091a2.001 2.001 0 0 0-2-2h-3.091a8.472 8.472 0 0 0-4.542-.256V4.091h-2.09ZM12 10.5a1.5 1.5 0 1 0-.001 3.001A1.5 1.5 0 0 0 12 10.5Zm-5.5 0a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Sections
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">World News</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Politics</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Business & Economy</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Tech & Science</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Arts & Culture</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Sports</a></li>
      </ul>
    </div>

    <!-- Recent Articles (Fictional Thumbnails) -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Latest Reads
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1025/70/70" alt="Image of forest" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Global Climate Summit Ends with Ambitious New Targets</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">2 hours ago</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1015/70/70" alt="Image of a lake" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">New AI Breakthrough Could Revolutionize Medicine</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">Yesterday</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/103/70/70" alt="Image of a mountain" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Cultural Heritage Vandalized in Ongoing Conflict</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">3 days ago</p>
          </div>
        </a>
      </div>
    </div>

    <!-- Newsletter & Contact -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Stay Connected
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <p class="text-sm text-stone-700 dark:text-stone-400 mb-4">Subscribe to our newsletter for daily updates straight to your inbox.</p>
      <form class="flex flex-col space-y-3">
        <input type="email" placeholder="Your email address" aria-label="Your email address" class="px-4 py-2 rounded-md bg-stone-50 border border-stone-300 dark:bg-stone-800 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:border-transparent outline-none transition-all duration-200">
        <button type="submit" class="bg-red-700 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 text-amber-100 font-bold py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-900 shadow-md text-sm uppercase tracking-wider">
          Subscribe
        </button>
      </form>
      <div class="mt-8">
        <h4 class="text-md font-semibold text-stone-900 dark:text-stone-200 mb-3">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Press Room</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Terms of Service</a></li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Footer Bottom / Copyright -->
  <div class="mt-12 pt-8 border-t border-stone-300 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-500">
    <p>&copy; 2023 The Daily Gazette. All rights reserved. <span class="hidden md:inline">Designed with a nod to Bauhaus principles and timeless journalism.</span></p>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página simple y receptivo con una combinación de colores cálidos inspirados en la puesta de sol, diseñado para marcas de moda / belleza. Cuenta con sutiles efectos de desplazamiento y compatibilidad con el modo oscuro.

Abrir Vista previa

                <footer class="bg-gradient-to-r from-orange-400 to-red-500 py-8 dark:from-gray-900 dark:to-gray-800 text-white font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
      <div class="mb-4 md:mb-0">
        <h3 class="text-2xl font-bold mb-2 tracking-wide text-yellow-100 dark:text-gray-100">Luminous Threads</h3>
        <p class="text-orange-100 dark:text-gray-400 text-sm">&copy; 2023 All rights reserved.</p>
      </div>

      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 mb-4 md:mb-0">
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Shop</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Collections</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">About Us</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Contact</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Privacy Policy</a>
      </nav>

      <div class="flex gap-4">
        <a href="#" aria-label="Facebook" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <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.797c0-2.506 1.492-3.89 3.777-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.33V22c5.967-.759 10.5-5.623 10.5-11z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <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.815.034 1.488.17 2.071.467.579.289.979.629 1.324.973.344.344.684.744.973 1.324.297.583.433 1.256.467 2.07.043.93.056 1.286.056 3.715s-.013 2.784-.056 3.715c-.034.814-.17 1.488-.467 2.071-.289.579-.629.979-.973 1.324-.344.344-.744.684-1.324.973-.583.297-1.256.433-2.07.467-.93.043-1.286.056-3.715.056s-2.784-.013-3.715-.056c-.814-.034-1.488-.17-2.071-.467-.579-.289-.979-.629-1.324-.973-.344-.344-.684-.744-.973-1.324-.297-.583-.433-1.256-.467-2.07-.043-.93-.056-1.286-.056-3.715s.013-2.784.056-3.715c.034-.814.17-1.488.467-2.071.289-.579.629-.979.973-1.324.344-.344.744-.684 1.324-.973.583-.297 1.256-.433 2.07-.467C9.531 2.013 9.886 2 12.315 2zm0 2.18c-2.793 0-3.138.014-4.144.058-.707.03-1.127.135-1.424.28-.277.137-.48.243-.68.443-.199.2-.306.402-.443.68-.145.297-.25.717-.28 1.424-.044 1.006-.058 1.351-.058 4.144s.014 3.138.058 4.144c.03.707.135 1.127.28 1.424.137.277.243.48.443.68.2.199.402.306.68.443.297.145.717.25 1.424.28 1.006.044 1.351.058 4.144.058s3.138-.014 4.144-.058c.707-.03 1.127-.135 1.424-.28.277-.137.48-.243.68-.443.199-.2.306-.402.443-.68.145-.297.25-.717.28-1.424.044-1.006.058-1.351.058-4.144s-.014-3.138-.058-4.144c-.03-.707-.135-1.127-.28-1.424-.137-.277-.243-.48-.443-.68-.199-.2-.402-.306-.68-.443-.297-.145-.717-.25-1.424-.28-1.006-.044-1.351-.058-4.144-.058zm0 3.655c-2.464 0-4.475 2.01-4.475 4.475s2.01 4.475 4.475 4.475 4.475-2.01 4.475-4.475-2.01-4.475-4.475-4.475zM12.315 15.6c-1.815 0-3.288-1.472-3.288-3.288s1.472-3.288 3.288-3.288 3.288 1.472 3.288 3.288-1.472 3.288-3.288 3.288zm5.237-.962a1.21 1.21 0 011.088-1.088c.45-.07.96-.118 1.488-.135.344-.01.59-.018.736.002.392.052.793.18 1.161.356.368.175.688.42 1.22.955.532.532.775.852.955 1.22.175.368.304.769.356 1.161.018.146.01.392.002.736-.017.528-.065 1.038-.135 1.488-.103.68-.225 1.1-.383 1.341-.157.24-.351.4-.567.567-.216.216-.373.41-.567.567-.24.157-.661.279-1.341.383-.45.07-.96.118-1.488.135-.344.01-.59.018-.736-.002-.392-.052-.793-.18-1.161-.356-.368-.175-.688-.42-1.22-.955-.532-.532-.775-.852-.955-1.22-.175-.368-.304-.769-.356-1.161-.018-.146-.01-.392-.002-.736.017-.528.065-1.038.135-1.488.103-.68.225-1.1.383-1.341.157-.24.351-.4.567-.567zm-.432-8.583a.965.965 0 01.965-.965.965.965 0 01.965.965.965.965 0 01-.965.965.965.965 0 01-.965-.965z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Componente de navegación de pie de página: monoespaciado/estilo de desarrollador

Un componente de navegación de pie de página complejo y receptivo diseñado para sitios web de agricultura / agricultura, con una estética monoespaciada / de desarrollador con un esquema de color de arco iris degradado y soporte para modo oscuro.

Abrir Vista previa

                <footer class="bg-violet-950 text-emerald-200 dark:bg-black font-mono text-[0.8rem] md:text-[0.9rem] lg:text-[1rem] p-6 lg:p-10 border-t-4 border-l-2 border-r-2 border-b-2 tracking-tighter" style="border-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7) 1;">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
    
    <!-- Company Info & Logo (ASCII Art style) -->
    <div class="flex flex-col items-start">
      <pre class="text-xl md:text-2xl lg:text-3xl font-bold mb-4 bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308);">_FARMBOT_</pre>
      <p class="mb-4 leading-relaxed">// Precision Agriculture Solutions<br>// Est. 2023 // All rights reserved.</p>
      <div class="flex space-x-3 mt-auto">
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">GitHub</span><svg class="w-5 h-5" 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.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">Twitter</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.32 0 2.428-.482 3.313-1.423-.42-.01-.796-.126-1.09-.344-.294-.216-.525-.503-.693-.868-.168-.364-.252-.76-.252-1.189 0-.426.084-.816.252-1.17s.4-.645.717-.899c.316-.254.67-.457 1.06-.61a.987.987 0 001.09.28.986.986 0 00.56-.379c.196-.285.344-.61.444-.973.1-.36.147-.745.147-1.15-.008-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02-.566-.2-.962-.294-1.189-.283-.404.01-.762.1-1.077.268-.314.162-.572.392-.774.69-.202.298-.352.645-.448 1.03-.095.385-.143.784-.143 1.198 0 1.25.418 2.302 1.254 3.155.836.852 1.848 1.278 3.037 1.278.47 0 .91-.122 1.31-.365.39-.24.717-.58.98-.98.263-.4.4-.84.4-1.32 0-.203-.03-.396-.088-.58-.058-.184-.14-.356-.248-.517-.107-.16-.23-.3-.368-.415-.138-.112-.29-.197-.456-.253-.166-.056-.34-.084-.52-.084-.44 0-.79.08-1.05.23-.26.15-.46.33-.6.54-.14.21-.24.44-.3.69-.06.25-.09.5-.09.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278v.01ZM12 4c.621 0 1.24.032 1.854.095-.506-.217-1.04-.413-1.58-.592-.54-.179-1.09-.34-1.65-.482-.56-.142-1.12-.27-1.68-.383-.56-.112-1.12-.206-1.68-.283C6.477.01 2 4.475 2 10.017c0 4.425 2.865 8.18 6.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">LinkedIn</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s-.75-1.764 1.75-1.764 1.75.79 1.75 1.764-1.75 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.764 7 2.677v6.558z" clip-rule="evenodd" /></svg></a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-orange-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// NAVIGATION</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> About FarmBot</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Our Technology</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Precision Farming</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Crop Optimization</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Case Studies</a></li>
      </ul>
    </div>

    <!-- Support & Resources -->
    <div>
      <h3 class="text-blue-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// SUPPORT & DOCS</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> FAQ</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Get Started Guide</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> API Reference</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Community Forum</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Contact Support</a></li>
      </ul>
    </div>

    <!-- Legal & Policies -->
    <div>
      <h3 class="text-purple-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// LEGAL & POLICY</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Terms of Service</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Privacy Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Cookie Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Licensing</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Accessibility</a></li>
      </ul>
    </div>

    <!-- Newsletter Signup (Terminal-like) -->
    <div class="lg:col-span-4 mt-8 flex flex-col items-center">
      <h3 class="text-pink-400 font-bold mb-4 tracking-wide">// SUBSCRIBE FOR UPDATES</h3>
      <p class="mb-4 text-center max-w-lg">Receive the latest agricultural tech insights and FarmBot news directly to your inbox. <span class="text-orange-300">[No spam. Ever.]</span></p>
      <form class="w-full max-w-sm flex flex-col md:flex-row gap-2">
        <label for="email-input" class="sr-only">Email Address</label>
        <input id="email-input" type="email" placeholder="> enter_email_address..." class="flex-grow min-w-0 p-3 rounded-md bg-transparent border border-emerald-400 text-emerald-200 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-zinc-800 dark:border-emerald-600 dark:placeholder:text-zinc-600 dark:focus:ring-emerald-600 text-sm md:text-base" aria-label="Email address for newsletter">
        <button type="submit" class="p-3 rounded-md bg-gradient-to-r from-green-500 to-blue-500 text-stone-900 font-bold hover:from-green-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 uppercase text-sm md:text-base transition-all duration-300 ease-in-out">
          <span class="block group-hover:hidden">[SEND]</span>
          <span class="hidden group-hover:block">[INITIATE_SUBSCRIPTION]</span>
        </button>
      </form>
    </div>

  </div>

  
  <div class="mt-10 pt-6 border-t border-dashed border-gray-700 dark:border-gray-500 text-center text-gray-500 text-xs md:text-sm">
    <p class="mb-2">&copy; 2023 FarmBot Inc. &middot; <span class="text-gray-600 dark:text-gray-400">// Code Licensed Under MIT.</span></p>
    <p><code>[STATUS_REPORT: OPERATIONAL] [VERSION: 1.0.0] [DEPLOYMENT_DATE: 2023-10-27]</code></p>
  </div>
</footer>

NeonGlowFooterNavegación

Un componente de navegación de pie de página receptivo con efectos de neón/resplandor, diseñado para plataformas de música/audio. Cuenta con un esquema de color en blanco y negro con un color de acento vibrante, compatibilidad con modo oscuro y HTML semántico.

Abrir Vista previa

                <footer class="bg-zinc-950 text-gray-400 py-8 px-4 dark:bg-black w-full shadow-2xl shadow-fuchsia-500/20">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 ">

    <!-- Section 1: Logo & Slogan -->
    <div class="col-span-full md:col-span-1 lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-fuchsia-400 text-3xl font-bold tracking-wide relative 
                  before:content-[''] before:absolute before:-inset-0.5 before:block before:bg-fuchsia-500/30 before:rounded-lg before:blur-sm before:animate-pulse 
                  after:content-[''] after:absolute after:-inset-0.5 after:block after:bg-fuchsia-500/10 after:rounded-lg after:blur-md after:animate-pulse">
        <span class="relative z-10">BeatWave</span>
      </a>
      <p class="mt-4 text-sm text-gray-500 dark:text-gray-600">Ignite Your Sound</p>
      <div class="flex space-x-4 mt-6">
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" 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.797c0-2.506 1.492-3.89 3.777-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-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2ZM17.1 v-2.2H14.9c-.83 0-1.1.33-1.1 1.07v1.13h2.4l-.32 2.3h-2.08v6.7h-2.73v-6.6a1.1 1.1 0 0 1-1.12-1.1c0-.49 1.12-1.07 1.12-2.3v-2.3c0-2.45 1.5-3.8 3.75-3.8 1.05 0 2.2.14 2.2.14v2.5Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M.931 7.28c-.378-.58-.707-.58-.87-.312C-.07 7.218.006 7.636.006 8.016v8.435c0 .38-.076.798-.016.963.163.267.492.267.87.312l4.898-.052 8.358 8.36c.58.58 1.52.58 2.1 0l6.21-6.21c.58-.58.58-1.52 0-2.1l-6.21-6.21-8.358-8.36L.93.948h.001Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Section 2: Discover -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Discover
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">New Releases</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Top Charts</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Genres</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Artists</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 3: Community -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Community
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Forums</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Support</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Help Center</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 4: Company -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Company
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">About Us</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Careers</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Press</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Terms of Service</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 5: Newsletter Signup -->
    <div class="col-span-full md:col-span-3 lg:col-span-1">
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Stay Tuned
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-600 mb-4">Subscribe to our newsletter for the latest updates and exclusive content.</p>
      <form class="flex flex-col sm:flex-row gap-2">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full flex-grow px-4 py-2 bg-zinc-800 border-2 border-zinc-700 rounded-md text-white placeholder-gray-500
                      focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent 
                      shadow-inner shadow-zinc-700/50 dark:bg-zinc-900 dark:border-zinc-800 dark:shadow-zinc-800/50"
               placeholder="Enter your email">
        <button type="submit"
                class="px-6 py-2 bg-fuchsia-600 text-white font-medium rounded-md 
                       hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-zinc-950 
                       transition-all duration-300 relative overflow-hidden group
                       shadow-lg shadow-fuchsia-500/30
                       dark:shadow-fuchsia-500/40">
          <span class="relative z-10">Subscribe</span>
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 
                       blur-sm group-hover:blur-[1px] transition-all duration-300"></span>
        </button>
      </form>
    </div>

  </div>

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

Componente de navegación de pie de página - Industrial Ocean

Un componente de navegación de pie de página complejo y receptivo en un estilo industrial con esquema de color océano/azul, adecuado para sitios web de eventos/conferencias. Incluye enlaces de varias columnas, iconos de redes sociales, derechos de autor y compatibilidad con el modo oscuro.

Abrir Vista previa

                <footer class="bg-sky-950 text-white dark:bg-gray-950 py-12 md:py-16 border-t-4 border-sky-700 dark:border-gray-800 font-sans">
  <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 lg:gap-12">
      <!-- Company Info / Logo -->
      <div class="col-span-1 lg:col-span-2 flex flex-col items-start">
        <h2 class="text-3xl font-extrabold text-sky-200 dark:text-sky-400 mb-4 tracking-tight uppercase">
          <span class="block">Event</span>
          <span class="block text-sky-400 dark:text-sky-200">Connect</span>
        </h2>
        <p class="text-sky-300 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Bringing together minds, ideas, and innovations. Your premier platform for unforgettable events and conferences worldwide.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 223.75 0c-73.66 0-121.05 44.38-121.05 124.7v70.30H27.5v92.66h74.05V512h94.92V288z"></path></svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96z"></path></svg>
            <span class="sr-only">Twitter</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 114.71C24.09 114.71 0 91.63 0 62.84 0 34.05 24.09 11.05 53.79 11.05c29.7 0 53.79 23 53.79 51.79 0 28.79-24.1 51.79-53.79 51.79zM448 448h-92.68V302.4c0-34.74-27.02-63.53-63.07-63.53-34.88 0-56.36 25.35-65.73 40.57h-.42V448H172.5V148.9h92.54v33.43c12.26-21.72 40.16-59.54 102.4-59.54 77.29 0 137.4 69.49 137.4 165.48z"></path></svg>
            <span class="sr-only">LinkedIn</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 204.2c-56.3 0-102.2 45.9-102.2 102.2s45.9 102.2 102.2 102.2S326.3 362.5 326.3 306.2 280.4 204.2 224.1 204.2zm0 159.2c-31.9 0-57.8-25.9-57.8-57.8s25.9-57.8 57.8-57.8 57.8 25.9 57.8 57.8-26 57.8-57.8 57.8z"></path><path d="M185 36h78.8c.8 0 1.2.6 1.2 1.3 0 2.2-1.7 4.1-3.9 4.1H185c-2.2 0-3.9-1.9-3.9-4.1 0-.7.4-1.3 1.2-1.3zM.4 121.7C.3 121.2 0 120.5 0 119.8V42.6c0-4.6 3.4-8.8 8.1-9.3 4.7-.5 9.1 2.3 10.9 6.8l.6 1.4-15.6 15.6c-.6.6-.9 1.4-.9 2.2v43.2c0 .8.3 1.6.9 2.2l15.6 15.6-.6 1.4c-1.8 4.5-6.2 7.3-10.9 6.8-4.7-.5-8.1-4.7-8.1-9.3v-77.2c0-.7-.3-1.3-.4-1.8z"></path><path d="M384 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm-48.9 154.5v198.8c0 24.9-20.2 45.1-45.1 45.1H159.2c-24.9 0-45.1-20.2-45.1-45.1V154.5c0-24.9 20.2-45.1 45.1-45.1h130.8c24.9 0 45.1 20.2 45.1 45.1zm-8.8-97.8c-2.4 0-4.8 1-6.5 2.7-1.7 1.7-2.7 4.1-2.7 6.5s1 4.8 2.7 6.5c1.7 1.7 4.1 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4.1 2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4.1-2.7-6.5-2.7z"></path></svg>
            <span class="sr-only">Instagram</span>
          </a>
        </div>
      </div>

      <!-- Navigation Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">About</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Our Mission</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Team</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Partners</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Careers</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Events</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Upcoming Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Past Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Submit a Proposal</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Sponsor An Event</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">FAQ</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Contact Us</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Privacy Policy</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Terms of Service</a></li>
        </ul>
      </div>
    </div>

    <!-- Newsletter Signup -->
    <div class="mt-12 pt-8 border-t border-sky-700 dark:border-gray-800 flex flex-col items-center justify-between text-center md:flex-row md:text-left gap-6">
      <div class="max-w-md">
        <h3 class="text-xl font-bold text-sky-200 dark:text-sky-400 mb-2">Stay Connected</h3>
        <p class="text-sky-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest updates on events and industry insights.</p>
      </div>
      <form class="flex flex-col sm:flex-row w-full max-w-sm space-y-3 sm:space-y-0 sm:space-x-3">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full appearance-none rounded-md border border-sky-600 dark:border-gray-700 px-4 py-2 text-gray-900 placeholder-gray-500 rounded-lg
                      focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm
                      bg-sky-100 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400"
               placeholder="Enter your email">
        <button type="submit"
                class="flex-shrink-0 rounded-md border border-transparent bg-sky-600 px-4 py-2 text-base font-medium text-white shadow-sm
                       hover:bg-sky-700 dark:bg-sky-700 dark:hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-950 transition-colors duration-300">
          Subscribe
        </button>
      </form>
    </div>

    <!-- Copyright -->
    <div class="mt-8 pt-8 border-t border-sky-800 dark:border-gray-700 text-center text-sky-400 dark:text-gray-500 text-xs">
      &copy; <span id="current-year"></span> EventConnect. All rights reserved. Built with <span class="text-red-400">&hearts;</span>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Componente de navegación de pie de página artístico de acuarela

Un componente de navegación de pie de página complejo y receptivo diseñado para sitios web sin fines de lucro/caridad, con un estilo artístico de acuarela con tonos suaves, sepia/marrón y soporte para modo oscuro. Incluye múltiples enlaces de navegación, iconos de redes sociales y una sección de derechos de autor.

Abrir Vista previa

                <footer class="relative bg-gradient-to-br from-amber-50 to-amber-100 font-sans text-amber-950 dark:from-stone-950 dark:to-stone-800 dark:text-stone-100 overflow-hidden pt-12 pb-8">
  <!-- Background texture overlay -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20" style="background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');"></div>

  <div class="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10 border-b border-amber-200/50 dark:border-stone-700/50 pb-8">

      <!-- Column 1: Organization Info -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <div class="w-24 h-24 rounded-full overflow-hidden mb-4 border-2 border-amber-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300">
          <img src="https://picsum.photos/seed/charitylogo/200/200" alt="Non-profit Logo" class="w-full h-full object-cover grayscale brightness-110 contrast-125">
        </div>
        <h3 class="text-2xl font-semibold mb-2 text-amber-900 dark:text-stone-200 font-serif">Hope & Harmony Foundation</h3>
        <p class="text-sm mb-2 text-amber-800 dark:text-stone-300">Fostering a world of compassion and positive change.</p>
        <p class="text-sm text-amber-800 dark:text-stone-300"><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        <p class="text-sm text-amber-800 dark:text-stone-300">(123) 456-7890</p>
      </div>

      <!-- Column 2: Quick Links -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Our Mission</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">What We Do</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Impact Stories</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Volunteer</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Donate Now</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 3: Resources -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Resources</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Blog</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Events Calendar</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Annual Reports</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">FAQ</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Contact Us</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 4: Newsletter & Social -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Stay Connected</h4>
        <p class="text-sm mb-4 text-amber-800 dark:text-stone-300">Join our newsletter for updates and inspiring stories.</p>
        <form class="w-full max-w-sm mb-6">
          <div class="flex flex-col sm:flex-row gap-2">
            <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-amber-50 border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-300 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-stone-400 text-sm placeholder-amber-600">
            <button type="submit" class="px-5 py-2 rounded-lg bg-amber-700 text-amber-50 font-semibold shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50 transition-all duration-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:ring-offset-stone-900 text-sm whitespace-nowrap">Subscribe</button>
          </div>
        </form>

        <div class="flex space-x-5">
          <a href="#" aria-label="Facebook" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-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.797c0-2.506 1.492-3.89 3.777-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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Twitter" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.333 7.822c-.667 1.086-1.581 1.96-2.741 2.622-1.161.662-2.482.993-3.964.993a4.85 4.85 0 01-3.667-1.46c-.958-.92-1.437-2.073-1.437-3.46 0-1.387.479-2.54 1.437-3.46.958-.92 2.18-.92 3.667-.92 1.383 0 2.593.364 3.63 1.093" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Instagram" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-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.104.056.333.045.64.174.92.308.57.27.954.607 1.353 1.006.398.399.736.783 1.006 1.352.134.28.263.587.309.92.043.32.056.671.056 3.102V12c0 2.43-.013 2.78-.056 3.104-.045.333-.174.64-.308.92-.27.57-.607.954-1.006 1.353-.399.398-.783.736-1.352 1.006-.28.134-.587.263-.92.309-.32.043-.671.056-3.102.056H12.315c-2.43 0-2.784-.013-3.104-.056-.333-.045-.64-.174-.92-.308-.57-.27-.954-.607-1.353-1.006-.398-.399-.783-.736-1.006-1.352-.134-.28-.263-.587-.309-.92-.043-.32-.056-.671-.056-3.102V12c0-2.43.013-2.78.056-3.104.045-.333.174-.64.308-.92.27-.57.607-.954 1.006-1.353.399-.398.783-.736 1.352-1.006.28-.134.587-.263.92-.309.32-.043.671-.056 3.102-.056H12.315zM12 7.828c-2.322 0-4.207 1.885-4.207 4.207s1.885 4.207 4.207 4.207 4.207-1.885 4.207-4.207S14.322 7.828 12 7.828zm0 1.25c1.637 0 2.957 1.32 2.957 2.957s-1.32 2.957-2.957 2.957-2.957-1.32-2.957-2.957S10.363 9.078 12 9.078zm6.52-.767c0-.528.431-.959.959-.959.528 0 .959.431.959.959s-.431.959-.959.959-.959-.431-.959-.959z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-5.75 16h-2.5V8h2.5v10zM5 6.75A1.75 1.75 0 115 3.25A1.75 1.75 0 015 6.75zM17 18h-2.5V13.875c0-.625-.525-1.125-1.125-1.125h-.5c-.625 0-1.125.5-1.125 1.125V18h-2.5V8h2.5v1.25h.125c.625-.625 1.375-.75 2.063-.75 2.125 0 2.937 1.25 2.937 3.25V18z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
        </div>
      </div>

    </div>

    <!-- Copyright & Disclaimer -->
    <div class="text-center text-sm text-amber-900/80 dark:text-stone-300/80 pt-6">
      <p>&copy; 2023 Hope & Harmony Foundation. All rights reserved.</p>
      <p class="mt-2">Dedicated to creating a better future for all. <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a></p>
    </div>
  </div>
</footer>

3D_Music_Footer_Navigation

Un complejo componente de navegación de pie de página inspirado en 3D para plataformas de música/audio, con neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.

Abrir Vista previa

                <footer class="bg-gradient-to-br from-stone-100 to-stone-200 text-stone-700 py-12 px-6 dark:from-stone-900 dark:to-stone-950 dark:text-stone-300 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(circle at center, #d6d3d1 1px, transparent 1px); background-size: 20px 20px;"></div>

    <!-- Decorative rings for 3D effect -->
    <div class="absolute w-96 h-96 rounded-full bg-stone-300 dark:bg-stone-700 opacity-20 dark:opacity-10 -bottom-24 -left-24 blur-3xl"></div>
    <div class="absolute w-72 h-72 rounded-full bg-stone-400 dark:bg-stone-600 opacity-15 dark:opacity-8 top-12 -right-12 blur-3xl"></div>

    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
        <!-- Section 1: Logo and Copyright -->
        <div class="flex flex-col items-start">
            <a href="#" class="inline-flex items-center space-x-2 text-2xl font-bold mb-4 transform transition-transform duration-300 hover:scale-105">
                <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm-1 16.03V7.97c0-.49.38-.87.87-.87H15a.87.87 0 0 1 .87.87v10.06a.87.87 0 0 1-.87.87H11.87a.87.87 0 0 1-.87-.87zM13 14H9v-4h4v4z"/>
                </svg>
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-stone-800 dark:from-amber-400 dark:to-stone-200">SoundWave</span>
            </a>
            <p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Dive into an ocean of sounds. Your ultimate audio experience begins here.</p>
            <p class="text-xs text-stone-500 dark:text-stone-400">&copy; 2023 SoundWave. All rights reserved.</p>
            <div class="flex space-x-4 mt-6">
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-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.33V22C17.368 21.248 22 17.07 22 12z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.24 3.76c-.92-.92-2.12-1.44-3.44-1.44H7.2c-1.32 0-2.52.52-3.44 1.44C2.84 4.68 2.32 5.88 2.32 7.2v9.6c0 1.32.52 2.52 1.44 3.44s2.12 1.44 3.44 1.44h9.6c1.32 0 2.52-.52 3.44-1.44s1.44-2.12 1.44-3.44V7.2c0-1.32-.52-2.52-1.44-3.44zM12 18.08c-3.35 0-6.08-2.73-6.08-6.08S8.65 5.92 12 5.92s6.08 2.73 6.08 6.08-2.73 6.08-6.08 6.08zM18.42 7.78a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z"/><path d="M12 8.08c-2.16 0-3.92 1.76-3.92 3.92s1.76 3.92 3.92 3.92 3.92-1.76 3.92-3.92-1.76-3.92-3.92-3.92z"/></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6.03c-.63.28-1.31.47-2.01.56.73-.44 1.29-1.13 1.55-1.99-.68.4-1.43.68-2.22.84-.64-.68-1.55-1.12-2.59-1.12-2.02 0-3.66 1.64-3.66 3.66 0 .29.03.56.08.83-3.05-.15-5.75-1.61-7.56-3.84-.32.55-.5 1.18-.5 1.87 0 1.27.65 2.39 1.63 3.05-.6-.02-1.16-.18-1.65-.45v.05c0 1.77 1.26 3.24 2.93 3.58-.3.08-.6.12-.9.12-.22 0-.44-.02-.65-.06.47 1.45 1.81 2.51 3.41 2.54-1.25.98-2.82 1.57-4.53 1.57-.29 0-.58-.02-.86-.05 1.62 1.04 3.54 1.65 5.59 1.65 6.71 0 10.37-5.56 10.37-10.37 0-.16-.01-.32-.01-.48.71-.51 1.34-1.14 1.83-1.87z"/></svg>
                </a>
            </div>
        </div>

        <!-- Section 2: Quick Links (Explore) -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Explore</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">New Releases</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Top Charts</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Genres</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Artists</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Podcasts</a></li>
            </ul>
        </div>

        <!-- Section 3: Support & Legal -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Support</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Help Center</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Contact Us</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Privacy Policy</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Terms of Service</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Cookie Policy</a></li>
            </ul>
        </div>

        <!-- Section 4: Newsletter & App Download -->
        <div class="space-y-6">
            <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Stay Connected</h3>
            <div>
                <p class="mb-3 text-stone-600 dark:text-stone-400">Subscribe to our newsletter for the latest updates.</p>
                <form class="flex flex-col sm:flex-row gap-2">
                    <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-white/50 dark:bg-stone-800/50 px-3.5 py-2 text-stone-900 dark:text-stone-100 shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-700 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 sm:text-sm sm:leading-6 transition-all duration-300 focus:outline-none focus:shadow-lg focus:shadow-amber-500/20" placeholder="Enter your email">
                    <button type="submit" class="flex-none rounded-md bg-amber-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 transform transition-transform duration-300 hover:scale-105 active:scale-95
                    relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        Subscribe
                    </button>
                </form>
            </div>
            <div class="mt-6">
                <p class="mb-3 text-stone-600 dark:text-stone-400">Download our mobile app to listen on the go!</p>
                <div class="flex space-x-3">
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 20h-6v-1h6v1zm3-3H6V4h12v14z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">App Store</span>
                    </a>
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.05 13.9c-.29.54-.84.85-1.4.85-.92 0-1.67-.75-1.67-1.67 0-.92.75-1.67 1.67-1.67.56 0 1.11.31 1.4.85l.76-.76c-.57-.96-1.57-1.54-2.58-1.54-1.84 0-3.33 1.49-3.33 3.33s1.49 3.33 3.33 3.33c1.01 0 2.01-.58 2.58-1.54l-.76-.76zm7.2-2.3l-.76.76c.29-.54.84-.85 1.4-.85.92 0 1.67.75 1.67 1.67 0 .92-.75 1.67-1.67 1.67-.56 0-1.11-.31-1.4-.85l-.76.76c.57.96 1.57 1.54 2.58 1.54 1.84 0 3.33-1.49 3.33-3.33s-1.49-3.33-3.33-3.33c-1.01 0-2.01.58-2.58 1.54z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">Play Store</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Retro_Earth_Tone_Portfolio_Footer

Un componente de navegación de pie de página receptivo y de temática retro para un sitio web de portafolio, con tonos tierra y compatibilidad con el modo oscuro. Diseñado pensando en la estética de los años 80/90, ofreciendo una sensación nostálgica.

Abrir Vista previa

                <footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
  <div class="container mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
      <div class="flex flex-col items-center md:items-start text-center md:text-left">
        <a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
          [Your Portfolio]
        </a>
        <p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-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.797c0-2.506 1.492-3.89 3.777-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.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
              <path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
            </svg>
            <span class="sr-only">Google</span>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        </address>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
      <p>&copy; <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
    </div>
  </div>
</footer>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Componente de navegación de pie de página

Componente de navegación de pie de página orgánico/inspirado en la naturaleza para un mercado, con líneas fluidas, combinación de colores análoga, múltiples secciones y diseño receptivo con soporte para modo oscuro.

Abrir Vista previa

                <footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
      <path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
    </svg>
  </div>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
      <div class="flex flex-col items-start lg:col-span-2">
        <a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
          NatureNest
        </a>
        <p class="text-sm leading-relaxed mb-6 max-w-sm">
          Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-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.797c0-2.506 1.492-3.89 3.777-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-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-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.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <div class="lg:col-span-1">
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
          <button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
            Subscribe
          </button>
        </form>
        <div class="mt-8">
          <h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
          <a href="#" class="flex items-center space-x-3 group">
            <img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">&#x2764;</span> for a better world.
      </p>
    </div>
  </div>
</footer>