Merge branch 'master' of into implement-sign-up-page

little fixes to auth pages
adding verification
2023-04-26 23:58:27 +01:00 · 2023-04-26 23:55:17 +01:00 · 2023-04-26 13:09:57 +01:00
294 changed files with 17420 additions and 21697 deletions
@@ -9,65 +9,22 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"

 # REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
 # REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
-#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"

-REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"

-REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000

 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
-
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000

-#NUMBER OF ITEMS PER PAGE
-REACT_APP_ITEM_PER_PAGE=5
-
-# Empty Listings
-REACT_APP_ZERO_STATE=0
-
-#REACT_APP_GOOGLE_CLIENT_ID_RET=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com
-
-REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
-REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
-REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
-REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
-
-#Real Account
-REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
-
-#developenet Account
-REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
-REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
-
-#my Account
-REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
-
-
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
-REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
-
-REACT_APP_APPLE_CLIENT_ID='com.wrenchboard.users.client'
-REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
-
-
-# /* 'client_id' => */ 'com.wrenchboard.users.client',
-# /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
-# /* 'redirect_uri' => */ site_url('login/auth/apple')
-
-REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
-
-
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
@@ -9,36 +9,22 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"

 # REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
 # REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-# REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
-# REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"

-REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"

-REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000

 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000

-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
-
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000

-#NUMBER OF ITEMS PER PAGE
-REACT_APP_ITEM_PER_PAGE=5
-
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
-
-REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
-REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
-REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
-REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
-
-REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
@@ -0,0 +1,30 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
+REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+
+#REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+#REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+
+#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
+
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
@@ -1,51 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true 
-
-REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
-REACT_APP_TWITTER="https://twitter.com/fluxtra"
-
-REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
-#REACT_APP_APPSITE="http://localhost:7012"
-
-
-# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
-# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-#REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
-#REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
-
-REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
-
-#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
-
-REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
-REACT_APP_SESSION_EXPIRE_CHECKER=60000
-
-REACT_APP_LOGIN_ERROR_TIMEOUT=7000
-REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
-
-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
-
-# Had to change the error time to 3sec cause it took too long
-REACT_APP_RESET_START_ERROR_TIMEOUT=3000
-
-#NUMBER OF ITEMS PER PAGE
-REACT_APP_ITEM_PER_PAGE=5
-
-#apigate.orion.g1.wrenchboard.com:76.209.103.227
-#apigate.orion.g1.wrenchboard.com:76.209.103.227
-
-REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
-REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
-REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
-REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
-
-REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
-REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
-
-DISABLE_ESLINT_PLUGIN=true
-
-REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
@@ -1,15 +0,0 @@
-# Set the default behavior, in case people don't have core.autocrlf set.
-* text=auto
-
-# Explicitly declare text files you want to always be normalized and converted
-# to native line endings on checkout.
-*.jsx text
-*.js text
-*.css text
-
-# Declare files that will always have CRLF line endings on checkout.
-*.md text eol=crlf
-
-# Denote all files that are truly binary and should not be modified.
-*.sh binary
-
@@ -8,7 +8,6 @@
      "name": "WrenchBoard-Users",
      "version": "0.2.0",
      "dependencies": {
-        "@react-oauth/google": "^0.11.0",
        "@reduxjs/toolkit": "^1.8.2",
        "@tailwindcss/line-clamp": "^0.3.1",
        "@testing-library/jest-dom": "^5.11.4",
@@ -19,15 +18,15 @@
        "chartjs": "^0.3.24",
        "cors": "^2.8.5",
        "faker": "^6.6.6",
-        "flutterwave-react-v3": "^1.3.0",
        "formik": "^2.2.9",
-        "react": "^18.2.0",
+        "react": "^18.0.0",
        "react-chartjs-2": "^4.1.0",
        "react-countup": "^6.2.0",
-        "react-dom": "^18.2.0",
-        "react-redux": "^8.0.5",
+        "react-dom": "^18.0.0",
+        "react-lottie": "^1.2.3",
+        "react-redux": "^8.0.2",
        "react-router-dom": "^6.0.2",
-        "react-scripts": "5.0.1",
+        "react-scripts": "5.0.0",
        "react-slick": "^0.29.0",
        "react-toastify": "^9.0.1",
        "redux": "^4.2.0",
@@ -3510,15 +3509,6 @@
        }
      }
    },
-    "node_modules/@react-oauth/google": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.11.0.tgz",
-      "integrity": "sha512-yeypwdQCcFIAo43OqVOLBfUXuxmxt3xiybfP9h3smtBW4UeFXFVQDsq+d+GlbZFo0TpONPR2+KCk/KT1/pQnvQ==",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
    "node_modules/@reduxjs/toolkit": {
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
@@ -5486,6 +5476,20 @@
        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
      }
    },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6169,6 +6173,13 @@
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
    },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
    "node_modules/core-js-compat": {
      "version": "3.27.1",
      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.1.tgz",
@@ -8296,26 +8307,6 @@
      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
    },
-    "node_modules/flutterwave-react-v3": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/flutterwave-react-v3/-/flutterwave-react-v3-1.3.0.tgz",
-      "integrity": "sha512-y0dGSgxh9H/KMSDFurnoPYO3D6DSeOCZHPdLt8DnbtCkjgYgzNdqeXKvxerEaOJyitzXITsmlbzYdrEO/Lju3g==",
-      "dependencies": {
-        "axios": "^0.21.1"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0 || ^18.0.0",
-        "react-dom": "^15.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/flutterwave-react-v3/node_modules/axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-      "dependencies": {
-        "follow-redirects": "^1.14.0"
-      }
-    },
    "node_modules/follow-redirects": {
      "version": "1.15.2",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -12515,6 +12506,11 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lottie-web": {
+      "version": "5.10.1",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.1.tgz",
+      "integrity": "sha512-u17bVNf/vA3oK9Wkyb1Vpo83WUIEQwaT0GeEN0qcvaExizyJ/RjmcbjSDj0CnwQCtpGqTgYhqprCC7cTWuXMNw=="
+    },
    "node_modules/lower-case": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -15049,6 +15045,21 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/react-lottie": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
+      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "lottie-web": "^5.1.3"
+      },
+      "engines": {
+        "npm": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
+      }
+    },
    "node_modules/react-redux": {
      "version": "8.0.5",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -15131,9 +15142,9 @@
      }
    },
    "node_modules/react-scripts": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
