merged branch

src/App.css

@@ -15,20 +15,33 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 300px;
+  width: 330px;
   /* Adjust the width as needed */
   height: 100vh;
-  background-color: #fff;
+  background-color: #5c2684;
+  color: #FFFFFF;
+  padding-top: .9375rem;
   /* Set the background color */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   /* Add a box-shadow for visual separation */
   transform: translateX(-100%);
   /* Initially hide the sidebar */
-  transition: transform 0.3s ease-in-out;
+  transition: transform 0.4s ease;
   /* Add a transition for smooth animation */
+
+  z-index: 9;
 }
 
 .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/DashboardLayout/Aside.tsx

@@ -0,0 +1,52 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+
+import { Icons } from "../index";
+
+export default function Aside() {
+
+  const {pathname} = useLocation()
+
+  const navigate = useNavigate()
+
+  return (
+    <div className="py-5 px-10 flex flex-col h-full">
+      <div className="flex justify-center items-center text-sm">
+        <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
+          AC
+        </p>
+      </div>
+      <div className="mt-10 h-full overflow-y-auto">
+        {asideLinks.map((link, index) => (
+            <Link
+            key={index}
+            to={link.link}
+            className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
+            >
+            <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
+            {link.name}
+            </Link>
+        ))}
+      </div>
+      <div className="w-full flex justify-center items-center">
+        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium" onClick={()=>navigate('/login', {replace:true})}>
+          Log out
+        </button>
+      </div>
+    </div>
+  );
+}
+
+
+type AsideLinksType = {
+    name: string,
+    link: string,
+    icon: string,
+    nestedlink?:boolean
+}[]
+const asideLinks:AsideLinksType = [
+    {name: 'Home', link: '/dashboard/home', icon: 'home'},
+    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile'},
+    {name: 'Verification', link: '/dashboard/verification', icon: 'verification'},
+    {name: 'Payments', link: '/dashboard/payments', icon: 'payments'},
+    {name: 'Legals', link: '/dashboard/legals', icon: 'legals'},
+]

src/components/DashboardLayout/DashboardAuth.tsx

@@ -0,0 +1,10 @@
+import DashboardLayout from "./DashboardLayout";
+import { Outlet } from "react-router-dom";
+
+export default function DashboardAuth() {
+  return (
+  <DashboardLayout>
+    <Outlet />
+  </DashboardLayout>
+  )
+}

src/components/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,94 @@
+import { ReactNode, useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import Aside from './Aside'
+
+export default function DashboardLayout({children}:{children: ReactNode}) {
+
+  const [showAside, setShowAside] = useState(false)
+
+  let [widthSize, setWidthSize] = useState('')
+
+
+  const AsideDisplay = () => {
+    setShowAside(prev => !prev)
+  }
+
+  useEffect(() => {
+    const screenResized = window.addEventListener('resize', ()=>{
+        setShowAside(false)
+        setWidthSize(window.innerWidth)
+    })
+  
+    return () => {
+      window.removeEventListener('resize', screenResized)
+    }
+  }, [])
+  
+
+  return (
+    <div className='w-full max-w-[2000px] mx-auto h-screen flex bg-[#F9F9F9] text-black'>
+      <aside className='w-[300px] bg-white hidden md:block border-r-2 border-[#E6E6E6]'>
+        <Aside />
+      </aside>
+
+      <aside className={`w-[300px] md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${showAside ? 'left-0' : '-left-[200%]'}`}>
+        <Aside />
+      </aside>
+
+      <main className={`dash-bg-image relative w-full overflow-y-auto overflow-x-hidden`}>
+          <header className={`p-5 sticky z-10 top-0 w-full bg-[#F9F9F9] border-b-2 border-[#E6E6E6] bg-[url('../../../src/assets/images/dashboard/Ellipse1.png')] bg-no-repeat bg-[top_right]`}>
+            <div className='h-14 w-full flex justify-end items-center gap-5'>
+                {/* <div className=''>
+                <button className='px-4 py-2 rounded-lg shadow-lg bg-white/50'>DarkMode</button>
+                </div> */}
+                {/* MENU HAND BURGER */}
+                <div className='w-full'>Welcome Austin Catherine</div>
+                <div
+                className="relative md:hidden w-5 h-[20px] flex flex-col items-center justify-between"
+                onClick={AsideDisplay}
+                >
+                <div
+                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-500 ${
+                    showAside ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0"
+                    }`}
+                ></div>
+                <div
+                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-300 ${
+                    showAside
+                        ? "top-1/2 -translate-y-1/2 rotate-[2000deg] opacity-0"
+                        : "top-1/2 -translate-y-1/2"
+                    }`}
+                ></div>
+                <div
+                    className={`absolute left-0 w-5 h-1 bg-black dark:bg-white transition-all duration-500 ${
+                    showAside
+                        ? "top-1/2 -translate-y-1/2 -rotate-45"
+                        : "bottom-0"
+                    }`}
+                ></div>
+                </div>
+            </div>
+          </header>
+          <div className='flex p-5 relative'>
+            <div className='w-full p-5'>
+              {children}
+            </div>
+
+            {/* <div className={`pl-5 w-[300px] min-w-[300px] hidden lg:block`}>
+              <div className='sticky top-16'>
+                <div className='w-full min-h-72 bg-white/50 shadow-lg rounded-lg p-5'>
+                  <p className='text-base font-semibold tracking-wide pb-2' title='Answered question is marked green'>Answered Question</p>
+                  <div className='grid grid-cols-8 gap-2'>
+                    {Array.from({length: 50}, (_, i) => i + 1).map((item, index) => (
+                      <span key={index} className={`w-6 h-6 text-sm rounded-full flex justify-center items-center shadow-lg cursor-pointer ${index%2 == 0 ? 'bg-emerald-600' : ''}`}>{item}</span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div> */}
+          </div>
+      </main>
+    </div>
+  )
+}
+

