Merge pull request 'change the design of login page, otp page and request for demo page.' (#323) from Kartik_Task857 into Landing_pages

Reviewed-on: #323

src/layouts/AuthLayout.jsx

@@ -1,6 +1,7 @@
 import React from "react";
-import {Outlet} from "react-router-dom";
-import {QueryClient} from '@tanstack/react-query';
+import { Link, Outlet } from "react-router-dom";
+import { QueryClient } from '@tanstack/react-query';
+import { AuthWrapper } from "../pages/authentication/AuthWrapper";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -15,9 +16,25 @@ export const queryClient = new QueryClient({
 
 const AuthLayout = () => {
   return (
-    <div className="login-box">
+    // <div className="login-box">
+    <div class="authentication-wrapper authentication-cover">
+ 
+      <Link
+        aria-label="Go to Home Page"
+        to="/"
+        className="app-brand-link gap-2 position-fixed top-2 start-0 mx-6"
+      >
+        <span className="app-brand-logo rounded-circle " >
+          <img
+            src="/img/brand/marco.png"
+            alt="marco-logo"
+            className="app-brand-logo-login"
+          />
+        </span>
+      </Link>
       <Outlet />
     </div>
+    // </div>
   );
 };
 

src/pages/authentication/AuthWrapper.jsx

@@ -4,17 +4,17 @@ import "./page-auth.css";
 export const AuthWrapper = ({ children }) => {
   return (
     <div className="container-xxl">
-      <div className="authentication-wrapper authentication-basic container-p-y">
+      {/* <div className="authentication-wrapper authentication-basic container-p-y">
         <div className="authentication-inner">
-          <div className="card">
+          <div className="card"> */}
             <div className="card-body">
-              <div className="app-brand justify-content-center">
+              <div className="app-brand justify-content-center" >
                 <Link
                   aria-label="Go to Home Page"
                   to="/"
                   className="app-brand-link gap-2"
                 >
-                  <span className="app-brand-logo rounded-circle ">
+                  <span className="app-brand-logo rounded-circle " style={{ marginBottom: "625px",marginLeft:"-39px" }}>
                     <img
                       src="/img/brand/marco.png"
                       alt="marco-logo"
@@ -22,12 +22,12 @@ export const AuthWrapper = ({ children }) => {
                     />
                   </span>
                 </Link>
-              </div>
+              {/* </div> */}
               {children}
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      // </div>
+    // </div>
   );
 };

src/pages/authentication/ForgotPasswordPage.jsx

@@ -1,89 +1,88 @@
 import { useState } from "react";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import { AuthWrapper } from "./AuthWrapper"
 import "./page-auth.css";
 import AuthRepository from "../../repositories/AuthRepository";
 import showToast from "../../services/toastService";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {z} from "zod";
+import { z } from "zod";
 
 
-const forgotPassSceham = z.object( {
+const forgotPassSceham = z.object({
   email: z.string().email(),
-} )
+})
 
 const ForgotPasswordPage = () => {
 
-  const[loding,setLoading] = useState(false)
+  const [loding, setLoading] = useState(false)
 
-  const {register,
+  const { register,
     handleSubmit,
     formState: { errors },
     reset,
-    getValues } = useForm( {
-    resolver: zodResolver( forgotPassSceham ),
-    defaultValues: {
-      email:""
-    }
-  })
+    getValues } = useForm({
+      resolver: zodResolver(forgotPassSceham),
+      defaultValues: {
+        email: ""
+      }
+    })
 
-  const onSubmit = async (data) =>
-  {
-    try
-    {
+  const onSubmit = async (data) => {
+    try {
       setLoading(true)
-      const response = await  AuthRepository.forgotPassword(data)
-      if ( response.data && response.success )
-      showToast( "verification email has been sent to your registered email address", "success" )    
+      const response = await AuthRepository.forgotPassword(data)
+      if (response.data && response.success)
+        showToast("verification email has been sent to your registered email address", "success")
       reset()
-      setLoading( false )
-    } catch ( err )
-    {
+      setLoading(false)
+    } catch (err) {
       reset()
-        if(err.response.status === 404){
-          showToast( "verification email has been sent to your registered email address", "success" )  
-        }else{
-          showToast("Something wrong","error")
-        }
+      if (err.response.status === 404) {
+        showToast("verification email has been sent to your registered email address", "success")
+      } else {
+        showToast("Something wrong", "error")
+      }
 
       setLoading(false)
     }
   }
   return (
-    <AuthWrapper>
-      <h4 className="mb-2">Forgot Password? 🔒</h4>
-      <p className="mb-4">
-        Enter your email and we'll send you instructions to reset your password
-      </p>
-      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
-        <div className="mb-3">
-          <label htmlFor="email" className="form-label">
-            Email
-          </label>
-          <input
-            type="text"
-            className="form-control"
-            id="email"
-            name="email"
-            {...register("email")}
-            placeholder="Enter your email"
-            autoFocus
-          />
-           {errors.email && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.email.message}
-                      </div>
-                    )}
-        </div>
-        <button aria-label="Click me" className="btn btn-primary d-grid w-100">
-          {loding ? "Please Wait...":"Send Reset Link"}
-        </button>
-      </form>
-      <div className="text-center">
+      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+      <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
+        <h4 className="mb-2">Forgot Password? 🔒</h4>
+        <p className="mb-4">
+          Enter your email and we'll send you instructions to reset your password
+        </p>
+
+        <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
+          <div className="mb-3 text-start">
+            <label htmlFor="email" className="form-label">
+              Email
+            </label>
+            <input
+              type="text"
+              className="form-control"
+              id="email"
+              name="email"
+              {...register("email")}
+              placeholder="Enter your email"
+              autoFocus
+            />
+            {errors.email && (
+              <div
+                className="danger-text text-start"
+                style={{ fontSize: "12px" }}
+              >
+                {errors.email.message}
+              </div>
+            )}
+          </div>
+          <button aria-label="Click me" className="btn btn-primary d-grid w-100">
+            {loding ? "Please Wait..." : "Send Reset Link"}
+          </button>
+        </form>
+         <div className="text-center">
         <Link
           aria-label="Go to Login Page"
           to="/auth/login"
@@ -93,7 +92,11 @@ const ForgotPasswordPage = () => {
           Back to login
         </Link>
       </div>
-    </AuthWrapper>
+
+        {/* Footer Text */}
+
+      </div>
+    </div>
   );
 };
 

src/pages/authentication/LoginPage.jsx

@@ -1,20 +1,17 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { AuthWrapper } from "./AuthWrapper";
-import { useNavigate } from "react-router-dom";
-import "./page-auth.css";
+import { Link, useNavigate } from "react-router-dom";
 import AuthRepository from "../../repositories/AuthRepository";
 import showToast from "../../services/toastService";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
+import { AuthWrapper } from "./AuthWrapper";
 
 const LoginPage = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [hidepass, setHidepass] = useState(true);
   const [IsLoginWithOTP, setLoginWithOtp] = useState(false);
-  const [IsTriedOTPThrough, setIsTriedOTPThrough] = useState(false);
   const now = Date.now();
 
   const loginSchema = IsLoginWithOTP
@@ -31,15 +28,12 @@ const LoginPage = () => {
     register,
     handleSubmit,
     formState: { errors },
-    reset,
-    getValues,
   } = useForm({
     resolver: zodResolver(loginSchema),
   });
 
   const onSubmit = async (data) => {
     setLoading(true);
-
     try {
       if (!IsLoginWithOTP) {
         const userCredential = {
@@ -74,137 +68,135 @@ const LoginPage = () => {
       navigate("/auth/login-otp");
     }
   }, [IsLoginWithOTP]);
+
   return (
-    <AuthWrapper>
-      <h4 className="mb-2">Welcome to PMS!</h4>
-      <p className="mb-4">
-        {IsLoginWithOTP
-          ? "Enter your email to receive a one-time password (OTP)."
-          : "Please sign-in to your account and start the adventure."}
-      </p>
-      <form
-        id="formAuthentication"
-        className="mb-3"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <div className="mb-2">
-          <label htmlFor="username" className="form-label">
-            Email or Username
-          </label>
-          <input
-            type="text"
-            className="form-control"
-            id="username"
-            {...register("username")}
-            placeholder="Enter your email or username"
-            autoFocus
-          />
-          {errors.username && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
-              {errors.username.message}
-            </div>
-          )}
-        </div>
+    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+      <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
+        <h4 className="mb-2">Welcome to PMS!</h4>
+        <p className="mb-4">
+          {IsLoginWithOTP
+            ? "Enter your email to receive a one-time password (OTP)."
+            : "Please sign in to your account and start the adventure"}
+        </p>
 
-        {!IsLoginWithOTP && (
-          <>
-            <div className="mb-3 form-password-toggle">
-              <label className="form-label" htmlFor="password">
-                Password
-              </label>
-              <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
-                <input
-                  type={hidepass ? "password" : "text"}
-                  autoComplete="true"
-                  id="password"
-                  {...register("password")}
-                  className="form-control form-control-xl border-0 shadow-none"
-                  placeholder="••••••••••••"
-                />
-                <button
-                  type="button"
-                  className="btn btn-link p-0 ms-2 "
-                  onClick={() => setHidepass(!hidepass)}
-                  style={{
-                    borderTopLeftRadius: 0,
-                    borderBottomLeftRadius: 0,
-                    borderLeft: 0,
-                  }}
-                >
-                  {hidepass ? (
-                    <i className="bx bx-hide" />
-                  ) : (
-                    <i className="bx bx-show" />
-                  )}
-                </button>
+        <form id="formAuthentication" onSubmit={handleSubmit(onSubmit)}>
+          {/* Email */}
+          <div className="mb-3 text-start">
+            <label htmlFor="username" className="form-label">
+              Email
+            </label>
+            <input
+              type="text"
+              id="username"
+              className={`form-control ${errors.username ? "is-invalid" : ""}`}
+              placeholder="Enter your email"
+              {...register("username")}
+              autoFocus
+            />
+            {errors.username && (
+              <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+                {errors.username.message}
               </div>
-              {errors.password && (
-                <div
-                  className="danger-text text-start"
-                  style={{ fontSize: "12px" }}
-                >
-                  {errors.password.message}
-                </div>
-              )}
-            </div>
+            )}
+          </div>
 
-
-            <div className="mb-3 d-flex justify-content-between">
-              <div className="form-check d-flex">
-                <input
-                  className="form-check-input"
-                  type="checkbox"
-                  id="remember-me"
-                  {...register("rememberMe")}
-                />
-                <label className="form-check-label ms-2">Remember Me</label>
-              </div>
-              <Link to="/auth/forgot-password">Forgot Password?</Link>
-            </div>
-          </>
-        )}
-
-        <div className="mb-3">
-          <button
-            aria-label="Submit form"
-            className="btn btn-primary d-grid w-100 mb-2"
-            type="submit"
-          >
-            {loading ? "Please Wait" : IsLoginWithOTP ? "Send OTP" : "Sign In"}
-          </button>
-          {!IsLoginWithOTP && <div className="p-2">OR</div>}
+          {/* Password */}
           {!IsLoginWithOTP && (
-            <button
-              aria-label="loginwithotp"
-              type="button"
-              onClick={() => setLoginWithOtp(true)}
-              className="btn btn-secondary  w-100"
-            >
-              Login With OTP
-            </button>
-          )}
-        </div>
-      </form>
+            <>
+              <div className="mb-3 text-start">
+                <label htmlFor="password" className="form-label">
+                  Password
+                </label>
+                <div className="input-group input-group-merge">
+                  <input
+                    type={hidepass ? "password" : "text"}
+                    id="password"
+                    className={`form-control ${errors.password ? "is-invalid" : ""}`}
+                    placeholder="••••••••"
+                    {...register("password")}
+                  />
+                  <span
+                    className="input-group-text cursor-pointer"
+                    onClick={() => setHidepass(!hidepass)}
+                  >
+                    <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`}></i>
+                  </span>
+                </div>
+                {errors.password && (
+                  <div className="invalid-feedback text-start" style={{ fontSize: "12px" }}>
+                    {errors.password.message}
+                  </div>
+                )}
+              </div>
 
-      <p className="text-center">
-        <span>New on our platform? </span>
-        {IsLoginWithOTP ? (
-          <a
-            className="text-primary cursor-pointer"
-            onClick={() => setLoginWithOtp(false)}
+              {/* Remember Me + Forgot Password */}
+              <div className="mb-3 d-flex justify-content-between align-items-center">
+                <div className="form-check">
+                  <input
+                    type="checkbox"
+                    id="remember-me"
+                    className="form-check-input"
+                    {...register("rememberMe")}
+                  />
+                  <label className="form-check-label" htmlFor="remember-me">
+                    Remember Me
+                  </label>
+                </div>
+                <Link to="/auth/forgot-password" className="text-decoration-none">
+                  Forgot Password?
+                </Link>
+              </div>
+            </>
+          )}
+
+          {/* Submit */}
+          <button
+            type="submit"
+            className="btn btn-primary w-100"
+            disabled={loading}
           >
-            Login With Password
-          </a>
-        ) : (
-          <Link to="/auth/reqest/demo" className="registration-link">
-            Request a Demo
-          </Link>
-        )}
-      </p>
-    </AuthWrapper>
+            {loading
+              ? "Please Wait..."
+              : IsLoginWithOTP
+                ? "Send OTP"
+                : "Sign In"}
+          </button>
+
+          {/* Login With OTP Button */}
+          {!IsLoginWithOTP && (
+            <>
+              <div className="divider my-4">
+                <div className="divider-text">or</div>
+              </div>
+              <button
+                type="button"
+                className="btn btn-outline-secondary w-100"
+                onClick={() => setLoginWithOtp(true)}
+              >
+                Login With OTP
+              </button>
+            </>
+          )}
+        </form>
+
+        {/* Footer Text */}
+        <p className="text-center mt-3">
+          <span>New on our platform? </span>
+          {IsLoginWithOTP ? (
+            <button
+              className="btn btn-link p-0"
+              onClick={() => setLoginWithOtp(false)}
+            >
+              Login With Password
+            </button>
+          ) : (
+            <Link to="/auth/reqest/demo" className="btn btn-link p-0">
+              Request a Demo
+            </Link>
+          )}
+        </p>
+      </div>
+    </div>
   );
 };
 

src/pages/authentication/MainForgetPage.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+// import LoginPage from "./LoginPage";
+import ForgotPasswordPage from "./ForgotPasswordPage";
+
+const MainForgetPage = () => {
+    return (
+        <>
+
+            <div class="authentication-inner row m-0">
+                <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-3">
+                    <div class="w-100 d-flex justify-content-center">
+                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
+                    </div>
+                </div>
+                <ForgotPasswordPage />
+            </div>
+        </>
+    )
+}
+export default MainForgetPage;

src/pages/authentication/MainLogin.jsx

@@ -0,0 +1,19 @@
+
+import React from "react"
+import LoginPage from "./LoginPage";
+
+const MainLogin =()=>{
+    return(
+        <>
+      <div class="authentication-inner row m-0">
+        <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
+          <div class="w-100 d-flex justify-content-center">
+          <img src="https://demos.themeselection.com/sneat-aspnet-core-admin-template/assets/img/illustrations/boy-with-rocket-light.png" class="img-fluid" alt="Login image" width="700" data-app-dark-img="illustrations/boy-with-rocket-dark.png" data-app-light-img="illustrations/boy-with-rocket-light.png" />
+        </div>
+        </div>
+        <LoginPage/>
+      </div>
+        </>
+    )
+}
+export default MainLogin;

src/pages/authentication/MainRegisterPage.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import RegisterPage from "./RegisterPage";
+
+const MainRegisterPage = () => {
+    return (
+        <>
+
+            <div class="authentication-inner row m-0">
+                <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-0">
+                    <div class="w-100 d-flex justify-content-center">
+                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="img-fluid scaleX-n1-rtl" alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
+                    </div>
+                </div>
+                <RegisterPage />
+            </div>
+        </>
+    )
+}
+export default MainRegisterPage;

src/pages/authentication/RegisterPage.jsx

@@ -58,7 +58,7 @@ const RegisterPage = () => {
     fetchIndustries();
   }, []);
 
-  useEffect(() => {}, [industries]);
+  useEffect(() => { }, [industries]);
 
   const fetchIndustries = async () => {
     try {
@@ -71,17 +71,19 @@ const RegisterPage = () => {
   };
   return (
     <>
-      {!registered && (
-        <AuthWrapper>
+
+      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-white">
+        <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
+
           <h4 className="mb-2">Adventure starts here 🚀</h4>
           <p className="mb-3">Make your app management easy and fun!</p>
 
           <form
             id="formAuthentication"
-            className="mb-3"
+            className="mb-2"
             onSubmit={handleSubmit(onSubmit)}
           >
-            <div className="mb-3">
+            <div className="mb-2 text-start">
               <label htmlFor="organizatioinName" className="form-label">
                 Organization Name
               </label>
@@ -103,7 +105,7 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3">
+            <div className="mb-2 text-start">
               <label htmlFor="email" className="form-label">
                 Email
               </label>
@@ -124,11 +126,11 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3 form-password-toggle">
+            <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactperson">
                 Contact Person
               </label>
-              <div className="input-group input-group-merge">
+              <div className="input-group">
                 <input
                   type="text"
                   id="contactperson"
@@ -148,11 +150,11 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3 form-password-toggle">
+            <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactnumber">
                 Contact Number
               </label>
-              <div className="input-group input-group-merge">
+              <div className="input-group">
                 <input
                   type="text"
                   id="contactnumber"
@@ -172,11 +174,11 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3 form-password-toggle">
+            <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="contactnumber">
                 About Organization
               </label>
-              <div className="input-group input-group-merge">
+              <div className="input-group">
                 <textarea
                   id="about"
                   className="form-control"
@@ -195,11 +197,11 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3 form-password-toggle">
+            <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="oragnizationSize">
                 Organization Size
               </label>
-              <div className="input-group input-group-merge">
+              <div className="input-group">
                 <select
                   className="form-select"
                   id="oragnizationSize"
@@ -224,11 +226,11 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3 form-password-toggle">
+            <div className="mb-2 form-password-toggle text-start">
               <label className="form-label" htmlFor="industryId">
                 Industry
               </label>
-              <div className="input-group input-group-merge">
+              <div className="input-group">
                 <select
                   className="form-select"
                   id="industryId"
@@ -257,7 +259,7 @@ const RegisterPage = () => {
                 </div>
               )}
             </div>
-            <div className="mb-3">
+            <div className="mb-2 text-start">
               <div className="form-check">
                 <input
                   className="form-check-input"
@@ -267,18 +269,16 @@ const RegisterPage = () => {
                   {...register("terms")}
                 />
                 <label className="form-check-label" htmlFor="terms-conditions">
-                  I agree to
+                  I agree to{" "}
                   <Link
-                    aria-label="Go to Login Page"
                     to="/legal-info"
-                    className="d-flex align-items-center justify-content-center"
+                    aria-label="privacy policy and terms"
+                    className="text-decoration-underline"
                   >
-                    <a aria-label="pricacy policy and terms" href="#">
-                      {" "}
-                      privacy policy & terms
-                    </a>
+                    privacy policy & terms
                   </Link>
                 </label>
+
               </div>
               {errors.terms && (
                 <div
@@ -290,7 +290,7 @@ const RegisterPage = () => {
               )}
             </div>
             <button
-              aria-label="Click me"
+              aria-label="Click me "
               className="btn btn-primary d-grid w-100"
             >
               Request Demo
@@ -298,32 +298,18 @@ const RegisterPage = () => {
           </form>
 
           <p className="text-center">
-            <span>Already have an account?</span>
+            <span>Already have an account? </span>
             <Link
               aria-label="Go to Login Page"
               to="/auth/login"
-              className="d-flex align-items-center justify-content-center"
+              className="text-decoration-underline ms-1"
             >
-              <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
+              <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
               Back to login
             </Link>
           </p>
-        </AuthWrapper>
-      )}
-      {registered && (
-        <AuthWrapper>
-          <h6 className="mb-2">Thank you for contacting us</h6>
-          <h4 className="mb-3">We will get back to you soon</h4>
-          <Link
-            aria-label="Go to Login Page"
-            to="/auth/login"
-            className="d-flex align-items-center justify-content-center"
-          >
-            <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
-            Back to login
-          </Link>
-        </AuthWrapper>
-      )}
+        </div>
+      </div>
     </>
   );
 };

src/router/AppRoutes.jsx

@@ -1,4 +1,3 @@
-// AppRoutes.jsx
 import React from "react";
 import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
 
@@ -38,16 +37,19 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 import ProtectedRoute from "./ProtectedRoute";
 import Directory from "../pages/Directory/Directory";
 import LoginWithOtp from "../pages/authentication/LoginWithOtp";
+import MainLogin from "../pages/authentication/MainLogin";
+import MainForgetPage from "../pages/authentication/MainForgetPage";
+import MainRegisterPage from "../pages/authentication/MainRegisterPage";
 
 const router = createBrowserRouter(
   [
     {
       element: <AuthLayout />,
       children: [
-        {path: "/auth/login", element: <LoginPage />},
+        {path: "/auth/login", element: <MainLogin />},
         {path: "/auth/login-otp", element: <LoginWithOtp />},
-        { path: "/auth/reqest/demo", element: <RegisterPage /> },
-        { path: "/auth/forgot-password", element: <ForgotPasswordPage /> },
+        { path: "/auth/reqest/demo", element: <MainRegisterPage /> },
+        { path: "/auth/forgot-password", element: <MainForgetPage /> },
         { path: "/reset-password", element: <ResetPasswordPage /> },
         { path: "/legal-info", element: <LegalInfoCard /> },        
         { path: "/auth/changepassword", element: <ChangePasswordPage /> },