-      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
+      "integrity": "sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
      "dependencies": {
        "@babel/core": "^7.16.0",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -15151,7 +15162,7 @@
        "dotenv": "^10.0.0",
        "dotenv-expand": "^5.1.0",
        "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.1",
+        "eslint-config-react-app": "^7.0.0",
        "eslint-webpack-plugin": "^3.1.1",
        "file-loader": "^6.2.0",
        "fs-extra": "^10.0.0",
@@ -15168,7 +15179,7 @@
        "postcss-preset-env": "^7.0.1",
        "prompts": "^2.4.2",
        "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.1",
+        "react-dev-utils": "^12.0.0",
        "react-refresh": "^0.11.0",
        "resolve": "^1.20.0",
        "resolve-url-loader": "^4.0.0",
@@ -3,7 +3,6 @@
  "version": "0.2.0",
  "private": true,
  "dependencies": {
-    "@react-oauth/google": "^0.11.0",
    "@reduxjs/toolkit": "^1.8.2",
    "@tailwindcss/line-clamp": "^0.3.1",
    "@testing-library/jest-dom": "^5.11.4",
@@ -14,19 +13,16 @@
    "chartjs": "^0.3.24",
    "cors": "^2.8.5",
    "faker": "^6.6.6",
-    "flutterwave-react-v3": "^1.3.0",
    "formik": "^2.2.9",
-    "react": "^18.2.0",
-    "react-apple-login": "^1.1.6",
+    "react": "^18.0.0",
    "react-chartjs-2": "^4.1.0",
    "react-countup": "^6.2.0",
-    "react-dom": "^18.2.0",
-    "react-qr-code": "^2.0.11",
-    "react-redux": "^8.0.5",
+    "react-dom": "^18.0.0",
+    "react-lottie": "^1.2.3",
+    "react-redux": "^8.0.2",
    "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "5.0.0",
    "react-slick": "^0.29.0",
-    "react-to-print": "^2.14.12",
    "react-toastify": "^9.0.1",
    "redux": "^4.2.0",
    "slick-carousel": "^1.8.1",
@@ -6,15 +6,12 @@ export NODE_ENV="${NODE_ENV:-development}"

 if [ $NODE_ENV == "development" ]; then
  # this runs webpack-dev-server with hot reloading
-  echo "Development build"
  npm install --legacy-peer-deps
  npm start
 else
  # build the app and serve it via nginx
-  echo "Production build"
  npm install --legacy-peer-deps
  npm run build
  nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
  nginx -c /usr/src/app/nginx.conf
-fi
-
+fi
@@ -22,7 +22,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
-import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import VerifyLinkPages from "./views/VerifyLinkPages";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -30,25 +30,6 @@ import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
-import VerifyLinkPages from "./views/VerifyLinkPages";
-import MyActiveJobsPage from "./views/MyActiveJobsPage";
-import FamilyAccPage from "./views/FamilyAccPage";
-import StartJob from "./components/MyJobs/StartJob";
-import AddJobPage from "./views/AddJobPage";
-import MyPendingJobsPage from "./views/MyPendingJobsPage";
-import ManageActiveJobs from "./views/ManageActiveJobs";
-import FamilyManagePage from "./views/FamilyManagePage";
-import MyCouponPage from "./views/MyCouponPage";
-import AuthRedirect from "./views/AuthRedirect";
-import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
-import BlogPage from "./views/BlogPage";
-import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
-import OffersInterestPage from "./views/OffersInterestPage";
-import ManageInterestOfferPage from './views/ManageInterestOfferPage'
-import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
-import FamilyMarketPage from "./views/FamilyMarketPage";
-import FacebookRedirect from "./views/FacebookRedirect";
-import AppleRedirectPage from "./views/AppleRedirectPage";

 export default function Routers() {
  return (
@@ -57,9 +38,6 @@ export default function Routers() {
        {/* guest routes */}
        <Route exact path="/login" element={<LoginPage />} />
        <Route exact path="/signup" element={<SignupPage />} />
-        <Route exact path="/login/auth" element={<AuthRedirect />} />
-        <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
-        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
        <Route
          exact
          path="/forgot-password"
@@ -70,9 +48,9 @@ export default function Routers() {
          path="/update-password"
          element={<UpdatePasswordPages />}
        />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route path="/complereset" element={<VerifyPasswordPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
+        <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route exact path="/verify-link" element={<VerifyLinkPages />} />
+        <Route path={`/vemail?`} element={<VerifyLinkPages />} />

        {/* private route */}
        <Route element={<AuthRoute />}>
@@ -88,29 +66,12 @@ export default function Routers() {
          <Route exact path="/calendar" element={<CalendarPage />} />
          <Route exact path="/resources" element={<ResourcePage />} />
          <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
-          <Route exact path="/my-coupon" element={<MyCouponPage />} />
          <Route exact path="/notification" element={<Notification />} />
          <Route exact path="/market-place" element={<MarketPlacePage />} />
          <Route exact path="/market" element={<MarketPlacePage />} />
-          <Route exact path="/familymarket" element={<FamilyMarketPage />} />
          <Route exact path="/notification" element={<Notification />} />
          <Route exact path="/mytask" element={<MyTaskPage />} />
          <Route exact path="/myjobs" element={<MyJobsPage />} />
-          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
-          <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
-          <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
-          <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
-          <Route exact path="/pend-interest"  element={<MyWaitingJobsPage />} />
-          <Route exact path="/my-review-jobs"  element={<MyReviewDueJobsPage />} />
-          <Route exact path="/acc-family"  element={<FamilyAccPage />} />
-          <Route exact path="/manage-family"  element={<FamilyManagePage />} />
-          <Route exact path="/start-job"  element={<StartJob />} />
-          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
-          <Route exact path="/blog-page"  element={<BlogPage />} />
-          <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
-          <Route exact path="/manage-offer"  element={<ManageInterestOfferPage />} />
-
-
          <Route
            exact
            path="/my-collection/collection-item"
@@ -1,9 +0,0 @@
-<svg width="905" height="575" viewBox="0 0 905 575" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="905" height="575" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_201_3" transform="matrix(0.00849979 0 0 0.0131639 -0.0662984 -0.354783)"/>
-</pattern>
-<image id="image0_201_3" width="130" height="130" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACCCAMAAAC93eDPAAAApVBMVEX///82OzgAAAAuMi81OjdVXVfqpQCzs7NCSUSwsbAaIBslKyjk5OQuNDAhJiLZ2tpJT0opNTkvNzloVy31rAC1hRtPV1HNzc34+PgaLztBQUHLkg9UVFTw8PDGxsaioqKampp/f39sbGyIiIgaGho9Qj5MTExeXl5fUi+9vb03Nzd2dnYjIyORkZFjZWMNFQ9CQTWYcyLAjBSsfx12XytSSjEQEBBeBsYmAAAEiklEQVR4nO3a7XaqOBQG4BjoQXRraKc1GUoSPgQaETszZ473f2kTqm0VsKLLYs80b3+UhQgPOwlBESETExMTExMTExMTExMTk/9HQDk9xHUdcgiwmk7HPWQ0Gj0HrQiaWvagh9iWztSiTQH3rD4AW4I19nmDUI77EWwJ1ihpENJeWuGdYE0afXHSN2EMdUI/fXGHMK0Piv6rcJhg39VyadpRwt3g6Y+9PNl3/RLsvx7va3kcXLYOxwh/Ptz/qOX+79t+CY91wY8fD4ZgCIbwvQn/NAT3P/sl3P3bENz/uuwkcXSaun162M/PX5ctQofJ+u62lgtPlL/HLYshGIIhfDGC3chZ65ur7c6EYSN2+/r0wPYvn4/ttH19B4Lt3TRSGexZc316YP3LgZrrZ9sqTK5PsK7fEMcJn90d7eOEz84XIEyuT7CuTrCvT5hcn2BdnWBfnbAj+CaEtyvizrXROpfQOu0fAwyGnucN9X89XeiltPrebnIuwU5nO+n2dbmdbqfH1B6+Le02w4mEvYnX60J4PW61/fukb51PGO4SulWheRehMecTTu8LbTc+NzMvPZ9wctrupW505+yR0NYOelR41yVUgq5VaLnjOvmy0GyIStC5L6RH0okwbBN4g06ExpubFe00JPbKMNsIOl4XWofT6YTB4HU/3mDWLjjpc8RevE4APSF4VSFmQ31VTl8AqdWZcInuuEFUHWczLdgDuw7o637BnjSP/AHh8o9KPwR8fhXslsrXCfUHxpd8bH7k9LdpPDZHyajL+y6XUdQggD/uUzAeNNoBIWpN+xNMJy0/JNF1mD2Pespz0FKDDcJxe4k6BDAxMTExMTH5kunjZ8cfB+Gr53sTluE7YQ0gBSGrBEgEROIcCA0oVnEEkFfbCp44ZUYDAhLjiGAKCiugmASlXAGMa/teEBCLHCCSYZmEofBlqUIcACQ44r4PoJbVZnOk3ghzFPlMujyEbIViH8es4C6LSAKuAP16gaqlAlwomY9DVrCElSjhCVfSAYe6NYLPSq6oCFmohFIhl64kLqYkZEuFogzlqMSZEPo2nr4TijVLQk1YBihYa0IGigMNeZRF+vUcFTiGkiqxTpa45BIWUjIfQs4dh8KiXmGfBZQSqc9EACExsBcCuDHyKXd8hLmu9GY8wvKVADHnKJZIBIis8AoByTnoc4k2Z6hPeYlUKIRUfkXgcxxpQskBqTlhywYh3xB8DkRvByysCE6McghptiGwjYG+EgLMSigkwQHS5xTzAGdQIk2QVUP4q5BlnOVC5PqVqgq+cF+qkCCV64odICCMqEBLvadwW4UYCcj3quC/E1BElS5wjlaLqiFwwHUPAf2ho1jhGCUso2jh8IgFVV9ACSpRxBO2Ig4oShuEgju6ZJrgKraEgEmilrovaHKk/wKUbPsCmb+OCJphEReioDTRG+JAl9tXa7mKiZLSxWtJEpyo+ZwKx8eFwEoPG71XLLKo9Cmtd4aFomrp616gB1Xhrp0sSiQlmSBx4uLqKHK+GRHibUR8mCQ4tsW5mUrcjfD5+QKE/wC0yMO17JCUyAAAAABJRU5ErkJggg=="/>
-</defs>
-</svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>
@@ -1,2 +0,0 @@
-<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M14,16H2a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14A2,2,0,0,1,14,16ZM4,12h8V4H4Z"/><path d="M14,34H2a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H14a2,2,0,0,1,2,2V32A2,2,0,0,1,14,34ZM4,30h8V22H4Z"/><path d="M14,52H2a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H14a2,2,0,0,1,2,2V50A2,2,0,0,1,14,52ZM4,48h8V40H4Z"/><path d="M32,16H20a2,2,0,0,1-2-2V2a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V14A2,2,0,0,1,32,16ZM22,12h8V4H22Z"/><path d="M32,34H20a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V32A2,2,0,0,1,32,34ZM22,30h8V22H22Z"/><path d="M32,52H20a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V50A2,2,0,0,1,32,52ZM22,48h8V40H22Z"/><path d="M50,16H38a2,2,0,0,1-2-2V2a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V14A2,2,0,0,1,50,16ZM40,12h8V4H40Z"/><path d="M50,34H38a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V32A2,2,0,0,1,50,34ZM40,30h8V22H40Z"/><path d="M50,52H38a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V50A2,2,0,0,1,50,52ZM40,48h8V40H40Z"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="delete"><g color="#000"><path fill="#ee4c45" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;white-space:normal;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M12 1028.362c-6.626 0-12 5.374-12 12s5.374 12 12 12 12-5.374 12-12-5.374-12-12-12z" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -1028.362)"></path><path fill="#fff" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M10.5 1034.362v1h-3v1h9v-1h-3v-1h-3zm-2 3v9h7v-9h-7zm1 1h1v7h-1v-7zm2 0h1v7h-1v-7zm2 0h1v7h-1v-7z" overflow="visible" transform="translate(0 -1028.362)"></path></g></svg>
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 60 60" viewBox="0 0 60 60" id="edit"><path fill="#3B4652" d="M52.9687347,19.3099976l-2.7999878-2.7999878c-0.9099731-0.9100342-2.3899536-0.9100342-3.2999878,0
-		l-1.4129639,1.4129639c0.0185547,0.017395,0.0423584,0.0234985,0.0601196,0.0422974l5.7765503,6.1199341
-		c0.0361328,0.038269,0.0506592,0.0881348,0.0813599,0.1296997l1.5949097-1.5949097
-		C53.8787689,21.7099609,53.8787689,20.2199707,52.9687347,19.3099976z"></path><path fill="#2B79C2" d="M10.8887787,25.5499878H34.998764l7.5900269-7.5900269l1.7599487-1.75V9c0-1.6500244-1.3499756-3-3-3h-32
-		c-1.6599731,0-3,1.3499756-3,3v42c0,1.6499634,1.3400269,3,3,3h32c1.6500244,0,3-1.3500366,3-3V34.0700073l-5.8899536,5.8800049
-		c-0.3099976,0.3199463-0.7000122,0.5599976-1.1199951,0.7099609l-7.2200317,2.5200195
-		c-0.3099976,0.1099854-0.6500244,0.1699829-0.9899902,0.1699829c-0.7800293,0-1.5200195-0.2999878-2.0900269-0.8399658
-		c-0.3399658-0.3400269-0.5799561-0.7400513-0.7299805-1.1600342H10.8887787c-0.5599976,0-1-0.4500122-1-1s0.4400024-1,1-1
-		h15.4199829v-0.0100098l1.7000122-4.8899536H10.8887787c-0.5599976,0-1-0.4500122-1-1c0-0.5500488,0.4400024-1,1-1H28.708786
-		l0.0999756-0.3000488c0.1699829-0.4699707,0.4400024-0.8800049,0.789978-1.1900024l3.4000244-3.4099731H10.8887787
-		c-0.5599976,0-1-0.4500122-1-1S10.3287811,25.5499878,10.8887787,25.5499878z M10.8887787,46.25h24.9099731
-		c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1S10.3287811,46.25,10.8887787,46.25z
-		 M10.8887787,11.75h24.9099731c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1
-		S10.3287811,11.75,10.8887787,11.75z M10.8887787,18.6499634h24.9099731c0.5599976,0,1,0.4500122,1,1c0,0.5500488-0.4400024,1-1,1
-		H10.8887787c-0.5599976,0-1-0.4499512-1-1C9.8887787,19.0999756,10.3287811,18.6499634,10.8887787,18.6499634z"></path><path fill="#3B4652" d="M30.9387665,32.4400024c-0.1099854,0.0999756-0.1900024,0.2299805-0.2399902,0.3699951
-		l-2.5100098,7.2099609c-0.1300049,0.3600464-0.039978,0.7700195,0.2299805,1.0400391
-		c0.2000122,0.1900024,0.4500122,0.289978,0.710022,0.289978c0.1099854,0,0.2199707-0.0200195,0.3300171-0.0599976
-		l7.2099609-2.5100098c0.1400146-0.0499878,0.2700195-0.1300049,0.3800049-0.2399902l12.5599976-12.5599976l-5.9299927-6.2799683
-		L30.9387665,32.4400024z"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" id="Account"><path fill="#4687ba" d="M19 36.5c-5.8 0-10.6 4.7-10.6 10.6S13.1 57.6 19 57.6 29.5 52.9 29.5 47 24.8 36.5 19 36.5zm0 19.6c-5 0-9.1-4.1-9.1-9.1s4.1-9 9.1-9 9 4 9 9-4 9.1-9 9.1z" class="color000100 svgShape"></path><path fill="#4687ba" d="M65.7 49.6l-.9-5.4c-1.2-8-7.4-14.3-15.1-15.9 1.3-1.6 2.7-3.9 3.3-7.1.5-.8 2.1-3.5 1.5-5.3-.1-.3-.3-.6-.6-.9.7-2 2.3-9-4.8-12.6C38-3.9 28.7 4.7 30.8 14.6c-.2.3-.5.6-.6 1.1-.3 1.3.1 3 1.3 4.9.2.8 1.5 5 3.9 7.9-3.2.8-6 2.4-8.4 4.6-1.2-.7-2.5-1.2-3.8-1.6l-.8-3.3h-6.8l-.8 3.3c-1.3.4-2.6.9-3.8 1.6l-2.8-1.8-4.8 4.8L5.1 39c-.7 1.2-1.2 2.5-1.6 3.8l-3.3.8v6.8l3.3.8c.4 1.3.9 2.6 1.6 3.8l-1.8 2.9 4.8 4.8 2.8-1.8c1.2.7 2.5 1.2 3.8 1.6l.8 3.3h6.8l.8-3.3c1.3-.4 2.6-.9 3.8-1.6l2.8 1.8 4.8-4.8-.3-.5H59c2 0 3.8-.9 5.1-2.4 1.3-1.4 1.9-3.4 1.6-5.4zM32.9 20.1l-.1-.2c-1.7-2.8-1.3-4.2-.8-4.5l.5-.3c-1.8-6 1.4-11.4 5.6-12.9C43.4.5 57 4.1 52 15.9c.3.1 1 .3 1 .6.3 1-.9 3.3-1.5 4.3-1.1 5.3-4.3 9.7-9.2 9.8-5.1 0-8.1-5.5-9.4-10.5zm-3.3 40.7L27 59.2c-1.1.7-2.4 1.5-5.1 2.1l-.7 3h-4.4l-.7-3c-2.3-.5-3.4-1.1-5.1-2.1l-2.6 1.6-3.1-3.1 1.6-2.6C5.7 53.2 5.2 52 4.7 50l-3-.7v-4.4l3-.7c.3-1.4.7-2.9 2.1-5.2l-1.6-2.6 3.1-3.1 2.6 1.6c1.1-.7 2.4-1.5 5.1-2.1l.7-3h4.4l.7 3c2.3.5 3.4 1.1 5.1 2.1l2.6-1.6 3.1 3.1-1.5 2.6c1.2 1.9 1.6 3.1 2.1 5.1l3 .7v4.4l-3 .7c-.3 1.2-.6 2.8-2.1 5.1l1.6 2.6-3.1 3.2zM63 54.1c-1 1.2-2.4 1.8-4 1.8H33.4l-.5-.9c.7-1.2 1.2-2.5 1.6-3.8l3.3-.8v-6.8l-3.3-.8c-.4-1.3-.9-2.6-1.6-3.8l1.8-2.8-4-4c1.8-1.1 3.8-1.9 6-2.4 1.7 1.5 3.8 2.4 6.2 2.2 2.7-.2 4.4-1.2 5.7-2.4 7.6 1.1 13.7 7.1 14.9 14.8l.8 5.4c.2 1.6-.3 3.1-1.3 4.3z" class="color000100 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="dashboard"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="identificationcard"><path fill="#4687ba" d="M0 6v13c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V6" class="color2d98d4 svgShape"></path><path fill="#ff6699" d="M22 3H2a2 2 0 0 0-2 2v2h24V5a2 2 0 0 0-2-2z" class="color0377be svgShape"></path><path fill="#e6e7f9" d="M22 3H2C.897 3 0 3.897 0 5v.25c0-1.103.897-2 2-2h20c1.103 0 2 .897 2 2V5c0-1.103-.897-2-2-2z" opacity=".2" class="colorffffff svgShape"></path><path fill="#4687ba" d="M22 20.75H2c-1.103 0-2-.897-2-2V19c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2v-.25c0 1.103-.897 2-2 2z" opacity=".1" class="color010101 svgShape"></path><path fill="#e6e7f9" d="M13 17h8v1h-8zM13 14h8v1h-8zM13 11h8v1h-8z" class="colorffffff svgShape"></path><circle cx="7" cy="12" r="2" fill="#e6e7f9" class="colorffffff svgShape"></circle><path fill="#e6e7f9" d="M9.987 15.237C9.288 14.9 8.203 14.5 7 14.5s-2.288.4-2.987.737c-.625.3-1.013.9-1.013 1.566V18h8v-1.197c0-.665-.388-1.265-1.013-1.566z" class="colorffffff svgShape"></path><circle cx="17" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M17 4.25a.99.99 0 0 1 .975.875C17.98 5.082 18 5.045 18 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 17 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="a" x1="6.973" x2="21.55" y1="1.973" y2="16.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#010101" stop-opacity=".1" class="stopColor010101 svgShape"></stop><stop offset="1" stop-color="#010101" stop-opacity="0" class="stopColor010101 svgShape"></stop></linearGradient><path fill="url(#a)" d="M22 21c1.103 0 2-.897 2-2V7H0l14 14h8z"></path><circle cx="7" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M7 4.25a.99.99 0 0 1 .975.875C7.98 5.082 8 5.045 8 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 7 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="b" x1="-.708" x2="24.708" y1="6.074" y2="17.925" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity=".2" class="stopColorffffff svgShape"></stop><stop offset="1" stop-color="#ffffff" stop-opacity="0" class="stopColorffffff svgShape"></stop></linearGradient><path fill="url(#b)" d="M22 3H2a2 2 0 0 0-2 2v14c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V5a2 2 0 0 0-2-2z"></path></svg>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Pin"><path fill="#4687ba" d="M106,13.8L91.7,4.6C86.2,1,78.9,2,74.5,7L41.9,46.9c-9.1,0.4-17.9,3.3-25.4,8.7c-0.7,0.5-0.7,1.6,0.1,2.1
-				l10.2,6.6l0,0L46.4,77l-24,41.4c-1.2,2.1-0.7,4.9,1.4,6.3c2.2,1.6,5.2,1.1,6.7-1.1l28-38.8L78,97.5l0,0l10.2,6.6
-				c0.7,0.5,1.7,0.1,1.9-0.8c1.8-9,0.9-18.3-2.5-26.8l23.1-46C113.6,24.5,111.5,17.4,106,13.8z" class="color2d3e50 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" id="Family"><path d="M26.305 22.723a4.972 4.972 0 0 0-3.176-8.71 9.917 9.917 0 0 0-3.438-2.292 6 6 0 1 0-7.382 0 9.917 9.917 0 0 0-3.438 2.292 4.972 4.972 0 0 0-3.171 8.71A8.005 8.005 0 0 0 1 30a1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 8.005 8.005 0 0 0-4.695-7.277ZM26 19a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM12 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4ZM6 19a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm10 7.136a8.04 8.04 0 0 0-3.695-3.413 4.949 4.949 0 0 0-1.05-8.16 7.984 7.984 0 0 1 9.49 0 4.949 4.949 0 0 0-1.05 8.16A8.04 8.04 0 0 0 16 26.136Z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Logout"><path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" fill="#e07c8a" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="FindJobs"><path d="M499.22 437.51 433.68 372a23.19 23.19 0 0 0-26.63-4.41l-22.18-22.18A214.71 214.71 0 0 0 62.78 62.78a214.72 214.72 0 0 0 282.6 322.09l22.18 22.18a23.19 23.19 0 0 0 4.44 26.63l65.54 65.54a43.64 43.64 0 0 0 61.71-61.71ZM341.29 369l-.2.18A199.71 199.71 0 0 1 73.39 73.39a199.71 199.71 0 0 1 295.76 267.67l-.22.26q-6.18 7.5-13.14 14.47T341.29 369Zm15.71 6.26c3.21-2.86 6.36-5.8 9.42-8.86s6-6.21 8.86-9.42l20.29 20.3-18.27 18.27Zm131.61 113.35a28.65 28.65 0 0 1-40.49 0l-65.54-65.54a8.22 8.22 0 0 1 0-11.61l28.88-28.88a8.22 8.22 0 0 1 11.61 0l65.54 65.54a28.65 28.65 0 0 1 0 40.49ZM296.08 161h-31v-11.53A21.13 21.13 0 0 0 244 128.36h-58.8a21.13 21.13 0 0 0-21.11 21.11V161h-31a19.82 19.82 0 0 0-19.81 19.81V281a19.83 19.83 0 0 0 19.81 19.82h163A19.84 19.84 0 0 0 315.9 281V180.81A19.83 19.83 0 0 0 296.08 161Zm-117-11.53a6.12 6.12 0 0 1 6.11-6.11H244a6.12 6.12 0 0 1 6.11 6.11V161h-71ZM300.9 281a4.82 4.82 0 0 1-4.82 4.82h-163a4.82 4.82 0 0 1-4.81-4.82v-63.6l63.8 27.77v4.88a14.52 14.52 0 0 0 14.5 14.5h16a14.52 14.52 0 0 0 14.5-14.5v-4.88l63.83-27.77Zm-93.81-31.45v-15h15v15ZM300.9 201l-64.67 28.14a14.5 14.5 0 0 0-13.64-9.63h-16a14.52 14.52 0 0 0-13.59 9.67L128.29 201v-20.19a4.82 4.82 0 0 1 4.81-4.81h163a4.82 4.82 0 0 1 4.82 4.81Zm36.89-109.61c-67.93-67.93-178.47-67.93-246.4 0a174.23 174.23 0 0 0 246.4 246.4 174.23 174.23 0 0 0 0-246.4Zm-10.6 235.8a159.25 159.25 0 1 1 46.63-112.6 158.76 158.76 0 0 1-46.63 112.6Z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 9362 9362" id="jobsact"><path d="M8967 8103l-423 0 0 -856 423 0c181,0 329,193 329,428l0 0c0,235 -148,428 -329,428zm-4636 0l4066 0 0 -856 -4066 0 0 856zm-139 0l-738 -327 -268 0c-43,0 -138,-45 -138,-101 0,-56 95,-101 138,-101l268 0 738 -327 0 428 0 428zm-3982 -8103l6388 0 210 0 0 210 0 809 -420 0 0 -600 -5969 0 0 8523 5969 0 0 -551 420 0 0 761 0 210 -210 0 -6388 0 -210 0 0 -210 0 -8942 0 -210 210 0zm6598 6523l0 436 -420 0 0 -436 420 0zm2554 -3158l0 2557c0,175 -143,317 -317,317l-5224 0c-174,0 -317,-142 -317,-317l0 -2557 2486 0 0 491c0,244 199,443 443,443 244,0 443,-199 443,-443l0 -491 2486 0zm-3843 -2062l1827 0c121,0 219,98 219,219l0 626 -340 0 0 -506 -1585 0 0 506 -340 0 0 -626c0,-121 99,-219 219,-219zm-1698 1011l5224 0c174,0 317,143 317,317l0 568 -2650 0 0 657c0,154 -126,279 -279,279l0 0c-154,0 -280,-125 -280,-279l0 -657 -2649 0 0 -568c0,-174 143,-317 317,-317zm2612 1387c74,0 134,60 134,134 0,74 -60,134 -134,134 -74,0 -134,-60 -134,-134 0,-74 60,-134 134,-134zm-4430 -2741l2801 0 0 420 -2801 0 0 -420zm-806 4786l2023 0 0 176c0,87 19,170 52,244l-2075 0 0 -420zm0 -3657l2366 0c-167,80 -292,235 -330,421l-2036 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 915l2023 0 0 420 -2023 0 0 -420zm0 1828l1371 0 0 421 -1371 0 0 -421z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="Profile"><path fill="#ffffff" d="M108 124H20c-8.8 0-16-7.2-16-16V20c0-8.8 7.2-16 16-16h88c8.8 0 16 7.2 16 16v88c0 8.8-7.2 16-16 16z" class="colorffffff svgShape"></path><path fill="#d2d4d6" d="M4 18.1v21.2h120V18.1c0-7.8-6.3-14.1-14.1-14.1H18.1C10.3 4 4 10.3 4 18.1z" class="colord2d5d6 svgShape"></path><circle cx="20.5" cy="21.1" r="7.1" fill="#7bbaec" class="colorec7bb0 svgShape"></circle><circle cx="59.5" cy="21.1" r="7.1" fill="#4687ba" class="color82cfcd svgShape"></circle><path fill="#57636d" d="M59.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1z" class="color6a576d svgShape"></path><circle cx="40" cy="21.1" r="7.1" fill="#7bbdf1" class="colorf1ed7b svgShape"></circle><path fill="#57636d" d="M20.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.7-6.1-6.1-6.1zm39 14.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1zM40 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zM40 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1S43.3 15 40 15zM4 38.3h120v2H4zM108 104.3H20c-.6 0-1-.4-1-1s.4-1 1-1h88c.6 0 1 .4 1 1s-.4 1-1 1zm-48-48H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1z" class="color6a576d svgShape"></path><path fill="#57636d" d="M108 125H20c-9.4 0-17-7.6-17-17V20c0-9.4 7.6-17 17-17h88c9.4 0 17 7.6 17 17v88c0 9.4-7.6 17-17 17zM20 5C11.7 5 5 11.7 5 20v88c0 8.3 6.7 15 15 15h88c8.3 0 15-6.7 15-15V20c0-8.3-6.7-15-15-15H20z" class="color6a576d svgShape"></path><path fill="#ffffff" d="M108.9 28.1H79.6c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1h29.3c3.9 0 7.1 3.2 7.1 7.1 0 4-3.2 7.1-7.1 7.1z" class="colorffffff svgShape"></path><path fill="#57636d" d="M108.9 29.1H79.6c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1h29.3c4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zM79.6 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1h29.3c3.3 0 6.1-2.7 6.1-6.1s-2.7-6.1-6.1-6.1H79.6z" class="color6a576d svgShape"></path><path fill="#5587af" d="M76 55.3h32v32H76z" class="coloraf5655 svgShape"></path><path fill="#57636d" d="M104.8 88.3H79.2c-2.3 0-4.2-1.9-4.2-4.2V58.5c0-2.3 1.9-4.2 4.2-4.2h25.6c2.3 0 4.2 1.9 4.2 4.2v25.6c0 2.3-1.9 4.2-4.2 4.2zm-25.6-32c-1.2 0-2.2 1-2.2 2.2v25.6c0 1.2 1 2.2 2.2 2.2h25.6c1.2 0 2.2-1 2.2-2.2V58.5c0-1.2-1-2.2-2.2-2.2H79.2z" class="color6a576d svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>
@@ -12,7 +12,7 @@ export default function AllBidsSection({ className, allBids = [] }) {
        </div>
        <div className="w-full">
          <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
-            <DataIteration datas={allBids} startLength={process.env.REACT_APP_ZERO_STATE} endLength={8}>
+            <DataIteration datas={allBids} startLength={0} endLength={8}>
              {({ datas }) => (
                <div key={datas.id} className="item">
                  <ProductCardStyleOne datas={datas} />
@@ -1,421 +0,0 @@
-import { Field, Form, Formik } from "formik";
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import * as Yup from "yup";
-import usersService from "../../services/UsersService";
-import { tableReload } from "../../store/TableReloads";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-
-const validationSchema = Yup.object().shape({
-  country: Yup.string()
-    .min(1, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Country is required"),
-  price: Yup.string()
-    .typeError("Invalid number")
-    .min(1, "Price must be greater than 0")
-    .test("no-e", "Invalid number", (value) => {
-      if (value && /\d+e/.test(value)) {
-        return false;
-      }
-      return true;
-    })
-    .required("Price is required"),
-  title: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
-    .required("Title is required"),
-  description: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(299, "Maximum 299 characters")
-    .required("Description is required"),
-  job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(1440, "Maximum 1440 characters")
-    .required("Details is required"),
-  timeline_days: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, "Price must be greater than 0")
-    .required("Timeline is required"),
-  category: Yup.array().min(1, "Select at least one checkbox"),
-});
-
-function AddJob({ popUpHandler, categories }) {
-  const ApiCall = new usersService();
-
-  let dispatch = useDispatch();
-
-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  }); // To Hold the array of currency getUserCurrency returns
-
-  let initialValues = {
-    // initial values for formik
-    country: "",
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  };
-
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // Holds state when submit button is pressed
-
-  // FUNCTION TO GET Currency
-  const getUserCurrency = () => {
-    setCurrency((prev) => ({ ...prev, loading: true }));
-    ApiCall.getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setCurrency({ loading: false, status: true, data: [] });
-          return;
-        }
-
-        setCurrency({
-          loading: false,
-          status: true,
-          data: res.data.result_list,
-        });
-      })
-      .catch((err) => {
-        setCurrency({ loading: false, status: false, data: [] });
-      });
-  };
-
-  // FUNCTION TO HANDLE ADD JOB FORM
-  const handleAddJob = (values, helpers) => {
-    let reqData = {
-      country: values?.country,
-      price: Number(values.price) * 100,
-      title: values?.title,
-      description: values?.description,
-      job_detail: values?.job_detail,
-      timeline_days: values?.timeline_days,
-      category: values.category?.join("@"),
-    };
-
-    setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 1) {
-          setRequestStatus({
-            loading: false,
-            status: false,
-            message: "Could not complete your request at the moment",
-          });
-          setTimeout(() => {
-            popUpHandler();
-          }, 1500);
-          return;
-        }
-        setRequestStatus({
-          loading: false,
-          status: true,
-          message: "Job Added Successfully",
-        });
-        setTimeout(() => {
-          dispatch(tableReload({ type: "JOBTABLE" }));
-          popUpHandler();
-        }, 1000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "Opps! something went wrong. Try Again",
-        });
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
-      });
-  };
-
-  useEffect(() => {
-    getUserCurrency();
-  }, []);
-
-  return (
-    <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
-      <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleAddJob}
-      >
-        {(props) => {
-          return (
-            <Form>
-              <div className="flex flex-col-reverse sm:flex-row">
-                <div className="fields w-full">
-                  {/* inputs starts here */}
-                  <div className="xl:flex xl:space-x-7 mb-[5px]">
-                    <div className="field w-full mb-6 xl:mb-0">
-                      <label
-                        htmlFor="country"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
-                      >
-                        Currency
-                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
-                      </label>
-                      <select
-                        id="country"
-                        name="country"
-                        value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      >
-                        {currency.loading ? (
-                          <option className="text-slate-500 text-lg" value="">
-                            Loading...
-                          </option>
-                        ) : currency.data.length ? (
-                          <>
-                            <option className="text-slate-500 text-lg" value="">
-                              Select a currency
-                            </option>
-                            {currency.data?.map((item, index) => (
-                              <option
-                                key={index}
-                                className="text-slate-500 text-lg"
-                                value={item?.country}
-                              >
-                                {item?.description}
-                              </option>
-                            ))}
-                          </>
-                        ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
-                        )}
-                      </select>
-                    </div>
-
-                    {/* Price */}
-                    <div className="field w-full">
-                      <InputCom
-                        fieldClass="px-6 text-right"
-                        label="Price"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        type="number"
-                        name="price"
-                        placeholder="0"
-                        value={props.values.price}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        error={props.errors.price && props.touched.price && props.errors.price}
-                      />
-                    </div>
-                  </div>
-
-                  {/* Title  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Title"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      type="text"
-                      name="title"
-                      value={props.values.title}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={props.errors.title && props.touched.title && props.errors.title}
-                    />
-                  </div>
-
-                  {/* Description  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Description"
-                      labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
-                      type="text"
-                      name="description"
-                      value={props.values.description}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={props.errors.description && props.touched.description && props.errors.description}
-                    />
-                  </div>
-
-                  {/* Details */}
-                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                    <div className="sm:w-[60%] w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
-                      >
-                        Job Delivery Details
-                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
-                      </label>
-                      <textarea
-                        id="Job Delivery Details"
-                        rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
-                        style={{ resize: "none" }}
-                        name="job_detail"
-                        value={props.values.job_detail}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      />
-                    </div>
-
-                    <div className="sm:w-[35%] w-full">
-                      <div
-                        htmlFor="Job Categories"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
-                        id="checked-group"
-                      >
-                        Categories
-                      </div>
-                      <div
-                        className="sm:flex-col flex flex-wrap px-3 mt-3"
-                        role="group"
-                        aria-labelledby="checked-group"
-                      >
-                        {Object?.entries(categories).map(([key, value]) => (
-                          <label
-                            key={key}
-                            className="flex gap-1 w-full items-center"
-                          >
-                            <Field
-                              type="checkbox"
-                              name="category"
-                              value={key}
-                            />
-                            <span className="text-[13.975px]">{value}</span>
-                          </label>
-                        ))}
-                        <span className="h-5 text-sm italic text-[#cf3917]">
-                          {props.errors.category &&
-                            props.touched.category &&
-                            "please select a category"}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="field w-full mb-[5px]">
-                    <div className={`flex items-center justify-between mb-2.5`}>
-                      <label
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                        htmlFor="timeline_days"
-                      >
-                        Timeline
-                        <span className="text-green-700 text-sm tracking-wide">
-                          - Expected duration of this task
-                        </span>
-                      </label>
-                    </div>
-
-                    <Field
-                      component="select"
-                      name="timeline_days"
-                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                        props.errors.timeline_days &&
-                        props.touched.timeline_days
-                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                      }`}
-                      value={props.values.timeline_days}
-                    >
-                      <option value="">Select Duration</option>
-                      {publicArray.map(({ name, duration }, idx) => (
-                        <option
-                          className="text-slate-500 text-lg"
-                          value={duration}
-                        >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                  </div>
-                  {/* inputs ends here */}
-                </div>
-              </div>
-
-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-              <div className="content-footer w-full">
-                {/* error or success display */}
-                {requestStatus.message != "" &&
-                  (!requestStatus.status ? (
-                    <div
-                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                    >
-                      {requestStatus.message}
-                    </div>
-                  ) : (
-                    requestStatus.status && (
-                      <div
-                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                      >
-                        {requestStatus.message}
-                      </div>
-                    )
-                  ))}
-                {/* End of error or success display */}
-
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                  <div className="flex items-center space-x-4 mr-9">
-                    <button
-                      type="button"
-                      className="text-18 text-light-red tracking-wide "
-                    >
-                      <span
-                        className="border-b dark:border-[#5356fb29]  border-light-red"
-                        onClick={popUpHandler}
-                      >
-                        {" "}
-                        Cancel
-                      </span>
-                    </button>
-
-                    {requestStatus.loading ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
-                    ) : (
-                      <button
-                        type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                      >
-                        Add Job
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </Form>
-          );
-        }}
-      </Formik>
-    </div>
-  );
-}
-
-export default AddJob;
-
-const publicArray = [
-  { duration: 1, name: "1 day" },
-  { duration: 2, name: "2 days" },
-  { duration: 3, name: "3 days" },
-  { duration: 4, name: "4 days" },
-  { duration: 5, name: "5 days" },
-  { duration: 6, name: "6 days" },
-  { duration: 7, name: "1 week" },
-  { duration: 14, name: "2 weeks" },
-  { duration: 21, name: "3 weeks" },
-  { duration: 28, name: "4 weeks" },
-];
@@ -1,50 +1,24 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import loginThumb from "../../assets/images/auth-thumb.svg";
+import logo from "../../assets/images/wrenchboard.png"; //logo-1.svg";

 export default function LoginLayout({ slogan, children }) {
+  const checkScreenHeight = window.screen.height;
+  let screen = "";
+  if (checkScreenHeight <= 950) {
+    screen = "h-screen";
+    // screen = "h-[950px]";
+  } else {
+    screen = "h-screen";
+  }
  return (
-    <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:px-20 sm:py-5`}>
-        <div className="w-full h-full">
+    <div className="layout-wrapper login">
+      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
+        <div className="flex w-full h-full">
+
          <div className="flex-1 flex justify-center items-center">
            {children && children}
          </div>
-          <div className="flex-1 flex justify-center items-center px-10 pt-10">
-            <div className="flex items-center">
-            <a
-                  href="https://www.wrenchboard.com/about-us"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  About
-                </a>
-                <a
-                  href="https://www.wrenchboard.com/service"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Services
-                </a>
-                <a
-                  href="https://www.wrenchboard.com/contact"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Contact Us
-                </a>
-            </div>
-          </div>
-          <div className="flex-1 flex justify-center items-center px-10 py-1">
-            <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
-              <span className="">&copy; {new Date().getFullYear()} -</span>
-              <Link to="/" className="text-[#009ef7] ml-1">
-                WrenchBoard
-              </Link>{" "}
-            </p>
-          </div>
        </div>
      </div>
    </div>
@@ -42,8 +42,8 @@ export default function CollectionTab({ className, products }) {
            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <CollectionCard key={datas.uniqKey} collectionData={datas} />
@@ -42,9 +42,7 @@ export default function CreateSaleSlider({
      {/* heading */}
      <div className="flex justify-between items-center mb-6">
        <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-            Create for Sell
-          </h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Sell</h1>
        </div>
        <div className="slider-btns flex space-x-4">
          <button onClick={nextHandler} type="button">
@@ -91,7 +89,7 @@ export default function CreateSaleSlider({
      <div className="trending-products relative w-full">
        <SliderCom selector={trendingSlider} settings={settings}>
          {products &&
-            products?.length > 0 &&
+            products.length > 0 &&
            products.map((item) => (
              <ProductCardStyleTwo
                key={item.id}
@@ -49,9 +49,7 @@ export default function CreatedBidsSlider({
      {/* heading */}
      <div className="flex justify-between items-center mb-6">
        <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-            Create for Bits
-          </h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Bits</h1>
        </div>
        <div className="slider-btns flex space-x-4">
          <button onClick={nextHandler} type="button">
@@ -98,7 +96,7 @@ export default function CreatedBidsSlider({
      <div className="trending-products relative w-full">
        <SliderCom selector={trendingSlider} settings={settings}>
          {products &&
-            products?.length > 0 &&
+            products.length > 0 &&
            products.map((item) => (
              <ProductCardStyleOne
                key={item.id}
@@ -42,8 +42,8 @@ export default function OnSaleTab({ className, products }) {
            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <ProductCardStyleTwo key={datas.id} datas={datas} />
@@ -42,8 +42,8 @@ export default function OwnTab({ className, products }) {
            <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <ProductCardStyleOne key={datas.id} datas={datas} />
@@ -1,69 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
-import AuthLayout from "../AuthLayout";
-
-function AppleRedirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
-
-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
-
-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-
-      setTimeout(()=>{ // remove LATER
-        navigate('/login', {state: {error: true}})
-      },2000)
-      
-      /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
-
-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
-      */
-      var reqData = {
-        auth_type: "APPLE",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-    //   userApi
-    //     .authStart(reqData)
-    //     .then((res) => {
-    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-    //         localStorage.setItem("member_id", `${res.data.member_id}`);
-    //         localStorage.setItem("uid", `${res.data.uid}`);
-    //         localStorage.setItem("session_token", `${res.data.session}`);
-    //         dispatch(updateUserDetails({...res.data}));
-    //         navigate('/', {replace: true})
-    //         return
-    //       }
-    //       navigate('/login', {state: {error: true}})
-    //     })
-    //     .catch((error) => {
-    //       navigate('/login', {state: {error: true}})
-    //       console.log(error);
-    //     });
-    },[])
-  return (
-    <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
-}
-
-export default AppleRedirect
@@ -1,65 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
-import AuthLayout from "../AuthLayout";
-
-function FbookRedirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
-
-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
-
-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-      
-      /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
-
-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
-      */
-      var reqData = {
-        auth_type: "FACEBOOK",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-    //   userApi
-    //     .authStart(reqData)
-    //     .then((res) => {
-    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-    //         localStorage.setItem("member_id", `${res.data.member_id}`);
-    //         localStorage.setItem("uid", `${res.data.uid}`);
-    //         localStorage.setItem("session_token", `${res.data.session}`);
-    //         dispatch(updateUserDetails({...res.data}));
-    //         navigate('/', {replace: true})
-    //         return
-    //       }
-    //       navigate('/login', {state: {error: true}})
-    //     })
-    //     .catch((error) => {
-    //       navigate('/login', {state: {error: true}})
-    //       console.log(error);
-    //     });
-    },[])
-  return (
-    <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
-}
-
-export default FbookRedirect
@@ -1,64 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
-import AuthLayout from "../AuthLayout";
-
-function Redirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
-
-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
-
-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-      /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
-
-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
-      */
-      var reqData = {
-        auth_type: "GOOGLE",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-      userApi
-        .authStart(reqData)
-        .then((res) => {
-          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-            localStorage.setItem("member_id", `${res.data.member_id}`);
-            localStorage.setItem("uid", `${res.data.uid}`);
-            localStorage.setItem("session_token", `${res.data.session}`);
-            dispatch(updateUserDetails({...res.data}));
-            navigate('/', {replace: true})
-            return
-          }
-          navigate('/login', {state: {error: true}})
-        })
-        .catch((error) => {
-          navigate('/login', {state: {error: true}})
-          console.log(error);
-        });
-    },[])
-  return (
-    <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
-}
-
-export default Redirect
@@ -1,17 +1,16 @@
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
-import usersService from "../../../services/UsersService";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from 'react-router-dom';
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import usersService from "../../../services/UsersService";

 export default function ForgotPassword() {
  const [checked, setValue] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false)
  // email
  const [email, setMail] = useState("");
-  const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(false);
+  const [msgError, setMsgError] = useState('');

  const navigate = useNavigate();
  const userApi = new usersService();
@@ -25,66 +24,71 @@ export default function ForgotPassword() {
  };

  const resetHandler = async () => {
-    if (email == "") {
-      setMsgError("An email is required");
+    if (email == '') {
+      setMsgError('An email is required')
    } else if (!checked) {
-      setMsgError("Check if you are human");
+      setMsgError('Check if you are human')
    }

-    if (email !== "" && checked) {
-      const reqData = { email };
-      setResetLoading(true);
+    if (email != '' && checked) {
+      const reqData = { email }
+      setResetLoading(true)
      try {
-        const res = await userApi.StartResetPassword(reqData);
+        const res = await userApi.StartResetPassword(reqData)
        if (res.status === 200) {
-          setMsgSuccess(true);
-          setMail("");
-          setValue(false);
-          setResetLoading(false);
+          const { data } = res
+          if (data.status == -1) {
+            setMsgError('This is an incorrect or duplicate email')
+            setResetLoading(false)
+          } else if (data.status > 0) {
+            setResetLoading(false)
+            navigate("/verify-you", { replace: true })
+          } else{
+            setMsgError("reset was not successful")
+            setResetLoading(false)
+          }
+          setMail("")
        }
      } catch (error) {
-        setResetLoading(false);
-        setMail("");
-        setMsgError("An error occurred");
-        throw new Error(error);
+        setResetLoading(false)
+        setMail("")
+        setMsgError('An error occurred')
+        throw new Error(error)
      } finally {
        setTimeout(() => {
-          setMsgError(null);
-        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+          setMsgError(null)
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
      }
    }
    setTimeout(() => {
-      setMsgError(null);
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-  };
+      setMsgError(null)
+    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
+  }

  return (
    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
        <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
+          <div className='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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 flex-col justify-center w-full h-full px-5">
              <div className="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]">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
                  Forget Password
                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Enter your email to reset your password.
-                </span>
+                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
              </div>
              <div className="input-area">
                <div className="input-item mb-10">
                  <InputCom
-                    fieldClass="px-6"
                    placeholder="Your Username/Email"
                    label="Email"
                    name="email"
@@ -94,6 +98,7 @@ export default function ForgotPassword() {
                    iconName="message"
                  />
                </div>
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
                {/* hCaptha clone for the time being */}
                <div className="mb-10">
                  <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -103,14 +108,7 @@ export default function ForgotPassword() {
                        <div className="relative table top-0 h-full">
                          <div className="table-cell align-middle">
                            <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input
-                                type="checkbox"
-                                name="human-checkbox"
-                                id="human-checkbox"
-                                className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
-                                checked={checked}
-                                onChange={humanChecker}
-                              />
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
                            </div>
                          </div>
                        </div>
@@ -118,10 +116,7 @@ export default function ForgotPassword() {
                      <div className="h-full relative inline-block w-[170px]">
                        <label className="relative table top-0 h-full">
                          <label className="table-cell align-middle">
-                            <label
-                              className="text-800 text-sm"
-                              htmlFor="human-checkbox"
-                            >
+                            <label className="text-800 text-sm" htmlFor="human-checkbox">
                              I am human
                            </label>
                          </label>
@@ -131,31 +126,12 @@ export default function ForgotPassword() {
                    </div>
                  </div>
                </div>
-                {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    {msgError}
-                  </div>
-                )}
-                {msgSuccess && (
-                  <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    If we find your email, you will receive a link to reset your
-                    password. Please use or{" "}
-                    <Link
-                      to="/contact"
-                      className="text-[#4687ba] hover:text-[#009ef7]"
-                    >
-                      contact form
-                    </Link>{" "}
-                    if you did not get our message after few minutes.
-                  </div>
-                )}
-
                <div className="signin-area mb-3.5">
                  <div className="flex justify-center items-center gap-2">
                    <button
                      type="button"
                      onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                    >
                      {resetLoading ? (
                        <div className="signup btn-loader"></div>
@@ -166,7 +142,7 @@ export default function ForgotPassword() {
                    <button
                      type="button"
                      onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                    >
                      Cancel
                    </button>
@@ -1,54 +1,27 @@
-import React, { useEffect, useLayoutEffect, useState } from "react";
-import { Link, useNavigate, useLocation } from "react-router-dom";
-import linkedInLogo from "../../../assets/images/Linkedin.png";
+import React, { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import googleLogo from "../../../assets/images/google-logo.svg";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
-import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-// import { GoogleOAuthProvider } from '@react-oauth/google';
-import { googleLogout, useGoogleLogin } from "@react-oauth/google";
-
-import { useDispatch } from "react-redux";
-import { updateUserDetails } from "../../../store/UserDetails";

 export default function Login() {
-  const dispatch = useDispatch();
-  const {state} = useLocation()
-
-  let [loginType, setLoginType] = useState('');
-
  const [checked, setValue] = useState(false);
  const [loginLoading, setLoginLoading] = useState(false);

-  const [showPassword, setShowPassword] = useState(false);
-
  //login error state
  const [loginError, setLoginError] = useState(false);
  // for the catch error
-  const [msgError, setMsgError] = useState("");
+  const [msgError, setMsgError] = useState('');

  const rememberMe = () => {
    setValue(!checked);
  };

-   // To Show and Hide Password
-   const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
-  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
-  const handleLoginType = ({ target: { name } }) => {
-    setLoginType(name);
-    let currentDate = new Date();
-    let expirationDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
-    // Convert the expiration date to the appropriate format
-    let expirationDateString = expirationDate.toUTCString();
-    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
-  };
-
  // email
  const [email, setMail] = useState("");
  const handleEmail = (e) => {
@@ -62,370 +35,165 @@ export default function Login() {
  const navigate = useNavigate();
  const userApi = new usersService();

-  // FUNCTION TO HANDLE USER LOGIN
-  const doLogin = ({ target: { name } }) => {
-    setMsgError("");
-    setLoginError(false);
-    setLoginLoading(true);
-    let postData; // Post Data for API
-    if (!email || !password) {
-      setLoginLoading(false);
-      setMsgError("Please fill all the fields");
-      setTimeout(() => {
-        setMsgError("");
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      return;
-    }

-    if (name == "full") {
-      //checks if email is a valid email address
-      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-      if (regEx.test(email) == false) {
-        setLoginLoading(false);
-        setMsgError("Invalid Email");
-        return setTimeout(()=>{setMsgError("");},3000)
-      }
-      // Post Data Info for normal Login
-      postData = {
-        username: email,
-        password: password,
-        sessionid: "STARTING",
-        login_mode: 1100,
-        action: 11025,
-      };
-    } else if (name == "family") {
-      // Post Data Info for family Login
-      postData = {
-        username: email,
-        pin: password,
-        sessionid: "20067A92714",
-        login_mode: 1105,
-        action: 11025,
-      };
-    } else {
-      setLoginLoading(false);
-      setMsgError("Invalid Login Type. Consider refreshing the page");
-      setTimeout(() => {
-        setMsgError("");
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      return;
+  const doLogin = async () => {
+    if (email == '' && password == '') {
+      setMsgError('Please fill in fields')
    }
-    userApi
-      .logInUser(postData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0 || !res.data.member_id || !res.data.uid || !res.data.session) {
-          // setMsgError("Wrong, email/password");
-          setLoginError(true);
-          setLoginLoading(false);
-          return;
+    try {
+      if (email !== "" && password !== "") {
+        var postData = {
+          username: email,
+          password: password,
+          sessionid: 'STARTING'
+        };
+        const loginResult = await userApi.logInUser(postData);  // just for a test
+        //debugger;
+        // if (email === "support@mermsemr.com") {
+        if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
+          localStorage.setItem("email", `${loginResult.data.email}`);
+          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
+          localStorage.setItem("uid", `${loginResult.data.uid}`);
+          localStorage.setItem("session_token", `${loginResult.data.session}`);
+          localStorage.setItem("added", `${loginResult.data.added}`);
+          localStorage.setItem("city", `${loginResult.data.city}`);
+          localStorage.setItem("country", `${loginResult.data.country}`);
+          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
+          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
+          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
+          localStorage.setItem("state", `${loginResult.data.state}`);
+          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
+          localStorage.setItem("session", `${loginResult.data.session}`);
+          setLoginLoading(true);
+          // userApi.getUserReminders(); //testing
+          setTimeout(() => {
+            toast.success("Login Successfully");
+            navigate("/", { replace: true });
+            setLoginLoading(false);
+          }, 2000);
+        } else {
+          // toast.error("Invalid Credential");
+          setLoginError(true)
        }
-        localStorage.setItem("member_id", `${res.data.member_id}`);
-        localStorage.setItem("uid", `${res.data.uid}`);
-        localStorage.setItem("session_token", `${res.data.session}`);
-        // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails({...res.data}));
-        setTimeout(() => {
-          navigate("/", { replace: true });
-          setLoginLoading(false);
-        }, 2000);
-      })
-      .catch((error) => {
-        setMsgError("Unable to login, try again");
-        setLoginLoading(false);
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setLoginError(false);
-          setMsgError("");
-          setLoginLoading(false);
-        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      });
+      }
+    } catch (error) {
+      setMsgError('An error occurred')
+    } finally {
+      setTimeout(() => {
+        setLoginError(false)
+        setMsgError(null)
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
+    }
  };

-  const googleLogin = useGoogleLogin({
-    flow: "auth-code",
-    ux_mode: "redirect",
-    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-    onSuccess: async (codeResponse) => {
-      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
-    },
-    onError: (errorResponse) => console.log(errorResponse),
-  });
-
-  // In order to update the selected login type whenever the component renders
-  // useEffect(() => {
-      // Clear the loginType cookie if the user switches to loginfull
-      // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-  // }, []);
-
-  useLayoutEffect(()=>{ // checks the cookie in order to set the login type before components mounts
-    // if(document.cookie.includes("loginType=family")){
-    //   setLoginType('family')
-    // }else if(document.cookie.includes("loginType=full")){
-    //   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){ //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("");
-    setPassword("");
-  }, [loginType]);
-
  return (
    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
+      <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"
-              />
+          <div className='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
            </Link>
          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] 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="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
            <div className="w-full">
              <div className="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]">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
                  Sign In to WrenchBoard
-                </h1> */}
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  New Here?{" "}
-                  <Link
-                    to="/signup"
-                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                </h1>
+                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
+              </div>
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    value={email}
+                    inputHandler={handleEmail}
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    iconName="message"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    value={password}
+                    inputHandler={handlePassword}
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                    forgotPassword
+                  />
+                </div>
+                {/* <div className="forgot-password-area flex justify-between items-center mb-7">
+                <div className="remember-checkbox flex items-center space-x-2.5">
+                  <button
+                    onClick={rememberMe}
+                    type="button"
+                    className="w-5 h-5 text-dark-gray dark:text-white flex justify-center items-center border border-light-gray"
                  >
-                    Create an Account
-                  </Link>
-                </span>
-              </div>
-
-              {/* switch login component */}
-              <div className="ml-7 flex justify-start items-center gap-3">
-                <button
-                  name="full"
-                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='full' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                  onClick={handleLoginType}
-                >
-                  Sign in
-                </button>
-                <button
-                  name="family"
-                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='family' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                  onClick={handleLoginType}
-                >
-                  Family Account
-                </button>
-              </div>
-
-              {/* END  of switch login component */}
-
-              {/* for login component */}
-              {
-                loginType == 'full' ? (
-                  //user login component
-                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
-                    <div className="input-item mb-5">
-                      <InputCom
-                        labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
-                        value={email}
-                        inputHandler={handleEmail}
-                        placeholder="Your Email"
-                        label="Email"
-                        name="email"
-                        type="email"
-                        iconName="message"
-                      />
-                    </div>
-
-                    <div className="input-item mb-5">
-                      <InputCom
-                        labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
-                        value={password}
-                        inputHandler={handlePassword}
-                        placeholder="● ● ● ● ● ●"
-                        label="Password"
-                        name="password"
-                        type={showPassword ? "text" : "password"}
-                        onClick={togglePasswordVisibility}
-                        passIcon={showPassword ? "password" : "password"}
-                        forgotPassword
-                      />
-                    </div>
-                    {loginError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
-                        Invalid username or password- Please{" "}
-                        <Link to="/#" className="text-[#009ef7]">
-                          reset your password
-                        </Link>{" "}
-                        or{" "}
-                        <Link to="/signup" className="text-[#009ef7]">
-                          create a new account
-                        </Link>
-                      </div>
+                    {checked && (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-5 w-5"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
                    )}
-                    {msgError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                        {msgError}
-                      </div>
-                    )}
-                    <div className="signin-area mb-3.5">
-                      <div className="flex justify-center">
-                        <button
-                          name="full"
-                          onClick={doLogin}
-                          type="button"
-                          disabled={loginLoading}
-                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-                        >
-                          {loginLoading ? (
-                            <div className="signup btn-loader"></div>
-                          ) : (
-                            <>Continue</>
-                          )}
-                        </button>
-                      </div>
-                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                      <BrandBtn
-                        link="#"
-                        imgSrc={googleLogo}
-                        brand="Google"
-                        onClick={googleLogin}
-                      />
-                      <BrandBtn 
-                        // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`} 
-                        link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`} 
-                        imgSrc={appleLogo} 
-                        brand="Apple" 
-                        isAnchor={true}
-                      />
-                      </div>
-                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                      <BrandBtn
-                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
-                        imgSrc={facebookLogo}
-                        brand="Facebook"
-                        isAnchor={true}
-                      />
-                      <BrandBtn
-                        // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
-                        imgSrc={linkedInLogo}
-                        brand="LinkedIn"
-                        isAnchor={true}
-                      />
-                      </div>
-                    </div>
+                  </button>
+                  <span
+                    onClick={rememberMe}
+                    className="text-base text-dark-gray dark:text-white"
+                  >
+                    Remember Me
+                  </span>
+                </div>
+                <a href="/forgot-password" className="text-base text-purple">
+                  Forgot Password
+                </a>
+              </div> */}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
+                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
+                <div className="signin-area mb-3.5">
+                  <div className="flex justify-center">
+                    <button
+                      onClick={doLogin}
+                      type="button"
+                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
+                        }`}
+                    >
+                      {loginLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Continue</span>
+                      )}
+                    </button>
                  </div>
-                ) : (
-                  // END of user login compoenent
-                  // family login compoenent
-                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
-                    <div className="input-item mb-5">
-                      <InputCom
-                        labelClass="tracking-wider"
-                        fieldClass="px-6"
-                        value={email}
-                        inputHandler={handleEmail}
-                        placeholder="Account ID"
-                        label="Username"
-                        name="email"
-                        type="email"
-                        iconName="family-id"
-                      />
-                    </div>
-
-                    <div className="input-item mb-5">
-                      <InputCom
-                        labelClass="tracking-wider"
-                        fieldClass="px-6"
-                        value={password}
-                        inputHandler={handlePassword}
-                        placeholder="● ● ● ● ● ●"
-                        label="Pin"
-                        name="password"
-                        type={showPassword ? "text" : "password"}
-                        onClick={togglePasswordVisibility}
-                        passIcon={showPassword ? "family-pin" : "family-pin"}
-                      />
-                    </div>
-                    {loginError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
-                        Invalid username or password{" "}
-                        {/* <Link to="/#" className="text-[#009ef7]">
-                        reset your password
-                      </Link>{" "}
-                      or{" "}
-                      <Link to="/signup" className="text-[#009ef7]">
-                        create a new account
-                      </Link> */}
-                      </div>
-                    )}
-                    {msgError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                        {msgError}
-                      </div>
-                    )}
-                    <div className="signin-area mb-1.5">
-                      <div className="flex justify-center">
-                        <button
-                          name="family"
-                          onClick={doLogin}
-                          disabled={loginLoading}
-                          type="button"
-                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-                        >
-                          {loginLoading ? (
-                            <div className="signup btn-loader"></div>
-                          ) : (
-                            <>Continue</>
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                )
-                // END of family login compoenent
-              }
-              {/* END of login component */}
-
-              <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                This site is protected by hCaptcha and the our Privacy Policy
-                and Terms of Service apply.
+                  <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
+                  <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
+                  <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
+                </div>
+                {/* <div className="signup-area flex justify-center">
+                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
+                  Don't have an account ?
+                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
+                    Sign up free
+                  </a>
+                </p>
+              </div> */}
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
              </div>
            </div>
          </div>
@@ -435,54 +203,22 @@ export default function Login() {
  );
 }

-const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => {
-  // const doGoogle = async () => {
-  //   alert("start google");
-  // };
-
-  //  onSuccess: (codeResponse) => setUser(codeResponse),
-
-  // const doGoogle = useGoogleLogin({
-  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
-  //   onError: (error) => console.log('Login Failed:', error)
-  // });
-
-  // const doApple = async () => {
-  //   alert("start apple");
-  // };
-
-  // const doFacebook = async () => {
-  //   alert("start facebook");
-  // };
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand
+}) => {
  return (
-    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      {isAnchor ?
-      (
-        <a
+    <div className="flex justify-center bottomMargin">
+      <a
        href={link}
        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
      >
        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
+        <span className="text-lg text-thin-light-gray font-normal">
+          Sign In with {brand}
        </span>
      </a>
-      )
-      :
-      (
-        <button
-        onClick={onClick}
-        // href="#dd"
-        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
-      >
-        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
-        </span>
-      </button>
-      )
-    }
    </div>
  )
-};
-
+}
@@ -1,16 +1,15 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout";

 export default function SignUp() {
-  const [signUpLoading, setSignUpLoading] = useState(false);
+  const [signUpLoading, setSignUpLoading] = useState(false)
  const [checked, setValue] = useState(false);
  // for the catch error
-  const [msgError, setMsgError] = useState("");
+  const [msgError, setMsgError] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [countries, setCountries] = useState([]);

@@ -19,7 +18,7 @@ export default function SignUp() {
    first_name: "",
    last_name: "",
    email: "",
-    password: "",
+    password: ""
  });

  const handleInputChange = (event) => {
@@ -40,45 +39,31 @@ export default function SignUp() {
  const userApi = new usersService();

  // Get Country Api
-  const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
+  const getCountryList = async () => {
+    const res = await userApi.getSignupCountryData()

    try {
      if (res.status === 200) {
-        const { signup_country } = await res.data;
-        setCountries(signup_country);
-      } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
+        const { signup_country } = await res.data
+        setCountries(signup_country)
+      } else if (res.data.result != 100) {
+        setCountries('Nothing see here!')
      }
    } catch (error) {
-      throw new Error(error);
+      throw new Error(error)
    }
-  }, []);
+  }

  const handleSignUp = async () => {
-    let { country, first_name, last_name, email, password } = formData;
+    let { country, first_name, last_name, email, password } = formData
+
+    if (email == '' && password == '' && first_name == '') {
+      setMsgError('Please fill in fields')
+    }
+
    try {
-      if (
-        email !== "" &&
-        password !== "" &&
-        first_name !== "" &&
-        last_name !== "" &&
-        country !== ""
-      ) {
-        //checks if email is a valid email address
-        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-        if (regEx.test(email) == false) {
-          setMsgError("Invalid Email");
-          return setTimeout(()=>{setMsgError("");},3000)
-        }
-
-        //checks if terms and condition is checked
-        if (!checked) {
-          setMsgError("Terms and condition required");
-          return setTimeout(()=>{setMsgError("");},3000)
-        }
-
-        setSignUpLoading(true);
+      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+        setSignUpLoading(true)
        const reqData = {
          country: country,
          firstname: first_name,
@@ -87,198 +72,191 @@ export default function SignUp() {
          username: email,
          password: password,
          terms: 1,
-          news: 1,
-        };
+          news: 1
+        }

-        const res = await userApi.CreateUser(reqData);
+        const res = await userApi.CreateUser(reqData)

        if (res.status === 200) {
-          const { data } = res;
-          if (data && data.acc === "DULPICATE") {
-            setMsgError("Unable to use this username. Please try another username.");
-            setSignUpLoading(false);
+          const { data } = res
+          if (data.status == -1 && data.acc == 'DULPICATE') {
+            setMsgError('This account has been already created')
+            setSignUpLoading(false)
          }
-          if (data && data.status === "1") {
+          if (data && data.status == 1) {
            setTimeout(() => {
-              navigate("/outmessage", { replace: true });
-              setSignUpLoading(false);
-            }, 2000);
+              navigate("/verify-you", { replace: true });
+              setSignUpLoading(false)
+            }, 2000)
+          } else {
+            setSignUpLoading(false)
+
          }
        } else {
-          setSignUpLoading(false);
-          setMsgError("An error occurred");
+          setMsgError('This account does not exist')
+          setSignUpLoading(false)
        }
-      } else {
-        setMsgError("Please fill in fields");
      }
    } catch (error) {
-      throw new Error(error);
+      throw new Error(error)
+      setMsgError('An error occurred')
    } finally {
      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+        setMsgError(null)
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
    }
-  };
+  }

  useEffect(() => {
-    getCountryList();
-  }, []);
+    getCountryList()
+  }, [])

  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 relative shadow-md w-full lg:max-w-[530px] 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 mb-0">
-            <div>
-              <div className="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]">
-                  Create Account
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Already have an account?{" "}
-                  <Link
-                    to="/login"
-                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                  >
-                    Sign in here
+      <div className="layout-wrapper login">
+        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
+          <div className=" h-full">
+            <div className="flex-1 flex justify-center items-center">
+              <div className="w-full">
+                <div className='mb-12'>
+                  <Link to='#'>
+                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
                  </Link>
-                </span>
-              </div>
-              <div className="w-full flex items-center gap-2">
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
-                  OR
-                </span>
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-              </div>
-              <div className="input-area">
-                <SelectOption
-                  label="Country"
-                  data={countries}
-                  name="country"
-                  value={formData.country}
-                  inputHandler={handleInputChange}
-                />
-                <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-                  <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      placeholder="Firstname"
-                      label="First Name"
-                      name="first_name"
-                      type="text"
-                      value={formData.first_name}
-                      inputHandler={handleInputChange}
-                    />
-                  </div>
-                  <div className="input-item flex-1">
-                    <InputCom
-                      fieldClass="px-6"
-                      placeholder="Lastname"
-                      label="Last Name"
-                      name="last_name"
-                      type="text"
-                      value={formData.last_name}
-                      inputHandler={handleInputChange}
-                    />
-                  </div>
                </div>
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="support@mermsemr.com"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    inputHandler={handleInputChange}
-                  />
-                </div>
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    name="password"
-                    type={showPassword ? "text" : "password"}
-                    onClick={togglePasswordVisibility}
-                    passIcon={
-                      showPassword ? "show-password" : "hide-password"
-                    }
-                    value={formData.password}
-                    inputHandler={handleInputChange}
-                  />
-                </div>
-                {msgError && (
-                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
-                    {msgError}
-                  </div>
-                )}
-                <div className="forgot-password-area flex justify-between items-center mb-6">
-                  <div className="remember-checkbox flex items-center space-x-2.5">
+                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] 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 mb-7">
+                  <div>
+                    <div className="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" style={{
+                        fontSize: 'calc(1rem + .6vw)'
+                      }}>
+                        Create Account
+                      </h1>
+                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
+                    </div>
                    <button
-                      onClick={rememberMe}
                      type="button"
-                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
                    >
-                      {checked && (
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clipRule="evenodd"
+                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
+                      Sign in with Facebook
+                    </button>
+                    <div className="w-full flex items-center gap-2">
+                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
+                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                    </div>
+                    <div className="input-area">
+                      <SelectOption
+                        label='Country'
+                        data={countries}
+                        name="country"
+                        value={formData.country}
+                        inputHandler={handleInputChange}
+                      />
+                      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+                        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+                          <InputCom
+                            placeholder="Firstname"
+                            label="First Name"
+                            name="first_name"
+                            type="text"
+                            value={formData.first_name}
+                            inputHandler={handleInputChange}
                          />
-                        </svg>
-                      )}
-                    </button>
-                    <span
-                      onClick={rememberMe}
-                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
-                    >
-                      I agree with all
-                      <Link
-                        href="#"
-                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
-                      >
-                        terms and condition
-                      </Link>
-                    </span>
-                  </div>
-                </div>
-                <div className="signin-area mb-1">
-                  <div className="flex justify-center">
-                    <button
-                      type="button"
-                      onClick={handleSignUp}
-                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
-                    >
-                      {signUpLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Sign Up</span>
-                      )}
-                    </button>
+                        </div>
+                        <div className="input-item flex-1">
+                          <InputCom
+                            placeholder="Lastname"
+                            label="Last Name"
+                            name="last_name"
+                            type="text"
+                            value={formData.last_name}
+                            inputHandler={handleInputChange}
+                          />
+                        </div>
+                      </div>
+                      <div className="input-item mb-5">
+                        <InputCom
+                          placeholder="support@mermsemr.com"
+                          label="Email"
+                          name="email"
+                          type="email"
+                          value={formData.email}
+                          inputHandler={handleInputChange}
+                        />
+                      </div>
+                      <div className="input-item mb-5">
+                        <InputCom
+                          placeholder="● ● ● ● ● ●"
+                          label="Password"
+                          name="password"
+                          type={showPassword ? 'text' : 'password'}
+                          onClick={togglePasswordVisibility}
+                          passIcon={showPassword ? "show-password" : "hide-password"}
+                          value={formData.password}
+                          inputHandler={handleInputChange}
+                        />
+                      </div>
+                      {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
+                      <div className="forgot-password-area flex justify-between items-center mb-6">
+                        <div className="remember-checkbox flex items-center space-x-2.5">
+                          <button
+                            onClick={rememberMe}
+                            type="button"
+                            className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                          >
+                            {checked && (
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                className="h-5 w-5"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            )}
+                          </button>
+                          <span
+                            onClick={rememberMe}
+                            className="text-base cursor-default text-dark-gray dark:text-white"
+                          >
+                            I agree with all
+                            <a
+                              href="#"
+                              className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                            >
+                              terms and condition
+                            </a>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="signin-area mb-1">
+                        <div className="flex justify-center">
+                          <button
+                            type="button"
+                            onClick={handleSignUp}
+                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem]`}
+                          >
+                            {signUpLoading ? (
+                              <div className="signup btn-loader"></div>
+                            ) : (
+                              <span>Sign Up</span>
+                            )}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
-      </AuthLayout>
+      </div>
    </>
  );
 }
@@ -288,35 +266,26 @@ const SelectOption = ({
  name,
  inputHandler,
  value,
-  data, // passing the data from parent
+  data // passing the data from parent 
 }) => {
  return (
    <div className="input-com mb-7">
      <div className="flex items-center justify-between">
        <label
-          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
          htmlFor={name}
        >
          {label}
        </label>
      </div>
      <div>
-        <select
-          name={name}
-          id={name}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
-          onChange={inputHandler}
-          value={value}
-        >
+        <select name={name} id={name} className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent " onChange={inputHandler} value={value}>
          <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
-            data?.map((item, idx) => (
-              <option value={item[0]} key={idx}>
-                {item[1]}
-              </option>
-            ))}
+          {data?.length > 0 && data?.map((item, idx) => (
+            <option value={item[0]} key={idx}>{item[1]}</option>
+          ))}
        </select>
      </div>
    </div>
-  );
-};
+  )
+}
@@ -16,7 +16,9 @@ export default function UpdatePassword() {

  return (
    <>
-      <AuthLayout slogan="Welcome to  myFit">
+      <AuthLayout
+        slogan="Welcome to  myFit"
+      >
        {updated === false ? (
          <div className="content-wrapper update-password-section xl:bg-white dark:bg-dark-white   w-full 2xl:h-[818px] xl:h-[600px] sm:w-auto sm:px-[70px] px-5 2xl:px-[100px] rounded-xl flex flex-col justify-center">
            <div>
@@ -32,7 +34,6 @@ export default function UpdatePassword() {
              <div className="input-area">
                <div className="input-item mb-5">
                  <InputCom
-                    fieldClass="px-6"
                    placeholder="*********"
                    label="Old Password"
                    name="password"
@@ -42,7 +43,6 @@ export default function UpdatePassword() {
                </div>
                <div className="input-item mb-5">
                  <InputCom
-                    fieldClass="px-6"
                    placeholder="*********"
                    label="New Password"
                    name="password"
@@ -52,7 +52,6 @@ export default function UpdatePassword() {
                </div>
                <div className="input-item mb-5">
                  <InputCom
-                    fieldClass="px-6"
                    placeholder="*********"
                    label="Re-enter Password"
                    name="password"
@@ -42,8 +42,8 @@ export default function CollectionTab({ className, products }) {
            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <CollectionCard key={datas.uniqKey} collectionData={datas} />
@@ -42,9 +42,7 @@ export default function CreateSaleSlider({
      {/* heading */}
      <div className="flex justify-between items-center mb-6">
        <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-            Create for Sell
-          </h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Sell</h1>
        </div>
        <div className="slider-btns flex space-x-4">
          <button onClick={nextHandler} type="button">
@@ -91,7 +89,7 @@ export default function CreateSaleSlider({
      <div className="trending-products relative w-full">
        <SliderCom selector={trendingSlider} settings={settings}>
          {products &&
-            products?.length > 0 &&
+            products.length > 0 &&
            products.map((item) => (
              <ProductCardStyleTwo
                key={item.id}
@@ -49,9 +49,7 @@ export default function CreatedBidsSlider({
      {/* heading */}
      <div className="flex justify-between items-center mb-6">
        <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-            Create for Bits
-          </h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Bits</h1>
        </div>
        <div className="slider-btns flex space-x-4">
          <button onClick={nextHandler} type="button">
@@ -98,7 +96,7 @@ export default function CreatedBidsSlider({
      <div className="trending-products relative w-full">
        <SliderCom selector={trendingSlider} settings={settings}>
          {products &&
-            products?.length > 0 &&
+            products.length > 0 &&
            products.map((item) => (
              <ProductCardStyleOne
                key={item.id}
@@ -42,8 +42,8 @@ export default function OnSaleTab({ className, products }) {
            <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <ProductCardStyleTwo key={datas.id} datas={datas} />
@@ -42,8 +42,8 @@ export default function OwnTab({ className, products }) {
            <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
              <DataIteration
                datas={products}
-                startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products?.length}
+                startLength={0}
+                endLength={products.length}
              >
                {({ datas }) => (
                  <ProductCardStyleOne key={datas.id} datas={datas} />
@@ -1,185 +1,97 @@
-import { useCallback, useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
-import debounce from "../../../hooks/debounce";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
+import { useEffect, useState, useCallback } from "react";
+import { useLocation, Link, useNavigate } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import usersService from "../../../services/UsersService";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"

 export default function VerifyLink() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [msgError, setMsgError] = useState("");
-  const [linkLoader, setLinkLoader] = useState(false);
-  const [pageLoader, setPageLoader] = useState(true);
-  const [linkSuccess, setLinkSuccess] = useState(true);
-  const navigate = useNavigate();
+  const [pageLoader, setPageLoader] = useState(true)
+  const [linkSuccess, setLinkSuccess] = useState(false)
+  const [linkError, setLinkError] = useState(false)
+  const navigate = useNavigate()
  const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search);
-  const token = queryParams.get("vlnk");
-  const userApi = new usersService();
+  const queryParams = new URLSearchParams(location?.search)
+  const token = queryParams.get('vlink')

-  // email
-  const handleEmail = (e) => {
-    setEmail(e.target.value);
-  };
-  // password
-  const handlePassword = (e) => {
-    setPassword(e.target.value);
-  };
+  const verifyEmail = useCallback(
+    async (code) => {
+      const userApi = new usersService()

-  // if verification is okay. set a complete signup form
-  const completeSignup = async () => {
-    try {
-      if (email !== "" && password !== "") {
-        setLinkLoader(true);
-        var postData = {
-          username: email,
-          password: password,
-          login_mode: 100,
-          sessionid: "STARTER-NOTREAL",
-          verify_link: token,
-          action: 11012,
-        };
-        const res = await userApi?.CompleteSignUp(postData);
+      try {
+        const verifyRes = await userApi.verifyEmail(code)
+        console.log(verifyRes)
+        if (verifyRes.status === 200) {
+          let { data } = verifyRes

-        if (res.status === 200) {
-          const { data } = res;
-          if (
-            data?.status > 0 &&
-            data?.internal_return == 100 &&
-            data?.session != ""
-          ) {
-            localStorage.setItem("email", `${data?.email}`);
-            localStorage.setItem("member_id", `${data?.member_id}`);
-            localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("session", `${data?.session}`);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
+          if (data && data.internal_return === 0 && data.status_text == 'Link Verfied') {
+            setPageLoader(false)
+            setLinkSuccess(true)
          } else {
-            setLinkLoader(false);
-            setMsgError("Invalid Link or Password Combination");
+            setPageLoader(false)
+            setLinkError(true)
          }
-        } else {
-          setLinkLoader(false);
-          setLinkSuccess(false);
-          setMsgError("An error occurred");
        }
-      } else {
-        setMsgError("Please fill in fields");
+      } catch (error) {
+        console.log(error)
+        setPageLoader(false)
+        setLinkError(true)
+        throw new Error(error)
      }
-    } catch (error) {
-      setLinkLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
-
-  // for verifying the incoming verification link and render the correct component
-  const verifyEmail = useCallback(async (code) => {
-    try {
-      const verifyRes = await userApi.verifyEmail(code);
-      if (verifyRes.status === 200) {
-        let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
-        if (
-          data &&
-          data.internal_return >= 0 && 
-          data.status == 0 && 
-          data.pending_id != '' && 
-          data.pending_uid != '' && 
-          data.username != '' &&
-          data.status_text === "Link Verified"
-        ) {
-          setPageLoader(false);
-        } else {
-          setPageLoader(false);
-          setLinkSuccess(false);
-        }
-      }
-    } catch (error) {
-      setPageLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    }
-  }, []);
-
-  // delay verify requests by 10000ms
-  const debouncedEmail = debounce(verifyEmail, 1000);
+    }, [linkSuccess, linkError]
+  )

  useEffect(() => {
-    debouncedEmail(token);
-  }, []);
+    verifyEmail(token)
+  }, [])
+
+  console.log(token)

  return (
    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
        {pageLoader ? (
          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
        ) : (
          <div className="w-full">
-            <div className="mb-12">
-              <Link to="#">
-                <img
-                  src={WrenchBoard}
-                  alt="wrenchboard"
-                  className="h-10 mx-auto"
-                />
+            <div className='mb-12'>
+              <Link to='#'>
+                <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
              </Link>
            </div>
            <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
              <div className="w-full">
                <div className="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]">
-                    {linkSuccess
-                      ? "Sign In to WrenchBoard"
-                      : "Invalid verification link"}
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                    fontSize: 'calc(1rem + .6vw)'
+                  }}>
+                    {linkError && 'Invalid verification link'}
+                    {linkSuccess && 'Sign In to WrenchBoard'}
                  </h1>
                </div>
                {/* If the verification was a success */}
-                {linkSuccess ? (
-                  <SuccessfulComponent
-                    email={email}
-                    password={password}
-                    handleEmail={handleEmail}
-                    handlePassword={handlePassword}
-                    onSubmit={completeSignup}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                  />
-                ) : (
-                  <ErrorComponent onClick={() => navigate("/login")} />
-                )}
+                {linkSuccess && <SuccessfulComponent />}
+
+                {/* If the verification was unsuccessful */}
+                {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
              </div>
            </div>
          </div>
        )}
      </AuthLayout>
    </>
-  );
+  )
 }

-const SuccessfulComponent = ({
-  onSubmit,
-  password,
-  handlePassword,
-  email,
-  handleEmail,
-  msgErr,
-  loader,
-}) => (
+const SuccessfulComponent = ({ onClick }) => (
  <div className="input-area">
    {/* INPUT */}
    <div className="mb-5">
      <InputCom
-        fieldClass="px-6"
-        value={email}
-        inputHandler={handleEmail}
+        // value={password}
+        // inputHandler={handlePassword}
        placeholder="support@mermsemr.com"
        label="Email"
        name="email"
@@ -189,9 +101,8 @@ const SuccessfulComponent = ({
    </div>
    <div className="mb-5">
      <InputCom
-        fieldClass="px-6"
-        value={password}
-        inputHandler={handlePassword}
+        // value={password}
+        // inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
        label="Password"
        name="password"
@@ -199,34 +110,23 @@ const SuccessfulComponent = ({
        iconName="password"
      />
    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
-      </div>
-    )}
    <div className="signin-area mb-3.5">
      <button
-        onClick={onSubmit}
+        onClick={onClick}
        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center $`}
      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
+        <span>Continue</span>
      </button>
    </div>
  </div>
-);
+)

 const ErrorComponent = ({ onClick }) => (
  <div className="input-area">
    <div className="my-5">
      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already verified this link or the
-        link has expired. Try login or reset password. If none worked, try to
-        create the account from the start.
+        This error occurs because you have already verified this link or the link has expired. Try login or reset password. If none worked, try to create the account from the start.
      </p>
    </div>

@@ -234,10 +134,10 @@ const ErrorComponent = ({ onClick }) => (
      <button
        onClick={onClick}
        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+        className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
      >
        <span>Return Home</span>
      </button>
    </div>
  </div>
-);
+)
@@ -1,233 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout";
-
-const VerifyPassword = () => {
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [msgError, setMsgError] = useState("");
-  const [linkLoader, setLinkLoader] = useState(false);
-  const [linkSuccess, setLinkSuccess] = useState(true);
-  const [showPassword, setShowPassword] = useState(false);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search);
-  const token = queryParams.get("passlink");
-  const userApi = new usersService();
-
-  // To Show and Hide Password
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
-  // little checker for the validity of the token
-  if (token?.length != 64) {
-    setLinkSuccess(false);
-  }
-
-  // Password
-  const handlePassword = (e) => {
-    let { name, value } = e?.target;
-    if (name == "password") setPassword(value);
-    if (name == "confirm_password") setConfirmPassword(value);
-  };
-
-  const completeReset = async () => {
-    try {
-      if (password !== "" && confirmPassword !== "") {
-        if (password === confirmPassword) {
-          setLinkLoader(true);
-          var reqData = {
-            sessionid: "DUMMY-CANNOT_BE_EMPTY",
-            reset_link: token,
-            newpass: password,
-            step: 300,
-            action: 730,
-          };
-
-          const res = await userApi?.CompleteResetPassword(reqData);
-
-          if (res.status === 200) {
-            const { data } = res;
-
-            if (data?.status > 0 && data?.email) {
-              setTimeout(() => {
-                navigate("/login", { replace: true });
-                setLinkLoader(false);
-              }, 2000);
-            } else if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
-            } else {
-              setLinkLoader(false);
-              setMsgError("An error occurred");
-            }
-          } else {
-            setLinkLoader(false);
-            setLinkSuccess(false);
-          }
-        } else {
-          setLinkLoader(false);
-          setMsgError("Passwords does not match");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
-    } catch (error) {
-      setLinkLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
-            <div className="w-full">
-              <div className="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]">
-                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
-                </h1>
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Enter a new password to reset
-                  </span>
-                )}
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    We'll send an email to confirm reset
-                  </span>
-                )}
-              </div>
-              {/* If the verification was a success */}
-              {linkSuccess ? (
-                <SuccessfulComponent
-                  password={password}
-                  confirmPassword={confirmPassword}
-                  handlePassword={handlePassword}
-                  onSubmit={completeReset}
-                  msgErr={msgError}
-                  loader={linkLoader}
-                  showPassword={showPassword}
-                  onClick={togglePasswordVisibility}
-                  navigateHandler={() => navigate("/login")}
-                />
-              ) : (
-                <ErrorComponent onClick={() => navigate("/login")} />
-              )}
-            </div>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-};
-
-export default VerifyPassword;
-
-const SuccessfulComponent = ({
-  onSubmit,
-  navigateHandler,
-  showPassword,
-  onClick,
-  password,
-  confirmPassword,
-  handlePassword,
-  msgErr,
-  loader,
-}) => (
-  <div className="input-area">
-    {/* INPUT */}
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={password}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Password"
-        name="password"
-        type={showPassword ? "text" : "password"}
-        onClick={onClick}
-        passIcon={showPassword ? "show-password" : "hide-password"}
-      />
-    </div>
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={confirmPassword}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Confirm Password"
-        name="confirm_password"
-        type="password"
-      />
-    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
-      </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
-    </div>
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={navigateHandler}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);
-
-const ErrorComponent = ({ onClick }) => (
-  <div className="input-area">
-    <div className="my-5">
-      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already used this link or the link
-        has broken/expired. Start with the reset process again. If it doesn't
-        work, try to create the account from the start.
-      </p>
-    </div>
-
-    <div className="signin-area flex justify-center mb-3.5">
-      <button
-        onClick={onClick}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);
@@ -1,59 +1,31 @@
-import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import InputCom from "../../Helpers/Inputs/InputCom";

 export default function VerifyYou() {
-  const navigate = useNavigate();
  return (
    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
-            <div className="w-full">
-              <div className="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]">
-                  Let's verify your email now
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Check your email.
-                </span>
+      <AuthLayout
+        slogan="Welcome to WrenchBoard"
+      >
+        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center sm:p-7 p-5">
+          <div className="w-full">
+            <div className="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" style={{
+                fontSize: 'calc(1rem + .6vw)'
+              }}>
+                Verification Sent
+              </h1>
+            </div>
+            <div className="input-area">
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
+                </p>
              </div>
-              <div className="input-area">
-                <div className="mb-5">
-                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
-                  </p>
-                </div>
-                <div className="mb-5">
-                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
-                  </p>
-                </div>
-              </div>
-              <div className="signin-area flex justify-center mb-3.5">
-                <button
-                  onClick={() => navigate("/")}
-                  type="button"
-                  className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-                >
-                  <span>Return Home</span>
-                </button>
+              <div className="mb-5">
+                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
+                </p>
              </div>
            </div>
          </div>
@@ -1,40 +0,0 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import Layout from "../Partials/Layout";
-import CommonHead from "../UserHeader/CommonHead";
-
-export default function BlogItem(props) {
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
-    return (
-        <Layout>
-            <CommonHead
-                commonHeadData={props.commonHeadData}
-            />
-            <div className="notification-page w-full mb-10">
-                <div className="notification-wrapper w-full">
-                    {/* heading */}
-                    <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Title of this Blog Items
-                </span>
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-
-                        </div>
-                    </div>
-                   <div>
-                       Blog Items Details need implenet
-                   </div>
-                </div>
-            </div>
-        </Layout>
-    );
-}
@@ -1,222 +1,127 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
-import usersService from "../../services/UsersService";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";

 export default function AvailableJobsCard({
-  className,
-  datas,
-  hidden = false,
-  contentDisplay,
-}) {
-  //debugger;
-  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
-  const [imageUrl, setImageUrl] = useState("");
-
-  let thePrice = PriceFormatter(
-    datas?.price * 0.01,
-    datas?.currency_code,
-    datas?.currency
-  );
-
-  useEffect(() => {
-    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-    setImageUrl(imagePath);
-  }, []);
-  return (
-    <>
-      {contentDisplay == "grid" ? (
+                                           className,
+                                           datas,
+                                           hidden = false,
+                                       }) {
+    //debugger;
+    const [addFavorite, setValue] = useState(datas.whishlisted);
+    const [options, setOption] = useState(false);
+    const favoriteHandler = () => {
+        if (!addFavorite) {
+            setValue(true);
+            toast.success("Added to Favorite List");
+        } else {
+            setValue(false);
+            toast.warn("Remove to Favorite List");
+        }
+    };
+    return (
        <div
-          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-            className || ""
-          }`}
+            className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+                className || ""
+            }`}
        >
-          <div
-            onClick={() => {
-              setMarketPopUp({ show: true, data: datas });
-            }}
-            className="flex flex-col justify-between w-full h-full"
-          >
-            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-              {datas.title}
-            </h1>
+            <div className="flex flex-col justify-between w-full h-full">
+                <Link to="/shop-details" className="mb-2.5">
+                    <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                        {datas.title}
+                    </h1>
+                </Link>

-            <div className="card-two-info flex justify-between items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">
-                    Added
-                  </p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
-                  </p>
+                <div className="card-two-info flex justify-between items-center">
+                    <div className="owned-by flex space-x-2 items-center">
+                        <div>
+                            <p className="text-thin-light-gray text-sm leading-3">Added</p>
+                            <p className="text-base   text-dark-gray dark:text-white">
+                                {datas.offer_added}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+                    <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                        <div>
+                            <p className="text-thin-light-gray text-sm leading-3 text-right">
+                                Expires
+                            </p>
+                            <p className="text-base text-dark-gray dark:text-white text-right">
+                                {datas.expire}
+                            </p>
+                        </div>
+                    </div>
                </div>
-              </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="thumbnail-area w-full">
-              <div
-                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
-                style={{
-                  backgroundImage: `url('${imageUrl}')`,
-                }}
-              >
-                <div className="flex justify-center">{datas.description}</div>
-              </div>
-            </div>
-            <div className="details-area">
-              <div className="product-two-options flex justify-between mb-5 relative">
-                {/*      <div className="status">*/}
-                {/*          {datas.isActive && (*/}
-                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-                {/*  Active*/}
-                {/*</span>*/}
-                {/*          )}*/}
-                {/*      </div>*/}
+                <div className="thumbnail-area w-full">
+                    <div
+                        className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+                        style={{
+                            background: `url(${localImgLoad(
+                                `images/${datas.thumbnil}`
+                            )}) 0% 0% / cover no-repeat`,
+                        }}
+                    >
+                        <div className="flex justify-center">
+                            {datas.description}
+                        </div>

-                {/*<div className=" review flex space-x-2">*/}
-                {/*    <button*/}
-                {/*        onClick={favoriteHandler}*/}
-                {/*        type="button"*/}
-                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-                {/*        }`}*/}
-                {/*    >*/}
-                {/*        <Icons name="star" />*/}
-                {/*    </button>*/}
-                {/*</div>*/}
-              </div>

-              <div className="flex justify-between">
-                <div className="flex items-center space-x-2">
-                  <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                      {/* {thePrice} | {datas.timeline_days} day(s) */}
-                      {thePrice}
-                    </p>
-                    <p className="text-sm text-lighter-gray">
-                      ( {datas.offer_code}) |
-                      <span className="italic ml-1">
-                        {datas.timeline_days} day(s)
-                      </span>
-                    </p>
-                  </div>
+
+
+
+                    </div>
+
                </div>
-                <div>
-                  <button
-                    type="button"
-                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                    onClick={() => {
-                      setMarketPopUp({ show: true, data: datas });
-                    }}
-                  >
-                    View
-                  </button>
+                <div className="details-area">
+                    <div className="product-two-options flex justify-between mb-5 relative">
+
+                        {/*      <div className="status">*/}
+                        {/*          {datas.isActive && (*/}
+                        {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                        {/*  Active*/}
+                        {/*</span>*/}
+                        {/*          )}*/}
+                        {/*      </div>*/}
+
+
+                        {/*<div className=" review flex space-x-2">*/}
+                        {/*    <button*/}
+                        {/*        onClick={favoriteHandler}*/}
+                        {/*        type="button"*/}
+                        {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                        {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                        {/*        }`}*/}
+                        {/*    >*/}
+                        {/*        <Icons name="star" />*/}
+                        {/*    </button>*/}
+                        {/*</div>*/}
+                    </div>
+
+                    <div className="flex justify-between">
+                        <div className="flex items-center space-x-2">
+                            <div>
+                                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                                    {datas.price*0.01}{datas.currency} | {datas.timeline_days} day(s)
+                                </p>
+                                <p className="text-sm text-lighter-gray">
+                                    ( {datas.offer_code})
+                                </p>
+                            </div>
+                        </div>
+                        <div>
+                            <button
+                                type="button"
+                                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                            >
+                                View
+                            </button>
+                        </div>
+                    </div>
                </div>
-              </div>
            </div>
-          </div>
        </div>
-      ) : (
-        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
-          <div className="flex gap-5 items-center w-full">
-            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-              <img src={dataImage2} alt="data" className="w-full h-full" />
-            </div>
-            <div className="flex flex-col flex-[0.9]">
-              <h1
-                onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
-                }}
-                className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
-              >
-                {datas?.title}
-              </h1>
-
-              <div
-                onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
-                }}
-                className="my-2"
-              >
-                <p className="text-dark-gray dark:text-white">
-                  {datas?.description}
-                </p>
-              </div>
-
-              {/* <div className="card-two-info flex gap-2 items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
-                  </p>
-                </div>
-              </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
-                  </p>
-                </div>
-              </div>
-            </div> */}
-              <div className="block sm:flex flex-wrap gap-4">
-                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
-                  Price: <span className="text-purple">{thePrice}</span>
-                </p>
-                <p className="text-sm text-thin-light-gray">
-                  Duration:{" "}
-                  <span className="text-purple italic">
-                    {" "}
-                    {datas?.timeline_days} day(s)
-                  </span>
-                </p>
-                <p className="text-sm text-thin-light-gray">
-                  Code:{" "}
-                  <span className="text-purple"> {datas?.offer_code}</span>
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="">
-            <button
-              type="button"
-              className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-              onClick={() => {
-                setMarketPopUp({ show: true, data: datas });
-              }}
-            >
-              View
-            </button>
-          </div>
-        </div>
-      )}
-      {marketPopUp.show && (
-        <MarketPopUp
-          details={datas}
-          onClose={() => {
-            setMarketPopUp({ show: false, data: {} });
-          }}
-          situation={marketPopUp.show}
-        />
-      )}
-    </>
-  );
+    );
 }
@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { toast } from "react-toastify";
-import localImgLoad from "../../lib/localImgLoad";
-import CountDown from "../Helpers/CountDown";
-import Icons from "../Helpers/Icons";
-
-export default function FamilyActiveJobsCard({ datas, hidden = false }) {
-
-    let { pathname } = useLocation();
-
-    const [imageUrl, setImageUrl] = useState("");
-    const [addFavorite, setValue] = useState(false);
-    const [options, setOption] = useState(false);
-    const favoriteHandler = () => {
-        if (!addFavorite) {
-            setValue(true);
-            toast.success("Added to Favorite List");
-        } else {
-            setValue(false);
-            toast.warn("Remove to Favorite List");
-        }
-    };
-//debugger;
-    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
-    return (
-        <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
-            <div className="content">
-                {/* thumbnail */}
-                <div className="w-full h-40">
-                    {/* thumbnail image */}
-                    <div
-                        className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
-                        style={{
-                            background: `url(${localImgLoad(
-                                `images/taskbanners/${bannerName}`
-                            )}) center / contain no-repeat`,
-                        }}
-                    >
-              {/*          <div className="product-options flex justify-between relative">*/}
-              {/*<span*/}
-              {/*    onClick={favoriteHandler}*/}
-              {/*    className={`w-7 h-7 bg-white   rounded-full flex justify-center items-center  cursor-pointer ${*/}
-              {/*        addFavorite ? "text-pink" : "  text-dark-gray"*/}
-              {/*    }`}*/}
-              {/*>*/}
-              {/*  <Icons name="love" />*/}
-              {/*</span>*/}
-              {/*              <span*/}
-              {/*                  onClick={() => setOption(!options)}*/}
-              {/*                  className="w-7 h-7 flex justify-center items-center bg-white  rounded-full cursor-pointer"*/}
-              {/*              >*/}
-              {/*  <Icons name="dots" />*/}
-              {/*</span>*/}
-              {/*              {options && (*/}
-              {/*                  <div*/}
-              {/*                      onClick={() => setOption(!options)}*/}
-              {/*                      className="w-full h-screen fixed top-0 left-0 z-10"*/}
-              {/*                  ></div>*/}
-              {/*              )}*/}
-              {/*              <div*/}
-              {/*                  style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}*/}
-              {/*                  className={`drop-down-content w-[80px] bg-white dark:bg-dark-white   rounded-[4px] p-2.5 absolute right-0 top-[100%] z-20 ${*/}
-              {/*                      options ? "active" : ""*/}
-              {/*                  }`}*/}
-              {/*              >*/}
-
-              {/*              </div>*/}
-              {/*          </div>*/}
-                        {hidden && (
-                            <div className="flex justify-center">
-
-                            </div>
-                        )}
-                    </div>
-                </div>
-                {/* details */}
-                <div className="details">
-                    {/* product title */}
-                    <Link
-                        to="/manage-active-job"
-                        state={{ ...datas, pathname }}
-                        className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
-                    >
-                        {datas.title}
-                    </Link>
-                    {/* countdown */}
-                    <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Task Code
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                {datas.contract}
-                            </p>
-                        </div>
-                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Remaining Time
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                <CountDown lastDate={datas.delivery_date} />
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="card-buttons flex justify-end items-center space-x-2">
-                <Link
-                    to="/manage-active-job"
-                    state={{ ...datas, pathname }}
-                    className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
-                >
-                    View
-                </Link>
-            </div>
-        </div>
-    );
-}
@@ -1,78 +0,0 @@
-import { useState } from "react";
-import SuggestTask from "../FamilyPopup/SuggestTask";
-
-export default function FamilyMarketCard({ className, datas, hidden = false }) {
-  // debugger;
-  const [popUp, setPopUp] = useState(false);
-  const popUpHandler = () => {
-    setPopUp((prev) => !prev);
-  };
-  //   Image
-  let selectedImage = require(`../../assets/images/family/${
-    datas.banner || "default.jpg"
-  }`);
-
-  return (
-    <>
-      <div
-        className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-          className || ""
-        }`}
-        key={datas?.uid}
-      >
-        <div className="flex flex-col justify-between w-full h-full">
-          <div className="thumbnail-area w-full">
-            <div
-              className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
-              onClick={popUpHandler}
-              style={{
-                // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
-                background: `url(${selectedImage}) center / contain no-repeat`,
-              }}
-            >
-              <div className="product-two-options flex justify-between mb-5 relative">
-                <div className="status">
-                  {/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
-                    Active
-                  </span> */}
-                </div>
-              </div>
-              {hidden && <div className="flex justify-center"></div>}
-            </div>
-          </div>
-          <div className="details-area mt-12 flex justify-between items-center gap-2">
-            {/* title */}
-            <button onClick={popUpHandler}>
-              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                {datas?.title}
-              </h1>
-            </button>
-            <div className="flex justify-between">
-              {/* <div className="flex items-center space-x-2">
-                <p className="italic text-gray-400">
-                  {getTimeAgo(datas?.added)}
-                </p>
-              </div> */}
-              <div>
-                <button
-                  type="button"
-                  onClick={popUpHandler}
-                  className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                >
-                  View
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {popUp && (
-        <SuggestTask
-          onClose={popUpHandler}
-          situation={popUp}
-          details={{ ...datas, selectedImage }}
-        />
-      )}
-    </>
-  );
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ebube	2b257a6db6	Merge branch 'master' of into implement-sign-up-page	2023-04-26 23:58:27 +01:00
Ebube	1407cb9769	little fixes to auth pages	2023-04-26 23:55:17 +01:00
Ebube	6c68c2361c	adding verification	2023-04-26 13:09:57 +01:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Logout"><path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" fill="#e07c8a" class="color000000 svgShape"></path></svg>`