src/components/DashboardLayout/index.tsx

@@ -0,0 +1,3 @@
+import DashboardAuth from "./DashboardAuth";
+
+export { DashboardAuth };

src/components/Footer/Footer.tsx

@@ -1,30 +1,22 @@
-import React from 'react'
-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

@@ -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

@@ -0,0 +1,3 @@
+import GetStarted from "./GetStarted";
+
+export { GetStarted };

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<HiddenMenuItems> = ({
+  hideSidebar = false,
+  hideMenu = false,
+}) => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
@@ -22,13 +30,12 @@ const Header = () => {
     setIsSidebarOpen((prev) => !prev);
   };
 
-  console.log(isSidebarOpen);
-
   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
@@ -37,50 +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="currentColor"
-              onClick={toggleSidebar}
-              className="w-6 h-6"
-            >
-              <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

@@ -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/Hero/Hero.tsx

@@ -1,11 +0,0 @@
-
-
-const Hero = () => {
-  return (
-    <div>
-      Hero
-    </div>
-  )
-}
-
-export default Hero

src/components/Home/Hero/Hero.tsx

@@ -0,0 +1,16 @@
+import styles from "./hero.module.css";
+const Hero = () => {
+  return (
+    <div
+      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]">
+          PREMIUM SALARY LOAN
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/components/Home/Hero/hero.module.css

@@ -0,0 +1,9 @@
+.heroBg{
+    background: url(../../../assets/images/hero-test.png) no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/Home/Requirements/EligiblityBox.tsx

@@ -0,0 +1,22 @@
+const EligiblityBox = () => {
+  return (
+    <div className="w-[23.4rem] sm:w-[24.875rem] h-fit rounded bg-[#5C2684] px-[17px] py-[1.625rem] flex flex-col gap-4">
+      <h2 className="font-extrabold text-lg text-[#FBB700]">
+        REQUIRED ELIGIBILITY
+      </h2>
+      <ul className="flex flex-col gap-[.625rem] list-disc pl-[2rem] text-white">
+        <li className="text-base leading-[1.5625rem]">
+          Have a verifiable source of income
+        </li>
+        <li className="text-base leading-[1.5625rem]">
+          You must have a valid BVN
+        </li>
+        <li className="text-base leading-[1.5625rem]">
+          Must have a salary or current bank account with FCMB
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default EligiblityBox;

src/components/Home/Requirements/FeatureText.tsx

@@ -0,0 +1,43 @@
+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]">
+        <p className="mb-[.9375rem] text-justify sm:text-left">
+          Premium Salary Plus loan provides confirmed staff of commercial
+          organizations more usable funds. The employee’s organization must have
+          been rated on Moody’s with a minimum BB- rating, employees interested
+          in the product must be eligible for minimum loan amount of 2,000,000.
+        </p>
+        <p className="mb-[.9375rem]">
+          <strong>Features</strong>
+        </p>
+        <ul className="flex flex-col gap-[.625rem] list-disc pl-[2.5rem]">
+          <li>Minimum loan amount - N2 Million</li>
+          <li>Maximum tenure - 60 Months</li>
+          <li>Minimum tenure - 12 Months</li>
+          <li>Management fee - 1% flat upfront (0.5% for top-up loan)</li>
+          <li>
+            Collateral - Domiciliate of salary, terminal benefits and other
+            allowances
+          </li>
+          <li>Insurance fee - 0.9%*loan amount*tenure (in years)</li>
+        </ul>
+      </div>
+      <Link
+        to={RouteHandler.getStarted}
+        className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit"
+      >
+        ***Click here to apply
+      </Link>
+      <p className="mt-[.5625rem] font-bold cursor-default">
+        Terms and conditions apply
+      </p>
+    </div>
+  );
+};
+
+export default FeatureText;

src/components/Home/Requirements/Requirements.tsx

@@ -0,0 +1,15 @@
+import FeatureText from "./FeatureText";
+import EligiblityBox from "./EligiblityBox";
+
+const Requirements = () => {
+  return (
+    <div className="mt[5.3125rem] mb-[7.875rem] min-h-[28.6875rem]">
+      <div className="containerMode flex flex-col sm:flex-row justify-between w-full gap-2 sm:gap-[6rem]">
+        <FeatureText />
+        <EligiblityBox />
+      </div>
+    </div>
+  );
+};
+
+export default Requirements;

src/components/Home/Requirements/index.ts

@@ -0,0 +1,3 @@
+import Requirements from "./Requirements";
+
+export { Requirements };

src/components/Home/index.ts

@@ -0,0 +1,4 @@
+import { Hero } from "./Hero";
+import { Requirements } from "./Requirements";
+
+export {Hero, Requirements}

src/components/Icons/Icons.tsx

@@ -0,0 +1,37 @@
+type Props = {
+    name:string,
+    fillColor?:string
+}
+
+export default function Icons({name, fillColor}:Props) {
+  return (
+    <>
+    {name == 'home' ?
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14.1667 14.9875V19.9875H17.5C18.8807 19.9875 20 18.8682 20 17.4875V9.88673C20.0002 9.4538 19.832 9.03778 19.5308 8.72673L12.4492 1.07087C11.1996 -0.281086 9.09074 -0.364094 7.73879 0.885437C7.67457 0.944812 7.6127 1.00665 7.55336 1.07087L0.48418 8.72423C0.173945 9.03657 -0.000117128 9.45899 5.9134e-08 9.89923V17.4875C5.9134e-08 18.8682 1.1193 19.9875 2.5 19.9875H5.83332V14.9875C5.84891 12.7152 7.68355 10.8596 9.89867 10.8061C12.1879 10.7509 14.1492 12.6381 14.1667 14.9875Z" fill={fillColor ? fillColor : '#5C2684'}/>
+        <path d="M10 12.4875C8.6193 12.4875 7.5 13.6068 7.5 14.9875V19.9875H12.5V14.9875C12.5 13.6068 11.3807 12.4875 10 12.4875Z" fill={fillColor ? fillColor : '#5C2684'}/>
+    </svg>
+    :name == 'profile'?
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 10C12.7614 10 15 7.76142 15 5C15 2.23858 12.7614 0 10 0C7.23858 0 5 2.23858 5 5C5 7.76142 7.23858 10 10 10Z" fill={fillColor ? fillColor : '#5C2684'}/>
+        <path d="M10 11.6667C5.85977 11.6713 2.50461 15.0265 2.5 19.1667C2.5 19.6269 2.87309 20 3.33332 20H16.6666C17.1269 20 17.5 19.6269 17.5 19.1667C17.4954 15.0265 14.1402 11.6713 10 11.6667Z" fill={fillColor ? fillColor : '#5C2684'}/>
+    </svg>
+    :name == 'verification'?
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.728 6.8281L18.1812 5.28145C17.814 4.91432 17.2203 4.91432 16.857 5.28145L7.50177 14.6356L3.15031 10.2807C2.78313 9.91359 2.1894 9.91359 1.82613 10.2807L0.275384 11.8313C-0.0917946 12.1984 -0.0917946 12.7921 0.275384 13.1592L6.83772 19.7246C7.2049 20.0918 7.79864 20.0918 8.16191 19.7246L19.7241 8.15603C20.0913 7.78499 20.0913 7.19133 19.728 6.8281ZM7.06037 10.9681C7.30256 11.2142 7.70098 11.2142 7.94316 10.9681L16.068 2.8365C16.3101 2.59044 16.3101 2.19597 16.068 1.95382L14.3024 0.184543C14.0602 -0.0615144 13.6618 -0.0615144 13.4196 0.184543L7.50177 6.10164L5.33776 3.93399C5.09558 3.68794 4.69715 3.68794 4.45497 3.93399L2.68548 5.70327C2.4433 5.94932 2.4433 6.3438 2.68548 6.58595L7.06037 10.9681Z" fill={fillColor ? fillColor : '#5C2684'}/>
+    </svg>
+    :name == 'payments'?
+    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 14.2857C0 15.2321 0.746528 16 1.66667 16H18.3333C19.2535 16 20 15.2321 20 14.2857V8H0V14.2857ZM6.66667 11.8571C6.66667 11.6214 6.85417 11.4286 7.08333 11.4286H11.8056C12.0347 11.4286 12.2222 11.6214 12.2222 11.8571V13.2857C12.2222 13.5214 12.0347 13.7143 11.8056 13.7143H7.08333C6.85417 13.7143 6.66667 13.5214 6.66667 13.2857V11.8571ZM2.22222 11.8571C2.22222 11.6214 2.40972 11.4286 2.63889 11.4286H5.13889C5.36806 11.4286 5.55556 11.6214 5.55556 11.8571V13.2857C5.55556 13.5214 5.36806 13.7143 5.13889 13.7143H2.63889C2.40972 13.7143 2.22222 13.5214 2.22222 13.2857V11.8571ZM20 1.71429V3.42857H0V1.71429C0 0.767857 0.746528 0 1.66667 0H18.3333C19.2535 0 20 0.767857 20 1.71429Z" fill={fillColor ? fillColor : '#5C2684'}/>
+    </svg>
+    :name == 'legals'?
+    <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10.5H7.99937C7.99937 9.99438 8.04125 10.2272 5.34156 4.82781C4.79 3.725 3.21062 3.72281 2.65812 4.82781C-0.0643752 10.2734 0.000625 10.0103 0.000625 10.5H0C0 11.8806 1.79094 13 4 13C6.20906 13 8 11.8806 8 10.5ZM4 5.5L6.25 10H1.75L4 5.5ZM19.9994 10.5C19.9994 9.99438 20.0413 10.2272 17.3416 4.82781C16.79 3.725 15.2106 3.72281 14.6581 4.82781C11.9356 10.2734 12.0006 10.0103 12.0006 10.5H12C12 11.8806 13.7909 13 16 13C18.2091 13 20 11.8806 20 10.5H19.9994ZM13.75 10L16 5.5L18.25 10H13.75ZM16.5 14H11V4.78906C11.7347 4.4675 12.2863 3.80531 12.4497 3H16.5C16.7763 3 17 2.77625 17 2.5V1.5C17 1.22375 16.7763 1 16.5 1H11.9888C11.5325 0.39625 10.8153 0 10 0C9.18469 0 8.4675 0.39625 8.01125 1H3.5C3.22375 1 3 1.22375 3 1.5V2.5C3 2.77625 3.22375 3 3.5 3H7.55031C7.71375 3.805 8.265 4.4675 9 4.78906V14H3.5C3.22375 14 3 14.2238 3 14.5V15.5C3 15.7762 3.22375 16 3.5 16H16.5C16.7763 16 17 15.7762 17 15.5V14.5C17 14.2238 16.7763 14 16.5 14Z" fill={fillColor ? fillColor : '#5C2684'}/>
+    </svg>
+    :
+    null
+    }
+    </>
+  )
+}
+

src/components/Icons/index.tsx

@@ -0,0 +1,3 @@
+import Icons from "./Icons";
+
+export { Icons };

src/components/Login/Login.tsx

@@ -1,66 +1,73 @@
-import { Button, Footer } from '../../components'
+import {useState} from 'react'
+import { Button, Footer, FloatLabelInput } from '../../components'
 import { Link } from 'react-router-dom'
 
+type FormType = {
+    email:string,
+    password:string
+}
+
+type HandleChange = {
+    name:string,
+    value:string
+  }
+
 export default function Login() {
+    let [formDetails, setFormDetails] = useState<FormType>({
+        email: '',
+        password: ''
+    })
+
+    const handleFormChange = ({target:{name, value}}:{target:HandleChange}):void => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
   return (
     <div className={`w-full h-screen overflow-y-auto bg-[url('../../../src/assets/images/sign-in.png')] bg-top bg-cover`}>
         <div className='containerMode h-full'>
             <div className='grid grid-cols-1 md:grid-cols-2 items-center h-full'>
-                <div className='bg-white col-start-1 md:col-start-2 w-full h-[450px] rounded-2xl shadow-lg'>
-                    <div className='w-full p-10 sm:p-20 flex flex-col justify-between items-center h-full'>
+                <div className='bg-white col-start-1 md:col-start-2 w-full rounded-2xl shadow-lg'>
+                    <div className='w-full p-10 sm:p-20 md:p-10 lg:p-20 flex flex-col justify-between items-center h-full'>
                         <div className='mb-4'>
                             <h1 className='text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black'>Welcome!</h1>
-                            <p className='text-xl mt-2 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
+                            <p className='text-xl mt-4 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
                         </div>
 
                         <div className='w-full'>
                             {/* INPUTS */}
-                            {/* THIS INPUTS WILL BE MADE A COMPONENT LATER, TO AVOID REPEATINGS THINGS */}
                             <div className='w-full'>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'email'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
-                                        type='text'
-                                        placeholder={'email'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                    <FloatLabelInput 
+                                        id='email'
+                                        name='email'
+                                        type='email'
+                                        placeHolder='Email'
+                                        labelName='Email'
+                                        value={formDetails.email}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Email'}
-                                    </label>
                                 </div>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'password'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
+                                    <FloatLabelInput 
+                                        id='password'
+                                        name='password'
                                         type='password'
-                                        placeholder={'password'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                        placeHolder='Password'
+                                        labelName='Password'
+                                        value={formDetails.password}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Password'}
-                                    </label>
                                 </div>
                             </div>
 
                             <div className='mt-10 w-full sm:flex justify-between items-center gap-2'>
                                 <Button 
                                     text='Login' 
-                                    className='rounded-md w-full sm:w-2/5 text-xl' 
+                                    className='rounded-md w-full sm:w-2/5 text-xl capitalize font-bold' 
                                 />
-                                <Link to='#' className='text-black text-sm'>Forget your password</Link>
+                                <Link to='#' className='text-black text-sm'>Forget your password?</Link>
                             </div>
                         </div>
                     </div>
@@ -69,7 +76,7 @@ export default function Login() {
         </div>
 
         {/* FOOTER SECTION */}
-        <div className='page-footer'>
+        <div className='page-footer w-full fixed bottom-0'>
             <Footer />
         </div>
     </div>

src/components/index.ts

@@ -1,4 +1,7 @@
-export * from "./Header"
-export * from "./Hero"
-export * from "./shared"
-export * from "./Footer"
+export * from "./Header";
+export * from "./Home";
+export * from "./GetStarted";
+export * from "./shared";
+export * from "./Footer";
+export * from "./DashboardLayout";
+export * from "./Icons";

src/components/shared/FloatLabelInput.tsx

@@ -0,0 +1,42 @@
+
+type Props = {
+    id?:string,
+    name?:string,
+    type?:string,
+    placeHolder?:string,
+    labelName?:string,
+    inputClass?:string,
+    value:string,
+    onChange:()=>void
+}
+
+export default function FloatLabelInput({
+    id,
+    name,
+    type,
+    placeHolder,
+    labelName,
+    value,
+    inputClass,
+    onChange
+}:Props) {
+  return (
+    <div className='w-full'>
+        <input
+            id={id ? id : ''}
+            name={name? name : ''}
+            className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500 ${inputClass && inputClass}`}
+            type={type ? type : 'text'}
+            placeholder={placeHolder ? placeHolder : ''}
+            value={value}
+            onChange={onChange}
+        />
+        <label
+            htmlFor={id ? id : ''}
+            className={`cursor-pointer text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+        >
+            {labelName ? labelName : ''}
+        </label>
+    </div>
+  )
+}

src/components/shared/index.ts

@@ -1,3 +1,4 @@
 import Button from "./Button";
+import FloatLabelInput from "./FloatLabelInput";
 
-export {Button}
+export {Button, FloatLabelInput}

src/index.css

@@ -16,4 +16,7 @@ body {
   .containerMode {
     @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px];
   }
+  .dash-bg-image{
+    background: url('../src/assets/images/dashboard/bg_ellipse1.png') right top no-repeat, url('../src/assets/images/dashboard/bg_ellipse2.png') -8% bottom no-repeat;;
+  }
 }

src/pages/DashboardHome.tsx

@@ -0,0 +1,5 @@
+export default function DashboardHome() {
+  return (
+    <div className=''>DashboardHome</div>
+  )
+}

src/pages/DashboardLegals.tsx

@@ -0,0 +1,5 @@
+export default function DashboardLegals() {
+  return (
+    <div>DashboardLegals</div>
+  )
+}

src/pages/DashboardPayments.tsx

@@ -0,0 +1,5 @@
+export default function Dashboardpayments() {
+  return (
+    <div>Dashboardpayments</div>
+  )
+}

src/pages/DashboardProfile.tsx

@@ -0,0 +1,5 @@
+export default function DashboardProfile() {
+  return (
+    <div>DashboardProfile</div>
+  )
+}

src/pages/DashboardVerification.tsx

@@ -0,0 +1,5 @@
+export default function DashboardVerification() {
+  return (
+    <div>DashboardVerification</div>
+  )
+}

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 (
+    <>
+      <Header hideSidebar={true} hideMenu={true} />
+      <Main />
+      <Footer />
+    </>
+  );
+};
+
+export default GetStartedPage;

src/pages/HomePage.tsx

@@ -1,12 +1,15 @@
-import { Header, TopHeader } from '../components/Header'
+import { FC } from "react";
+import { Hero, Header, TopHeader, Requirements } from "../components";
 
-const HomePage = () => {
+const HomePage: FC = () => {
   return (
     <>
       <TopHeader />
       <Header />
+      <Hero />
+      <Requirements />
     </>
-  )
-}
+  );
+};
 
-export default HomePage
+export default HomePage;

src/pages/index.ts

@@ -1,4 +1,10 @@
 import HomePage from "./HomePage";
 import LoginPage from "./LoginPage";
+import GetStartedPage from "./GetStartedPage";
+import DashboardHome from "./DashboardHome";
+import DashboardLegals from "./DashboardLegals";
+import DashboardProfile from "./DashboardProfile";
+import DashboardVerification from "./DashboardVerification";
+import Dashboardpayments from "./DashboardPayments";
 
-export {HomePage, LoginPage}
+export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments}

src/router/Router.tsx

@@ -1,12 +1,22 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { HomePage, LoginPage } from "../pages";
+import { GetStartedPage, HomePage, LoginPage, DashboardHome,  DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages";
+import { DashboardAuth } from "../components";
 
 const Routers = () => {
   return (
     <Routes>
       <Route path={RouteHandler.homepage} element={<HomePage />} />
       <Route path={RouteHandler.loginpage} element={<LoginPage />} />
+      <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
+      <Route element={<DashboardAuth />}>
+          <Route path={RouteHandler.dashboardHome} element={<DashboardHome />} />
+          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfile />} />
+          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerification />} />
+          <Route path={RouteHandler.dashboardPayments} element={<Dashboardpayments />} />
+          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegals />} />
+      </Route>
+      <Route path='*'element={<>Error Page</>} />
     </Routes>
   );
 };

src/router/routes.tsx

@@ -1,4 +1,10 @@
 export class RouteHandler {
     static homepage = "/"
     static loginpage = '/login'
+    static getStarted = "/get-started"
+    static dashboardHome = '/dashboard/home'
+    static dashboardProfile = '/dashboard/profile'
+    static dashboardVerification = '/dashboard/verification'
+    static dashboardPayments = '/dashboard/payments'
+    static dashboardLegals = '/dashboard/legals'
 }

src/utils/data.tsx

@@ -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 },
+];

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
       colors: {},
       screens: {
         xxs: "400px",
+        regLap: "1440px",
         xxl: "1900px",
       },
     },