Loaders Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-8">
  <div class="relative bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-2xl border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-xl opacity-20 dark:from-purple-700 dark:via-pink-800 dark:to-red-800"></div>
    <div class="relative z-10 flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
      <!-- Product Image Skeleton -->
      <div class="w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse shadow-lg flex-shrink-0"></div>
      
      <!-- Product Info Skeletons -->
      <div class="flex-1 space-y-6 w-full">
        <div class="h-8 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        <div class="h-6 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-1/2 animate-pulse"></div>
        <div class="space-y-4">
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-full animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-5/6 animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        </div>
        <div class="h-12 bg-purple-500 bg-opacity-50 dark:bg-purple-700 dark:bg-opacity-50 rounded-lg w-full animate-bounce"></div>
      </div>
    </div>
    
    <!-- Additional Loader Elements -->
    <div class="relative z-10 mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
    </div>

    <!-- Overlay for interactivity indication -->
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10 pointer-events-none rounded-xl">
      <div class="w-24 h-24 border-8 border-t-8 border-purple-400 dark:border-purple-600 border-opacity-70 dark:border-opacity-70 rounded-full animate-spin"></div>
    </div>
  </div>
</div>