Graphiques

                <div class="font-sans antialiased bg-gray-950 text-gray-200 dark:bg-gray-950 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-3xl shadow-2xl overflow-hidden border border-blue-900/50 relative">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-transparent to-purple-950/20 pointer-events-none z-0"></div>
    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700/50 pb-4">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-blue-400 group-hover:text-blue-300 transition-colors duration-300 tracking-wide mb-2">
            <span class="text-blue-500">\\</span> Data Progression Analysis
          </h2>
          <p class="text-gray-400 text-sm sm:text-base">Visualize your learning journey and track progress over time.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button class="flex items-center px-4 py-2 bg-gray-800 text-blue-300 rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-blue-400 group-hover:text-white transition-colors duration-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Filter by Date</span>
          </button>
          <button class="flex items-center px-4 py-2 bg-blue-700 text-white rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-white group-hover:animate-pulse" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Settings</span>
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="col-span-1 lg:col-span-2 bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300">
          <h3 class="text-xl font-semibold text-blue-300 mb-4">Weekly Performance Overview</h3>
          <!-- Placeholder for Chart -->
          <div class="relative w-full h-64 sm:h-80 md:h-96 flex items-center justify-center bg-gray-900 border border-blue-800/60 rounded-lg overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 via-transparent to-blue-800/10 animate-pulse-slow pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-between items-end text-right text-xs text-gray-500">
              <span class="text-red-400">100%</span>
              <span>80%</span>
              <span>60%</span>
              <span>40%</span>
              <span>20%</span>
              <span class="text-blue-400">0%</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full p-4 flex justify-around text-gray-500 text-xs">
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
              <span>Sun</span>
            </div>
            <!-- Example 'graph' elements - can be replaced with actual chart library output -->
            <div class="absolute bottom-8 left-8 right-8 top-8 flex items-end justify-around">
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out h-[60%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-75 h-[80%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-150 h-[40%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-225 h-[90%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-300 h-[70%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-375 h-[50%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-450 h-[85%] hover:scale-x-105 hover:bg-blue-400"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg sm:text-xl font-bold opacity-30 pointer-events-none">
              CHART DATA
            </div>
          </div>
          <p class="mt-4 text-gray-400 text-sm">This chart displays your average score and completion rate for various learning modules throughout the week.</p>
        </div>

        <div class="col-span-1 flex flex-col space-y-6">
          <!-- Key Metrics -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Key Metrics</h3>
            <div class="space-y-4">
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-3 animate-pulse group-hover:scale-110"></div>
                <span>Average Score: <strong class="text-blue-400">88.5%</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-purple-500 mr-3 animate-pulse delay-100 group-hover:scale-110"></div>
                <span>Modules Completed: <strong class="text-purple-400">12/15</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-3 animate-pulse delay-200 group-hover:scale-110"></div>
                <span>Time Spent (Hrs): <strong class="text-red-400">24.5</strong></span>
              </div>
            </div>
          </div>

          <!-- Daily Trend -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Daily Trend</h3>
            <p class="text-gray-400 text-sm mb-4">See your average score by day.</p>
            <div class="flex justify-between items-end h-24 sm:h-32 relative">
              <div class="absolute w-full h-0.5 bg-gray-700 bottom-0 left-0"></div>
              <!-- Bars -->
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 80%;"></div>
                <span class="text-xs text-gray-500 mt-1">Mon</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 65%;"></div>
                <span class="text-xs text-gray-500 mt-1">Tue</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 90%;"></div>
                <span class="text-xs text-gray-500 mt-1">Wed</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 75%;"></div>
                <span class="text-xs text-gray-500 mt-1">Thu</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 85%;"></div>
                <span class="text-xs text-gray-500 mt-1">Fri</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 50%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sat</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 70%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sun</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recommendations/Insights -->
      <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
        <h3 class="text-xl font-semibold text-blue-300 mb-3">Insights & Recommendations</h3>
        <ul class="list-disc list-inside text-gray-400 space-y-2">
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">You had a strong performance on Wednesday. Keep up the momentum!</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Consider reviewing modules related to 'Data Structures' as your scores dipped on Tuesday.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Your weekend learning hours are lower. A short review session could make a difference.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Aim to achieve 90% completion rate by end of next week.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom pulsing animation for background effect */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.2; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }
</style>
              

                <div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
  <div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
    <h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
    <p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
      </div>
      <div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
        <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
      </div>
      <div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
      </div>
      <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details &rarr;</a>
    </div>
  </div>

  <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
    <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
    <div class="relative h-48 sm:h-64">
      <!-- Placeholder for a simple bar chart or pie chart representation -->
      <div class="absolute inset-0 flex items-end p-2 sm:p-4">
        <div class="flex flex-grow justify-around items-end h-full">
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
          <div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
        </div>
      </div>

      <div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
      <div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
      
      <div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
        <span>Food</span>
        <span>Water</span>
        <span>Shelter</span>
        <span>Health</span>
        <span>Educ.</span>
      </div>
    </div>
  </div>

  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
      Generate Report
    </button>
  </div>
</div>

<style>
  @keyframes bar-grow {
    from { height: 0%; transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
  .animate-bar-grow {
    animation: bar-grow 0.8s ease-out forwards;
  }
</style>
              

                <div class="p-4 dark:bg-gray-900 bg-gray-100 min-h-screen font-sans antialiased">
  <div class="max-w-xs mx-auto dark:bg-gray-800 bg-white rounded-lg shadow-xl p-6 border dark:border-gray-700 border-gray-200">
    <h3 class="text-lg font-semibold dark:text-emerald-400 text-emerald-600 mb-4 text-center">Weekly Progress</h3>
    
    <div class="relative w-40 h-40 mx-auto">
      <!-- Background Circle -->
      <div class="absolute inset-0 rounded-full dark:bg-gray-700 bg-gray-200 opacity-75"></div>
      
      <!-- Progress Arc -->
      <div class="absolute inset-0 rounded-full border-4 border-transparent dark:border-t-emerald-500 dark:border-r-emerald-500 border-t-emerald-600 border-r-emerald-600 transform rotate-45" style="clip-path: inset(0 50% 50% 0); animation: rotate-arc 2s forwards;"></div>
      
      <!-- Center Text -->
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-3xl font-bold dark:text-ruby-400 text-ruby-600">75%</span>
      </div>
    </div>
    
    <p class="text-center dark:text-gray-400 text-gray-700 mt-4 text-sm">
      Goal Achieved
    </p>

    <div class="flex justify-around mt-6 text-sm">
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Runs</p>
        <p class="dark:text-emerald-300 text-emerald-700 font-bold">5/7</p>
      </div>
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Distance</p>
        <p class="dark:text-sapphire-300 text-sapphire-700 font-bold">30km</p>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes rotate-arc {
    from { transform: rotate(45deg); clip-path: inset(0 100% 100% 0); }
    to { transform: rotate(225deg); clip-path: inset(0 0% 0% 0%); }
  }

  /* Custom colors for jewel tones (if not already in your Tailwind config) */
  /* Assuming these are defined in your tailwind.config.js for custom colors */
  /* If not, you'd substitute with closest default Tailwind colors like green-500, blue-500, red-500 */
  .dark\:text-emerald-400 { color: #34D399; } /* Example emerald */
  .text-emerald-600 { color: #06906a; } 
  .dark\:border-t-emerald-500 { border-top-color: #10B981; } 
  .dark\:border-r-emerald-500 { border-right-color: #10B981; } 
  .border-t-emerald-600 { border-top-color: #06906a; } 
  .border-r-emerald-600 { border-right-color: #06906a; } 
  .dark\:text-ruby-400 { color: #FB7185; } /* Example ruby */
  .text-ruby-600 { color: #E11D48; } 
  .dark\:text-sapphire-300 { color: #60A5FA; } /* Example sapphire */
  .text-sapphire-700 { color: #2563EB; } 

</style>
              

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl border-4 border-purple-300 dark:border-purple-600">
    <div class="p-6 sm:p-8 border-b-4 border-purple-300 dark:border-purple-600 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-0 drop-shadow-lg tracking-wide">Retrowave Insights <span class="text-pink-500 dark:text-pink-400 text-2xl">📊</span></h1>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-pink-300 dark:border-pink-500">Week</button>
          <button class="px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-purple-300 dark:border-purple-500">Month</button>
          <button class="px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-yellow-300 dark:border-yellow-500">Year</button>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Engagement Chart -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-blue-200 dark:border-blue-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-300 mb-4 flex items-center"><span class="text-3xl mr-2">⚡</span>Engagement Overview</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your popularity rocketed this month!</p>
        <div class="relative h-48 bg-blue-100 dark:bg-gray-600 rounded-lg p-2 flex items-end justify-around border-2 border-blue-200 dark:border-blue-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>100K</span><span>75K</span><span>50K</span><span>25K</span><span>0</span>
          </div>
          <!-- Bars (simplified for HTML/Tailwind) -->
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-2/3 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">75K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-4/5 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">90K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-1/2 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">50K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-full transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">100K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-3/4 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">80K</span>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
        </div>
      </div>

      <!-- Follower Growth -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-pink-200 dark:border-pink-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-300 mb-4 flex items-center"><span class="text-3xl mr-2">💖</span>Follower Growth</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">You gained 1.2K new cool followers!</p>
        <div class="relative h-48 bg-pink-100 dark:bg-gray-600 rounded-lg p-2 flex flex-col justify-end items-start border-2 border-pink-200 dark:border-pink-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>20K</span><span>15K</span><span>10K</span><span>5K</span><span>0</span>
          </div>
          <!-- Line chart simulation with divs -->
          <div class="absolute left-0 bottom-0 w-full h-full flex items-end justify-between px-2 pb-2">
            <div class="relative flex flex-col items-center w-8" style="height: 20%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">4K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 50%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">10K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 70%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">14K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 90%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">18K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 100%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">20K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span>
        </div>
      </div>

      <!-- Top Posts / Content Performance -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-yellow-200 dark:border-yellow-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-300 mb-4 flex items-center"><span class="text-3xl mr-2">🌟</span>Top Content</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your latest 8-bit art is blowing up!</p>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=1" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Pixelated Sunset Vibes</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">15.2K Likes • 2.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#1</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=2" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Neon City Remix</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">12.8K Likes • 1.8K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#2</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=3" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">VHS Dreams Mixtape</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">9.5K Likes • 1.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#3</span>
          </div>
        </div>
      </div>

      <!-- Audience Demographics (Pie Chart) -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-purple-200 dark:border-purple-700 col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-purple-600 dark:text-purple-300 mb-4 flex items-center"><span class="text-3xl mr-2">👾</span>Audience Vibe</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Who's grooving to your tunes?</p>
        <div class="relative h-48 flex items-center justify-center bg-purple-100 dark:bg-gray-600 rounded-lg p-2 border-2 border-purple-200 dark:border-purple-800 shadow-inner">
          <!-- Simple Pie Chart Simulation with Tailwind - Uses nested divs for segments -->
          <div class="relative w-40 h-40 bg-gray-300 dark:bg-gray-500 rounded-full flex items-center justify-center overflow-hidden shadow-xl border border-purple-300 dark:border-purple-600">
            <!-- Segment 1: 50% - Female -->
            <div class="absolute inset-0 bg-pink-400 dark:bg-pink-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(0deg);"></div>
            <!-- Segment 2: 30% - Male -->
            <div class="absolute inset-0 bg-blue-400 dark:bg-blue-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(180deg);"></div>
            <!-- Segment 3: 20% - Other -->
            <div class="absolute inset-0 bg-yellow-400 dark:bg-yellow-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(288deg);"></div>
            <div class="absolute w-20 h-20 bg-purple-100 dark:bg-gray-700 rounded-full border border-purple-300 dark:border-purple-600"></div>
          </div>
        </div>
        <div class="flex justify-center flex-wrap gap-4 mt-4 text-sm font-semibold">
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-pink-400 dark:bg-pink-600 rounded-full mr-2 border border-pink-300 dark:border-pink-500"></span>Female <span class="ml-1 text-pink-600 dark:text-pink-300">(50%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-blue-400 dark:bg-blue-600 rounded-full mr-2 border border-blue-300 dark:border-blue-500"></span>Male <span class="ml-1 text-blue-600 dark:text-blue-300">(30%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2 border border-yellow-300 dark:border-yellow-500"></span>Other <span class="ml-1 text-yellow-600 dark:text-yellow-300">(20%)</span>
          </div>
        </div>
      </div>

      <!-- Recent Mentions/Comments -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-green-200 dark:border-green-700 col-span-1 md:col-span-2 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-green-600 dark:text-green-300 mb-4 flex items-center"><span class="text-3xl mr-2">💬</span>Latest Echoes</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">People are buzzing about your content!</p>
        <div class="space-y-4">
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@SynthWaveDude</span>: "Totally obsessed with your new track! 🎶 Brings back so many memories!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@NeonDreamer</span>: "This pixel art is pure perfection! Keep it up! 🤩"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">yesterday</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@VaporWaveViking</span>: "Your commitment to the aesthetic is unmatched. Love the consistency!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gradient-to-l from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 border-t-4 border-purple-300 dark:border-purple-600 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300">Insights generated with <span class="text-pink-500 dark:text-pink-400 font-bold">✨ RetroBoost AI ✨</span></p>
    </div>
  </div>
</div>
              

                <div class="p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-xl border border-gray-300 dark:border-gray-700">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Engagement Over Time</h2>
  <div class="flex items-end justify-between h-40 mb-4">
    <!-- Bar 1 (e.g., Likes) -->
    <div class="flex-1 mx-1 bg-blue-500 dark:bg-blue-700 rounded-t-lg shadow-inner" style="height: 70%;"></div>
    <!-- Bar 2 (e.g., Comments) -->
    <div class="flex-1 mx-1 bg-red-500 dark:bg-red-700 rounded-t-lg shadow-inner" style="height: 90%;"></div>
    <!-- Bar 3 (e.g., Shares) -->
    <div class="flex-1 mx-1 bg-green-500 dark:bg-green-700 rounded-t-lg shadow-inner" style="height: 50%;"></div>
    <!-- Bar 4 (e.g., Views) -->
    <div class="flex-1 mx-1 bg-yellow-500 dark:bg-yellow-700 rounded-t-lg shadow-inner" style="height: 80%;"></div>
  </div>
  <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
  </div>
</div>

              

                <div class="min-h-screen p-4 sm:p-8
    bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
    font-sans text-gray-800 dark:text-gray-200">

    <div class="max-w-7xl mx-auto">
        <!-- Dashboard Header -->
        <header class="mb-8 p-6 rounded-xl relative
            bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
            shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
            border border-gray-100 dark:border-gray-700
            text-center
        ">
            <h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
                Analytics Dashboard
            </h1>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
                Data insights at a glance with a Classic UI
            </p>
        </header>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

            <!-- Card 1: Sales Overview (Bar Chart) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
                overflow-hidden
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>

                <!-- Timeframe buttons (skeuomorphic) -->
                <div class="flex space-x-2 mb-6">
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Daily</button>
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Monthly</button>
                </div>

                <!-- Chart Area - Recessed look -->
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative flex items-end justify-around space-x-2
                ">
                    <!-- Example Bar Chart bars -->
                    <div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
                </div>

                <!-- Legend -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
                    </div>
                </div>
            </div>

            <!-- Card 2: User Engagement (Simulated Line Chart) -->
             <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative
                ">
                    <!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
                    <div class="absolute inset-0 flex items-end">
                        <div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
                            style="
                                clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
                            "></div>
                    </div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
                </div>
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
                    </div>
                </div>
            </div>

            <!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    flex items-center justify-center
                ">
                    <!-- Simple Circle Placeholder for Pie Chart -->
                    <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
                        bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
                    ">
                        <div class="text-center">
                            <p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
                            <p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
                        </div>
                    </div>
                </div>
                <!-- Legend for segments -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
                    </div>
                </div>
            </div>

            <!-- Card 4: Key Performance Indicators -->
            <div class="
                relative col-span-1 md:col-span-2 lg:col-span-3
                rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
                <div class="
                    min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
                ">
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
                        <p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
                        <p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
              

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
            <img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
            <img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
        <div class="flex flex-wrap mt-4 gap-4">
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
            </div>
        </div>
    </div>
</div>
              

                <div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>
              

                <div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>