Merge branch 'login-page' of DigiFi/digifi-www into master

src/components/Footer/Footer.tsx

@@ -0,0 +1,30 @@
+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'
+
+export default function Footer() {
+
+    let socialsIcons = [
+        {name: 'facebook', image: FBook},
+        {name: 'twitter', image: Twitter},
+        {name: 'instagram', image: Instagram},
+    ]
+
+  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>
+    </div>
+  )
+}

src/components/Footer/index.tsx

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

src/components/Login/Login.tsx

@@ -0,0 +1,77 @@
+import { Button, Footer } from '../../components'
+import { Link } from 'react-router-dom'
+
+export default function Login() {
+  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='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>
+                        </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}
+                                    />
+                                    <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}
+                                        type='password'
+                                        placeholder={'password'}
+                                        // value={value}
+                                        // onChange={onChange}
+                                    />
+                                    <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' 
+                                />
+                                <Link to='#' className='text-black text-sm'>Forget your password</Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* FOOTER SECTION */}
+        <div className='page-footer'>
+            <Footer />
+        </div>
+    </div>
+  )
+}

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./Header"
 export * from "./Hero"
-export * from "./shared"
+export * from "./shared"
+export * from "./Footer"

src/pages/LoginPage.tsx

@@ -0,0 +1,9 @@
+import Login from '../components/Login/Login'
+
+export default function LoginPage() {
+  return (
+    <>
+        <Login />
+    </>
+  )
+}

src/pages/index.ts

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

src/router/Router.tsx

@@ -1,11 +1,12 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { HomePage } from "../pages";
+import { HomePage, LoginPage } from "../pages";
 
 const Routers = () => {
   return (
     <Routes>
       <Route path={RouteHandler.homepage} element={<HomePage />} />
+      <Route path={RouteHandler.loginpage} element={<LoginPage />} />
     </Routes>
   );
 };

src/router/routes.tsx

@@ -1,3 +1,4 @@
 export class RouteHandler {
     static homepage = "/"
+    static loginpage = '/login'
 }