From db21572651a0d2c822972636ad73e212b3a71dc5 Mon Sep 17 00:00:00 2001 From: Ebube Date: Thu, 14 Mar 2024 04:54:46 +0100 Subject: [PATCH] corrected footer and linked the click to apply --- src/App.css | 9 ++ src/components/Footer/Footer.tsx | 39 +++--- src/components/GetStarted/GetStarted.tsx | 20 +++ src/components/GetStarted/index.ts | 3 + src/components/Header/Header.tsx | 119 ++++++++++-------- src/components/Header/Sidebar.tsx | 9 +- src/components/Home/Hero/Hero.tsx | 2 +- .../Home/Requirements/FeatureText.tsx | 13 +- src/components/index.ts | 1 + src/pages/GetStartedPage.tsx | 14 +++ src/pages/HomePage.tsx | 3 +- src/pages/index.ts | 3 +- src/router/Router.tsx | 3 +- src/router/routes.tsx | 1 + src/utils/data.tsx | 10 ++ 15 files changed, 165 insertions(+), 84 deletions(-) create mode 100644 src/components/GetStarted/GetStarted.tsx create mode 100644 src/components/GetStarted/index.ts create mode 100644 src/pages/GetStartedPage.tsx diff --git a/src/App.css b/src/App.css index 40af8c9..7fd0764 100644 --- a/src/App.css +++ b/src/App.css @@ -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%); } \ No newline at end of file diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index ea9f0a4..3973536 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -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 ( -
-
-

{new Date().getFullYear()} @ First City Monument Bank Limited

-
- {socialsIcons.map((icon, index)=>( - - {icon.name} - - ))} -
+
+
+

+ {date} @ First City Monument Bank Limited +

+
+ {socialsIcons.map((icon, index) => ( + + {icon.name} + + ))}
+
- ) + ); } diff --git a/src/components/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx new file mode 100644 index 0000000..8c7e9a1 --- /dev/null +++ b/src/components/GetStarted/GetStarted.tsx @@ -0,0 +1,20 @@ +import { FC } from "react"; + +const GetStarted: FC = () => { + return ( +
+
+

+ Let’s Get You Started +

+
+

+ BASIC INFORMATION +

+
+
+
+ ); +}; + +export default GetStarted; diff --git a/src/components/GetStarted/index.ts b/src/components/GetStarted/index.ts new file mode 100644 index 0000000..d85f971 --- /dev/null +++ b/src/components/GetStarted/index.ts @@ -0,0 +1,3 @@ +import GetStarted from "./GetStarted"; + +export { GetStarted }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index cbe2945..3314109 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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 = ({ + hideSidebar = false, + hideMenu = false, +}) => { const [searchValue, setSearchValue] = useState(""); const [isSidebarOpen, setIsSidebarOpen] = useState(false); @@ -23,10 +31,11 @@ const Header = () => { }; return ( -
- {isSidebarOpen && ( +
+ {!hideSidebar && ( )} +
{ className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]" /> -
-
    - {["Open An Account", "Internet Banking", "Contact Us"].map( - (text: string) => ( -
  • - -
    • - ) - )} -
  • - -
    • -
-
- - - -
-
    - {lowerMenuItems.map((item: LowerMenuItem) => ( -
  • - {item.name} + + {!hideMenu && ( +
    +
      + {["Open An Account", "Internet Banking", "Contact Us"].map( + (text: string) => ( +
    • + +
      • + ) + )} +
    • +
      • - ))} -
    -
    +
+
+ + + +
+
    + {lowerMenuItems.map((item: LowerMenuItem) => ( +
  • + {item.name} +
    • + ))} +
+
+ )}
); diff --git a/src/components/Header/Sidebar.tsx b/src/components/Header/Sidebar.tsx index 9490394..60e1f9e 100644 --- a/src/components/Header/Sidebar.tsx +++ b/src/components/Header/Sidebar.tsx @@ -1,16 +1,19 @@ const Sidebar = ({ toggleSidebar, - isSidebarOpen + isSidebarOpen, }: { toggleSidebar: () => void; isSidebarOpen: boolean; }) => { + const isActive = isSidebarOpen ? "sidebar-close" : "sidebar-open"; + return ( -
+ //
+
{/* Sidebar content goes here */}
); }; -export default Sidebar +export default Sidebar; diff --git a/src/components/Home/Hero/Hero.tsx b/src/components/Home/Hero/Hero.tsx index 3df7130..83ee5e5 100644 --- a/src/components/Home/Hero/Hero.tsx +++ b/src/components/Home/Hero/Hero.tsx @@ -2,7 +2,7 @@ import styles from "./hero.module.css"; const Hero = () => { return (

diff --git a/src/components/Home/Requirements/FeatureText.tsx b/src/components/Home/Requirements/FeatureText.tsx index e8f8196..869cc65 100644 --- a/src/components/Home/Requirements/FeatureText.tsx +++ b/src/components/Home/Requirements/FeatureText.tsx @@ -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 (
@@ -23,9 +27,12 @@ const FeatureText = () => {
  • Insurance fee - 0.9%*loan amount*tenure (in years)
    • - + ***Click here to apply - +

    Terms and conditions apply

    diff --git a/src/components/index.ts b/src/components/index.ts index f8e9a54..dce8731 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export * from "./Header" export * from "./Home" +export * from "./GetStarted" export * from "./shared" export * from "./Footer" \ No newline at end of file diff --git a/src/pages/GetStartedPage.tsx b/src/pages/GetStartedPage.tsx new file mode 100644 index 0000000..333e54a --- /dev/null +++ b/src/pages/GetStartedPage.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { GetStarted as Main, Header, Footer } from "../components"; + +const GetStartedPage: React.FC = () => { + return ( + <> +
    +
    +