diff --git a/package.json b/package.json index fecd0e0..1f69a9a 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { - "autoprefixer": "^10.4.20", "cra-template": "1.2.0", - "postcss": "^8.5.1", "react": "^19.0.0", "react-dom": "^19.0.0", - "react-scripts": "5.0.1", - "tailwindcss": "^4.0.3" + "react-icons": "^5.4.0", + "react-router-dom": "^7.1.5", + "react-scripts": "5.0.1" }, "scripts": { "start": "react-scripts start", @@ -34,5 +33,10 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "autoprefixer": "^10.4.20", + "postcss": "^8.5.1", + "tailwindcss": "^3.4.17" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/App.js b/src/App.js index 7dc4dff..da9929d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,27 +1,11 @@ -import logo from './logo.svg'; -import logo2 from './digifi-400x200.png'; +import MyRoutes from './MyRoutes'; import './App.css'; function App() { return ( -
-
- logo -

- digiFi - Banking Offers Emulator Systems. -

- - Get Started - -
-
- ); + + ) } -export default App; +export default App; \ No newline at end of file diff --git a/src/MyRoutes.jsx b/src/MyRoutes.jsx new file mode 100644 index 0000000..8a80bbb --- /dev/null +++ b/src/MyRoutes.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import {Routes, Route} from 'react-router-dom' + +import GetStartedPage from './pages/GetStartedPage' +import LoginPage from './pages/LoginPage' +import HomePage from './pages/HomePage' +import myLinks from './myLinks' + +export default function MyRoutes() { + return ( + + } /> + } /> + } /> + + ) +} diff --git a/src/assets/digifi-400x200.png b/src/assets/digifi-400x200.png new file mode 100644 index 0000000..d417fdf Binary files /dev/null and b/src/assets/digifi-400x200.png differ diff --git a/src/assets/first-background.jpg b/src/assets/first-background.jpg new file mode 100644 index 0000000..41c4732 Binary files /dev/null and b/src/assets/first-background.jpg differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/HomeCom.jsx b/src/components/HomeCom.jsx new file mode 100644 index 0000000..676f447 --- /dev/null +++ b/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 ( +
+
Users
+
+ + {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 ( +
+
+

{item.name}

+ {item.place} +
+
+
+ + + + {item.contact} +
+
+ + + + {item.contact} +
+
+ + + + {item.email} +
+
+
+ ) + })} + +
+
+ ) +} + + + + + +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'}, + +] \ No newline at end of file diff --git a/src/components/InputText.jsx b/src/components/InputText.jsx new file mode 100644 index 0000000..c9d84e5 --- /dev/null +++ b/src/components/InputText.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function InputText({id, name, type='text'}) { + return ( +
+ +
+ ) +} diff --git a/src/components/Label.jsx b/src/components/Label.jsx new file mode 100644 index 0000000..d4d899a --- /dev/null +++ b/src/components/Label.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function Label({name, htmlfor}) { + return ( + + ) +} diff --git a/src/components/PageLoader.jsx b/src/components/PageLoader.jsx new file mode 100644 index 0000000..252ab82 --- /dev/null +++ b/src/components/PageLoader.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import { FaCircleNotch } from "react-icons/fa"; + +export default function PageLoader() { + return ( +
+
+ +
+
+ ) +} diff --git a/src/components/auth/GetStarted.jsx b/src/components/auth/GetStarted.jsx new file mode 100644 index 0000000..9caa172 --- /dev/null +++ b/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 ( +
+
+ logo +

+ digiFi - Banking Offers Emulator Systems. +

+ + Get Started + +
+
+ ); +} diff --git a/src/components/auth/LoginCom.jsx b/src/components/auth/LoginCom.jsx new file mode 100644 index 0000000..1a5fc88 --- /dev/null +++ b/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 ? + + : +
+
+
+
+
+
+ +
+ +
+
+
+ } + + ) +} diff --git a/src/index.css b/src/index.css index ec2585e..17df0e7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/src/index.js b/src/index.js index d563c0f..e185f47 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import {BrowserRouter as Router} from 'react-router-dom' import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; @@ -7,7 +8,9 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + ); diff --git a/src/myLinks.js b/src/myLinks.js new file mode 100644 index 0000000..f045459 --- /dev/null +++ b/src/myLinks.js @@ -0,0 +1,7 @@ +const myLinks = { + getStarted: '/', + login: '/login', + home: '/home', +} + +export default myLinks \ No newline at end of file diff --git a/src/pages/GetStartedPage.jsx b/src/pages/GetStartedPage.jsx new file mode 100644 index 0000000..c8108a5 --- /dev/null +++ b/src/pages/GetStartedPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import GetStarted from '../components/auth/GetStarted' + +export default function GetStartedPage() { + return ( + + ) +} diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx new file mode 100644 index 0000000..e16d3bb --- /dev/null +++ b/src/pages/HomePage.jsx @@ -0,0 +1,37 @@ +import React, { useEffect, useState } from 'react' +import { useLocation, useNavigate } from 'react-router-dom' + +import myLinks from '../myLinks' +import HomeCom from '../components/HomeCom' +import PageLoader from '../components/PageLoader' + +export default function HomePage() { + + + const {state} = useLocation() + + const navigate = useNavigate() + + const [loading, setLoading] = useState(true) + + useEffect(()=>{ + if(state?.proceed != 'true'){ + return navigate(myLinks.getStarted, {replace:true}) + } + setTimeout(()=>{ + setLoading(false) + },2000) + },[]) + + + return ( + <> + { + loading ? + + : + + } + + ) +} diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx new file mode 100644 index 0000000..495ad97 --- /dev/null +++ b/src/pages/LoginPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import LoginCom from '../components/auth/LoginCom' + +export default function LoginPage() { + return ( + + ) +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..10c37f7 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,10 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./src/**/*.{js,jsx,ts,tsx}"], + darkMode: "class", + theme: { + extend: {}, + }, + plugins: [], +} +