made login page responsive

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/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/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,5 @@
 export * from "./Header"
-export * from "./Hero"
+export * from "./Home"
+export * from "./GetStarted"
 export * from "./shared"
 export * from "./Footer"

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/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,5 @@
 import HomePage from "./HomePage";
 import LoginPage from "./LoginPage";
+import GetStartedPage from "./GetStartedPage";
 
-export {HomePage, LoginPage}
+export {HomePage, LoginPage, GetStartedPage}

src/router/Router.tsx

@@ -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,4 +1,5 @@
 export class RouteHandler {
     static homepage = "/"
     static loginpage = '/login'
+    static getStarted = "/get-started"
 }

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