From a051f964bb7e7df621b150ec9de459f164363d2f Mon Sep 17 00:00:00 2001
From: Abhishek Dhatrak <dhatraka77@gmail.com>
Date: Fri, 20 Mar 2026 21:37:21 +0530
Subject: [PATCH 1/2] Enhance LeftSection UI with gradient, hover effects, and
 animations

---
 frontend/src/Pages/Authentication.tsx | 41 ++++++++++++++++-----------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx
index dd66c7d1..c5d87b00 100644
--- a/frontend/src/Pages/Authentication.tsx
+++ b/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;

From 7c467f6b83331caa611347b23aa96a893f3d5b85 Mon Sep 17 00:00:00 2001
From: Abhishek Dhatrak <dhatraka77@gmail.com>
Date: Sat, 21 Mar 2026 23:02:57 +0530
Subject: [PATCH 2/2] fix: remove unrelated auth UI changes

---
 frontend/src/Pages/Home.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Pages/Home.tsx b/frontend/src/Pages/Home.tsx
index 7a9e1272..c5087922 100644
--- a/frontend/src/Pages/Home.tsx
+++ b/frontend/src/Pages/Home.tsx
@@ -1,4 +1,4 @@
-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";
@@ -6,10 +6,11 @@ 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 = () =>{