DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Olusesan Ameye
2024-03-18 10:08:29 +00:00
committed by Gogs
parent 26b95bab3d 0a295cc81c
commit 37c012461f
17 changed files with 407 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/footer_back.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

src/components/Footer/MidFooter.tsx
+16
View File
@@ -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
+19
View File
@@ -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
+30
View File
@@ -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
+8
View File
@@ -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
+3 -1
View File
@@ -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
+98
View File
@@ -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
+11 -5
View File
@@ -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">
<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>
);
src/components/Header/Header.tsx
+1 -1
View File
@@ -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 -2
View File
@@ -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
+3 -3
View File
@@ -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
+9 -3
View File
@@ -1,11 +1,17 @@
import { FC } from "react";
type ButtonProps = {
className?: string;
text: string;
};
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 = ({ text, className }: ButtonProps): FC => {
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
+93
View File
@@ -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
+2 -1
View File
@@ -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
+10 -1
View File
@@ -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
+10 -1
View File
@@ -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
+92
View File
@@ -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" },
],
},
];