login page added

src/components/HomeCom.jsx

@@ -0,0 +1,62 @@
+// import React from 'react'
+
+import { CiPhone } from "react-icons/ci"
+import { IoIosPhonePortrait } from "react-icons/io"
+import { MdOutlineEmail } from "react-icons/md"
+
+export default function HomeCom() {
+  return (
+    <div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black bg-slate-100 p-5 sm:p-[40px]">
+      <div className="py-4 text-3xl text-black font-bold">Users</div>
+      <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+
+        {data.map((item, index) => {
+          let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
+          return (
+            <div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5">
+              <div className="mb-5 card-title w-[70%] mx-auto">
+                <h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
+                <span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
+              </div>
+              <div className="card-body flex flex-col gap-2">
+                <div className="contact text-slate-400 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                    <IoIosPhonePortrait />
+                  </span>
+                  <span>{item.contact}</span>
+                </div>
+                <div className="contact text-slate-400 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                    <CiPhone />
+                  </span>
+                  <span>{item.contact}</span>
+                </div>
+                <div className="contact text-slate-400 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                    <MdOutlineEmail />
+                  </span>
+                  <span>{item.email}</span>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+
+      </div>
+    </div>
+  )
+}
+
+
+
+
+
+const data = [
+  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
+  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
+  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
+  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
+  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
+  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
+
+]

src/components/InputText.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function InputText({id, name, type='text'}) {
+  return (
+    <div className='w-full h-12 round overflow-hidden'>
+        <input id={id} name={name} type={type} className='p-2 w-full h-full text-black outline-0 ring-0 border border-black rounded' />
+    </div>
+  )
+}

src/components/Label.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Label({name, htmlfor}) {
+  return (
+    <label className='text-black' htmlFor={htmlfor}>{name}</label>
+  )
+}

src/components/PageLoader.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { FaCircleNotch } from "react-icons/fa";
+
+export default function PageLoader() {
+  return (
+    <div className="w-full h-full fixed top-0 left-0 bg-white opacity-75 z-50">
+    <div className="flex justify-center items-center mt-[50vh]">
+        <FaCircleNotch className='text-5xl text-violet-600 animate-spin' />
+    </div>
+    </div>
+  )
+}

src/components/auth/GetStarted.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {Link} from 'react-router-dom'
+import logo2 from '../../assets/digifi-400x200.png';
+import myLinks from '../../myLinks';
+
+export default function GetStarted() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo2} className="App-logo" alt="logo" />
+          <p className=''>
+            digiFi - Banking Offers Emulator Systems.
+          </p>
+          <Link
+            className="App-link"
+            to={myLinks.login}
+            href="https://reactjs.org"
+            // target="_blank"
+            rel="noopener noreferrer"
+            state={{proceed:'true'}}
+          >
+            Get Started
+          </Link>
+        </header>
+      </div>
+    );
+}

src/components/auth/LoginCom.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import myLinks from '../../myLinks'
+import Label from '../Label'
+import InputText from '../InputText'
+import PageLoader from '../PageLoader'
+
+export default function LoginCom() {
+  const [loading, setLoading] = useState(true)
+  const {state} = useLocation()
+  const navigate = useNavigate()
+
+  useEffect(()=>{
+    if(state?.proceed != 'true'){
+      return navigate(myLinks.getStarted, {replace:true})
+    }
+    setTimeout(()=>{
+      setLoading(false)
+    },200)
+  },[])
+
+  return (
+    <>
+      {loading ? 
+      <PageLoader />
+      :
+      <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
+        <div className='flex flex-col gap-4 w-[80%] sm:w-[500px] bg-white rounded-xl p-3 sm:p-5 shadow'>
+          <div className='text-input'>
+            <Label name='Username' htmlfor='username' />
+            <InputText id='username' name='username' />
+          </div>
+          <div className='text-input'>
+            <Label name='Password' htmlfor='password' />
+            <InputText id='password' name='password' type='password' />
+          </div>
+
+          <div className='mt-5 flex justify-end items-center'>
+            <button onClick={()=>navigate(myLinks.home, {state:{proceed:'true'}})} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>Login</button>
+          </div>
+        </div>
+      </div>
+      }
+    </>
+  )
+}