Charts Component

<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>