diff --git a/src/assets/images/footer_back.jpg b/src/assets/images/footer_back.jpg new file mode 100644 index 0000000..4133d9f Binary files /dev/null and b/src/assets/images/footer_back.jpg differ diff --git a/src/components/Footer/MidFooter.tsx b/src/components/Footer/MidFooter.tsx new file mode 100644 index 0000000..867d5f2 --- /dev/null +++ b/src/components/Footer/MidFooter.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import styles from "./footer.module.css" + +const MidFooter = () => { + return ( +
+
+
+

My Bank and I

+
+
+
+ ) +} + +export default MidFooter diff --git a/src/components/Footer/TopFooterOne.tsx b/src/components/Footer/TopFooterOne.tsx new file mode 100644 index 0000000..ef4f601 --- /dev/null +++ b/src/components/Footer/TopFooterOne.tsx @@ -0,0 +1,19 @@ +import { FC } from "react"; +import TopFooterOneMenu from "./TopFooterOneMenu"; + +const TopFooterOne = (): FC => { + return ( + + ); +}; + +export default TopFooterOne; diff --git a/src/components/Footer/TopFooterOneMenu.tsx b/src/components/Footer/TopFooterOneMenu.tsx new file mode 100644 index 0000000..5f124c6 --- /dev/null +++ b/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 => ( + + ) + ); +}; + +export default TopFooterOneMenu; diff --git a/src/components/Footer/footer.module.css b/src/components/Footer/footer.module.css new file mode 100644 index 0000000..ed7def1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index d66565b..8bdfed9 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,3 +1,5 @@ import Footer from "./Footer"; +import TopFooterOne from "./TopFooterOne"; +import MidFooter from "./MidFooter"; -export { Footer }; \ No newline at end of file +export { Footer, TopFooterOne, MidFooter }; diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx new file mode 100644 index 0000000..89fa670 --- /dev/null +++ b/src/components/GetStarted/BasicInfo.tsx @@ -0,0 +1,98 @@ +import { FC } from "react"; +import { InputCompOne } from ".."; + +const BasicInfo = (): FC => { + return ( +
+
+ + + + +
+
+ ); +}; + +export default BasicInfo; diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx index 8c7e9a1..ea6a80d 100644 --- a/src/components/GetStarted/GetStarted.tsx +++ b/src/components/GetStarted/GetStarted.tsx @@ -1,17 +1,23 @@ import { FC } from "react"; +import BasicInfo from "./BasicInfo"; const GetStarted: FC = () => { return (
+ {/* Header */}

Let’s Get You Started

-
-

- BASIC INFORMATION -

-
+ {/* Main */} +
+
+

+ BASIC INFORMATION +

+
+ +
); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3314109..ad41802 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -31,7 +31,7 @@ const Header: FC = ({ }; return ( -
+
{!hideSidebar && ( )} diff --git a/src/components/Home/Hero/Hero.tsx b/src/components/Home/Hero/Hero.tsx index 83ee5e5..0fcd447 100644 --- a/src/components/Home/Hero/Hero.tsx +++ b/src/components/Home/Hero/Hero.tsx @@ -2,10 +2,10 @@ import styles from "./hero.module.css"; const Hero = () => { return (
-

+

PREMIUM SALARY LOAN

diff --git a/src/components/Home/Requirements/FeatureText.tsx b/src/components/Home/Requirements/FeatureText.tsx index 869cc65..518349c 100644 --- a/src/components/Home/Requirements/FeatureText.tsx +++ b/src/components/Home/Requirements/FeatureText.tsx @@ -5,7 +5,7 @@ import { RouteHandler } from "../../../router/routes"; const FeatureText: FC = () => { return (
-
+

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 = () => {

- ***Click here to apply + *** Click here to apply

Terms and conditions apply diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx index 3c22961..2bf778d 100644 --- a/src/components/shared/Button.tsx +++ b/src/components/shared/Button.tsx @@ -1,11 +1,17 @@ - +import { FC } from "react"; type ButtonProps = { className?: string; text: string; }; -const Button = ({ text, className }: ButtonProps) => { - return ; +const Button = ({ text, className }: ButtonProps): FC => { + return ( + + ); }; export default Button; diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx new file mode 100644 index 0000000..636e017 --- /dev/null +++ b/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) => void; + onInput?: (e: React.FormEvent) => void; + name: string; + tabIndex?: number; + ref?: React.RefObject; + 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 = ({ + label, + labelClass, + labelSpan, + labelSpanClass, + placeholder = "Placeholder", + value, + onChange, + onInput, + name, + tabIndex, + ref, + selectValue, + input, + select, + inputType = "text", + selectOptions, + icon, + selectClass, + inputClass, + parentInputClass, + parentSelectClass, +}) => { + return ( +

+ {label && ( + + )} + {input && ( +
+ + {icon && ( +
+ {typeof icon === "string" ? icon : icon} +
+ )} +
+ )} + {select && ( +
+ +
+ )} +
+ ); +}; + +export default InputCompOne; diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts index 3b0f127..19fca11 100644 --- a/src/components/shared/index.ts +++ b/src/components/shared/index.ts @@ -1,4 +1,5 @@ import Button from "./Button"; +import InputCompOne from "./InputCompOne"; import FloatLabelInput from "./FloatLabelInput"; -export {Button, FloatLabelInput} \ No newline at end of file +export { Button, FloatLabelInput, InputCompOne }; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index b042151..7e9685e 100644 --- a/src/pages/HomePage.tsx +++ b/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 = () => {
+ + ); }; diff --git a/src/pages/index.ts b/src/pages/index.ts index 0c85569..10a23d4 100644 --- a/src/pages/index.ts +++ b/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} \ No newline at end of file +export { + HomePage, + LoginPage, + GetStartedPage, + DashboardHomePage, + DashboardLegalsPage, + DashboardProfilePage, + DashboardVerificationPage, + DashboardpaymentsPage, +}; diff --git a/src/utils/data.tsx b/src/utils/data.tsx index 2114a15..5ef3c25 100644 --- a/src/utils/data.tsx +++ b/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" }, + ], + }, +];