Glassmorphism_RealEstate_TableOfContents

<div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white/20 dark:bg-gray-800/30 backdrop-blur-md rounded-3xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-indigo-300/50 dark:from-purple-900/50 dark:to-indigo-900/50 rounded-3xl opacity-30 blur-2xl -z-10"></div>

    <div class="p-6 md:p-8 lg:p-10">
      <h2 class="text-2xl md:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 text-center drop-shadow-md">
        Property Details
      </h2>

      <nav class="">
        <ul class="space-y-4">
          <li>
            <a href="#overview" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-6 transition-transform" 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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m3 0h.01M6 15h12a2 2 0 002-2V9a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2z"></path>
              </svg>
              <span>Property Overview</span>
            </a>
          </li>

          <li>
            <a href="#gallery" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:scale-110 transition-transform" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
              <span>Photo Gallery</span>
            </a>
          </li>

          <li>
            <a href="#features" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:skew-y-3 transition-transform" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
              <span>Key Features</span>
            </a>
          </li>

          <li>
            <a href="#floorplan" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:animate-bounce transition-transform" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
              </svg>
              <span>Floor Plans</span>
            </a>
          </li>

          <li>
            <a href="#location" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:translate-x-1 transition-transform" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span>Location & Map</span>
            </a>
          </li>

          <li>
            <a href="#contact" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-12 transition-transform" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21L9.5 13.596a18.337 18.337 0 006.702 6.702l1.018-1.018a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
              <span>Contact Agent</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>