Composant Graphiques arc-en-ciel ludiques (mode/beauté)

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-8 border border-purple-200 dark:border-purple-700">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 dark:from-pink-400 dark:via-purple-400 dark:to-indigo-400">
      Our Beauty Trends
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Chart 1: Sales Growth -->
      <div class="bg-gradient-to-br from-pink-100 via-red-100 to-orange-100 dark:from-pink-800 dark:via-red-800 dark:to-orange-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-pink-200 dark:border-pink-700">
        <h3 class="text-xl font-bold mb-4 text-pink-700 dark:text-pink-200">Product Popularity</h3>
        <div class="h-48 flex items-end justify-around" role="img" aria-label="Bar chart showing product popularity">
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-red-400 to-pink-500 dark:from-red-600 dark:to-pink-700 group-hover:from-red-500 group-hover:to-pink-600 h-28" style="height: 70%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Skincare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-orange-400 to-yellow-500 dark:from-orange-600 dark:to-yellow-700 group-hover:from-orange-500 group-hover:to-yellow-600 h-36" style="height: 90%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Makeup</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-blue-400 to-green-500 dark:from-blue-600 dark:to-green-700 group-hover:from-blue-500 group-hover:to-green-600 h-24" style="height: 60%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Haircare</span>
          </div>
          <div class="flex flex-col items-center group">
            <div class="w-8 sm:w-10 rounded-full bg-gradient-to-t from-purple-400 to-indigo-500 dark:from-purple-600 dark:to-indigo-700 group-hover:from-purple-500 group-hover:to-indigo-600 h-32" style="height: 80%;"></div>
            <span class="mt-2 text-sm text-gray-700 dark:text-gray-300">Fragrance</span>
          </div>
        </div>
      </div>

      <!-- Chart 2: Customer Satisfaction -->
      <div class="bg-gradient-to-br from-green-100 via-blue-100 to-purple-100 dark:from-green-800 dark:via-blue-800 dark:to-purple-800 p-6 rounded-2xl shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border border-green-200 dark:border-green-700">
        <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-200">Customer Delight Score</h3>
        <div class="h-48 flex items-center justify-center relative">
          <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center relative overflow-hidden ring-4 ring-green-300 dark:ring-green-600">
            <div class="absolute inset-0 rounded-full" style="background-image: conic-gradient(from 0deg, #81e6d9 0%, #38a169 85%, #edf2f7 85%, #edf2f7 100%); clip-path: polygon(50% 0%, 50% 100%, 100% 100%, 100% 0%);"></div>
            <div class="absolute inset-0 rounded-full" style="clip-path: polygon(50% 0%, 50% 100%, 0% 100%, 0% 0%); background-color: #edf2f7; background-image: conic-gradient(from 180deg, #edf2f7 0%, transparent 0%);"></div>
            <div class="absolute w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-full bg-gradient-to-br from-green-500 to-teal-400 dark:from-green-700 dark:to-teal-600 flex items-center justify-center text-white text-3xl font-extrabold shadow-inner">
              85%
            </div>
          </div>
        </div>
        <p class="text-center mt-4 text-sm text-gray-700 dark:text-gray-300">Based on recent surveys</p>
      </div>
    </div>

    <!-- Fun Icons/Illustrations -->
    <div class="flex justify-around items-center pt-8 mt-8 border-t border-purple-200 dark:border-purple-700">
      <img src="https://picsum.photos/id/66/60/60" alt="Cosmetic bottle illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-pink-300 dark:border-pink-600 object-cover transform rotate-6 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/29/60/60" alt="Makeup brush illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-yellow-300 dark:border-yellow-600 object-cover transform -rotate-12 hover:rotate-0 transition-transform duration-300">
      <img src="https://picsum.photos/id/105/60/60" alt="Flower illustration" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg border-2 border-blue-300 dark:border-blue-600 object-cover transform rotate-3 hover:transform-rotate-0 transition-transform duration-300">
    </div>
  </div>
</div>