fixed text issue

src/Routers.jsx

@@ -24,6 +24,7 @@ import JobGroupsPage from "./views/JobGroupsPage";
 import LndPage from "./views/LndPage";
 import LoginPage from "./views/LoginPage";
 import LoginPageTwo from "./views/LoginPageTwo";
+import LoginLandingPage from './views/LoginLandingPage'
 import ManageActiveJobs from "./views/ManageActiveJobs";
 import ManageInterestOfferPage from "./views/ManageInterestOfferPage";
 import MarketPlacePage from "./views/MarketPlacePage";
@@ -78,7 +79,8 @@ export default function Routers() {
         {/* guest routes */}
         {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
           <>
-            <Route exact path="/login" element={<LoginPageTwo />} />
+            <Route exact path="/login" element={<LoginLandingPage />} />
+            <Route exact path="/login/:type" element={<LoginPageTwo />} />
             <Route exact path="/signup" element={<SignupPageTwo />} />
             <Route
               exact

src/components/AuthPages/Login/LoginLanding.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import KidIcon from '../../../assets/images/auth/children.png'
+import ParentIcon from '../../../assets/images/auth/adult.png'
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+
+import { useDispatch } from "react-redux";
+// import { updateUserDetails } from "../../../store/UserDetails";
+
+
+export default function LoginLanding() {
+  const queryParams = new URLSearchParams(location?.search);
+  // const sessionExpired = queryParams.get("sessionExpired");
+
+  const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
+          <div className="flex place-content-center">
+            <div className="w-10/12">
+                <div className="title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
+                  <h1 className="text-[#181c32] font-medium dark:text-white leading-6 text-2xl tracking-wide">
+                    <span className='font-semibold'>Log in</span> as a:
+                  </h1>
+
+                  <div className='w-full flex flex-col gap-4'>
+                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-2/3 mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Adult or Parent</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+
+                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-2/3 mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
+                      <div className='flex items-center gap-4'>
+                        <img className='w-12 h-auto' src={KidIcon} alt='login key' />
+                        <p className='text-lg font-semibold'>Kids or Teens</p>
+                      </div>
+                      {/* <span>&gt;</span> */}
+                      <i className="fa-solid fa-caret-right"></i>
+                    </button>
+                  </div>
+
+                  <div className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Don't have an account?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-emerald-800 hover:text-emerald-600 transition"
+                    >
+                      Sign Up
+                    </Link>
+                  </div>
+                </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index2.jsx

@@ -33,7 +33,7 @@ export default function Login() {
 
   const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
-  let [loginType, setLoginType] = useState("");
+  let [loginType, setLoginType] = useState('');
 
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -199,43 +199,43 @@ export default function Login() {
   // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   // }, []);
 
-  useLayoutEffect(() => {
+  useEffect(()=>{
-    // checks the cookie in order to set the login type before components mounts
+    if(state && state.loginType){
-    // if(document.cookie.includes("loginType=family")){
+      setLoginType(state.loginType)
-    //   setLoginType('family')
+    }else{
-    // }else if(document.cookie.includes("loginType=full")){
+      navigate('/login', {replace: true})
-    //   setLoginType('full')
-    // }else{
-    //   setLoginType('full')
-    // }
-    function readCookie(cname) {
-      // checks the cookie in order to set the login type before components mounts
-      let name = cname + "=";
-      let decoded_cookie = decodeURIComponent(document.cookie);
-      let carr = decoded_cookie.split(";");
-      for (let i = 0; i < carr.length; i++) {
-        let c = carr[i];
-        while (c.charAt(0) == " ") {
-          c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-          return c.substring(name.length, c.length);
-        }
-      }
-      return "full";
     }
-    let loginValue = readCookie("loginType");
+  },[])
-    setLoginType(loginValue);
 
-    if (state?.error) {
+  // useLayoutEffect(() => {
-      //check if the login path has an error state indicating any social handle login with error
+  //   function readCookie(cname) {
-      setMsgError("Unexpected Error, Please try again soon.");
+  //     // checks the cookie in order to set the login type before components mounts
-      setTimeout(() => {
+  //     let name = cname + "=";
-        setMsgError("");
+  //     let decoded_cookie = decodeURIComponent(document.cookie);
-        navigate("/login", { replace: true });
+  //     let carr = decoded_cookie.split(";");
-      }, 4000);
+  //     for (let i = 0; i < carr.length; i++) {
-    }
+  //       let c = carr[i];
-  }, []);
+  //       while (c.charAt(0) == " ") {
+  //         c = c.substring(1);
+  //       }
+  //       if (c.indexOf(name) == 0) {
+  //         return c.substring(name.length, c.length);
+  //       }
+  //     }
+  //     return "full";
+  //   }
+  //   let loginValue = readCookie("loginType");
+  //   setLoginType(loginValue);
+
+  //   if (state?.error) {
+  //     //check if the login path has an error state indicating any social handle login with error
+  //     setMsgError("Unexpected Error, Please try again soon.");
+  //     setTimeout(() => {
+  //       setMsgError("");
+  //       navigate("/login", { replace: true });
+  //     }, 4000);
+  //   }
+  // }, []);
 
   useEffect(() => {
     setMail("");
@@ -273,7 +273,7 @@ export default function Login() {
             <div className="w-10/12">
               {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
               {sessionExpired != "true" && (
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <div className="hidden title-area flex flex-col justify-center items-center relative text-center mb-7">
                   {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1> */}
@@ -299,7 +299,7 @@ export default function Login() {
               )}
 
               {/* switch login component */}
-              <div className="ml-7 flex justify-start items-center gap-3">
+              <div className="hidden --flex-- ml-7 justify-start items-center gap-3">
                 <button
                   name="full"
                   className={`login-type-btn px-4 py-1 rounded-t-2xl ${

src/views/LoginLandingPage.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import LoginLanding from "../components/AuthPages/Login/LoginLanding";
+
+function LoginLandingPage() {
+  return (
+    <>
+      <LoginLanding />
+    </>
+  );
+}
+
+export default LoginLandingPage;