Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master

Merge branch 'master' of https://gitlab.chiefsoft.net/DigiFi/digifi-www into first-homepage-layout
Added personal image to the pages
2024-03-20 03:49:03 +00:00 · 2024-03-20 01:38:28 +01:00 · 2024-03-20 01:37:31 +01:00 · 2024-03-19 12:35:47 +00:00 · 2024-03-19 13:33:33 +01:00 · 2024-03-19 13:11:21 +01:00
50 changed files with 1820 additions and 84 deletions
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M32,11h5c0.552,0 1,-0.448 1,-1v-6.737c0,-0.524 -0.403,-0.96 -0.925,-0.997c-1.591,-0.113 -4.699,-0.266 -6.934,-0.266c-6.141,0 -10.141,3.68 -10.141,10.368v6.632h-7c-0.552,0 -1,0.448 -1,1v7c0,0.552 0.448,1 1,1h7v19c0,0.552 0.448,1 1,1h7c0.552,0 1,-0.448 1,-1v-19h7.222c0.51,0 0.938,-0.383 0.994,-0.89l0.778,-7c0.066,-0.592 -0.398,-1.11 -0.994,-1.11h-8v-5c0,-1.657 1.343,-3 3,-3z"></path></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="64px" height="64px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M6.91992,6l14.2168,20.72656l-14.9082,17.27344h3.17773l13.13867,-15.22266l10.44141,15.22266h10.01367l-14.87695,-21.6875l14.08008,-16.3125h-3.17578l-12.31055,14.26172l-9.7832,-14.26172z"></path></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="evenodd" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M13,5l3,9v6h2v-6l3,-9h-2l-2,6l-2,-6zM24,9c-1.06641,0 -1.58984,0.16797 -2.24219,0.70313c-0.625,0.52734 -0.79687,0.93359 -0.75781,2.29688v5c0,0.99609 0.16406,1.65234 0.76563,2.23438c0.625,0.58203 1.21484,0.76563 2.23438,0.76563c1.06641,0 1.64844,-0.18359 2.25,-0.76562c0.625,-0.55859 0.75,-1.23828 0.75,-2.23437v-5c0,-0.88281 -0.15625,-1.71875 -0.76172,-2.27734c-0.625,-0.57422 -1.26953,-0.72266 -2.23828,-0.72266zM29,9v9c0,0.97266 0.98047,2 2,2c1.01953,0 1.55859,-0.51172 2,-1v1h2v-11h-2v8c-0.01172,0.68359 -0.81641,1 -1,1c-0.20703,0 -1,-0.04297 -1,-1v-8zM24,11c0.30078,0 1,-0.00391 1,1v5c0,0.96875 -0.67578,1 -1,1c-0.30078,0 -1,-0.01172 -1,-1v-5c0,-0.81641 0.43359,-1 1,-1zM10,22c-3.59375,0 -6,2.38281 -6,6v9.5c0,3.61719 2.40625,6.5 6,6.5h30c3.59375,0 6,-2.38281 6,-6v-10c0,-3.61719 -2.40625,-6 -6,-6zM12,26h6v2h-2v12h-2v-12h-2zM26,26h2v4c0.23047,-0.35937 0.57422,-0.64453 0.90234,-0.80469c0.32031,-0.16406 0.64453,-0.25781 0.97266,-0.25781c0.64844,0 1.15625,0.23438 1.50391,0.67188c0.34766,0.44141 0.62109,1.02734 0.62109,1.89063v6c0,0.74219 -0.25,1.20313 -0.57812,1.59766c-0.32031,0.39453 -0.80078,0.89453 -1.42187,0.90234c-1.05078,0.01172 -1.61328,-0.55078 -2,-1v1h-2zM18,29h2v8c0,0.23047 0.26953,1.00781 1,1c0.8125,-0.00781 0.82031,-0.76562 1,-1v-8h2v11h-2v-1c-0.37109,0.4375 -0.5625,0.57422 -0.98047,0.78125c-0.41406,0.23438 -0.83594,0.21875 -1.22656,0.21875c-0.48437,0 -1.03516,-0.4375 -1.29297,-0.76562c-0.23047,-0.30078 -0.5,-0.60937 -0.5,-1.23437zM36.19922,29c0.94922,0 1.61719,0.20313 2.12109,0.73438c0.51563,0.53125 0.67969,1.15234 0.67969,2.15234v3.11328h-4v1.54688c0,0.55859 0.07422,0.91406 0.21875,1.125c0.13672,0.23047 0.41406,0.33203 0.78125,0.32813c0.40625,-0.00391 0.66406,-0.08594 0.80078,-0.26953c0.14063,-0.16406 0.19922,-0.62891 0.19922,-1.23047v-0.5h2v0.59375c0,1.08984 -0.08594,1.90234 -0.625,2.43359c-0.50781,0.55859 -1.30078,0.81641 -2.33984,0.81641c-0.94922,0 -1.69141,-0.28125 -2.22266,-0.85937c-0.53125,-0.57812 -0.80859,-1.37109 -0.80859,-2.39062v-4.70703c0,-0.90625 0.31641,-1.57812 0.89844,-2.17578c0.46875,-0.48047 1.34766,-0.71094 2.29688,-0.71094zM29,30.5c-0.55078,0 -0.99219,0.49609 -1,1v6c0.00781,0.28906 0.44922,0.5 1,0.5c0.55078,0 1,-0.42578 1,-0.97656v-5.02344c0,-1 -0.44922,-1.5 -1,-1.5zM36,31c-0.55078,0 -0.99219,0.46484 -1,1v1h2v-1c0,-0.61328 -0.44922,-1 -1,-1z"></path></g></g></svg>
@@ -3,7 +3,7 @@ import { DefaultCard } from "../"
 export default function DashboardHome() {
  return (
    <div className='w-full'>
-      <div className='group w-full xxs:w-96 h-32'>
+      <div className='group w-full lg:w-96 h-32'>
        <DefaultCard 
          descText='You currently do not have any open application. Click on apply for a loan to get started.'
          iconName='arrow'
@@ -16,7 +16,7 @@ export default function DashboardHome() {

      <div className='w-full mt-20 flex gap-16 flex-wrap'>
        {/* cards display */}
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
          <DefaultCard 
            title='Apply for a loan'
            descText='You currently do not have any open application. Click on apply for a loan to get started.'
@@ -28,7 +28,7 @@ export default function DashboardHome() {
            onClick={()=>{console.log('working')}}
          />
        </div>
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
          <DefaultCard 
            title='Loan history'
            descText='You currently do not have any open application. Click on apply for a loan to get started.'
@@ -40,7 +40,7 @@ export default function DashboardHome() {
            onClick={()=>{console.log('working')}}
          />
        </div>
-        <div className='group h-40 w-full xxs:w-80'>
+        <div className='group h-40 w-full lg:w-80'>
          <DefaultCard 
            title='How it works?'
            descText='Steps to follow to complete your loan application successfully.'
@@ -0,0 +1,69 @@
+import { footerCustomerLinks, footerSocialLinks } from "../../utils/data";
+
+interface FooterLinksProps {
+  href: string;
+  icon?: string;
+  text?: string;
+}
+
+const BottomFooterOne = () => {
+  const date: number = new Date().getFullYear();
+
+  return (
+    <footer className="pt-[1.25rem] pb-[1.875rem]">
+      <div className="containerMode flex flex-col gap-2 w-full">
+        <div className="flex flex-wrap flex-[100] justify-between w-full gap-2">
+          <SocialIconButtons />
+          <CustomerLinks />
+        </div>
+        <p className="text-[.8125rem] text-[#333] leading-[1.42857]">
+          © <span>{date}</span> First City Monument Bank (Licensed by the
+          Central Bank of Nigeria)
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default BottomFooterOne;
+
+const SocialIconButtons = () => {
+  const icons = footerSocialLinks.map(
+    ({ href, icon }: FooterLinksProps, idx: number) => (
+      <li key={idx}>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-[#592B81] py-[.3125rem] px-[.625rem] text-white w-[2.625rem] h-[2.625rem] flex items-center justify-center rounded-[3.125rem]"
+        >
+          {icon && <img src={icon} alt="icon" />}
+        </a>
+      </li>
+    )
+  );
+
+  return <ul className="flex flex-[33.333] items-center gap-1">{icons}</ul>;
+};
+
+const CustomerLinks = () => {
+  const links = footerCustomerLinks.map(
+    ({ href, text }: FooterLinksProps, idx: number) => (
+      <li key={idx} className="list-none">
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="py-[.75rem] text-[.8125rem] uppercase text-[#606161] flex items-center justify-center"
+        >
+          {text}
+        </a>
+      </li>
+    )
+  );
+  return (
+    <div className="flex-[66.667] flex items-center flex-nowrap md:flex-wrap gap-2">
+      {links}
+    </div>
+  );
+};
@@ -0,0 +1,15 @@
+import styles from "./footer.module.css"
+
+const MidFooter = () => {
+  return (
+    <div className={`h-[2.3125rem] text-[1.25rem] ${styles.lower_footer}`}>
+    <div className="containerMode flex justify-end p-[.375rem] w-full text-white font-medium text-[.6875rem] md:text-[1.25rem]">
+      <div className="flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
+        <p className="text-[20px] font-extralight">my bank and I</p>
+      </div>
+    </div>
+  </div>
+  )
+}
+
+export default MidFooter
@@ -0,0 +1,35 @@
+import { footerItems } from "../../utils/data";
+import TopFooterOneMenu from "./TopFooterOneMenu";
+
+export interface TopFooterOneMenuProps {
+  category: string;
+  subItems: {
+    text: string;
+    href?: string;
+  }[];
+}
+
+const TopFooterOne = () => {
+  const footerListItems: TopFooterOneMenuProps[] = footerItems;
+
+  return (
+    <footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5">
+      <div className="containerMode w-full flex flex-col gap-[1.875rem]">
+        <h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default">
+          sitemap
+        </h4>
+        <div className="grid grid-cols-2 md:grid-cols-6 gap-2 md:gap-0">
+          {footerListItems.map(({ category, subItems }, index) => (
+            <TopFooterOneMenu
+              key={`${category}-${index}`}
+              category={category}
+              subItems={subItems}
+            />
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default TopFooterOne;
@@ -0,0 +1,29 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { TopFooterOneMenuProps } from "./TopFooterOne";
+
+
+const TopFooterOneMenu: React.FC<TopFooterOneMenuProps> = ({
+  category,
+  subItems,
+}) => {
+  return (
+    <ul className="flex gap-2 flex-col">
+      <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">
+        {category}
+      </li>
+      <ul className="flex flex-col gap-1">
+        {subItems.map(({ href = "#", text }) => (
+          <li
+            key={text}
+            className="text-[.6875rem] text-[#5e2785] hover:underline w-fit"
+          >
+            {href ? <Link to={href}>{text}</Link> : <span>{text}</span>}
+          </li>
+        ))}
+      </ul>
+    </ul>
+  );
+};
+
+export default TopFooterOneMenu;
@@ -0,0 +1,8 @@
+.lower_footer{
+    background: url(../../assets/images/footer_back.jpg) no-repeat;
+    background-size: cover;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
@@ -1,3 +1,6 @@
 import Footer from "./Footer";
+import TopFooterOne from "./TopFooterOne";
+import MidFooter from "./MidFooter";
+import BottomFooterOne from "./BottomFooterOne";

-export { Footer };
+export { Footer, TopFooterOne, MidFooter, BottomFooterOne };
@@ -0,0 +1,102 @@
+import React, { useRef } from "react";
+import InputCompOne from "../shared/InputCompOne";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+const BasicInfo: React.FC = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Array for marital status options
+  const maritalStatusOptions: Option[] = [
+    { value: "", label: "Select" },
+    { value: "single", label: "Single" },
+    { value: "married", label: "Married" },
+    { value: "divorced", label: "Divorced" },
+    { value: "widowed", label: "Widowed" },
+  ];
+
+  // Array for title options
+  const titleOptions: Option[] = [
+    { value: "", label: "Select" },
+    { value: "ms", label: "Ms" },
+    { value: "mr", label: "Mr" },
+    { value: "miss", label: "Miss" },
+    { value: "mrs", label: "Mrs" },
+  ];
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Handle input value changes
+    console.log(e.target.value);
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    // Handle input events
+    console.log(e);
+  };
+
+  return (
+    <div className="mt-8">
+      <div className="flex flex-col gap-3">
+        <InputCompOne
+          label="Title"
+          name="title"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={titleOptions}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          label="Marital Status"
+          name="marital"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={maritalStatusOptions}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          label="Direct Sales Agent ID"
+          name="agentId"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={[{ value: "", label: "Select" }]}
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+        <InputCompOne
+          label="BVN"
+          name="bvn"
+          parentInputClass="max-w-[224px] w-full"
+          labelSpan="( To get your BVN, dial *565*0# )"
+          labelSpanClass="text-[11px] text-[#7a7373]"
+          placeholder="Enter your BVN"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
+          input
+          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
+          value=""
+          onChange={handleChange}
+          onInput={handleInput}
+          ref={inputRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BasicInfo;
@@ -1,17 +1,22 @@
-import { FC } from "react";
+import BasicInfo from "./BasicInfo";

-const GetStarted: FC = () => {
+const GetStarted = () => {
  return (
    <div className="w-full flex items-center justify-center">
      <div className="containerMode">
+        {/* Header */}
        <h1 className="font-semibold text-[2.375rem] text-[#5C2684] my-[.5rem]">
          Let’s Get You Started
        </h1>
-        <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-            BASIC INFORMATION
-          </p>
-        </div>
+        {/* Main */}
+        <main>
+          <div className="w-full rounded py-3 bg-[#5C2684] px-5">
+            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+              BASIC INFORMATION
+            </p>
+          </div>
+          <BasicInfo />
+        </main>
      </div>
    </div>
  );
@@ -1,13 +1,15 @@
-import { useState, ChangeEvent, FC } from "react";
+import React, { useState, ChangeEvent } from "react";
 import Logo from "../../assets/icons/logo.svg";
 import Button from "../shared/Button";
-import { lowerMenuItems } from "../../utils/data";
+import { _lowerMenuItems } from "../../utils/data";
 import Sidebar from "./Sidebar";
 import { Link } from "react-router-dom";
+import HeaderMenuItem from "./HeaderMenuItem";

-type LowerMenuItem = {
-  id: string | number;
+export type LowerMenuItem = {
  name: string;
+  linkPath: string;
+  subItems?: LowerMenuItem[];
 };

 type HiddenMenuItems = {
@@ -15,7 +17,7 @@ type HiddenMenuItems = {
  hideMenu?: boolean;
 };

-const Header: FC<HiddenMenuItems> = ({
+const Header: React.FC<HiddenMenuItems> = ({
  hideSidebar = false,
  hideMenu = false,
 }) => {
@@ -31,7 +33,7 @@ const Header: FC<HiddenMenuItems> = ({
  };

  return (
-    <div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
+    <div className="relative mt-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
      {!hideSidebar && (
        <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
      )}
@@ -88,14 +90,9 @@ const Header: FC<HiddenMenuItems> = ({
                />
              </svg>
            </div>
-            <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
-              {lowerMenuItems.map((item: LowerMenuItem) => (
-                <li
-                  key={item.id}
-                  className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
-                >
-                  {item.name}
-                </li>
+            <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap relative">
+              {_lowerMenuItems.map((item: LowerMenuItem, idx: number) => (
+                <HeaderMenuItem key={idx} item={item} />
              ))}
            </ul>
          </div>
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { LowerMenuItem } from "./Header";
+
+interface MenuItemProps {
+  item: LowerMenuItem;
+}
+
+const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
+  const [showSubMenu, setShowSubMenu] = useState<boolean>(false);
+
+  const toggleSubMenu = () => {
+    setShowSubMenu(!showSubMenu);
+  };
+
+  return (
+    <li
+      className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]`}
+      onMouseEnter={toggleSubMenu}
+      onMouseLeave={toggleSubMenu}
+    >
+      <a href={item.linkPath}>{item.name}</a>
+      {showSubMenu && item.subItems && (
+        <ul
+          className={`absolute bg-white shadow-md p-4 z-20 `}
+        >
+          {item.subItems.map((subItem, index) => (
+            <HeaderMenuItem key={index} item={subItem} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default HeaderMenuItem;
@@ -1,4 +1,5 @@
 import { top_header_data } from "../../utils/data";
+import { Link } from "react-router-dom";
 import styles from "./header.module.css";

 const TopHeader = () => {
@@ -7,28 +8,36 @@ const TopHeader = () => {
      <div className="flex flex-col sm:hidden bg-[#5c2684]">
        <ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
          {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
-            <li key={text} className="w-full"> 
-              <a href="#" className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}>
+            <li key={text} className="w-full">
+              <a
+                href="#"
+                className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}
+              >
                {text}
              </a>
            </li>
          ))}
          <li className="w-full flex items-center justify-center">
-              <a href="#" className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}>
+            <a
+              href="#"
+              className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}
+            >
              <p className="uppercase">Today's Share price:</p>
-            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
-              </a>
-            </li>
+              <span className="text-[#F8B51F] text-base md:text-lg">
+                $ 4.00
+              </span>
+            </a>
+          </li>
        </ul>
      </div>
      <div className={styles.top_header}>
        <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
          <ul className="flex items-center py-[0.4rem] flex-wrap">
-            {top_header_data.map(({ id, name }) => (
+            {top_header_data.map(({ id, name, href }) => (
              <li key={id}>
-                <a href="#" className={`py-[11px] px-[15px]`}>
+                <Link to={href} className={`py-[11px] px-[15px]`}>
                  {name}
-                </a>
+                </Link>
              </li>
            ))}
          </ul>
@@ -2,10 +2,10 @@ import styles from "./hero.module.css";
 const Hero = () => {
  return (
    <div
-      className={`w-full relative mt-[.9375rem] mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
+      className={`w-full relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
    >
      <div className="containerMode flex justify-between gap-1 xl:gap-8">
-        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684]">
+        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
          PREMIUM SALARY LOAN
        </h1>
      </div>
@@ -0,0 +1,34 @@
+import React from "react";
+import styles from "./hero.module.css";
+import { Link } from "react-router-dom";
+
+interface PersonalHeroProps {
+  heading?: string;
+  body?: string;
+  buttonLink?: string;
+  buttonText?: string;
+};
+const PersonalHero: React.FC<PersonalHeroProps> = ({
+  heading,
+  body,
+  buttonLink = "#",
+  buttonText,
+}) => {
+  return (
+    <div
+      className={`w-full relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.personalHeroBg}`}
+    >
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
+          {heading}
+        </h1>
+        <p>{body}</p>
+        <Link to={buttonLink}>
+          <button>{buttonText}</button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalHero;
@@ -6,4 +6,14 @@
    display: flex;
    align-items: center;
    justify-content: center;
+}
+
+.personalHeroBg{
+    background: url(../../../assets/images/personal-page.jpg) no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
@@ -1,3 +1,4 @@
 import Hero from "./Hero";
+import PersonalHero from "./PersonalHero";

-export { Hero };
+export { Hero, PersonalHero };
@@ -1,11 +1,10 @@
-import { FC } from "react";
 import { Link } from "react-router-dom";
 import { RouteHandler } from "../../../router/routes";

-const FeatureText: FC = () => {
+const FeatureText = () => {
  return (
    <div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col">
-      <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem]">
+      <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem] cursor-default">
        <p className="mb-[.9375rem] text-justify sm:text-left">
          Premium Salary Plus loan provides confirmed staff of commercial
          organizations more usable funds. The employee’s organization must have
@@ -29,13 +28,16 @@ const FeatureText: FC = () => {
      </div>
      <Link
        to={RouteHandler.getStarted}
-        className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit"
+        className="text-[#5C2684] mt-[1.5625rem] w-fit"
      >
-        ***Click here to apply
+        *** <span className="hover:underline">Click here to apply</span>
      </Link>
-      <p className="mt-[.5625rem] font-bold cursor-default">
+      <Link
+        to={RouteHandler.termsAndConditions}
+        className="mt-[.5625rem] font-bold"
+      >
        Terms and conditions apply
-      </p>
+      </Link>
    </div>
  );
 };
@@ -1,4 +1,4 @@
-import { Hero } from "./Hero";
+import { Hero, PersonalHero } from "./Hero";
 import { Requirements } from "./Requirements";

-export {Hero, Requirements}
+export {Hero, Requirements, PersonalHero}
@@ -0,0 +1,107 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const LetsGetStarted: React.FC = () => {
+  const [pinValues, setPinValues] = React.useState({
+    bvn: "",
+    otp: "",
+  });
+
+  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+  const secondInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let { name, value } = e.target as HTMLInputElement;
+
+    setPinValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    let { name, value } = e.target as HTMLInputElement;
+
+    if (name === "bvn") {
+      const regex = /^[0-9]+$/;
+
+      if (regex.test(value)) {
+        if (value?.length == 10) {
+          setHideOTPComponent(false);
+          secondInputRef.current?.focus();
+        } else setHideOTPComponent(true);
+      } else {
+        console.log("object not found");
+      }
+    }
+  };
+
+  console.log(secondInputRef)
+
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+        <div className="my-[4rem] flex items-center justify-center w-full">
+          <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+            Let’s Get You Started
+          </h1>
+        </div>
+        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+          <InputCompOne
+            parentClass="flex flex-col gap-2"
+            label="Enter Your BVN "
+            name="bvn"
+            parentInputClass="w-full"
+            labelSpan="( To get your BVN, dial *565*0# )"
+            labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+            placeholder="Enter your BVN"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+            input
+            inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+            value={pinValues.bvn}
+            onChange={handleChange}
+            onInput={handleInput}
+            ref={firstInputRef}
+            maxLength={10}
+          />
+          {!hideOTPComponent ? (
+            <InputCompOne
+              parentClass="flex flex-col gap-2"
+              label="Enter OTP "
+              name="otp"
+              parentInputClass="w-full"
+              labelSpan="( Please check your BVN phone number for verification pin )"
+              labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+              placeholder="Enter your OTP"
+              labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+              input
+              inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+              value={pinValues.otp}
+              onChange={handleChange}
+              onInput={handleInput}
+              ref={secondInputRef}
+            />
+          ) : null}
+          <button
+            className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+            disabled={!pinValues.otp}
+          >
+            Enter
+          </button>
+
+          {hideOTPComponent ? (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Every personal information attached to your BVN is safe and
+              secure. It is only important for us to verify your information and
+              also give you access to your application profile/account.
+            </p>
+          ) : (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Did not receive OTP? Click to resend
+            </p>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStarted;
@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+
+
+const LetsGetStartedNav: React.FC = () => {
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <Link to="/">
+          <img
+            src={Logo}
+            alt="Logo"
+            className="w-[52px] h-[43px] xl:w-[72px] xl:h-[63px]"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStartedNav;
@@ -0,0 +1,4 @@
+import LetsGetStarted from "./LetsGetStarted";
+import LetsGetStartedNav from "./LetsGetStartedNav";
+
+export { LetsGetStarted, LetsGetStartedNav };
@@ -0,0 +1,428 @@
+import React from "react";
+
+const Main: React.FC = () => {
+  return (
+    <div className="w-full my-3">
+      <div className="containerMode">
+        <p className="mb-[15px]">
+          <strong>PRIVACY POLICY</strong>
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>1.Your Privacy is important to us.</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          This privacy statement sets out the privacy policy of
+          fcmbgroupplc.com, which provides a portal, or gateway, to the
+          financial services offered by the First City Monument Bank Limited and
+          the other members of the FCMB Group Plc (Collectively, “FCMB”).
+        </p>
+        <p className="mb-[15px]">
+          This policy explains how we collect, share, use, and protect
+          information when you visit or use this website and any other online
+          services, platforms, or products offered by FCMB or any of its banking
+          and non-banking affiliates and subsidiaries that link to or reference
+          this policy (collectively, our “services”).
+        </p>
+        <p className="mb-[15px]">
+          <strong>1.1 FCMB and You</strong>
+        </p>
+        <p className="mb-[15px]">
+          First City Monument Bank Limited is a private limited liability
+          company registered in the Federal Republic of Nigeria under RC No.
+          46713. Its head-office is at Primrose Tower, 17A Tinubu Street, Lagos
+          State, Nigeria.
+        </p>
+        <p className="mb-[15px]">
+          FCMB Group Plc hosts the fcmbgroupplc.com website and provides
+          technical support, access and links to the Local Sites of First City
+          Group members. fcmbgroupplc.com does not offer financial services or
+          products. Financial services and products may only be obtained by
+          registering with a Local Site. The First City Group provides financial
+          products and services to a global clientele through its affiliated
+          companies and branches located in 36 states and the Federal Capital
+          Territory in Nigeria, and in the UK. Privacy and personal data
+          protection principles vary from one country to another. When you
+          access or link to a Local Site, please read the privacy statement
+          issued by the Local Site to determine the policies that apply to
+          information or data maintained by the Local Site.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>2. Information we may collect about you </span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          <strong>2.1 Your Personal Information</strong>
+        </p>
+        <p className="mb-[15px]">
+          At FCMB, we strive to meet your needs and provide you with exceptional
+          services. In the course of consuming our services through various
+          channels, such as forms, phone calls, correspondence, service point
+          interfaces, and other available channels, we collect information that
+          you provide to us. This information may include, but is not limited
+          to, contact data, log/Technical information, Financial Data, Marketing
+          and Communications Data, identity verification details (this includes
+          Personally Identifiable Information (PII), otherwise known as Personal
+          Information or Personal Data, which includes email address, phone
+          number, contact address, limited financial information, location data,
+          device data etc.) and documents, services consumed or desired, mode of
+          consumption, preferences, location, general events, and instructions
+          and transactions relating to the services.
+        </p>
+        <p className="mb-[15px]">
+          The lawful basis we rely on for processing your Personal Information
+          are:
+        </p>
+        <ol>
+          <li>
+            Your Consent: Where you agree to us collecting your Personal
+            Information by using our Services.
+          </li>
+          <li>
+            We have a contractual obligation: Without your Personal Information,
+            we cannot provide our Services to you.
+          </li>
+          <li>
+            We have a legal obligation: To ensure we are fully compliant with
+            all applicable financial legislations such as Anti-Money Laundering
+            and Countering the Financing of Terrorism (AML/CFT) Laws, we must
+            collect and store your Personal Information. We protect against
+            fraud by checking your identity with your Personal Information.
+          </li>
+        </ol>
+        <p className="mb-[15px]">
+          Additionally, to better serve your needs, we may utilize information
+          about you collected from third parties and service partners. It is
+          important to note that these third-party sources are not under the
+          control of FCMB, and we are not responsible for how they use the
+          information.
+        </p>
+        <p className="mb-[15px]">
+          <strong>2.2 Usage and other information</strong>
+        </p>
+        <p className="mb-[15px]">
+          In addition to the personal information described above, we may
+          collect certain information about your use of our online services. For
+          example, we may capture the IP address of the device you use to
+          connect to the online service, the type of operating system and
+          browser you use, and information about the site you came from, the
+          parts of our online service you access, and the site you visit next.
+          FCMB or our third-party partners may also use cookies, web beacons or
+          other technologies to collect and store other information about your
+          visit to, or use of, our online services. In addition, we may later
+          associate the usage and other information we collect online with
+          personal information about you.
+        </p>
+        <p className="mb-[15px]">
+          <strong>2.3 FCMB Mobile</strong>
+        </p>
+        <p className="mb-[15px]">
+          For the convenience of our FCMB customers, we provide access to our
+          products and services through our mobile applications and
+          mobile-optimized websites ("FCMB Mobile"). When you engage with us
+          through FCMB Mobile, we may collect certain information to enhance
+          your experience. This information may include unique device
+          identifiers for your mobile device, screen resolution, device
+          settings, location information, and analytical data regarding your
+          mobile device usage. Please note that we may request your permission
+          before collecting specific information, such as precise geo-location
+          data,- contact or image data and other personal identifiable
+          information through FCMB Mobile. Rest assured that any information
+          collected is handled with the utmost care and in accordance with our
+          privacy policy.
+        </p>
+        <p className="mb-[15px]">
+          <strong>2.4 Additional sources of information</strong>
+        </p>
+        <p className="mb-[15px]">
+          We may also collect information about you from additional online and
+          offline sources including from co-branded partner sites or
+          commercially available third-party sources, such as credit reporting
+          agencies. We may combine this information with the personal and other
+          information we have collected about you under this Privacy Policy.
+        </p>
+        <p className="mb-[15px]">
+          <strong>2.5 Non-Personal Information</strong>
+        </p>
+        <p className="mb-[15px]">
+          In order to achieve our goal of providing you with the best-in-class
+          service, we may also collect, store, use and transfer non-personal
+          information or anonymized data such as statistical or demographic
+          data. These may be collected or sourced during your visits to perform
+          certain tasks such as grant you access to some parts of our web site
+          or conduct research on your behaviour on our site in order to improve
+          our services. We will not disclose your information to any person
+          outside our organization except as described in this Privacy Policy.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>3. Our Use of Information</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          FCMB and/or subsidiaries may use or process the information discussed
+          above in a number of ways, such as to:
+        </p>
+        <ol>
+          <li>Manage your preferences;</li>
+          <li>
+            Create and manage any accounts or transactions you may have with us,
+            verify your identity, provide our services, and respond to your
+            inquiries;
+          </li>
+          <li>
+            Process your applications and transactions (including authorization,
+            clearing, chargebacks and other related dispute resolution
+            activities);
+          </li>
+          <li>
+            Protect against and prevent fraud, unauthorized transactions, claims
+            and other liabilities as well as enhance the security of your
+            account or our online services;
+          </li>
+          <li>
+            Provide, administer and communicate with you about our products,
+            services, offers, programs and promotions as well as those of our
+            merchants and partners;
+          </li>
+          <li>
+            Evaluate your interest in employment and contact you regarding
+            possible employment with FCMB;
+          </li>
+          <li>
+            Evaluate and improve our business, including developing new products
+            and services;
+          </li>
+          <li>To target advertisements, newsletters, and service updates;</li>
+          <li>As necessary to establish, exercise and defend legal rights;</li>
+          <li>
+            Perform analytics concerning your use of our online services,
+            including your responses to our emails and the pages and
+            advertisements you view;
+          </li>
+          <li>
+            As may be required by applicable laws and regulations, including for
+            compliance with Know Your Customers and risk assessment, Anti-Money
+            Laundering, anti-corruption and sanctions screening requirements, or
+            as requested by any judicial process, law enforcement or
+            governmental agency having or claiming jurisdiction over FCMB or
+            affiliates;
+          </li>
+          <li>
+            To use data analytics to improve our Website, products, or services,
+            and user experiences;
+          </li>
+          <li>
+            For other purposes for which we provide specific notice at the time
+            you provide or we collect your information.
+          </li>
+        </ol>
+        <p className="mb-[15px]">
+          We may also use data that we collect on an aggregate or anonymous
+          basis (such that it does not identify any individual customers) for
+          various business purposes, where permissible under applicable laws and
+          regulations.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>4. Cookies</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          This website, along with most other major websites, uses cookies.
+          Cookies are pieces of information that a website transfers to the
+          cookie file on your computer’s hard disk. Cookies enable users to
+          navigate around the website and (where appropriate) enable us to
+          tailor the content to fit the needs of visitors who have accessed the
+          site.
+        </p>
+        <p className="mb-[15px]">
+          Firstcitygroup.com uses two types of cookies on this website:
+        </p>
+        <ol>
+          <li>
+            Session cookies, which are temporary cookies that remain in the
+            cookie file of your computer until you close your browser (at which
+            point they are deleted).
+          </li>
+          <li>
+            Persistent or stored cookies that remain permanently on the cookie
+            file of your computer.
+          </li>
+        </ol>
+        <p className="mb-[15px]">
+          Cookies cannot look into your computer and obtain information about
+          you or your family or read any material kept on your hard drive and,
+          unless you have logged onto an authenticated page, cookies cannot be
+          used to identify who you are.
+        </p>
+        <p className="mb-[15px]">
+          Cookies cannot be used by anyone else who has access to the computer
+          to find out anything about you, other than the fact that someone using
+          the computer has visited a certain website. Cookies do not in any way
+          compromise the security of your computer.
+        </p>
+        <p className="mb-[15px]">
+          Cookies will not be used to contact you for marketing purposes other
+          than by means of advertisements offered within this website.
+        </p>
+        <p className="mb-[15px]">
+          Cookies may be used to record details of pages relating to particular
+          products and services that you have visited on this website. This is
+          to provide fcmb.com with generic usage statistics to allow the company
+          to improve this website and to provide you with information that may
+          interest you.
+        </p>
+        <p className="mb-[15px]">
+          The web browsers of most computers are initially set up to accept
+          cookies. If you prefer, you can set your web browser to disable
+          cookies or to inform you when a website is attempting to add a cookie.
+          You can also delete cookies that have previously been added to your
+          computer’s cookie file.
+        </p>
+        <p className="mb-[15px]">
+          You can set your browser to disable persistent cookies and/or session
+          cookies but if you disable session cookies, although you will be able
+          to view this website’s unsecured pages, you may not be able to log
+          onto any authenticated pages.
+        </p>
+        <p className="mb-[15px]">
+          Please visit{" "}
+          <a href="http://www.allaboutcookies.org/manage-cookies/">
+            http://www.allaboutcookies.org/manage-cookies/
+          </a>{" "}
+          to discover how to disable and delete cookies.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>5. Disclosures</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          <strong>5.1 Disclosures</strong>
+        </p>
+        <p className="mb-[15px]">
+          We may divulge individual data to any individual performing review,
+          lawful, operational, or different services for us. We will utilize
+          data which does not identify the person for these exercises at
+          whatever point achievable. Data divulged to vendors or contractors for
+          operational purposes may not be re-disclosed to others by such a
+          vendor or contractor. We may reveal individual data when needed to do
+          as such by a court request, or court order. We may divulge individual
+          data as we esteem it proper to secure the wellbeing of our customers
+          or for an investigation identified with open security or to report an
+          action that has all the earmarks of being disregarding law. We may
+          divulge individual data to ensure the security and dependability of
+          this site and to take safety measures against accountability.
+        </p>
+        <p className="mb-[15px]">
+          <strong>5.2 Disclosures to Third Parties</strong>
+        </p>
+        <p className="mb-[15px]">
+          Data about you that is accessible to you by means of fcmb.com,
+          including your personal data, can become subject to the legal systems
+          and laws in force in the country where the data is held, received or
+          stored by you or us. Such data can become subject to disclosure
+          pursuant to the laws of the country.
+        </p>
+        <p className="mb-[15px]">
+          We may reveal your name and other personal data and other monetary
+          data about you at the request of regulatory agency or in connection
+          with an examination of us as a bank. This information could be
+          revealed to internal and external attorneys or auditors, and to others
+          whom we are required to make such revelations.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>6. Information Security and Retention</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          At FCMB, we are fully committed to protecting the information we
+          collect. We maintain administrative, technical, and physical controls
+          to actively safeguard the Personal Information you provide or we
+          collect. These controls are designed to protect against loss, theft,
+          unauthorized access, disclosure, copying, misuse, or modification.
+        </p>
+        <p className="mb-[15px]">
+          Our security measures actively include secure servers, firewalls, data
+          encryption, and restricted access granted only to employees for
+          fulfilling their job responsibilities.
+        </p>
+        <p className="mb-[15px]">
+          When using a password for any of your accounts, it is essential that
+          you actively ensure its confidentiality and refrain from sharing it
+          with anyone.
+        </p>
+        <p className="mb-[15px]">
+          We actively conduct our business in accordance with these principles
+          to actively ensure the confidentiality and protection of your Personal
+          Information. While transmitting information online may not be entirely
+          secure, we actively take all reasonable steps to ensure the security
+          and protection of your Personal Information.
+        </p>
+        <p className="mb-[15px]">
+          We will only retain personal information on our servers for as long as
+          it is actively necessary while providing services to you. In the event
+          you close your account, we actively store your information on our
+          servers to comply with regulatory obligations and actively monitor,
+          detect, and prevent fraud. Any retention of your Personal Data is
+          solely for such length of time as may be required by law, regulation,
+          and the internal policies of FCMB, her members and/or affiliates.
+        </p>
+        <p className="mb-[15px]">
+          <strong>6.1 Data Protection on the Internet</strong>
+        </p>
+        <p className="mb-[15px]">
+          At FCMB we utilize encryption innovation to ensure the transmission of
+          data to or from you by means of fcmb.com. For security reasons and to
+          protect the security of your information, access to fcmb.com is
+          restricted to authorized users only. However, because information
+          about you, your account data and other transactions can be accessed
+          through a public network, the Internet, there can be no guarantee that
+          your account information will remain secure and you accept the risk
+          that unauthorized persons may view such information. If you believe
+          that an unauthorized person has accessed your information, please
+          contact the Bank immediately.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>7. Updates to this Policy</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          From time to time, we may change, amend or review this Privacy Policy
+          from time to time to reflect new services or changes in our Privacy
+          Policy and place any updates on this page. All changes made will be
+          posted on this page and where changes will materially affect you, we
+          will notify you of this change by placing a notice online or via mail.
+          If you keep using our Services, you consent to all amendments of this
+          Privacy Policy.
+        </p>
+        <p className="mb-[15px]">
+          <strong>
+            <span>8. Contact us</span>
+          </strong>
+        </p>
+        <p className="mb-[15px]">
+          For issues relating to personal data, please contact us via any of the
+          below:
+        </p>
+        <p className="mb-[15px]">
+          Corporate Address: Primrose Tower, 17A, Tinubu Street, Marina, Lagos
+        </p>
+        <p className="mb-[15px]">Telephone: 07003290000, 01-2798800</p>
+        <p className="mb-[15px]">
+          Email: <a href="#">customerservice@fcmb.com</a>
+        </p>
+        <p className="mb-[15px]">
+          Whatsapp: (+234) 09099999814 or (+234) 09099999815
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Main;
@@ -0,0 +1,3 @@
+import Main from "./Main";
+
+export { Main as TsAndCs };
@@ -5,5 +5,7 @@ export * from "./shared";
 export * from "./Footer";
 export * from "./DashboardLayout";
 export * from "./Icons";
-export * from './Dashboard'
-export * from './Cards'
+export * from "./Dashboard";
+export * from "./Cards";
+export * from "./LetsGetStated";
+export * from "./TsAndCs";
@@ -1,11 +1,19 @@
+import React from "react";

-type ButtonProps = {
-  className?: string;
+interface ButtonProps {
  text: string;
-};
+  className?: string;
+  onClick?: () => void;
+}

-const Button = ({ text, className }: ButtonProps) => {
-  return <button className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}>{text}</button>;
+const Button: React.FC<ButtonProps> = ({ text, className }) => {
+  return (
+    <button
+      className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+    >
+      {text}
+    </button>
+  );
 };

 export default Button;
@@ -0,0 +1,100 @@
+import React, { forwardRef } from "react";
+
+export interface InputCompOneProps {
+  label: string;
+  labelClass: string;
+  labelSpan?: string;
+  labelSpanClass?: string;
+  placeholder?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  name: string;
+  tabIndex?: number;
+  ref?: React.RefObject<HTMLInputElement>;
+  selectValue?: string;
+  input?: boolean;
+  select?: boolean;
+  selectOptions?: { value: string; label: string }[];
+  inputType?: string;
+  inputClass?: string;
+  parentInputClass?: string;
+  selectClass?: string;
+  parentSelectClass?: string;
+  parentClass?: string;
+  maxLength?: number;
+}
+
+const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
+  (
+    {
+      label,
+      labelClass,
+      labelSpan,
+      labelSpanClass,
+      placeholder,
+      value,
+      onChange,
+      onInput,
+      name,
+      tabIndex,
+      selectValue,
+      input = true,
+      select = false,
+      selectOptions = [],
+      inputType = "text",
+      inputClass,
+      parentInputClass,
+      selectClass,
+      parentSelectClass,
+      parentClass,
+      maxLength,
+    },
+    forwardedRef
+  ) => {
+    return (
+      <div className={parentClass}>
+        {label && (
+          <label htmlFor="" className={labelClass}>
+            {label}
+            {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+          </label>
+        )}
+        {input && (
+          <div className={parentInputClass}>
+            <input
+              type={inputType}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onInput={onInput}
+              name={name}
+              tabIndex={tabIndex}
+              ref={forwardedRef}
+              className={inputClass}
+              maxLength={maxLength}
+            />
+          </div>
+        )}
+        {select && (
+          <div className={parentSelectClass}>
+            <select
+              name={name}
+              id=""
+              value={selectValue}
+              className={selectClass}
+            >
+              {selectOptions.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default InputCompOne;
@@ -1,4 +1,5 @@
 import Button from "./Button";
+import InputCompOne from "./InputCompOne";
 import FloatLabelInput from "./FloatLabelInput";

-export {Button, FloatLabelInput}
+export { Button, FloatLabelInput, InputCompOne };
@@ -0,0 +1,27 @@
+import React, { ReactNode } from "react";
+import {
+  BottomFooterOne,
+  Header,
+  MidFooter,
+  TopFooterOne,
+  TopHeader,
+} from "../components";
+
+interface HomeLayoutProps {
+  children: ReactNode;
+}
+
+const HomeLayout: React.FC<HomeLayoutProps> = ({ children }) => {
+  return (
+    <>
+      <TopHeader />
+      <Header />
+      {children}
+      <TopFooterOne />
+      <MidFooter />
+      <BottomFooterOne />
+    </>
+  );
+};
+
+export default HomeLayout;
@@ -0,0 +1,24 @@
+import React from "react";
+import { Footer, LetsGetStartedNav } from "../components";
+import layoutImage from "../assets/images/test1-reverse.png";
+
+const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <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">
+          <img src={layoutImage} alt="" className="w-full h-full" />
+        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
+        <Footer />
+      </div>
+    </>
+  );
+};
+
+export default LetsGetStartedLayout;
@@ -0,0 +1,3 @@
+import HomeLayout from "./HomeLayout";
+import LetsGetStartedLayout from "./LetsGetStartedLayout";
+export { HomeLayout, LetsGetStartedLayout };
@@ -0,0 +1,14 @@
+import React from "react";
+import { HomeLayout } from "../layouts";
+import { PersonalHero } from "../components";
+
+const BusinessBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      <PersonalHero />
+      Business Banking
+    </HomeLayout>
+  );
+};
+
+export default BusinessBankingPage;
@@ -0,0 +1,14 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+import { PersonalHero } from '../components'
+
+const CooperateBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+        <PersonalHero />
+      Cooperate Banking
+    </HomeLayout>
+  )
+}
+
+export default CooperateBankingPage
@@ -1,7 +1,7 @@
 import React from "react";
 import { GetStarted as Main, Header, Footer } from "../components";

-const GetStartedPage: React.FC = () => {
+const GetStartedPage :React.FC = () => {
  return (
    <>
      <Header hideSidebar={true} hideMenu={true} />
@@ -1,14 +1,13 @@
-import { FC } from "react";
-import { Hero, Header, TopHeader, Requirements } from "../components";
+import React from "react";
+import { Hero, Requirements } from "../components";
+import { HomeLayout } from "../layouts";

-const HomePage: FC = () => {
+const HomePage: React.FC = () => {
  return (
-    <>
-      <TopHeader />
-      <Header />
+    <HomeLayout>
      <Hero />
      <Requirements />
-    </>
+    </HomeLayout>
  );
 };

@@ -0,0 +1,13 @@
+import React from "react";
+import { LetsGetStartedLayout } from "../layouts";
+import { LetsGetStarted } from "../components";
+
+const LetsGetStatedPage: React.FC = () => {
+  return (
+    <LetsGetStartedLayout>
+      <LetsGetStarted />
+    </LetsGetStartedLayout>
+  );
+};
+
+export default LetsGetStatedPage;
@@ -0,0 +1,14 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+import { PersonalHero } from '../components'
+
+const PersonalBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      <PersonalHero />
+      Personal Banking
+    </HomeLayout>
+  )
+}
+
+export default PersonalBankingPage
@@ -0,0 +1,13 @@
+import React from "react";
+import { HomeLayout } from "../layouts";
+import { TsAndCs } from "../components";
+
+const TermsAndConditionPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      <TsAndCs />
+    </HomeLayout>
+  );
+};
+
+export default TermsAndConditionPage;
@@ -6,5 +6,24 @@ import DashboardLegalsPage from "./DashboardLegalsPage";
 import DashboardProfilePage from "./DashboardProfilePage";
 import DashboardVerificationPage from "./DashboardVerificationPage";
 import DashboardpaymentsPage from "./DashboardPaymentsPage";
+import TermsAndConditionPage from "./TermsAndConditionPage";
+import PersonalBankingPage from "./PersonalBankingPage";
+import BusinessBankingPage from "./BusinessBankingPage";
+import CooperateBankingPage from "./CooperateBankingPage";
+import LetsGetStatedPage from "./LetsGetStatedPage";

-export {HomePage, LoginPage, GetStartedPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage}
+export {
+  HomePage,
+  LoginPage,
+  GetStartedPage,
+  DashboardHomePage,
+  DashboardLegalsPage,
+  DashboardProfilePage,
+  DashboardVerificationPage,
+  DashboardpaymentsPage,
+  TermsAndConditionPage,
+  PersonalBankingPage,
+  BusinessBankingPage,
+  CooperateBankingPage,
+  LetsGetStatedPage
+};
@@ -1,6 +1,20 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { GetStartedPage, HomePage, LoginPage, DashboardHomePage,  DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage } from "../pages";
+import {
+  GetStartedPage,
+  HomePage,
+  LoginPage,
+  DashboardHomePage,
+  DashboardLegalsPage,
+  DashboardProfilePage,
+  DashboardVerificationPage,
+  DashboardpaymentsPage,
+  TermsAndConditionPage,
+  BusinessBankingPage,
+  CooperateBankingPage,
+  PersonalBankingPage,
+  LetsGetStatedPage,
+} from "../pages";
 import { DashboardAuth } from "../components";

 const Routers = () => {
@@ -9,14 +23,51 @@ const Routers = () => {
      <Route path={RouteHandler.homepage} element={<HomePage />} />
      <Route path={RouteHandler.loginpage} element={<LoginPage />} />
      <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
+      <Route
+        path={RouteHandler.termsAndConditions}
+        element={<TermsAndConditionPage />}
+      />
+      <Route
+        path={RouteHandler.businessBanking}
+        element={<BusinessBankingPage />}
+      />
+      <Route
+        path={RouteHandler.cooperateBanking}
+        element={<CooperateBankingPage />}
+      />
+      <Route
+        path={RouteHandler.personalBanking}
+        element={<PersonalBankingPage />}
+      />
+      <Route
+        path={RouteHandler.letsGetStarted}
+        element={<LetsGetStatedPage />}
+      />
+
+      {/* Dashboard */}
      <Route element={<DashboardAuth />}>
-          <Route path={RouteHandler.dashboardHome} element={<DashboardHomePage />} />
-          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfilePage />} />
-          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerificationPage />} />
-          <Route path={RouteHandler.dashboardPayments} element={<DashboardpaymentsPage />} />
-          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegalsPage />} />
+        <Route
+          path={RouteHandler.dashboardHome}
+          element={<DashboardHomePage />}
+        />
+        <Route
+          path={RouteHandler.dashboardProfile}
+          element={<DashboardProfilePage />}
+        />
+        <Route
+          path={RouteHandler.dashboardVerification}
+          element={<DashboardVerificationPage />}
+        />
+        <Route
+          path={RouteHandler.dashboardPayments}
+          element={<DashboardpaymentsPage />}
+        />
+        <Route
+          path={RouteHandler.dashboardLegals}
+          element={<DashboardLegalsPage />}
+        />
      </Route>
-      <Route path='*'element={<>Error Page</>} />
+      <Route path="*" element={<>Error Page</>} />
    </Routes>
  );
 };
@@ -1,10 +1,15 @@
 export class RouteHandler {
-    static homepage = "/"
-    static loginpage = '/login'
-    static getStarted = "/get-started"
-    static dashboardHome = '/dashboard/home'
-    static dashboardProfile = '/dashboard/profile'
-    static dashboardVerification = '/dashboard/verification'
-    static dashboardPayments = '/dashboard/payments'
-    static dashboardLegals = '/dashboard/legals'
-}
+  static homepage = "/";
+  static loginpage = "/login";
+  static personalBanking = "/personal-banking";
+  static businessBanking = "/business-banking";
+  static cooperateBanking = "/cooperate-banking";
+  static letsGetStarted = "/lets-get-started";
+  static getStarted = "/get-started";
+  static dashboardHome = "/dashboard/home";
+  static dashboardProfile = "/dashboard/profile";
+  static dashboardVerification = "/dashboard/verification";
+  static dashboardPayments = "/dashboard/payments";
+  static dashboardLegals = "/dashboard/legals";
+  static termsAndConditions = "/terms-and-conditions";
+}
@@ -1,12 +1,19 @@
 import FBook from "../assets/icons/facebook.svg";
 import Twitter from "../assets/icons/twitter.svg";
 import Instagram from "../assets/icons/instagram.svg";
+import FBookWhite from "../assets/images/socials/facebook.svg";
+import LinkedInWhite from "../assets/images/socials/linkedin.svg";
+import XWhite from "../assets/images/socials/twitterx.svg";
+import WhatsappWhite from "../assets/images/socials/whatsapp.svg";
+import YoutubeWhite from "../assets/images/socials/youtube.svg";
+import InstagramWhite from "../assets/images/socials/instagram.svg";
+import { RouteHandler } from "../router/routes";

 export const top_header_data = [
-  { id: 1, name: "HOME" },
-  { id: 2, name: "PERSONAL" },
-  { id: 3, name: "BUSINESS" },
-  { id: 4, name: "CORPORATE" },
+  { id: 1, name: "HOME", href: RouteHandler.homepage },
+  { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
+  { id: 3, name: "BUSINESS", href: RouteHandler.businessBanking },
+  { id: 4, name: "CORPORATE", href: RouteHandler.cooperateBanking },
 ];

 export const lowerMenuItems = [
@@ -42,8 +49,506 @@ export const lowerMenuItems = [
  },
 ];

+export const _lowerMenuItems = [
+  {
+    name: "PERSONAL BANKING",
+    linkPath: "/personal-banking",
+    subItems: [
+      {
+        name: "CURRENT ACCOUNTS",
+        linkPath: "/current-accounts",
+        subItems: [
+          {
+            name: "CLASSIC CURRENT ACCOUNT",
+            linkPath: "/personal-classic-current-account",
+          },
+          {
+            name: "PREMIUM CURRENT ACCOUNT",
+            linkPath: "/premium-current-account",
+          },
+          {
+            name: "PERSONAL BUSINESS ACCOUNT",
+            linkPath: "/personal-business-account",
+          },
+          {
+            name: "DOMICILIARY CURRENT ACCOUNT",
+            linkPath: "/domiciliary-current-account",
+          },
+        ],
+      },
+      {
+        name: "SAVINGS ACCOUNTS",
+        linkPath: "/savings-accounts",
+        subItems: [
+          { name: "FCMB EASY ACCOUNT", linkPath: "/easy-account" },
+          { name: "KIDS (0-17 YRS)", linkPath: "/kids" },
+          { name: "FLEXX (18-30 YRS)", linkPath: "/flexx-account" },
+          {
+            name: "CLASSIC SAVINGS ACCOUNT",
+            linkPath: "/classic-savings-account",
+          },
+          {
+            name: "PREMIUM SAVINGS ACCOUNT",
+            linkPath: "/fcmb-premium-savings-account",
+          },
+          {
+            name: "FCMB SALARY SAVINGS ACCOUNT",
+            linkPath: "/fcmb-salary-savings-account",
+          },
+          {
+            name: "DOMICILIARY SAVINGS ACCOUNT",
+            linkPath: "/domiciliary-savings-account",
+          },
+        ],
+      },
+      {
+        name: "INVESTMENTS",
+        linkPath: "/investment-accounts",
+        subItems: [
+          { name: "FIXED DEPOSITS", linkPath: "/fixed-deposits" },
+          { name: "GRO (App)", linkPath: "/GRO" },
+          { name: "GRO (Web)", linkPath: "https://www.investwithgro.com/" },
+          {
+            name: "I-NEST SAVING",
+            linkPath: "https://i-nest.fcmb.com/#/welcome",
+          },
+          { name: "CALL DEPOSITS", linkPath: "/call-deposits" },
+          {
+            name: "EDUCATION INVESTMENT PLAN",
+            linkPath: "/education-investment",
+          },
+          {
+            name: "MUTUAL FUNDS",
+            linkPath: "https://www.fcmbassetmanagement.com/mutual-funds/",
+          },
+        ],
+      },
+      {
+        name: "LOANS AND CREDIT CARDS",
+        linkPath: "/loans-and-credit-cards",
+        subItems: [
+          { name: "FASTCASH", linkPath: "/fastcash" },
+          { name: "SALARY PLUS LOAN", linkPath: "/salary-plus-loan" },
+          { name: "PREMIUM SALARY LOAN", linkPath: "/premium-salary-loan" },
+          { name: "AUTO LOAN", linkPath: "/auto-loan" },
+          { name: "AIRTIME LOAN", linkPath: "/airtime-loan" },
+          { name: "CREDIT CARDS", linkPath: "/credit-cards" },
+          {
+            name: "EASYLIFT LOAN",
+            linkPath: "https://easyliftloanform.fcmb.com",
+          },
+          { name: "MORTGAGE", linkPath: "http://mortgage.fcmb.com/" },
+        ],
+      },
+      {
+        name: "NON-RESIDENT NIGERIAN (NRN) BANKING",
+        linkPath: "https://www.fcmb.com/non-resident-nigerian",
+      },
+      {
+        name: "WAYS TO BANK",
+        linkPath: "/ways-to-bank",
+        subItems: [
+          { name: "FCMB MOBILE", linkPath: "/fcmb-mobile" },
+          {
+            name: "RETAIL INTERNET BANKING",
+            linkPath: "https://ibank.fcmb.com/",
+          },
+          { name: "USSD BANKING", linkPath: "/ussd" },
+          { name: "OUR BRANCH NETWORK", linkPath: "/branch-network" },
+          { name: "OUR ATM NETWORK", linkPath: "/atm-network" },
+          { name: "FLASHMECASH", linkPath: "/flashme-cash" },
+          { name: "OUR CARDS", linkPath: "/our-cards" },
+          { name: "FCMB ELECTRONIC CHANNELS", linkPath: "/e-channels" },
+          { name: "AGENT BANKING", linkPath: "/agent-banking" },
+          {
+            name: "FCMB SECURE COMMUNICATION",
+            linkPath: "/secure-communication",
+          },
+          { name: "TEMI", linkPath: "/temi" },
+        ],
+      },
+      { name: "BANCASSURANCE", linkPath: "/bancassurance" },
+    ],
+  },
+  {
+    name: "BUSINESS BANKING",
+    linkPath: "/business-banking",
+    subItems: [
+      {
+        name: "PROPOSITIONS",
+        linkPath: "",
+        subItems: [
+          { name: "SHEVENTURES", linkPath: "/she-ventures" },
+          { name: "BUSINESS ZONE", linkPath: "https://businesszone.fcmb.com/" },
+          {
+            name: "FOOD BUSINESS SUPPORT",
+            linkPath: "https://www.fcmb.com/food-business-support/",
+          },
+          { name: "SCHOOL BUSINESS SUPPORT", linkPath: "/school-support" },
+        ],
+      },
+      {
+        name: "CURRENT ACCOUNTS",
+        linkPath: "/business-current-accounts",
+        subItems: [
+          {
+            name: "CORPORATE CURRENT ACCOUNT",
+            linkPath: "/corporate-current-account",
+          },
+          { name: "FCMB BUSINESS ACCOUNT", linkPath: "/fcmb-business-account" },
+          {
+            name: "DOMICILIARY CURRENT ACCOUNT",
+            linkPath: "/business-domiciliary-current-account",
+          },
+        ],
+      },
+      {
+        name: "SAVINGS ACCOUNTS",
+        linkPath: "/node/178",
+        subItems: [
+          {
+            name: "BUSINESS SAVINGS ACCOUNT",
+            linkPath: "/business-savings-account",
+          },
+        ],
+      },
+      {
+        name: "LOANS",
+        linkPath: "/business-loans",
+        subItems: [
+          {
+            name: "SME DEVELOPMENT FINANCE FACILITY",
+            linkPath: "/sme-development-finance-facility",
+          },
+          {
+            name: "SME ASSET FINANCE FACILITY",
+            linkPath: "/sme-asset-finance-facility",
+          },
+          {
+            name: "SME WORKING CAPITAL FACILITY",
+            linkPath: "/sme-working-capital-facility",
+          },
+          { name: "QUICK LOAN", linkPath: "/quick-loan" },
+          {
+            name: "SME INVOICE DISCOUNTING FINANCE (IDF) FACILITY",
+            linkPath: "/invoice-discounting-loan",
+          },
+          {
+            name: "SME LOCAL PURCHASE ORDER (LPO) FINANCE FACILITY",
+            linkPath: "/local-purchase-order-loan",
+          },
+        ],
+      },
+      { name: "BONDS & GUARANTEES", linkPath: "/bonds-and-guarantees" },
+      { name: "INTERVENTION FUNDS", linkPath: "/intervention-funds" },
+      { name: "TRADE SERVICE", linkPath: "/trade-service" },
+      {
+        name: "PAYMENT & COLLECTION",
+        linkPath: "/payment-and-collection",
+        subItems: [
+          { name: "COLLECTION SOLUTIONS", linkPath: "/collection-solutions" },
+          { name: "PAYMENT SOLUTIONS", linkPath: "/payment-solutions" },
+        ],
+      },
+      {
+        name: "WAYS TO BANK",
+        linkPath: "/business-ways-to-bank",
+        subItems: [
+          {
+            name: "BUSINESS INTERNET BANKING",
+            linkPath: "https://ibank.fcmb.com/corporate/BbgLoginScreenUI.aspx",
+          },
+          {
+            name: "CORPORATE INTERNET BANKING",
+            linkPath: "https://www.fcmbonline.com/",
+          },
+          { name: "OUR ATM NETWORK", linkPath: "/atm-network2" },
+          { name: "FCMB ONLINE", linkPath: "/fcmb-online-business" },
+          {
+            name: "FCMB ELECTRONIC CHANNELS",
+            linkPath: "https://www.fcmb.com/e-channels",
+          },
+          { name: "FCMB BUSINESS APP", linkPath: "/FCMB-business-app" },
+        ],
+      },
+    ],
+  },
+  {
+    name: "CORPORATE BANKING",
+    linkPath: "/corporate-banking",
+    subItems: [
+      {
+        name: "FOREIGN EXCHANGE SERVICES",
+        linkPath: "/foreign-exchange-services",
+      },
+      { name: "TRADE SERVICES", linkPath: "/node/166" },
+      { name: "CASH MANAGEMENT SOLUTIONS", linkPath: "/cash-management" },
+      { name: "CORPORATE FINANCE", linkPath: "/corporate-finance" },
+    ],
+  },
+  {
+    name: "GROUP & SUBSIDIARIES",
+    linkPath: "",
+    subItems: [
+      { name: "FCMB GROUP PLC", linkPath: "https://www.fcmbgroup.com/" },
+      {
+        name: "CSL STOCKBROKERS",
+        linkPath: "https://www.cslstockbrokers.com/",
+      },
+      {
+        name: "FCMB CAPITAL MARKETS",
+        linkPath: "https://www.fcmbcapitalmarketsng.com/",
+      },
+      {
+        name: "FCMB ASSET MANAGEMENT",
+        linkPath: "https://www.fcmbassetmanagement.com/index/",
+      },
+      {
+        name: "FCMB MICROFINANCE BANK",
+        linkPath: "/fcmb-microfinance-initiative",
+      },
+      { name: "FCMB UK", linkPath: "http://www.fcmbuk.com/" },
+      {
+        name: "FCMB PENSIONS LIMITED",
+        linkPath: "https://www.fcmbpensions.com/",
+      },
+      {
+        name: "CREDIT DIRECT LIMITED",
+        linkPath: "https://www.creditdirect.ng",
+      },
+      { name: "FCMB TRUSTEES", linkPath: "http://fcmbtrustees.com/" },
+    ],
+  },
+  {
+    name: "ABOUT US",
+    linkPath: "/about-us",
+    subItems: [
+      {
+        name: "OUR VISION/MISSION/VALUES",
+        linkPath: "/about-us/vision-mision-core-values",
+      },
+      { name: "OUR HISTORY", linkPath: "/about-us/our-history" },
+      {
+        name: "INVESTOR RELATIONS",
+        linkPath: "http://www.fcmbgroup.com/investor-relations",
+      },
+      { name: "CSR", linkPath: "/corporate-social-responsibility/index.html" },
+      { name: "SUSTAINABILITY", linkPath: "/sustainability/index.html" },
+      { name: "OUR LEADERSHIP", linkPath: "/about-us/our-leadership" },
+      { name: "BOARD OF DIRECTORS", linkPath: "/about-us/board-of-directors" },
+      {
+        name: "MEDIA RELATIONS",
+        linkPath: "/media-relations",
+        subItems: [
+          { name: "PRESS RELEASES", linkPath: "/press-releases" },
+          { name: "MEDIA STATEMENTS", linkPath: "/press-statements" },
+        ],
+      },
+      { name: "AWARDS AND RECOGNITION", linkPath: "/awards" },
+      {
+        name: "OUR POLICY",
+        linkPath: "/our-policies",
+        subItems: [
+          { name: "BUSINESS CONTINUITY", linkPath: "/business-continuity" },
+          {
+            name: "CORPORATE GOVERNANCE POLICY",
+            linkPath: "/corporate-governance",
+          },
+          { name: "PRIVACY POLICY", linkPath: "/privacy-policy" },
+          { name: "QUALITY POLICY", linkPath: "/quality-policy" },
+        ],
+      },
+    ],
+  },
+  {
+    name: "MY BANK AND I",
+    linkPath: "",
+    subItems: [
+      { name: "TELEPHONE SELF SERVICE", linkPath: "/telephone-self-service" },
+      {
+        name: "CURRENT CAMPAIGNS/PROMOS",
+        linkPath: "/current-campaigns-promos",
+        subItems: [
+          {
+            name: "BOOK YOUR FLIGHTS AND PAY IN INSTALMENTS WITH FCMB",
+            linkPath: "/247travels",
+          },
+          { name: "REFER AND WIN", linkPath: "/refer-and-win" },
+          { name: "CARD DISCOUNTS", linkPath: "/card-discounts" },
+          {
+            name: "FLEXX WRITING CHALLENGE",
+            linkPath: "https://flexxzone.fcmb.com/writing-challenge/",
+          },
+          {
+            name: "FLEXXPRENEUR",
+            linkPath:
+              "https://flexxzone.fcmb.com/2020/07/flexxpreneur-is-back-2/",
+          },
+          {
+            name: "3-MONTH FREE BANKING",
+            linkPath: "https://www.fcmb.com/campaign/smebanking",
+          },
+        ],
+      },
+      { name: "CAREERS", linkPath: "/career" },
+      { name: "CUSTOMER FEEDBACK", linkPath: "/customer-feedback" },
+      { name: "CUSTOMER SERVICE", linkPath: "/customer-service" },
+    ],
+  },
+];
+
 export const socialsIcons = [
  { name: "facebook", image: FBook },
  { name: "twitter", image: Twitter },
  { name: "instagram", image: Instagram },
 ];
+
+export const footerItems = [
+  {
+    category: "PERSONAL BANKING",
+    subItems: [
+      { text: "CURRENT ACCOUNTS", href: "/current-accounts" },
+      { text: "SAVINGS ACCOUNTS", href: "/savings-accounts" },
+      { text: "INVESTMENTS", href: "/investment-accounts" },
+      { text: "LOANS AND CREDIT CARDS", href: "/loans-and-credit-cards" },
+      {
+        text: "NON-RESIDENT NIGERIAN (NRN) BANKING",
+        href: "https://www.fcmb.com/non-resident-nigerian",
+      },
+      { text: "WAYS TO BANK", href: "/ways-to-bank" },
+      { text: "BANCASSURANCE", href: "/bancassurance" },
+    ],
+  },
+  {
+    category: "BUSINESS BANKING",
+    subItems: [
+      { text: "PROPOSITIONS", href: "" },
+      { text: "CURRENT ACCOUNTS", href: "/business-current-accounts" },
+      { text: "SAVINGS ACCOUNTS", href: "/node/178" },
+      { text: "LOANS", href: "/business-loans" },
+      { text: "BONDS & GUARANTEES", href: "/bonds-and-guarantees" },
+      { text: "INTERVENTION FUNDS", href: "/intervention-funds" },
+      { text: "TRADE SERVICE", href: "/trade-service" },
+      { text: "PAYMENT & COLLECTION", href: "/payment-and-collection" },
+      { text: "WAYS TO BANK", href: "/business-ways-to-bank" },
+    ],
+  },
+  {
+    category: "CORPORATE 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" },
+    ],
+  },
+  {
+    category: "GROUP & SUBSIDIARIES",
+    subItems: [
+      { text: "FCMB GROUP PLC", href: "https://www.fcmbgroup.com/" },
+      { text: "CSL STOCKBROKERS", href: "https://www.cslstockbrokers.com/" },
+      {
+        text: "FCMB CAPITAL MARKETS",
+        href: "https://www.fcmbcapitalmarketsng.com/",
+      },
+      {
+        text: "FCMB ASSET MANAGEMENT",
+        href: "https://www.fcmbassetmanagement.com/index/",
+      },
+      { text: "FCMB MICROFINANCE BANK", href: "/fcmb-microfinance-initiative" },
+      { text: "FCMB UK", href: "http://www.fcmbuk.com/" },
+      { text: "FCMB PENSIONS LIMITED", href: "https://www.fcmbpensions.com/" },
+      { text: "CREDIT DIRECT LIMITED", href: "https://www.creditdirect.ng" },
+      { text: "FCMB TRUSTEES", href: "http://fcmbtrustees.com/" },
+    ],
+  },
+  {
+    category: "ABOUT US",
+    subItems: [
+      {
+        text: "OUR VISION/MISSION/VALUES",
+        href: "/about-us/vision-mision-core-values",
+      },
+      { text: "OUR HISTORY", href: "/about-us/our-history" },
+      {
+        text: "INVESTOR RELATIONS",
+        href: "http://www.fcmbgroup.com/investor-relations",
+      },
+      { text: "CSR", href: "/corporate-social-responsibility/index.html" },
+      { text: "SUSTAINABILITY", href: "/sustainability/index.html" },
+      { text: "OUR LEADERSHIP", href: "/about-us/our-leadership" },
+      { text: "BOARD OF DIRECTORS", href: "/about-us/board-of-directors" },
+      { text: "MEDIA RELATIONS", href: "/media-relations" },
+      { text: "AWARDS AND RECOGNITION", href: "/awards" },
+      { text: "OUR POLICY", href: "/our-policies" },
+    ],
+  },
+  {
+    category: "MY BANK AND I",
+    subItems: [
+      { text: "TELEPHONE SELF SERVICE", href: "/telephone-self-service" },
+      { text: "CURRENT CAMPAIGNS/PROMOS", href: "/current-campaigns-promos" },
+      { text: "CAREERS", href: "/career" },
+      { text: "CUSTOMER FEEDBACK", href: "/customer-feedback" },
+      { text: "CUSTOMER SERVICE", href: "/customer-service" },
+    ],
+  },
+];
+
+export const footerSocialLinks = [
+  {
+    href: "https://www.facebook.com/FcmbMyBank/",
+    icon: FBookWhite,
+  },
+  {
+    href: "https://twitter.com/myfcmb/",
+    icon: XWhite,
+  },
+  {
+    href: "https://www.linkedin.com/company/first-city-monument-bank-ltd/",
+    icon: LinkedInWhite,
+  },
+  {
+    href: "https://www.youtube.com/user/fcmbplc",
+    icon: YoutubeWhite,
+  },
+  {
+    href: "https://www.instagram.com/myfcmb/",
+    icon: InstagramWhite,
+  },
+  {
+    href: "https://api.whatsapp.com/send?phone=09099999814",
+    icon: WhatsappWhite,
+  },
+];
+
+export const footerCustomerLinks = [
+  {
+    text: "PRIVACY POLICY",
+    href: "https://www.fcmb.com/privacy-policy",
+  },
+  {
+    text: "PRESS RELEASES",
+    href: "/press-releases",
+  },
+  {
+    text: "SHARE PRICE",
+    href: "/",
+  },
+  {
+    text: "WHISTLE BLOWER",
+    href: "/fcmb-whistle-blower-form",
+  },
+  {
+    text: "FRAUD PREVENTION",
+    href: "/customer-service",
+  },
+  {
+    text: "AML",
+    href: "/customer-service",
+  },
+  {
+    text: "CAREERS",
+    href: "/career",
+  },
+];
Author	SHA1	Message	Date
tokslaw	ee94a59f75	Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master	2024-03-20 03:49:03 +00:00
Ebube	4c24ce5903	Merge branch 'master' of https://gitlab.chiefsoft.net/DigiFi/digifi-www into first-homepage-layout	2024-03-20 01:38:28 +01:00
Ebube	86c0a236fe	Added personal image to the pages	2024-03-20 01:37:31 +01:00
ameye	2daae9b0e0	Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master	2024-03-19 12:35:47 +00:00
Ebube	2890677472	fix build error	2024-03-19 13:33:33 +01:00
Ebube	4a3f46c19b	added otp to letsGetStarted	2024-03-19 13:11:21 +01:00
Ebube	79f5af7692	Added layout to lets get started bvn	2024-03-19 09:04:49 +01:00
ameye	2a59165054	Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master	2024-03-18 17:21:25 +00:00
Ebube	e3cf881e09	fix build error	2024-03-18 17:49:55 +01:00
Ebube	dde4072593	added pages for top header nav links	2024-03-18 17:42:36 +01:00
Ebube	df6fe828e3	added Terms and Condition Page	2024-03-18 17:23:04 +01:00
Ebube	db08d1201c	complete footer and home layout page created	2024-03-18 15:52:12 +01:00
ameye	32acf978c3	Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master	2024-03-18 11:32:51 +00:00
Ebube	f7ef9ff3a0	fix for production build	2024-03-18 12:31:17 +01:00
ameye	37c012461f	Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master	2024-03-18 10:08:29 +00:00
Ebube	0a295cc81c	Merge branch 'master' of https://gitlab.chiefsoft.net/DigiFi/digifi-www into first-homepage-layout	2024-03-18 11:01:37 +01:00
Ebube	e5c605560b	Added footer and input component	2024-03-18 11:01:05 +01:00
ameye	26b95bab3d	Merge branch 'dashboard-home-reponsive' of DigiFi/digifi-www into master	2024-03-18 09:43:27 +00:00
victorAnumudu	cbbd23fde3	made dashboard home page reponsive	2024-03-18 10:39:54 +01:00
tokslaw	18c1a78d4c	Merge branch 'aside-menu-bug' of DigiFi/digifi-www into master	2024-03-18 04:51:08 +00:00
Ebube	f402efeb85	Merge branch 'master' of https://gitlab.chiefsoft.net/DigiFi/digifi-www into first-homepage-layout	2024-03-17 20:08:16 +01:00
Ebube	38becd42ac	.	2024-03-17 20:04:31 +01:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="50px" height="50px"><g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M32,11h5c0.552,0 1,-0.448 1,-1v-6.737c0,-0.524 -0.403,-0.96 -0.925,-0.997c-1.591,-0.113 -4.699,-0.266 -6.934,-0.266c-6.141,0 -10.141,3.68 -10.141,10.368v6.632h-7c-0.552,0 -1,0.448 -1,1v7c0,0.552 0.448,1 1,1h7v19c0,0.552 0.448,1 1,1h7c0.552,0 1,-0.448 1,-1v-19h7.222c0.51,0 0.938,-0.383 0.994,-0.89l0.778,-7c0.066,-0.592 -0.398,-1.11 -0.994,-1.11h-8v-5c0,-1.657 1.343,-3 3,-3z"></path></g></g></svg>