Luxury_Premium_Sweet_Dashboard_Auth_Component

<div class="min-h-screen p-4 flex items-center justify-center bg-gradient-to-br from-pink-100 to-green-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden grid grid-cols-1 lg:grid-cols-2 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
    <!-- Left Panel: Brand & Imagery -->
    <div class="relative p-8 lg:p-12 hidden lg:flex flex-col justify-between items-center bg-pink-300 dark:bg-gray-950 text-white dark:text-gray-100 overflow-hidden rounded-l-3xl">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-400 to-green-400 opacity-60 dark:opacity-40 rounded-l-3xl"></div>
      <div class="relative z-10 text-center flex flex-col justify-between items-center h-full">
        <h1 class="text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 drop-shadow-lg font-serif">
          SweetMetrics
        </h1>
        <p class="text-lg lg:text-xl font-light leading-relaxed mb-8">
          Your Dashboard to a Sweeter Future. Unlock insights with elegance.
        </p>
        <img src="https://picsum.photos/400/300?random=1" alt="Dashboard illustration" class="w-full max-w-sm rounded-lg object-cover shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300 ease-in-out">
        <div class="mt-8 text-sm opacity-80">
          © 2023 All Rights Reserved.
        </div>
      </div>
    </div>

    <!-- Right Panel: Authentication Forms -->
    <div class="flex flex-col p-8 sm:p-10 lg:p-12 space-y-8 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
      <div class="text-center">
        <h2 class="text-3xl lg:text-4xl font-bold mb-2 font-serif">Welcome Back!</h2>
        <p class="text-md text-gray-500 dark:text-gray-400">Sign in to continue to your dashboard.</p>
      </div>

      <!-- Tabs for Login/Register -->
      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-white shadow-md transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600 mr-2">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 shadow-sm transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
          Register
        </button>
      </div>

      <!-- Login Form -->
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <div class="relative">
            <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <div class="relative">
            <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"></path></svg>
          </div>
        </div>

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

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-bold text-white bg-green-400 hover:bg-green-500 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500 transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          Sign In
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </form>

      <div class="relative flex flex-col justify-center text-center text-xs text-gray-500 dark:text-gray-400 uppercase">
        <span class="block w-full border-t border-gray-200 dark:border-gray-600 absolute top-1/2 left-0 right-0 z-0"></span>
        <span class="relative z-10 bg-white dark:bg-gray-800 px-4 inline-block mx-auto">Or continue with</span>
      </div>
      
      <!-- Social Logins -->
      <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0003 12.72L16.2903 16.03C15.2203 18.01 13.0603 19.33 10.5303 19.33C6.73031 19.33 3.50031 16.32 3.50031 12.00C3.50031 7.68 6.73031 4.67 10.5303 4.67C12.5903 4.67 14.1903 5.37 15.4203 6.46L18.4203 3.42C16.4803 1.5 13.7903 0.330002 10.5303 0.330002C4.78031 0.330002 0.0003125 5.11 0.0003125 10.86C0.0003125 16.61 4.78031 21.39 10.5303 21.39C16.0703 21.39 20.0003 17.51 20.0003 11.23C20.0003 10.45 19.9303 9.71 19.8103 9H10.5303V12.72Z"></path></svg>
          Google
        </button>
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0298 5.7291 21.1278 10.5 21.8906V14.125H7.5V12H10.5V10C10.5 7.97125 11.8364 6.2235 14.5 6.2235C15.3411 6.2235 16.1952 6.34734 17 6.47167V9H15C13.6738 9 13.5 9.68062 13.5 10.5V12H16.5L16 14.125H13.5V21.8906C18.2709 21.1278 22 17.0298 22 12Z"></path></svg>
          Facebook
        </button>
      </div>

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