Industrial_Candy_Login_Signup_Component

<div class="min-h-screen bg-pink-100 flex items-center justify-center p-4 dark:bg-gray-900 duration-300">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden max-w-4xl w-full flex flex-col md:flex-row border-4 border-gray-300 dark:border-gray-700 relative">
    <!-- Decorative Industrial Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px);">
    </div>

    <!-- Image Section -->
    <div class="md:w-1/2 p-6 flex flex-col items-center justify-center bg-pink-200 dark:bg-gray-700 relative overflow-hidden">
      <img src="https://picsum.photos/600/400?random=1" alt="Industrial Candy Aesthetic" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-pink-300 dark:border-gray-600 mb-4 transform hover:scale-105 transition-transform duration-300">
      <h2 class="text-2xl font-extrabold text-pink-700 dark:text-pink-300 mb-2 font-mono">Access Your Content</h2>
      <p class="text-pink-600 dark:text-pink-400 text-center text-sm px-4">Discover a new world of articles and stories. Join our community!</p>
      <div class="absolute bottom-2 left-2 text-pink-500 dark:text-pink-400 text-xs opacity-70">V1.0</div>
    </div>

    <!-- Forms Section -->
    <div class="md:w-1/2 p-8 flex flex-col justify-center dark:bg-gray-800">
      <div class="flex mb-6 space-x-4">
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-pink-700 dark:text-pink-200 bg-pink-300 dark:bg-pink-600 hover:bg-pink-400 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Login
        </button>
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Signup
        </button>
      </div>

      <!-- Login Form (Visible by default, can be toggled via JS if implemented) -->
      <form class="space-y-6">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center font-mono">Welcome Back!</h3>
        <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" placeholder="[email protected]" autocomplete="email" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </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" placeholder="••••••••" autocomplete="current-password" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </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-mint-600 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 focus:ring-mint-500">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-mint-600 hover:text-mint-500 text-sm dark:text-mint-400 dark:hover:text-mint-300 transition duration-200">Forgot your password?</a>
        </div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-bold text-white bg-mint-500 dark:bg-mint-600 hover:bg-mint-600 dark:hover:bg-mint-700 focus:outline-none focus:ring-4 focus:ring-mint-500 dark:focus:ring-mint-400 transition-all duration-200 transform hover:scale-105">
          Sign in
        </button>
      </form>

      <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Or continue with
      </div>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 rounded-full bg-blue-500 hover:bg-blue-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-blue-400" aria-label="Login with Facebook">
          <svg class="h-6 w-6" 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.79c0-2.508 1.493-3.891 3.776-3.891 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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-red-400" aria-label="Login with Google">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.24 10.23L12 10l-6-1.5V10c0 .6.4 1 1 1h5.5l.5-.23zM21 12h-8v-2h8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            <path d="M12 4.41l-.7-.7-.7-.7h-1.2V3h3.5v2.41zM12 19.59l.7.7.7.7h1.2v-2.41zM20 12h-8v-2h8z"/>
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-gray-700 hover:bg-gray-800 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-gray-400" aria-label="Login with GitHub">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.68-.233.68-.522 0-.257-.01-1.055-.016-2.056-2.78-.62-3.37-1.39-3.37-1.39-.454-1.15-1.11-1.455-1.11-1.455-.908-.62.067-.607.067-.607 1.005.07 1.532 1.03 1.532 1.03.89 1.488 2.33 1.056 2.897.807.09-.624.34-1.056.62-1.3-2.22-.25-4.555-1.11-4.555-4.93 0-1.088.39-1.979 1.029-2.678-.103-.255-.446-1.272.098-2.646 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.374.203 2.391.098 2.646.64.699 1.029 1.59 1.029 2.678 0 3.832-2.339 4.68-4.566 4.92.359.307.678.915.678 1.849 0 1.334-.012 2.41-.012 2.727 0 .29.21.613.695.516C19.137 20.103 22 16.364 22 12.017 22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>