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
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",