Composant de connexion sociale

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-800 dark:to-purple-900 border border-indigo-300 dark:border-purple-700
              transform transition-all duration-300 hover:scale-105 hover:shadow-2xl
              relative overflow-hidden group">

    <!-- Background Blips for Skeuomorphism -->
    <div class="absolute top-[-20px] left-[-20px] w-20 h-20 bg-indigo-400 dark:bg-purple-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>
    <div class="absolute bottom-[-20px] right-[-20px] w-24 h-24 bg-purple-400 dark:bg-indigo-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>

    <h2 class="text-center text-3xl font-extrabold text-indigo-900 dark:text-white mb-6
               relative drop-shadow-md">
      <span class="relative z-10">Login</span>
      <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-10 blur-xl"></span>
    </h2>

    <p class="text-center text-gray-700 dark:text-gray-300 mb-8">
      Join us to access exclusive content and features.
    </p>

    <div class="space-y-4">
      <!-- Google Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-500 dark:focus:ring-purple-500
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-gray-200 dark:border-gray-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-gray-50 to-gray-200 dark:from-gray-700 dark:to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.15c-.24 1.34-.9 2.45-1.92 3.23v2.8h3.69c2.16-2 3.42-4.93 3.42-8.24z" fill="#4285F4"></path>
          <path d="M12 23c3.27 0 6.02-1.08 8.03-2.91l-3.69-2.8c-1 .67-2.3 1.07-4.34 1.07-3.33 0-6.1-2.22-7.12-5.21H.9v2.87C2.98 20.58 7.15 23 12 23z" fill="#34A853"></path>
          <path d="M4.88 14.16c-.1-.3-.16-.62-.16-.96s.06-.66.16-.96V9.33H.9C.33 10.44 0 11.68 0 12.97s.33 2.53.9 3.64l3.98-3.9z" fill="#FBBC05"></path>
          <path d="M12 5.03c1.77 0 3.3.61 4.54 1.79l3.24-3.24C18.02 1.84 15.27 0 12 0 7.15 0 2.98 2.42.9 6.01l3.98 3.09c1.02-2.99 3.79-5.21 7.12-5.21z" fill="#EA4335"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-blue-600 dark:bg-blue-800 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-blue-500 dark:focus:ring-blue-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-blue-700 dark:border-blue-900
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.909c0-.818.062-1.491 1.092-1.491h2.908v-5h-4c-4.473 0-5 3.159-5 5.258v2.742z"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Facebook</span>
      </button>

      <!-- Email login option -->
      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="flex-shrink mx-4 text-gray-600 dark:text-gray-400 font-medium">Or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
      </div>

      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-indigo-600 dark:bg-purple-600 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-700 dark:focus:ring-purple-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-indigo-700 dark:border-purple-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-700 to-purple-500 dark:from-purple-800 dark:to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="font-semibold z-10">Sign in with Email</span>
      </button>
    </div>

    <p class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
      Don't have an account? 
      <a href="#" class="font-bold text-indigo-700 dark:text-purple-400 hover:underline
                          transform transition-colors duration-200 hover:text-indigo-900 dark:hover:text-purple-300">
        Sign up
      </a>
    </p>
  </div>
</div>