Glassmorphism_EarthTones_ProgressBar_ForumComponent

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">

  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/60 backdrop-blur-lg rounded-xl shadow-lg ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">
    
    <!-- Component Header -->
    <div class="px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center justify-between">
      <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Community Engagement Progress</h2>
      <span class="text-sm text-gray-600 dark:text-gray-400">Level 3 Enthusiast</span>
    </div>

    <!-- Progress Bar Section -->
    <div class="p-6 space-y-4">

      <!-- Individual Progress Item: Discussions -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Discussions Created</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">15 / 20</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[75%] rounded-full bg-emerald-600/70 dark:bg-emerald-500/70 shadow-md" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Replies -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Replies Posted</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">45 / 50</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[90%] rounded-full bg-orange-600/70 dark:bg-orange-500/70 shadow-md" style="width: 90%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Upvotes Received -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Upvotes Received</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">80 / 100</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-amber-600/70 dark:bg-amber-500/70 shadow-md" style="width: 80%;"></div>
        </div>
      </div>

      <!-- Individual Progress Item: Badges Earned -->
      <div class="space-y-2">
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-sky-200">Badges Earned</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">8 / 10</span>
        </div>
        <div class="relative h-2 bg-gray-200/70 dark:bg-gray-700/70 rounded-full overflow-hidden shadow-inner-sm">
          <div class="absolute top-0 left-0 h-full w-[80%] rounded-full bg-sky-600/70 dark:bg-sky-500/70 shadow-md" style="width: 80%;"></div>
        </div>
      </div>

    </div>

    <!-- Footer / Call to action -->
    <div class="px-6 py-4 bg-white/20 dark:bg-gray-800/50 border-t border-gray-200/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-y-2">
      <p class="text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left">Keep contributing to reach the next milestone!</p>
      <button type="button" class="px-4 py-2 bg-brown-700/70 dark:bg-brown-600/70 text-white text-sm font-medium rounded-lg hover:bg-brown-800/70 dark:hover:bg-brown-700/70 focus:outline-none focus:ring-2 focus:ring-brown-500/70 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200 ease-in-out shadow">
        View All Achievements
      </button>
    </div>

  </div>
</div>