OrganicNatureLoaderComponent

<div class="flex items-center justify-center min-h-screen bg-amber-50 dark:bg-stone-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-xl overflow-hidden animate-fade-in">
    <div class="absolute inset-0 bg-gradient-to-br from-amber-200 via-yellow-200 to-green-200 dark:from-stone-700 dark:via-stone-600 dark:to-gray-700 opacity-50 dark:opacity-30 blur-2xl pointer-events-none transform -rotate-6 scale-110"></div>
    <div class="relative z-10 flex flex-col items-center space-y-8">
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-amber-800 dark:text-stone-300 tracking-tight text-center">
        <span class="block">Foraging for Content...</span>
      </h1>

      <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center">
        <div class="absolute w-full h-full rounded-full border-4 border-t-4 border-amber-400 dark:border-stone-500 border-opacity-50 dark:border-opacity-50 animate-spin-slow origin-center ease-in-out"></div>
        <div class="absolute w-4/5 h-4/5 rounded-full border-4 border-b-4 border-amber-600 dark:border-stone-400 border-opacity-70 dark:border-opacity-70 animate-spin origin-center ease-in-out delay-100"></div>
        <div class="absolute w-3/5 h-3/5 rounded-full border-4 border-r-4 border-amber-700 dark:border-stone-300 animate-spin-reverse origin-center ease-in-out delay-200"></div>
        <svg class="w-10 h-10 sm:w-12 sm:h-12 text-amber-700 dark:text-stone-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
        </svg>
      </div>

      <p class="text-lg sm:text-xl text-amber-700 dark:text-stone-400 text-center max-w-sm leading-relaxed">
        Connecting to nature's network to gather insights...
      </p>

      <div class="w-full flex flex-col md:flex-row items-center justify-between gap-4 pt-4">
        <div class="flex flex-col items-center md:items-start text-center md:text-left">
          <p class="text-sm text-amber-600 dark:text-stone-500">Expected load time:</p>
          <p class="text-base font-medium text-amber-700 dark:text-stone-400">15-30 seconds</p>
        </div>
        <button class="px-6 py-3 bg-amber-500 hover:bg-amber-600 dark:bg-stone-500 dark:hover:bg-stone-600 text-white font-semibold rounded-full shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-stone-400 focus:ring-opacity-75">
          Refresh Feed
        </button>
      </div>
    </div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes fade-in {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-spin-slow {
      animation: spin-slow 2s linear infinite;
    }
    .animate-spin-reverse {
      animation: spin-reverse 1.5s linear infinite;
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards;
    }
  </style>
</div>