Composant d’authentification de luxe

<div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-xl overflow-hidden max-w-4xl w-full flex flex-col lg:flex-row transform transition-all duration-300 hover:shadow-3xl dark:border dark:border-gray-700">
    <!-- Left Section: Image and Slogan -->
    <div class="relative lg:w-1/2 overflow-hidden flex items-center justify-center p-6 lg:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 border-b lg:border-r border-gray-100 dark:border-purple-800">
      <img src="https://picsum.photos/600/800?grayscale&blur=2" alt="Luxury Fashion" class="absolute inset-0 w-full h-full object-cover opacity-60 dark:opacity-40 transition-opacity duration-300">
      <div class="relative z-10 text-center text-gray-900 dark:text-white px-4 py-8 rounded-lg bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm dark:bg-black dark:bg-opacity-30">
        <h2 class="text-4xl lg:text-5xl font-bold mb-4 tracking-tight">Embrace Your Elegance</h2>
        <p class="text-lg lg:text-xl leading-relaxed italic">Discover exquisite collections crafted for timeless beauty and unparalleled style.</p>
        <div class="mt-8 flex justify-center space-x-4">
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879z" clip-rule="evenodd" /></svg>
          </a>
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-pink-700 dark:hover:text-pink-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.405.123 1.748.213.688.181 1.255.426 1.71.681a3.07 3.07 0 011.086 1.086c.255.455.5.962.681 1.71.09.344.156.699.213 1.748.047 1.013.048 1.371.048 3.797s-.001 2.784-.048 3.797c-.056 1.05-.123 1.405-.213 1.748a3.07 3.07 0 01-.681 1.71 3.07 3.07 0 01-1.086 1.086c-.455.255-.962.5-1.71.681-.344.09-.699.156-1.748.213-1.013.047-1.371.048-3.797.048s-2.784-.001-3.797-.048c-1.05-.056-1.405-.123-1.748-.213a3.07 3.07 0 01-1.71-.681 3.07 3.07 0 01-1.086-1.086c-.255-.455-.5-.962-.681-1.71-.09-.344-.156-.699-.213-1.748C3.003 16.315 3 15.958 3 13.5s.002-2.784.048-3.797c.056-1.05.123-1.405.213-1.748a3.07 3.07 0 01.681-1.71 3.07 3.07 0 011.086-1.086c.455-.255.962-.5 1.71-.681.344-.09.699-.156 1.748-.213C9.557 2.003 9.918 2 12.315 2zm0 2.137c-2.002 0-2.274.004-3.067.04l-.566.027c-.41.02-.638.07-.797.135a1.59 1.59 0 00-.86.86c-.065.159-.115.387-.135.797l-.027.566c-.036.793-.04 1.065-.04 3.067s.004 2.274.04 3.067l.027.566c.02.41.07.638.135.797a1.59 1.59 0 00.86.86c.159.065.387.115.797.135l.566.027c.793.036 1.065.04 3.067.04s2.274-.004 3.067-.04l.566-.027c.41-.02.638-.07.797-.135a1.59 1.59 0 00.86-.86c.065-.159.115-.387.135-.797l.027-.566c.036-.793.04-1.065.04-3.067s-.004-2.274-.04-3.067l-.027-.566c-.02-.41-.07-.638-.135-.797a1.59 1.59 0 00-.86-.86c-.159-.065-.387-.115-.797-.135l-.566-.027c-.793-.036-1.065-.04-3.067-.04zm0 3.393a4.469 4.469 0 100 8.938 4.469 4.469 0 000-8.938zM12.315 9.08a3.07 3.07 0 110 6.139 3.07 3.07 0 010-6.139zm5.355-3.003a1.076 1.076 0 100 2.152 1.076 1.076 0 000-2.152z" clip-rule="evenodd" /></svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Section: Login/Register Form -->
    <div class="lg:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center dark:text-gray-200">
      <div class="mb-6 text-center">
        <h3 class="text-3xl lg:text-4xl font-bold mb-2 text-gray-900 dark:text-white">Welcome Back!</h3>
        <p class="text-gray-600 dark:text-gray-400">Log in or create an account to continue your journey.</p>
      </div>

      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-purple-500 bg-purple-500 text-white dark:bg-purple-700 dark:border-purple-700 hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md mr-4 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-pink-500 text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900 transition-colors duration-300 shadow-md focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Register
        </button>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
              class="h-4 w-4 text-purple-600 dark:text-purple-400 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 dark:focus:ring-purple-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-pink-600 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-4">
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 2.002c-5.522 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879 0-5.522-4.477-10-10-10Z"/></svg>
          Sign in with Facebook
        </button>
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.54 12.083c0-.7-.06-1.39-.18-2.07H12v3.69h6.1C17.78 17.65 15.06 20 12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8c2.34 0 4.42.96 5.96 2.4l2.79-2.79C18.66 2.92 15.52 1 12 1 5.92 1 1 5.92 1 12s4.92 11 11 11c6.08 0 11-4.92 11-11v-.917z"/></svg>
          Sign in with Google
        </button>
      </div>
    </div>
  </div>
</div>