Social Login Component - Real Estate (Watercolor/Neon)

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-lime-100 via-sky-100 to-fuchsia-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70 border border-lime-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-105 group" style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(255, 255, 255, 0.1);">
    <div class="relative p-8 text-center">
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10" style="background: radial-gradient(circle at center, #CCEEFF, transparent 70%), url('https://picsum.photos/600/400?blur=5') center center / cover no-repeat;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-2">
          Find Your Dream Home
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Sign in to explore properties tailored for you.
        </p>
        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-blue-500 to-blue-700 text-white shadow-xl hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-blue" aria-label="Sign in with Facebook">
            <div class="absolute inset-0 bg-blue-500 opacity-20 pointer-events-none group-hover:neon-blue"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.812c-3.267 0-4.188 1.504-4.188 4.004v2.996z" />
            </svg>
            <span class="relative z-10">Continue with Facebook</span>
          </button>

          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-red-500 to-red-700 text-white shadow-xl hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-red" aria-label="Sign in with Google">
            <div class="absolute inset-0 bg-red-500 opacity-20 pointer-events-none group-hover:neon-red"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 4.5c2.47 0 4.48 1.48 5.42 3.63L20.1 5.4C18.47 2.15 15.42 0 12 0 7.8 0 4.2 2.7 2.4 6.3l3.22 2.53C6.4 6.9 8.9 4.5 12 4.5zM24 12c0-.75-.07-1.49-.2-2.2L12 12V24h6c3.3 0 6-2.7 6-6 0-1.8-.8-3.4-2-4.5zM0 12c0 .75.07 1.49.2 2.2L12 12V0H6C2.7 0 0 2.7 0 6c0 1.8.8 3.4 2 4.5z" />
            </svg>
            <span class="relative z-10">Continue with Google</span>
          </button>
        </div>
        <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
          By signing in, you agree to our <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Terms of Service</a> and <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neon Glow for Buttons */
  .group-hover\:neon-blue {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 0 10px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .group-hover\:neon-red {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  /* Optional: Light glow for the card itself on hover */
  .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), 0 0 30px rgba(163, 239, 59, 0.3) !important; /* Adding a subtle lime glow */
  }

  .dark .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 239, 59, 0.3) !important;
  }
</style>