Memphis_Pastel_Food_Badges_Component

<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-950 dark:via-pink-950 dark:to-yellow-950 min-h-screen font-sans">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-200 mb-8 sm:mb-12 text-center relative z-10">
    <span class="block relative z-10">Today's Specials <span class="text-pink-600 dark:text-pink-400">&amp;</span> Perks!</span>
    <span class="absolute inset-x-0 bottom-0 h-4 bg-yellow-300 dark:bg-yellow-700 transform -skew-x-12 origin-top-left z-0"></span>
  </h2>

  <!-- Badges Container Grid -->
  <div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Badge 1: Discount -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-pink-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 -left-8 w-24 h-24 bg-pink-300 dark:bg-pink-700 rounded-full opacity-70 group-hover:rotate-45 transition-transform duration-500"></div>
      <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-200 dark:bg-purple-600 rounded-lg transform rotate-12 opacity-70 group-hover:-rotate-12 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-pink-500 dark:text-pink-400 mb-4 transform rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">25%</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Off Your First Order!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Enjoy a fantastic saving on your initial culinary adventure.</p>
        <button class="px-6 py-3 bg-purple-500 dark:bg-purple-700 text-white rounded-full font-semibold shadow-md hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300 transform -skew-x-6">
          Claim Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 transform -rotate-12 text-lg font-bold">⭐ Hot Deal!</span>
      </div>
    </div>

    <!-- Badge 2: Free Delivery -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-yellow-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -right-10 w-28 h-28 bg-yellow-300 dark:bg-yellow-700 rounded-full opacity-70 group-hover:-translate-y-2 transition-transform duration-500"></div>
      <div class="absolute -bottom-8 -left-8 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-xl transform -rotate-6 opacity-70 group-hover:rotate-6 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-green-500 dark:text-green-400 mb-4 transform -rotate-3 origin-center group-hover:rotate-0 transition-transform duration-300">🚚</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Free Delivery!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">No delivery fees on orders over $25. Get your food delivered for free.</p>
        <button class="px-6 py-3 bg-yellow-500 dark:bg-yellow-700 text-white rounded-full font-semibold shadow-md hover:bg-yellow-600 dark:hover:bg-yellow-800 transition duration-300 transform skew-x-6">
          Order Now!
        </button>
        <span class="absolute top-2 left-2 text-purple-500 dark:text-purple-400 transform rotate-12 text-lg font-bold">🎉 Limited Time!</span>
      </div>
    </div>

    <!-- Badge 3: Loyalty Program -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-purple-500/20 border-4 border-purple-300 dark:border-purple-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-6 left-1/4 w-20 h-20 bg-purple-300 dark:bg-purple-700 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 right-1/4 w-24 h-24 bg-yellow-200 dark:bg-yellow-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>
      <div class="absolute top-1/2 left-3 w-16 h-4 bg-pink-400 dark:bg-pink-700 transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="text-6xl font-black text-purple-500 dark:text-purple-400 mb-4 transform -skew-y-3 origin-center group-hover:skew-y-0 transition-transform duration-300">💎</div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Loyalty Rewards</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Earn points with every purchase and redeem them for exclusive discounts.</p>
        <button class="px-6 py-3 bg-pink-500 dark:bg-pink-700 text-white rounded-full font-semibold shadow-md hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform -skew-x-6">
          Join Now!
        </button>
        <span class="absolute bottom-2 right-2 text-orange-500 dark:text-orange-400 text-lg font-bold">⭐ VIP Perks!</span>
      </div>
    </div>

    <!-- Badge 4: Special Dish Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-green-500/20 border-4 border-orange-300 dark:border-orange-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-4 -right-4 w-20 h-20 bg-orange-300 dark:bg-orange-700 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>
      <div class="absolute bottom-2 left-2 w-16 h-16 bg-green-200 dark:bg-green-600 rounded-xl transform rotate-45 opacity-70 group-hover:-rotate-45 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Spicy Noodles" class="w-24 h-24 rounded-full object-cover border-4 border-yellow-400 dark:border-yellow-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Chef's Spicy Noodles!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A fiery blend of flavors, our new special is a must-try!</p>
        <button class="px-6 py-3 bg-green-500 dark:bg-green-700 text-white rounded-full font-semibold shadow-md hover:bg-green-600 dark:hover:bg-green-800 transition duration-300 transform skew-x-6">
          View Dish
        </button>
        <span class="absolute top-2 right-2 text-red-500 dark:text-red-400 font-bold text-xl">🌶️ New!</span>
      </div>
    </div>

    <!-- Badge 5: Limited Time Offer -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-red-500/20 border-4 border-yellow-300 dark:border-yellow-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-10 -left-10 w-28 h-28 bg-red-300 dark:bg-red-700 rounded-lg transform -rotate-12 opacity-70 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-purple-200 dark:bg-purple-600 rounded-full opacity-70 group-hover:translate-x-2 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <span class="text-6xl font-black text-red-500 dark:text-red-400 mb-4 transform scale-90 group-hover:scale-100 transition-transform duration-300 rotate-6">⏳</span>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Flash Sale!</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Selected items at 30% off for the next 24 hours only!</p>
        <button class="px-6 py-3 bg-red-500 dark:bg-red-700 text-white rounded-full font-semibold shadow-md hover:bg-red-600 dark:hover:bg-red-800 transition duration-300 transform -skew-x-6">
          Shop Now!
        </button>
        <span class="absolute top-2 right-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">⏰ Hurry!</span>
      </div>
    </div>

    <!-- Badge 6: New Restaurant Highlight -->
    <div class="relative overflow-hidden group bg-white dark:bg-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl dark:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-lg dark:hover:shadow-blue-500/20 border-4 border-pink-300 dark:border-pink-600">
      <!-- Memphis Background Shapes -->
      <div class="absolute -top-8 right-1/4 w-24 h-24 bg-blue-300 dark:bg-blue-700 rounded-xl opacity-70 group-hover:rotate-90 transition-transform duration-500"></div>
      <div class="absolute -bottom-4 left-1/4 w-20 h-20 bg-pink-200 dark:bg-pink-600 rounded-full opacity-70 group-hover:scale-110 transition-transform duration-500"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/100/100?random=2" alt="Restaurant Icon" class="w-24 h-24 rounded-full object-cover border-4 border-purple-400 dark:border-purple-500 mb-4 transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-6">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Newcomer: "Flavor Fiesta"</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Discover authentic Mexican cuisine, now available for delivery!</p>
        <button class="px-6 py-3 bg-blue-500 dark:bg-blue-700 text-white rounded-full font-semibold shadow-md hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform skew-x-6">
          Explore Dishes
        </button>
        <span class="absolute bottom-2 left-2 text-yellow-500 dark:text-yellow-400 font-bold text-lg">✨ Fresh!</span>
      </div>
    </div>

  </div>

  <!-- Call to Action / Footer Section -->
  <div class="mt-12 sm:mt-16 md:mt-20 text-center">
    <p class="text-lg text-purple-800 dark:text-purple-200 mb-4">
      Ready to indulge? Explore more delicious deals!
    </p>
    <a href="#" class="inline-block px-8 py-4 bg-pink-500 dark:bg-pink-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-pink-600 dark:hover:bg-pink-800 transition duration-300 transform hover:scale-105 -skew-x-6 dark:shadow-pink-500/30">
      See All Offers!
      <span class="ml-2 inline-block transform group-hover:translate-x-1 transition-transform duration-300">→</span>
    </a>
  </div>

</div>