Modified pathlink

src/components/Footer/Footer.tsx

@@ -5,8 +5,8 @@ export default function Footer() {
   const date = new Date().getFullYear();
 
   return (
-    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
-      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
+    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
+      <div className="containerMode flex justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
           {date} @ First City Monument Bank Limited
         </p>

src/components/GetStarted/ApplicantsAttestation.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import CreditAccount from "./CreditAccount";
 import DebitAccount from "./DebitAccount";
 
 const ApplicantsAttestation: React.FC = () => {
@@ -20,6 +21,7 @@ const ApplicantsAttestation: React.FC = () => {
           </p>
         </div>
       </div>
+      <CreditAccount />
       <DebitAccount />
     </>
   );

src/components/GetStarted/BasicInfo.tsx

@@ -32,7 +32,7 @@ const BasicInfo: React.FC<BasicInfoProps> = ({
   setInputValues,
   handleNextStep,
 }) => {
-  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(false);
+  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.FormEvent<HTMLInputElement>) => {

src/components/GetStarted/DebitAccount.tsx

@@ -1,90 +1,67 @@
 import React from "react";
-import {useNavigate} from 'react-router-dom'
 import { Button, InputCompOne } from "..";
-import { RouteHandler } from "../../router/routes";
 
 const DebitAccount: React.FC = () => {
-  const navigate = useNavigate()
   return (
-    <>
-      <div className="w-full rounded py-3 mb-9 bg-[#5C2684] px-5">
+    <div className="flex flex-col gap-9">
+      <div className="w-full rounded py-3 bg-[#5C2684] px-5">
         <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-          CREDIT ACCOUNT ( Your account to receive your loan )
+          DEBIT ACCOUNT ( Your salary account for monthly repayment )
         </p>
       </div>
       <InputCompOne
-        parentClass="max-w-[29.4375rem] w-full my-5 ml-5"
-        label="Disbursement Account Number "
-        name="disbursementAccountNumber"
-        labelSpan="( Your FCMB Account )"
-        labelSpanClass="text-[12px] text-[#5C2684] ml-1"
+        parentClass="max-w-[471px] w-full ml-5"
+        label="Bank Name"
+        name="bankName"
         parentInputClass="w-full"
         labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
         input
         inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
       />
 
-      <div className="mt-9 flex flex-col gap-9">
-        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-            DEBIT ACCOUNT ( Your salary account for monthly repayment )
-          </p>
-        </div>
+      <div className="flex items-center gap-[59px]">
         <InputCompOne
           parentClass="max-w-[471px] w-full ml-5"
-          label="Bank Name"
-          name="bankName"
+          label="Account Number"
+          name="accountNumber"
           parentInputClass="w-full"
           labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
           input
           inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
         />
-
-        <div className="flex items-center gap-[59px]">
-          <InputCompOne
-            parentClass="max-w-[471px] w-full ml-5"
-            label="Account Number"
-            name="accountNumber"
-            parentInputClass="w-full"
-            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
-            input
-            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-          />
-          <InputCompOne
-            parentClass="max-w-[471px] w-full ml-5"
-            label="Account Name"
-            name="accountName"
-            parentInputClass="w-full"
-            labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
-            input
-            inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
-          />
-        </div>
-
-        <div className="max-w-[578px] flex items-center">
-          <input
-            type="checkbox"
-          //   checked={true}
-          defaultChecked
-          //   onChange={onChange}
-            className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
-            style={{ backgroundColor: "#5C2684" }}
-          />
-          <label className="ml-2 text-gray-700">
-            I have read, understood and accept the{" "}
-            <span className="text-[#4545CB]">applicant's attestation</span> and
-            all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
-            for FCMB premium salary loan.
-          </label>
-        </div>
-        <Button
-          className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
-          text="Apply"
-          type="button"
-          onClick={()=>navigate(RouteHandler.dashboardHome, {replace:true})}
+        <InputCompOne
+          parentClass="max-w-[471px] w-full ml-5"
+          label="Account Name"
+          name="accountName"
+          parentInputClass="w-full"
+          labelClass="font-bold text-[18px] leading-[21.7808px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          input
+          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[6px]"
         />
       </div>
-    </>
+
+      <div className="max-w-[578px] flex items-center">
+        <input
+          type="checkbox"
+        //   checked={true}
+        defaultChecked
+        //   onChange={onChange}
+          className="form-checkbox h-[25px] w-[25px] rounded-sm text-[#5c2684] "
+          style={{ backgroundColor: "#5C2684" }}
+        />
+        <label className="ml-2 text-gray-700">
+          I have read, understood and accept the{" "}
+          <span className="text-[#4545CB]">applicant's attestation</span> and
+          all the <span className="text-[#4545CB]">terms and conditions</span>{" "}
+          for FCMB premium salary loan.
+        </label>
+      </div>
+      <Button
+        className="my-8 max-w-[33.875rem] btn-R bg-[#5A2C82] w-full h-11"
+        text="Apply"
+        type="button"
+      />
+    </div>
   );
 };
 

src/index.css

@@ -14,7 +14,6 @@ body {
 
 @layer components {
   .containerMode {
-    /* @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; */
-    @apply container mx-auto px-5 max-w-[1500px]
+    @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
   }
 }

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -43,37 +43,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
         <Aside asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">
-
-        <header className={`p-5 md:hidden sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6]`}>
-          <div className='h-14 w-full flex justify-end items-center gap-5'>
-              {/* MENU HAND BURGER */}
-              {/* <div className='w-full'>Welcome Austin Catherine</div> */}
-              <div
-              className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
-              onClick={asideDisplay}
-              >
-              <div
-                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                  showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
-                  }`}
-              ></div>
-              <div
-                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-300 ${
-                  showAside
-                      ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
-                      : "top-1/2 -translate-y-1/2"
-                  }`}
-              ></div>
-              <div
-                  className={`absolute left-0 w-5 h-1 bg-black/80 dark:bg-white transition-all duration-500 ${
-                  showAside
-                      ? "top-1/2 -translate-y-1/2 -rotate-45"
-                      : "bottom-0"
-                  }`}
-              ></div>
-              </div>
-          </div>
-        </header>
         <div className="flex p-5 relative">
           <div className="w-full p-5">{children}</div>
         </div>

src/layouts/GetStartedLayout.tsx

@@ -7,15 +7,13 @@ interface GetStartedLayoutProps {
 
 const GetStartedLayout: React.FC<GetStartedLayoutProps> = ({ children }) => {
   return (
-    <div className="containerMode mb-[5.4375rem]">
-      <div className='sticky top-0 bg-white'>
-        <Header hideSidebar={true} hideMenu={true} />
-      </div>
-      <div className="flex flex-col min-h-[70vh] justify-between">
+    <div className="relative">
+      <Header hideSidebar={true} hideMenu={true} />
+      <div className="flex flex-col min-h-[85vh] justify-between">
         {children}
-      </div>
-      <div className="fixed bottom-0 left-0 bg-white w-full">
-        <Footer />
+        <div className="self-end w-full">
+          <Footer />
+        </div>
       </div>
     </div>
   );

src/layouts/LetsGetStartedLayout.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import { Footer, LetsGetStartedNav } from "../components";
-// import layoutImage from "../assets/images/test1-reverse.png";
+import layoutImage from "../assets/images/test1-reverse.png";
 
 const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className='containerMode mb-[5.4375rem]'>
-      <div className="w-full min-h-[90vh] grid lg:grid-cols-2">
+    <>
+      <div className="grid md:grid-cols-2 h-[770px]">
         <div className="w-full flex flex-col my-3">
           <LetsGetStartedNav />
           {children}
         </div>
-        <div className="w-full h-96 lg:h-full bg-[url(../src/assets/images/test1-reverse.png)] bg-cover bg-no-repeat">
-          {/* <img src={layoutImage} alt="" className="w-full h-full object-cover" /> */}
+        <div className="w-full">
+          <img src={layoutImage} alt="" className="w-full h-full" />
         </div>
       </div>
       <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
         <Footer />
       </div>
-    </div>
+    </>
   );
 };
 

src/utils/data.tsx

@@ -32,7 +32,7 @@ export const lowerMenuItems = [
   {
     id: 3,
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
   },
   {
     id: 4,
@@ -277,7 +277,7 @@ export const _lowerMenuItems = [
   },
   {
     name: "CORPORATE BANKING",
-    linkPath: "/corporate-banking",
+    linkPath: "/cooperate-banking",
     subItems: [
       {
         name: "FOREIGN EXCHANGE SERVICES",
@@ -436,12 +436,12 @@ export const footerItems = [
     ],
   },
   {
-    category: "CORPORATE BANKING",
+    category: "COOPORATE BANKING",
     subItems: [
       { text: "FOREIGN EXCHANGE SERVICES", href: "/foreign-exchange-services" },
       { text: "TRADE SERVICES", href: "/node/166" },
       { text: "CASH MANAGEMENT SOLUTIONS", href: "/cash-management" },
-      { text: "CORPORATE FINANCE", href: "/corporate-finance" },
+      { text: "COOPORATE FINANCE", href: "/corporate-finance" },
     ],
   },
   {