Update from task bec1b901-1acb-42b8-afc2-a3159f926c69

.gitignore

@@ -0,0 +1,3 @@
+```
+*.backup
+```

FrontEnd/src/components/Login-SignUp/ActionPanel.jsx

@@ -1,18 +1,27 @@
 import style from "./Login.module.css";
 
-const ActionPanel = ({ signIn, slide,verifyOTP }) => {
-  const heading = verifyOTP?"Verify OTP":signIn ? "Hello friend!" : "Welcome back!";
-  const paragraph = verifyOTP?"Enter Your Email and Get Otp on mail id and enter otp for reset your password":signIn
-    ? "Enter your personal details and start your journey with us"
-    : "To keep connected with us please login with your personal info";
-  const button = signIn ? "Sign up!" : "Sign in!";
+const ActionPanel = ({ signIn, slide, verifyOTP }) => {
+  const heading = verifyOTP ? "Verify OTP" : signIn ? "Hello, Friend!" : "Welcome Back!";
+  const paragraph = verifyOTP 
+    ? "Enter the OTP sent to your email to verify your account." 
+    : signIn
+      ? "Start your journey with us today!"
+      : "Welcome back! Sign in to continue.";
+  const button = signIn ? "Sign Up" : "Sign In";
 
   return (
-
     <div className={`${style['Panel']} ${style['ActionPanel']}`} style={{ background: '#2da99b' }}>
-      <h2 className="text-[#ffffff]">{heading}</h2>
-      <p className="text-[#ffffff]">{paragraph}</p>
-      {!verifyOTP&&<button className="text-[#ffffff] border-[#ffff]" onClick={slide}>{button}</button>}   </div>
+      <h2 className="text-2xl font-bold text-white mb-4">{heading}</h2>
+      <p className="text-white mb-6 text-center px-4">{paragraph}</p>
+      {!verifyOTP && (
+        <button 
+          className="bg-white text-teal-700 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-md"
+          onClick={slide}
+        >
+          {button}
+        </button>
+      )}
+    </div>
   );
 };
 

FrontEnd/src/components/Login-SignUp/FormPanel.jsx

@@ -124,15 +124,15 @@ const FormPanel = ({ signIn, setSignIn, verifyOTP, setVerifyOTP }) => {
 
   return (
     <div className={`${style["Panel"]} ${style["FormPanel"]}`}>
-      <h2>{heading}</h2>
+      <h2 className="text-2xl font-bold text-gray-800 mb-6">{heading}</h2>
 
-      {errorMessage && <p className="text-red-500">{errorMessage}</p>}
+      {errorMessage && <p className="text-red-500 mb-4 text-sm">{errorMessage}</p>}
 
       {verifyOTP ? (
         <form
           style={{ backgroundColor: "transparent" }}
           onSubmit={handleOTPV}
-          className={stylee["form-card"]}
+          className={`${stylee["form-card"]} w-full max-w-md mx-auto`}
         >
           <p className={stylee["form-card-title"]}>
             Please check your email for the confirmation code.
@@ -146,41 +146,62 @@ const FormPanel = ({ signIn, setSignIn, verifyOTP, setVerifyOTP }) => {
               placeholder="______"
               style={{ width: "17rem", padding: "0" }}
               className={stylee["form-card-input"]}
+              required
             />
             <div className={stylee["form-card-input-bg"]}></div>
           </div>
-          <div className="w-full flex mt-[4vh] flex-row items-center justify-between ">
+          <div className="w-full flex mt-[4vh] flex-row items-center justify-between gap-4">
             <button
-              style={{ margin: "auto" }}
               onClick={handleResend}
-              className={`cursor-pointer p-0-!important transition-all bg-blue-500 m-auto text-white px-6 py-2 rounded-lg border-blue-600 border-b-[4px] hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px] active:border-b-[2px] active:brightness-90 active:translate-y-[2px] ${
+              className={`flex-1 cursor-pointer transition-all bg-gray-200 text-gray-800 px-4 py-2 rounded-lg border-gray-300 border-b-[3px] hover:bg-gray-300 hover:brightness-105 hover:-translate-y-[1px] hover:border-b-[5px] active:border-b-[1px] active:brightness-95 active:translate-y-[1px] ${
                 resendTimer > 0 ? "opacity-50 cursor-not-allowed" : ""
               }`}
               disabled={resendTimer > 0} // Disable button if timer is active
             >
-              {resendTimer > 0 ? `Resend in ${resendTimer}s` : "Resend"}
+              {resendTimer > 0 ? `Resend in ${resendTimer}s` : "Resend OTP"}
             </button>
             <button
               type="submit"
-              style={{ margin: "auto" }}
-              className="cursor-pointer transition-all bg-blue-500 text-white px-6 py-2 rounded-lg border-blue-600 border-b-[4px] hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[6px] active:border-b-[2px] active:brightness-90 active:translate-y-[2px]"
+              className="flex-1 cursor-pointer transition-all bg-green-500 text-white px-4 py-2 rounded-lg border-green-600 border-b-[3px] hover:bg-green-600 hover:brightness-110 hover:-translate-y-[1px] hover:border-b-[5px] active:border-b-[1px] active:brightness-90 active:translate-y-[1px]"
+              disabled={loading}
             >
-              Verify
+              {loading ? <LoaderIcon /> : "Verify"}
             </button>
           </div>
         </form>
       ) : (
         <>
-          <Form>
+          <Form className="w-full max-w-xs mx-auto">
             {inputs.map(({ type, placeholder, ref }) => (
-              <input type={type} key={placeholder} ref={ref} placeholder={placeholder} />
+              <div key={placeholder} className="mb-4">
+                <input 
+                  type={type} 
+                  key={placeholder} 
+                  ref={ref} 
+                  placeholder={placeholder} 
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                  required
+                />
+              </div>
             ))}
           </Form>
-          <Link to="/forgetPassword" className="cursor-pointer">
-            Forgot your password?
-          </Link>
-          <button onClick={handleOnClick} disabled={loading}>
-            {loading ? <LoaderIcon /> : signIn ? "Sign in" : "Sign up"}
+          {signIn && (
+            <Link to="/forgetPassword" className="text-blue-500 hover:underline text-sm mb-4">
+              Forgot your password?
+            </Link>
+          )}
+          <button 
+            onClick={handleOnClick} 
+            disabled={loading} 
+            className="w-full max-w-xs mx-auto bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-lg disabled:opacity-70 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <span className="flex items-center justify-center">
+                <LoaderIcon className="animate-spin mr-2" /> Loading...
+              </span>
+            ) : (
+              signIn ? "Sign in" : "Sign up"
+            )}
           </button>
         </>
       )}