Fix UX bug: Add loading state to Play Online and Practice with Bot buttons

frontend/src/Pages/Authentication.tsx

@@ -6,31 +6,40 @@ import DebateCover from '../assets/DebateCover4.svg';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
 const LeftSection = () => (
-  <div className="hidden md:flex w-full h-full flex-col justify-between bg-muted p-10 text-black dark:text-white">
-    <div className="flex items-center text-lg font-medium">
-      <Link to="/" className="flex items-center">
-        <svg>
-          {/* SVG Content */}
-        </svg>
+  <div className="hidden md:flex w-full h-full flex-col justify-between 
+  bg-gradient-to-br from-purple-500/20 to-blue-500/20 
+  backdrop-blur-lg p-10 text-black dark:text-white">
+
+    {/* Logo */}
+    <div className="flex items-center text-xl font-bold 
+    hover:scale-105 transition-transform duration-300 cursor-pointer">
+      <Link to="/" className="flex items-center gap-2">
         Arguehub
       </Link>
     </div>
+
+    {/* Image */}
     <div className="flex justify-center items-center flex-1 p-10">
-      <img src={DebateCover} alt="Debate Cover" className="max-w-full max-h-full object-contain" />
-    </div>
-    <div>
-      <blockquote className="space-y-2">
-        <p className="text-lg text-black dark:text-white">
-          "We cannot solve our problems with the same thinking we used when we created them."
-        </p>
-        <footer className="text-sm text-black dark:text-white">Albert Einstein</footer>
-      </blockquote>
+      <img 
+        src={DebateCover} 
+        alt="Debate Cover" 
+        className="max-w-full max-h-full object-contain 
+        hover:scale-105 transition-transform duration-500"
+      />
     </div>
+
+    {/* Quote */}
+    <blockquote className="space-y-2 
+    hover:translate-y-[-5px] transition-all duration-300">
+      <p className="text-lg italic">
+        "We cannot solve our problems with the same thinking we used when we created them."
+      </p>
+      <footer className="text-sm opacity-70">— Albert Einstein</footer>
+    </blockquote>
   </div>
 );
 
 
-
 interface RightSectionProps {
   authMode: 'login' | 'signup' | 'otpVerification' | 'forgotPassword' | 'resetPassword';
   toggleAuthMode: () => void;

frontend/src/Pages/Home.tsx

@@ -1,15 +1,16 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "@/context/authContext";
 import DebateCover from "../assets/DebateCover4.svg";
 import { RiRobot2Fill } from "react-icons/ri";
 import { FaHandshakeSimpleSlash } from "react-icons/fa6";
 import AOSSIELogo from "@/assets/aossie.png";
-
 const Home: React.FC = () => {
   const navigate = useNavigate();
   const authContext = useContext(AuthContext);
+  const [loading, setLoading] = useState<null | "online" | "bot">(null);
+  const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
 
   const signupHandler = () => {
     navigate('/auth', { state: { isSignUp: true } });
@@ -19,20 +20,32 @@ const Home: React.FC = () => {
     navigate('/auth', { state: { isSignUp: false } });
   };
 
-  const handlePlayDebateClick = () => {
+  const handlePlayDebateClick = async () => {
+    setLoading("online");
+
+    await delay(800);
+
     if (authContext?.isAuthenticated) {
-      navigate('/game');  
+      navigate('/game');
     } else {
       navigate('/auth', { state: { isSignUp: false } });
     }
+
+    setLoading(null);
   };
 
-  const handlePlayBotClick = () => {
+  const handlePlayBotClick = async () => {
+    setLoading("bot");
+
+    await delay(800);
+
     if (authContext?.isAuthenticated) {
-      navigate('/bot-selection');  // Navigate to bot selection page
+      navigate('/bot-selection');
     } else {
-      navigate('/auth', { state: { isSignUp: false } });  // Navigate to login page if not authenticated
+      navigate('/auth', { state: { isSignUp: false } });
     }
+
+    setLoading(null);
   };
 
   const logoutHandler = () =>{