Auth_Component_Dating_Neon_Artistic

<div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-black dark:to-gray-950 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-purple-300 dark:border-purple-800">
    <!-- Artistic Background Elements (simulated with gradients/overlays) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 blur-xl opacity-70 animate-blob dark:from-pink-800 dark:to-purple-900"></div>
      <div class="absolute bottom-10 right-10 w-40 h-40 rounded-full bg-gradient-to-br from-blue-400 to-green-400 blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-blue-800 dark:to-green-900"></div>
      <div class="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-gradient-to-br from-yellow-300 to-red-400 blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-yellow-700 dark:to-red-800"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 text-center">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 dark:from-pink-400 dark:via-purple-400 dark:to-blue-400 mb-4 tracking-tight leading-tight" style="text-shadow: 0 0 10px rgba(255, 0, 150, 0.4), 0 0 20px rgba(150, 0, 255, 0.4);">Spark Your Connection</h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto">Find your perfect match in a vibrant community.</p>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-purple-50 dark:bg-purple-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 focus:border-pink-500 dark:focus:ring-pink-600 dark:focus:border-pink-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-blue-50 dark:bg-blue-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Password">
        </div>

        <button type="submit"
          class="w-full flex items-center justify-center px-6 py-3 border-2 border-transparent text-lg font-semibold rounded-full shadow-lg 
                 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 
                 text-white dark:from-pink-600 dark:to-purple-700 dark:hover:from-pink-700 dark:hover:to-purple-800 
                 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400
                 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105
                 relative overflow-hidden group">
          <span class="absolute inset-0 border-animation"></span>
          <span class="block">Login</span>
          <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition duration-300 ease-in-out">Forgot your password?</a>
        </div>
      </form>

      <div class="relative flex justify-center text-sm uppercase mt-8">
        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>

      <div class="mt-6 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-blue-400 dark:border-blue-600 text-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.493v-9.294H8.772V10.37h4.045V7.411c0-4.013 2.392-6.22 6.044-6.22 1.748 0 3.267.13 3.69-.067v3.573H18.77c-1.879 0-2.253.945-2.253 2.213v2.877h4.811l-.837 3.718h-3.974V24h6.126c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"></path></svg>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-red-400 dark:border-red-600 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.0003 4.2694C14.7302 4.2694 16.4883 5.4385 17.5029 6.3813L20.0094 3.8748C17.973 1.8385 15.2215 0 12.0003 0C7.27582 0 3.25056 2.6841 1.25078 6.5593L5.00088 9.0717C5.97544 6.7885 8.76678 4.2694 12.0003 4.2694ZM23.0005 10.5H12V14.5H19.0004C18.8996 15.1765 18.5721 15.8239 18.0694 16.3475L21.8219 18.859C20.618 20.1983 18.9912 21.3674 17.0004 22.0305V18.1772L15.0004 18.1772L15.0004 22.0305C13.8821 22.2599 12.7417 22.3789 11.5997 22.3789C7.27582 22.3789 3.25056 19.6948 1.25078 15.8196L5.00088 13.3073C5.97544 15.5905 8.76678 18.1096 12.0003 18.1096C13.8471 18.1096 15.5985 17.3822 16.7995 16.1812L19.5995 18.9818L21.0005 17.5818L23.0005 15.5818M12.0003 16.1096C11.3323 16.1096 10.6727 16.0592 10.0003 15.9329C9.32791 15.8066 8.66838 15.7061 8.00032 15.6305C7.33226 15.5549 6.67273 15.5045 6.00032 15.5045H12.0003C12.0003 15.5045 12.0003 15.5045 12.0003 15.5045V16.1096Z"></path></svg>
        </button>
      </div>

      <p class="mt-8 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? <a href="#" class="font-medium text-green-600 dark:text-green-400 hover:text-green-500 dark:hover:text-green-300 transition duration-300 ease-in-out">Sign up now!</a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Keyframes for the 'blob' animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom border animation for the button */
  .border-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9999px; /* Full rounded */
    border: 2px solid transparent;
    background: linear-gradient(45deg, #FF00FF, #00BFFF, #FF00FF) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glow-border 2s infinite alternate;
  }

  .dark .border-animation {
    background: linear-gradient(45deg, #F06EB0, #40E0D0, #F06EB0) border-box;
  }

  @keyframes glow-border {
    0% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
    50% {
      border-color: rgba(0, 191, 255, 0.8);
      transform: translate(1px, 1px);
    }
    100% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
  }
</style>