Brutalist_Agri_Auth_Component

<div class="min-h-screen flex items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-950 font-mono transition-colors duration-300">
  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-0 relative border-4 border-red-900 dark:border-red-600 shadow-brutalist overflow-hidden">

    <!-- Image Side (Left on Desktop, Top on Mobile) -->
    <div class="relative min-h-[200px] md:min-h-[600px] flex items-end p-4 md:p-8 bg-red-800 dark:bg-red-950">
      <img src="https://picsum.photos/1200/900?grayscale&blur=2" alt="Agricultural landscape" class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-color-burn">
      <div class="relative z-10 w-full text-yellow-300 dark:text-orange-200">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight uppercase mb-2 drop-shadow-lg">
          Cultivate Your Future
        </h2>
        <p class="text-lg sm:text-xl font-medium mb-4 italic leading-snug">
          Join the harvest. Grow connections. Yield success.
        </p>
        <p class="text-sm sm:text-base font-light border-l-4 border-yellow-500 pl-3 md:pl-4 text-orange-100 dark:text-orange-300">
          "The farmer is the only man in our economy who buys retail, sells wholesale, and pays the freight both ways." <br>— John F. Kennedy
        </p>
      </div>
      <!-- Brutalist Overlay Element -->
      <div class="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-yellow-500 to-red-600 dark:from-yellow-700 dark:to-red-800 transform rotate-45 translate-x-8 -translate-y-8 md:w-24 md:h-24"></div>
    </div>

    <!-- Form Side (Right on Desktop, Bottom on Mobile) -->
    <div class="p-6 sm:p-8 md:p-10 bg-orange-200 dark:bg-orange-900 text-red-900 dark:text-yellow-100 relative">
      <h3 class="text-2xl sm:text-3xl font-extrabold uppercase mb-6 text-center border-b-4 border-red-700 dark:border-yellow-300 pb-2">
        Access Your Farm Hub
      </h3>

      <!-- Tabs for Login/Signup -->
      <div class="flex mb-6 space-x-2">
        <button class="flex-1 py-3 bg-red-700 dark:bg-red-800 text-yellow-100 dark:text-yellow-200 border-2 border-red-900 dark:border-yellow-400 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-red-900 dark:hover:bg-red-950 shadow-md active:bg-red-500 active:shadow-none">
          Login
        </button>
        <button class="flex-1 py-3 bg-orange-300 dark:bg-orange-700 text-red-900 dark:text-yellow-300 border-2 border-red-600 dark:border-yellow-500 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-orange-400 dark:hover:bg-orange-800 shadow-md active:bg-orange-200 active:shadow-none">
          Signup
        </button>
      </div>

      <form class="space-y-5">
        <div>
          <label for="email" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Email Address</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Email Address">
        </div>
        <div>
          <label for="password" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Password">
        </div>

        <div class="flex items-center justify-between text-sm sm:text-base">
          <label class="flex items-center text-red-800 dark:text-yellow-200">
            <input type="checkbox" class="h-5 w-5 bg-yellow-200 dark:bg-orange-800 text-red-700 dark:text-yellow-500 border-2 border-red-700 dark:border-yellow-400 focus:ring-red-500 dark:focus:ring-yellow-300 checked:bg-red-700 dark:checked:bg-yellow-500 transition-colors duration-200">
            <span class="ml-2 font-medium">Remember me</span>
          </label>
          <a href="#" class="text-red-700 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2 transition-colors duration-200 hover:text-red-900 dark:hover:text-yellow-100">Forgot Password?</a>
        </div>

        <button type="submit" class="w-full py-4 bg-red-900 dark:bg-yellow-500 text-yellow-100 dark:text-red-900 font-extrabold uppercase tracking-widest text-lg sm:text-xl border-4 border-red-700 dark:border-yellow-400 transition-all duration-200 hover:bg-red-700 dark:hover:bg-yellow-400 active:bg-orange-400 active:shadow-none shadow-brutalist-button focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-yellow-300">
          Login to Dashboard
          <span class="ml-2">&#x27A4;</span>
        </button>

        <div class="pt-4 text-center text-sm sm:text-base text-red-700 dark:text-yellow-200">
          Don't have an account? <a href="#" class="text-red-900 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2">Sign up now!</a>
        </div>
      </form>

      <!-- Brutalist Corner Accent -->
      <div class="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-red-600 to-yellow-500 dark:from-red-800 dark:to-yellow-700 transform -translate-x-6 translate-y-6 md:w-16 md:h-16"></div>
    </div>

  </div>
</div>

<!-- Custom Brutalist Shadow Style -->
<style>
  .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #B91C1C), 12px 12px 0px 0px var(--tw-border-color, #7D260D);
    /* Border-color from border-red-900 */
  }
  .dark .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #FACC15), 12px 12px 0px 0px var(--tw-border-color, #CA8A04);
    /* Border-color from dark:border-red-600 -> dark:border-yellow-600 (modified for stronger contrast) */
  }

  .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #B91C1C);
  }
  .dark .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #FACC15);
  }
</style>