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

src/components/Footer/MidFooter.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+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="hidden sm:flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
+        <p className="capitalize text-[20px] font-extralight">My Bank and I</p>
+      </div>
+    </div>
+  </div>
+  )
+}
+
+export default MidFooter

src/components/Footer/TopFooterOne.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import TopFooterOneMenu from "./TopFooterOneMenu";
+
+const TopFooterOne = (): FC => {
+  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">
+          <TopFooterOneMenu />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default TopFooterOne;

src/components/Footer/TopFooterOneMenu.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import { footerItems } from "../../utils/data";
+
+interface TopFooterOneMenuProps {
+  category: string;
+  subItems: {
+    text: string;
+    href?: string;
+  }[];
+}
+
+const TopFooterOneMenu = (): FC => {
+  return footerItems.map(
+    ({ category, subItems }): TopFooterOneMenuProps => (
+      <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 }) => (
+            <Link to="#" className="text-[.6875rem] text-[#5e2785] hover:underline">
+              {text}
+            </Link>
+          ))}
+        </ul>
+      </ul>
+    )
+  );
+};
+
+export default TopFooterOneMenu;

src/components/Footer/footer.module.css

@@ -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;
+}

src/components/Footer/index.tsx

@@ -1,3 +1,5 @@
 import Footer from "./Footer";
+import TopFooterOne from "./TopFooterOne";
+import MidFooter from "./MidFooter";
 
-export { Footer };
+export { Footer, TopFooterOne, MidFooter };

src/components/GetStarted/BasicInfo.tsx

@@ -0,0 +1,98 @@
+import { FC } from "react";
+import { InputCompOne } from "..";
+
+const BasicInfo = (): FC => {
+  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={[
+            {
+              value: "",
+              label: "Select",
+            },
+            {
+              value: "ms",
+              label: "Ms",
+            },
+            {
+              value: "mr",
+              label: "Mr",
+            },
+            {
+              value: "miss",
+              label: "Miss",
+            },
+            {
+              value: "mrs",
+              label: "Mrs",
+            },
+          ]}
+        />
+        <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={[
+            {
+              value: "",
+              label: "Select",
+            },
+            {
+              value: "ms",
+              label: "Ms",
+            },
+            {
+              value: "mr",
+              label: "Mr",
+            },
+            {
+              value: "miss",
+              label: "Miss",
+            },
+            {
+              value: "mrs",
+              label: "Mrs",
+            },
+          ]}
+        />
+        <InputCompOne
+          label="Direct Sales Agent ID"
+          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={[
+            {
+              value: "",
+              label: "Select",
+            },
+          ]}
+        />
+        <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]"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BasicInfo;

src/components/GetStarted/GetStarted.tsx

@@ -1,17 +1,23 @@
 import { FC } from "react";
+import BasicInfo from "./BasicInfo";
 
 const GetStarted: FC = () => {
   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">
+        {/* Main */}
-          <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
+        <main>
-            BASIC INFORMATION
+          <div className="w-full rounded py-3 bg-[#5C2684] px-5">
-          </p>
+            <p className="text-base text-[#FBB700] tracking-[3%] font-extrabold w-fit">
-        </div>
+              BASIC INFORMATION
+            </p>
+          </div>
+          <BasicInfo />
+        </main>
       </div>
     </div>
   );

src/components/Header/Header.tsx

@@ -31,7 +31,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} />
       )}

src/components/Home/Hero/Hero.tsx

@@ -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>

src/components/Home/Requirements/FeatureText.tsx

@@ -5,7 +5,7 @@ import { RouteHandler } from "../../../router/routes";
 const FeatureText: FC = () => {
   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,9 +29,9 @@ 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">
         Terms and conditions apply

src/components/shared/Button.tsx

@@ -1,11 +1,17 @@
-
+import { FC } from "react";
 type ButtonProps = {
   className?: string;
   text: string;
 };
 
-const Button = ({ text, className }: ButtonProps) => {
+const Button = ({ text, className }: ButtonProps): FC => {
-  return <button className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}>{text}</button>;
+  return (
+    <button
+      className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
+    >
+      {text}
+    </button>
+  );
 };
 
 export default Button;

src/components/shared/InputCompOne.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface InputCompOneProps {
+  label: string;
+  labelClass: 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;
+  labelSpan?: string;
+  labelSpanClass?: string;
+  parentInputClass?: string;
+  inputClass?: string;
+  parentSelectClass?: string;
+  selectClass?: string;
+  input?: boolean;
+  select?: boolean;
+  inputType?: string;
+  selectOptions?: { value: string; label: string }[];
+  icon?: string | React.ReactNode; // Type for the icon
+}
+
+const InputCompOne: React.FC<InputCompOneProps> = ({
+  label,
+  labelClass,
+  labelSpan,
+  labelSpanClass,
+  placeholder = "Placeholder",
+  value,
+  onChange,
+  onInput,
+  name,
+  tabIndex,
+  ref,
+  selectValue,
+  input,
+  select,
+  inputType = "text",
+  selectOptions,
+  icon,
+  selectClass,
+  inputClass,
+  parentInputClass,
+  parentSelectClass,
+}) => {
+  return (
+    <div className={parentInputClass}>
+      {label && (
+        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
+          {label}
+          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
+        </label>
+      )}
+      {input && (
+        <div className="flex items-center">
+          <input
+            type={inputType}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onInput={onInput}
+            name={name}
+            tabIndex={tabIndex}
+            ref={ref}
+            className={inputClass}
+          />
+          {icon && (
+            <div className="">
+              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
+            </div>
+          )}
+        </div>
+      )}
+      {select && (
+        <div className={parentSelectClass}>
+          <select name={name} id="" value={selectValue} className={selectClass}>
+            {selectOptions?.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InputCompOne;

src/components/shared/index.ts

@@ -1,4 +1,5 @@
 import Button from "./Button";
+import InputCompOne from "./InputCompOne";
 import FloatLabelInput from "./FloatLabelInput";
 
-export {Button, FloatLabelInput}
+export { Button, FloatLabelInput, InputCompOne };

src/pages/HomePage.tsx

@@ -1,5 +1,12 @@
 import { FC } from "react";
-import { Hero, Header, TopHeader, Requirements } from "../components";
+import {
+  Hero,
+  Header,
+  TopHeader,
+  Requirements,
+  TopFooterOne,
+  MidFooter,
+} from "../components";
 
 const HomePage: FC = () => {
   return (
@@ -8,6 +15,8 @@ const HomePage: FC = () => {
       <Header />
       <Hero />
       <Requirements />
+      <TopFooterOne />
+      <MidFooter /> 
     </>
   );
 };

src/pages/index.ts

@@ -7,4 +7,13 @@ import DashboardProfilePage from "./DashboardProfilePage";
 import DashboardVerificationPage from "./DashboardVerificationPage";
 import DashboardpaymentsPage from "./DashboardPaymentsPage";
 
-export {HomePage, LoginPage, GetStartedPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage}
+export {
+  HomePage,
+  LoginPage,
+  GetStartedPage,
+  DashboardHomePage,
+  DashboardLegalsPage,
+  DashboardProfilePage,
+  DashboardVerificationPage,
+  DashboardpaymentsPage,
+};

src/utils/data.tsx

@@ -47,3 +47,95 @@ export const socialsIcons = [
   { 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" },
+    ],
+  },
+];