diff --git a/src/assets/images/socials/facebook.svg b/src/assets/images/socials/facebook.svg new file mode 100644 index 0000000..0948ce9 --- /dev/null +++ b/src/assets/images/socials/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/socials/instagram.svg b/src/assets/images/socials/instagram.svg new file mode 100644 index 0000000..e9848bd --- /dev/null +++ b/src/assets/images/socials/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/socials/linkedin.svg b/src/assets/images/socials/linkedin.svg new file mode 100644 index 0000000..2868dd3 --- /dev/null +++ b/src/assets/images/socials/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/socials/twitterx.svg b/src/assets/images/socials/twitterx.svg new file mode 100644 index 0000000..fe1257d --- /dev/null +++ b/src/assets/images/socials/twitterx.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/socials/whatsapp.svg b/src/assets/images/socials/whatsapp.svg new file mode 100644 index 0000000..2fac177 --- /dev/null +++ b/src/assets/images/socials/whatsapp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/socials/youtube.svg b/src/assets/images/socials/youtube.svg new file mode 100644 index 0000000..8f5e238 --- /dev/null +++ b/src/assets/images/socials/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Footer/BottomFooterOne.tsx b/src/components/Footer/BottomFooterOne.tsx index 1398fc6..d7f420f 100644 --- a/src/components/Footer/BottomFooterOne.tsx +++ b/src/components/Footer/BottomFooterOne.tsx @@ -1,10 +1,69 @@ +import { footerCustomerLinks, footerSocialLinks } from "../../utils/data"; -const BottomFooterOne = () => { - return ( - - ) +interface FooterLinksProps { + href: string; + icon?: string; + text?: string; } -export default BottomFooterOne +const BottomFooterOne = () => { + const date: number = new Date().getFullYear(); + + return ( + + ); +}; + +export default BottomFooterOne; + +const SocialIconButtons = () => { + const icons = footerSocialLinks.map( + ({ href, icon }: FooterLinksProps, idx: number) => ( +
  • + + {icon && icon} + +
    • + ) + ); + + return ; +}; + +const CustomerLinks = () => { + const links = footerCustomerLinks.map( + ({ href, text }: FooterLinksProps, idx: number) => ( +
  • + + {text} + +
    • + ) + ); + return ( +
    + {links} +
    + ); +}; diff --git a/src/components/Footer/MidFooter.tsx b/src/components/Footer/MidFooter.tsx index e46e123..bab6a84 100644 --- a/src/components/Footer/MidFooter.tsx +++ b/src/components/Footer/MidFooter.tsx @@ -5,7 +5,7 @@ const MidFooter = () => {
    -

    My Bank and I

    +

    my bank and I

    diff --git a/src/components/Footer/TopFooterOneMenu.tsx b/src/components/Footer/TopFooterOneMenu.tsx index 36a4923..7323a4c 100644 --- a/src/components/Footer/TopFooterOneMenu.tsx +++ b/src/components/Footer/TopFooterOneMenu.tsx @@ -16,7 +16,7 @@ const TopFooterOneMenu: React.FC = ({ {subItems.map(({ href = "#", text }) => (
  • {href ? {text} : {text}}
    • diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 8bdfed9..2d488be 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,5 +1,6 @@ import Footer from "./Footer"; import TopFooterOne from "./TopFooterOne"; import MidFooter from "./MidFooter"; +import BottomFooterOne from "./BottomFooterOne"; -export { Footer, TopFooterOne, MidFooter }; +export { Footer, TopFooterOne, MidFooter, BottomFooterOne }; diff --git a/src/layouts/HomeLayout.tsx b/src/layouts/HomeLayout.tsx new file mode 100644 index 0000000..e0110c2 --- /dev/null +++ b/src/layouts/HomeLayout.tsx @@ -0,0 +1,27 @@ +import React, { ReactNode } from "react"; +import { + BottomFooterOne, + Header, + MidFooter, + TopFooterOne, + TopHeader, +} from "../components"; + +interface HomeLayoutProps { + children: ReactNode; +} + +const HomeLayout: React.FC = ({ children }) => { + return ( + <> + +
    + {children} + + + + + ); +}; + +export default HomeLayout; diff --git a/src/layouts/index.ts b/src/layouts/index.ts new file mode 100644 index 0000000..d04c9a0 --- /dev/null +++ b/src/layouts/index.ts @@ -0,0 +1,3 @@ +import HomeLayout from "./HomeLayout"; + +export { HomeLayout }; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 762da27..82af61b 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,23 +1,13 @@ import React from "react"; -import { - Hero, - Header, - TopHeader, - Requirements, - TopFooterOne, - MidFooter, -} from "../components"; +import { Hero, Requirements } from "../components"; +import { HomeLayout } from "../layouts"; const HomePage: React.FC = () => { return ( - <> - -
    + - - - + ); }; diff --git a/src/utils/data.tsx b/src/utils/data.tsx index 5ef3c25..3dd7fe5 100644 --- a/src/utils/data.tsx +++ b/src/utils/data.tsx @@ -1,6 +1,12 @@ import FBook from "../assets/icons/facebook.svg"; import Twitter from "../assets/icons/twitter.svg"; import Instagram from "../assets/icons/instagram.svg"; +import FBookWhite from "../assets/images/socials/facebook.svg"; +import LinkedInWhite from "../assets/images/socials/linkedin.svg"; +import XWhite from "../assets/images/socials/twitterx.svg"; +import WhatsappWhite from "../assets/images/socials/whatsapp.svg"; +import YoutubeWhite from "../assets/images/socials/youtube.svg"; +import InstagramWhite from "../assets/images/socials/instagram.svg"; export const top_header_data = [ { id: 1, name: "HOME" }, @@ -139,3 +145,61 @@ export const footerItems = [ ], }, ]; + +export const footerSocialLinks = [ + { + href: "https://www.facebook.com/FcmbMyBank/", + icon: FBookWhite, + }, + { + href: "https://twitter.com/myfcmb/", + icon: XWhite, + }, + { + href: "https://www.linkedin.com/company/first-city-monument-bank-ltd/", + icon: LinkedInWhite, + }, + { + href: "https://www.youtube.com/user/fcmbplc", + icon: YoutubeWhite, + }, + { + href: "https://www.instagram.com/myfcmb/", + icon: InstagramWhite, + }, + { + href: "https://api.whatsapp.com/send?phone=09099999814", + icon: WhatsappWhite, + }, +]; + +export const footerCustomerLinks = [ + { + text: "PRIVACY POLICY", + href: "https://www.fcmb.com/privacy-policy", + }, + { + text: "PRESS RELEASES", + href: "/press-releases", + }, + { + text: "SHARE PRICE", + href: "/", + }, + { + text: "WHISTLE BLOWER", + href: "/fcmb-whistle-blower-form", + }, + { + text: "FRAUD PREVENTION", + href: "/customer-service", + }, + { + text: "AML", + href: "/customer-service", + }, + { + text: "CAREERS", + href: "/career", + }, +];