added background based on country

src/components/AuthPages/AuthLayout2.jsx

@@ -1,19 +1,27 @@
-import React, { lazy } from "react";
+import React, { lazy, useContext } from "react";
 import { Link } from "react-router-dom";
 import { localImgLoad } from "../../lib";
 
+import DarkModeContext from "../Contexts/DarkModeContext";
+
 export default function LoginLayout({ slogan, children }) {
   const bgImg = localImgLoad('images/left-wrenchboard.jpg')
+  const bgImgNig = localImgLoad('images/wrench-home-back-nigeria.jpg')
+  const bgImgCom = localImgLoad('images/wrench-home-back-common.jpg')
+
+  const {countryMode} = useContext(DarkModeContext);
 
   return (
     <div className={`layout-wrapper login`}>
-      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
-        <div 
+      <div className={`w-full h-screen overflow-y-auto grid grid-cols-1 lg:grid-cols-2 bg-cover bg-center`} 
+        style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}}
+      >
+        {/* <div 
             className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
-        </div>
-        <div className="p-5 sm:p-7 flex place-content-center">
+        </div> */}
+        <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
           <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}