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

Added social links to env and added hero text to the pages

Browse Source
This commit is contained in:
Ebube
2024-03-20 13:12:08 +01:00
parent ee94a59f75
commit 32f2a358b2
14 changed files with 230 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+5
View File
@@ -1 +1,6 @@
DIGIFI_PORT=5173
# Social Links
FACEBOOK_URL=https://www.facebook.com
TWITTER_URL=https://twitter.com
INSTAGRAM_URL=https://www.instagram.com
.env.development
+5
View File
@@ -1 +1,6 @@
DIGIFI_PORT=5173
# Social Links
VITE_FACEBOOK_URL=https://www.facebook.com
VITE_TWITTER_URL=https://twitter.com
VITE_INSTAGRAM_URL=https://www.instagram.com
.env.production
+5
View File
@@ -1 +1,6 @@
DIGIFI_PORT=5173
# Social Links
FACEBOOK_URL=https://www.facebook.com
TWITTER_URL=https://twitter.com
INSTAGRAM_URL=https://www.instagram.com
src/components/Footer/Footer.tsx
+6 -2
View File
@@ -4,14 +4,18 @@ import { socialsIcons } from "../../utils/data";
export default function Footer() {
const date = new Date().getFullYear();
return (
<div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
<div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center self-end">
<div className="containerMode flex justify-between items-center flex-wrap gap-2">
<p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
{date} @ First City Monument Bank Limited
</p>
<div className="footer-social-icons flex justify-end items-center gap-2">
{socialsIcons.map((icon, index) => (
<Link key={index} className="w-[1.875rem] h-[1.875rem]" to="#">
<Link
key={index}
className="w-[1.875rem] h-[1.875rem]"
to={icon.link}
>
<img src={icon.image} alt={icon.name} />
</Link>
))}
src/components/GetStarted/BasicInfo.tsx
+155 -59
View File
@@ -7,6 +7,7 @@ interface Option {
}
const BasicInfo: React.FC = () => {
const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
const inputRef = useRef<HTMLInputElement>(null);
// Array for marital status options
@@ -33,69 +34,164 @@ const BasicInfo: React.FC = () => {
};
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
// Handle input events
console.log(e);
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");
}
}
};
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 className="mt-8 max-w-[31.5rem]">
<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] rounded-[12px]"
selectOptions={titleOptions}
value=""
onChange={handleChange}
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] rounded-[12px]"
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] rounded-[12px]"
selectOptions={[{ value: "", label: "Select" }]}
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="BVN"
name="bvn"
parentInputClass=" 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] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
</div>
{!hideOTPComponent ? (
<div className="flex justify-between items-center g4">
<div className="mt-8 max-w-[31.5rem] w-full">
<div className="flex flex-col gap-3">
<InputCompOne
label="First Name"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Phone Number"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Email Address"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
<div className="mt-8 max-w-[31.5rem] w-full">
<div className="flex flex-col gap-3">
<InputCompOne
label="Surname"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Date of Birth"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
<InputCompOne
label="Second Name"
name="title"
parentInputClass="w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/>
</div>
</div>
</div>
) : null}
</>
);
};
src/components/Home/Hero/PersonalHero.tsx
+7 -5
View File
@@ -7,7 +7,7 @@ interface PersonalHeroProps {
body?: string;
buttonLink?: string;
buttonText?: string;
};
}
const PersonalHero: React.FC<PersonalHeroProps> = ({
heading,
body,
@@ -16,15 +16,17 @@ const PersonalHero: React.FC<PersonalHeroProps> = ({
}) => {
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}`}
className={`w-full max-[28.125rem] 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">
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
<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>
<p className="p-[.3125rem] pr-5 font-medium table w-[25.375rem]">{body}</p>
<Link to={buttonLink}>
<button>{buttonText}</button>
<button className="bg-[#A6368C] text-white text-[.9375rem] w-[10.9375rem] py-[.4375rem] px-[.625rem]">
{buttonText} &nbsp;
</button>
</Link>
</div>
</div>
src/components/Home/Requirements/FeatureText.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const FeatureText = () => {
</ul>
</div>
<Link
to={RouteHandler.getStarted}
to={RouteHandler.letsGetStarted}
className="text-[#5C2684] mt-[1.5625rem] w-fit"
>
*** <span className="hover:underline">Click here to apply</span>
src/components/LetsGetStated/LetsGetStarted.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const LetsGetStarted: React.FC = () => {
if (regex.test(value)) {
if (value?.length == 10) {
setHideOTPComponent(false);
secondInputRef.current?.focus();
// secondInputRef.current?.focus();
} else setHideOTPComponent(true);
} else {
console.log("object not found");
src/components/shared/InputCompOne.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
name,
tabIndex,
selectValue,
input = true,
input = false,
select = false,
selectOptions = [],
inputType = "text",
src/pages/BusinessBankingPage.tsx
+6 -1
View File
@@ -5,7 +5,12 @@ import { PersonalHero } from "../components";
const BusinessBankingPage: React.FC = () => {
return (
<HomeLayout>
<PersonalHero />
<PersonalHero
heading="Business Account"
body="Open a personal or business account in minutes, tailored to your unique needs."
buttonLink="#"
buttonText="Click here"
/>
Business Banking
</HomeLayout>
);
src/pages/CooperateBankingPage.tsx
+12 -7
View File
@@ -1,14 +1,19 @@
import React from 'react'
import { HomeLayout } from '../layouts'
import { PersonalHero } from '../components'
import React from "react";
import { HomeLayout } from "../layouts";
import { PersonalHero } from "../components";
const CooperateBankingPage: React.FC = () => {
return (
<HomeLayout>
<PersonalHero />
<PersonalHero
heading="Cooperate Account"
body="Open a personal or business account in minutes, tailored to your unique needs."
buttonLink="#"
buttonText="Click here"
/>
Cooperate Banking
</HomeLayout>
)
}
);
};
export default CooperateBankingPage
export default CooperateBankingPage;
src/pages/GetStartedPage.tsx
+9 -5
View File
@@ -1,13 +1,17 @@
import React from "react";
import { GetStarted as Main, Header, Footer } from "../components";
const GetStartedPage :React.FC = () => {
const GetStartedPage: React.FC = () => {
return (
<>
<div className="relative">
<Header hideSidebar={true} hideMenu={true} />
<Main />
<Footer />
</>
<div className="flex flex-col min-h-[85vh] justify-between">
<Main />
<div className="self-end w-full">
<Footer />
</div>
</div>
</div>
);
};
src/pages/PersonalBankingPage.tsx
+12 -7
View File
@@ -1,14 +1,19 @@
import React from 'react'
import { HomeLayout } from '../layouts'
import { PersonalHero } from '../components'
import React from "react";
import { HomeLayout } from "../layouts";
import { PersonalHero } from "../components";
const PersonalBankingPage: React.FC = () => {
return (
<HomeLayout>
<PersonalHero />
<PersonalHero
heading="Personal Or Business Account"
body="Open a personal or business account in minutes, tailored to your unique needs."
buttonLink="#"
buttonText="Click here"
/>
Personal Banking
</HomeLayout>
)
}
);
};
export default PersonalBankingPage
export default PersonalBankingPage;
src/utils/data.tsx
+5 -3
View File
@@ -9,6 +9,8 @@ import YoutubeWhite from "../assets/images/socials/youtube.svg";
import InstagramWhite from "../assets/images/socials/instagram.svg";
import { RouteHandler } from "../router/routes";
let process = import.meta.env;
export const top_header_data = [
{ id: 1, name: "HOME", href: RouteHandler.homepage },
{ id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
@@ -398,9 +400,9 @@ export const _lowerMenuItems = [
];
export const socialsIcons = [
{ name: "facebook", image: FBook },
{ name: "twitter", image: Twitter },
{ name: "instagram", image: Instagram },
{ name: "facebook", image: FBook, link: import.meta.env.VITE_FACEBOOK_URL },
{ name: "twitter", image: Twitter, link: import.meta.env.VITE_TWITTER_URL },
{ name: "instagram", image: Instagram, link: import.meta.env.VITE_INSTAGRAM_URL },
];
export const footerItems = [