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

corrected footer and linked the click to apply

Browse Source
This commit is contained in:
Ebube
2024-03-14 04:54:46 +01:00
parent 9ec1013173
commit db21572651
15 changed files with 165 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+9
View File
@@ -35,4 +35,13 @@
.sidebar.open {
transform: translateX(0);
/* Show the sidebar by removing the translation */
}
.sidebar-open {
border: 1px solid red;
}
.sidebar-close {
border: 1px solid green;
transform: translateX(0%);
}
src/components/Footer/Footer.tsx
+16 -23
View File
@@ -1,29 +1,22 @@
import { Link } from 'react-router-dom'
import FBook from '../../assets/icons/facebook.svg'
import Twitter from '../../assets/icons/twitter.svg'
import Instagram from '../../assets/icons/instagram.svg'
import { Link } from "react-router-dom";
import { socialsIcons } from "../../utils/data";
export default function Footer() {
let socialsIcons = [
{name: 'facebook', image: FBook},
{name: 'twitter', image: Twitter},
{name: 'instagram', image: Instagram},
]
const date = new Date().getFullYear();
return (
<div className='w-full h-10 absolute bottom-0 bg-sky-50/50 flex items-center'>
<div className='containerMode flex justify-between items-center flex-wrap gap-2'>
<p className='text-[10px]'>{new Date().getFullYear()} @ 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-5 h-5' to='#'>
<img src={icon.image} alt={icon.name} />
</Link>
))}
</div>
<div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
<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="#">
<img src={icon.image} alt={icon.name} />
</Link>
))}
</div>
</div>
</div>
)
);
}
src/components/GetStarted/GetStarted.tsx
+20
View File
@@ -0,0 +1,20 @@
import { FC } from "react";
const GetStarted: FC = () => {
return (
<div className="w-full flex items-center justify-center">
<div className="containerMode">
<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>
</div>
</div>
);
};
export default GetStarted;
src/components/GetStarted/index.ts
+3
View File
@@ -0,0 +1,3 @@
import GetStarted from "./GetStarted";
export { GetStarted };
src/components/Header/Header.tsx
+68 -51
View File
@@ -1,4 +1,4 @@
import { useState, ChangeEvent } from "react";
import { useState, ChangeEvent, FC } from "react";
import Logo from "../../assets/icons/logo.svg";
import Button from "../shared/Button";
import { lowerMenuItems } from "../../utils/data";
@@ -10,7 +10,15 @@ type LowerMenuItem = {
name: string;
};
const Header = () => {
type HiddenMenuItems = {
hideSidebar?: boolean;
hideMenu?: boolean;
};
const Header: FC<HiddenMenuItems> = ({
hideSidebar = false,
hideMenu = false,
}) => {
const [searchValue, setSearchValue] = useState<string>("");
const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
@@ -23,10 +31,11 @@ const Header = () => {
};
return (
<div className="relative my-2 flex items-center justify-center">
{isSidebarOpen && (
<div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
{!hideSidebar && (
<Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
)}
<div className="containerMode flex justify-between gap-1 xl:gap-8">
<Link to="/">
<img
@@ -35,54 +44,62 @@ const Header = () => {
className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
/>
</Link>
<div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
<ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
{["Open An Account", "Internet Banking", "Contact Us"].map(
(text: string) => (
<li key={text} className="hidden sm:flex">
<a href="#">
<Button
className={text === "Open An Account" ? "btn-active" : ""}
text={text}
/>
</a>
</li>
)
)}
<li className="w-full lg:w-fit">
<SearchInput onChange={handleSearchChange} value={searchValue} />
</li>
</ul>
<div className="flex lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
onClick={toggleSidebar}
className="w-6 h-6 stroke-[#A6368C]"
>
<path
fillRule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clipRule="evenodd"
/>
</svg>
</div>
<ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
{lowerMenuItems.map((item: LowerMenuItem) => (
<li
key={item.id}
className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
>
{item.name}
{!hideMenu && (
<div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
<ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
{["Open An Account", "Internet Banking", "Contact Us"].map(
(text: string) => (
<li key={text} className="hidden sm:flex">
<a href="#">
<Button
className={
text === "Open An Account" ? "btn-active" : ""
}
text={text}
/>
</a>
</li>
)
)}
<li className="w-full lg:w-fit">
<SearchInput
onChange={handleSearchChange}
value={searchValue}
/>
</li>
))}
</ul>
</div>
</ul>
<div className="flex lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
onClick={toggleSidebar}
className="w-6 h-6 stroke-[#A6368C]"
>
<path
fillRule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clipRule="evenodd"
/>
</svg>
</div>
<ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap">
{lowerMenuItems.map((item: LowerMenuItem) => (
<li
key={item.id}
className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
>
{item.name}
</li>
))}
</ul>
</div>
)}
</div>
</div>
);
src/components/Header/Sidebar.tsx
+6 -3
View File
@@ -1,16 +1,19 @@
const Sidebar = ({
toggleSidebar,
isSidebarOpen
isSidebarOpen,
}: {
toggleSidebar: () => void;
isSidebarOpen: boolean;
}) => {
const isActive = isSidebarOpen ? "sidebar-close" : "sidebar-open";
return (
<div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
// <div className={`sidebar ${isSidebarOpen ? "open" : ""}`}>
<div className={`${isActive} sidebar`}>
{/* Sidebar content goes here */}
<button onClick={toggleSidebar}>Close Sidebar</button>
</div>
);
};
export default Sidebar
export default Sidebar;
src/components/Home/Hero/Hero.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import styles from "./hero.module.css";
const Hero = () => {
return (
<div
className={`w-full border-t-2 border-[#E3DEDA] 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 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}`}
>
<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]">
src/components/Home/Requirements/FeatureText.tsx
+10 -3
View File
@@ -1,4 +1,8 @@
const FeatureText = () => {
import { FC } from "react";
import { Link } from "react-router-dom";
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]">
@@ -23,9 +27,12 @@ const FeatureText = () => {
<li>Insurance fee - 0.9%*loan amount*tenure (in years)</li>
</ul>
</div>
<a href="#" className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit">
<Link
to={RouteHandler.getStarted}
className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit"
>
***Click here to apply
</a>
</Link>
<p className="mt-[.5625rem] font-bold cursor-default">
Terms and conditions apply
</p>
src/components/index.ts
+1
View File
@@ -1,4 +1,5 @@
export * from "./Header"
export * from "./Home"
export * from "./GetStarted"
export * from "./shared"
export * from "./Footer"
src/pages/GetStartedPage.tsx
+14
View File
@@ -0,0 +1,14 @@
import React from "react";
import { GetStarted as Main, Header, Footer } from "../components";
const GetStartedPage: React.FC = () => {
return (
<>
<Header hideSidebar={true} hideMenu={true} />
<Main />
<Footer />
</>
);
};
export default GetStartedPage;
src/pages/HomePage.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { FC } from "react";
import { Hero, Header, TopHeader, Requirements } from "../components";
const HomePage = () => {
const HomePage: FC = () => {
return (
<>
<TopHeader />
src/pages/index.ts
+2 -1
View File
@@ -1,4 +1,5 @@
import HomePage from "./HomePage";
import LoginPage from "./LoginPage";
import GetStartedPage from "./GetStartedPage";
export {HomePage, LoginPage}
export {HomePage, LoginPage, GetStartedPage}
src/router/Router.tsx
+2 -1
View File
@@ -1,12 +1,13 @@
import { Route, Routes } from "react-router-dom";
import { RouteHandler } from "./routes";
import { HomePage, LoginPage } from "../pages";
import { GetStartedPage, HomePage, LoginPage } from "../pages";
const Routers = () => {
return (
<Routes>
<Route path={RouteHandler.homepage} element={<HomePage />} />
<Route path={RouteHandler.loginpage} element={<LoginPage />} />
<Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
</Routes>
);
};
src/router/routes.tsx
+1
View File
@@ -1,4 +1,5 @@
export class RouteHandler {
static homepage = "/"
static loginpage = '/login'
static getStarted = "/get-started"
}
src/utils/data.tsx
+10
View File
@@ -1,3 +1,7 @@
import FBook from "../assets/icons/facebook.svg";
import Twitter from "../assets/icons/twitter.svg";
import Instagram from "../assets/icons/instagram.svg";
export const top_header_data = [
{ id: 1, name: "HOME" },
{ id: 2, name: "PERSONAL" },
@@ -37,3 +41,9 @@ export const lowerMenuItems = [
linkPath: "",
},
];
export const socialsIcons = [
{ name: "facebook", image: FBook },
{ name: "twitter", image: Twitter },
{ name: "instagram", image: Instagram },
];