Back to Top Button Component

<div class="fixed bottom-4 right-4 z-50">
  <!-- Outer rotating square container -->
  <div class="relative w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 transform rotate-45 group hover:rotate-0 transition-transform duration-500 ease-in-out">
    <!-- Larger inner purple square -->
    <div class="absolute inset-0 bg-purple-600 dark:bg-purple-800 rounded-lg shadow-xl group-hover:scale-110 transition-transform duration-300 ease-out"></div>

    <!-- Smaller offset violet triangle overlay -->
    <div class="absolute -bottom-2 -left-2 sm:-bottom-3 sm:-left-3 md:-bottom-4 md:-left-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-violet-400 dark:bg-violet-600 rounded-md transform rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- Smaller offset lavendar circle overlay -->
    <div class="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 md:-top-4 md:-right-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-indigo-300 dark:bg-indigo-500 rounded-full transform -rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- The actual button element (positioned to appear central in the rotated context) -->
    <button
      aria-label="Back to top"
      onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
      class="absolute inset-0 flex items-center justify-center p-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-500 ease-in-out
             rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
             active:scale-95 transition-transform duration-150"
    >
      <!-- Inner button styling for Memphis flair -->
      <div class="relative w-full h-full bg-purple-400 dark:bg-purple-700 rounded-lg border-4 border-dashed border-white border-opacity-70 dark:border-opacity-30 flex items-center justify-center
                  group-hover:bg-purple-500 dark:group-hover:bg-purple-900 transition-colors duration-300 ease-out">
        <!-- Arrow Icon -->
        <svg
          class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-white dark:text-gray-200 transition-transform duration-300 ease-out
                 group-hover:-translate-y-1 group-hover:scale-110"
          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="M5 10l7-7m0 0l7 7m-7-7v18"
          ></path>
        </svg>

        <!-- Small decorative dot overlay (Memphis style) -->
        <div class="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-pink-400 dark:bg-pink-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
        <div class="absolute -bottom-1 -left-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-teal-400 dark:bg-teal-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
      </div>
    </button>
  </div>
</div>