Users-Wrench/src/components/AuthPages/AuthLayout2.jsx

import React, { lazy } from "react";
import { Link } from "react-router-dom";
import { localImgLoad } from "../../lib";

export default function LoginLayout({ slogan, children }) {
  const bgImg = localImgLoad('images/left-wrenchboard.jpg')

  return (
    <div className={`layout-wrapper login`}>
      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
        <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 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}
            </div>
            <div className="w-full flex flex-col justify-center items-center px-10">
              <div className="w-full flex justify-center items-center pt-5">
                <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>
              <p className="py-1 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>
    </div>
  );
}