diff --git a/package.json b/package.json index 0dce5bb..e935fa2 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", + "react-router-dom": "^7.0.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, @@ -34,5 +36,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "tailwindcss": "^3.4.16" } } diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..9cc8493 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..2e8be1c 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Merm diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/App.js b/src/App.js index 584d366..d263ed6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,23 @@ -import logo from './logo.svg'; -import './App.css'; -import Home from './views/Home/Home'; +import { Routes, Route } from 'react-router-dom'; +// import './App.css'; + +import LoginPage from './views/LoginPage'; +import siteLinks from './links/siteLinks'; +import HomePage from './views/HomePage'; +import SignupPage from './views/SignupPage'; +import ForgetpwdPage from './views/ForgetpwdPage'; + + function App() { return ( -
- +
+ + } /> + } /> + } /> + } /> +
); } diff --git a/src/assets/bg/login.svg b/src/assets/bg/login.svg new file mode 100644 index 0000000..3301fb5 --- /dev/null +++ b/src/assets/bg/login.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/coming-soon-bg.svg b/src/assets/coming-soon-bg.svg new file mode 100644 index 0000000..4f28c68 --- /dev/null +++ b/src/assets/coming-soon-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/loader/loader.svg b/src/assets/loader/loader.svg new file mode 100644 index 0000000..085beaf --- /dev/null +++ b/src/assets/loader/loader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/component/Label.jsx b/src/component/Label.jsx new file mode 100644 index 0000000..1e4ec8e --- /dev/null +++ b/src/component/Label.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function Label({desc}) { + return ( + + ) +} diff --git a/src/component/auth/Forgetpwd.jsx b/src/component/auth/Forgetpwd.jsx new file mode 100644 index 0000000..e4e4e9c --- /dev/null +++ b/src/component/auth/Forgetpwd.jsx @@ -0,0 +1,67 @@ +import React, { useEffect, useState } from 'react' +import LoginImg from '../../assets/bg/login.svg' +import MainLoader from '../loaders/MainLoader' +import { Link, useNavigate } from 'react-router-dom' +import siteLinks from '../../links/siteLinks' +import Label from '../Label' +import TextInput from '../inputs/TextInput' + + +export default function Forgetpwd() { + + const [loading, setLoading] = useState(true) + + const navigate = useNavigate() + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setLoading(false) + },1000) + + return () => clearTimeout(timer) + },[]) + + return ( +
+ + {loading ? + + : +
+
+
+
+

Recover Password

+

Please enter your email.

+
+
+
+ +
+
+
+
+
+ +
+
+

Go Back

+
+
+
+
+
+
+
+
+ +
+
+
+
+ } +
+ ) +} diff --git a/src/component/auth/Login.jsx b/src/component/auth/Login.jsx new file mode 100644 index 0000000..ba6ca13 --- /dev/null +++ b/src/component/auth/Login.jsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from 'react' +import LoginImg from '../../assets/bg/login.svg' +import MainLoader from '../loaders/MainLoader' +import { Link, useNavigate } from 'react-router-dom' +import siteLinks from '../../links/siteLinks' +import Label from '../Label' +import TextInput from '../inputs/TextInput' + + +export default function Login() { + + const [loading, setLoading] = useState(true) + + const navigate = useNavigate() + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setLoading(false) + },1000) + + return () => clearTimeout(timer) + },[]) + + return ( +
+ + {loading ? + + : +
+
+
+
+

We Are Mentor

+

Welcome back, please login to your account.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ Forgot Password ? +
+
+
+ +
+
+

Don't have an account ? Sign Up

+
+
+
+
+
+
+
+
+ +
+
+
+
+ } +
+ ) +} diff --git a/src/component/auth/Login2.jsx b/src/component/auth/Login2.jsx new file mode 100644 index 0000000..1527128 --- /dev/null +++ b/src/component/auth/Login2.jsx @@ -0,0 +1,88 @@ +import React, { useEffect, useState } from 'react' +import LoginImg from '../../assets/bg/login.svg' + +import MainLoader from '../loaders/MainLoader' + +export default function Login() { + + const [loading, setLoading] = useState(true) + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setLoading(false) + },1000) + + return () => clearTimeout(timer) + },[]) + + return ( +
+ + {loading ? + + : +
+
+
+
+
+
+
+
+
+

We Are Mentor

+

Welcome back, please login to your account.

+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+ Forgot Password ? +
+
+
+ Sign In +
+
+

Don't have an account ? Sign Up

+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ } +
+ ) +} diff --git a/src/component/auth/Signup.jsx b/src/component/auth/Signup.jsx new file mode 100644 index 0000000..d3ef120 --- /dev/null +++ b/src/component/auth/Signup.jsx @@ -0,0 +1,102 @@ +import React, { useEffect, useState } from 'react' +import LoginImg from '../../assets/bg/login.svg' +import MainLoader from '../loaders/MainLoader' +import { Link, useNavigate } from 'react-router-dom' +import siteLinks from '../../links/siteLinks' +import Label from '../Label' +import TextInput from '../inputs/TextInput' + + +export default function Signup() { + + const [loading, setLoading] = useState(true) + + const navigate = useNavigate() + + useEffect(()=>{ + const timer = setTimeout(()=>{ + setLoading(false) + },1000) + + return () => clearTimeout(timer) + },[]) + + return ( +
+ + {loading ? + + : +
+
+
+
+

We Are Mentor

+

Welcome, Please create your account.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+

Already have an account ? Sign In

+
+
+
+
+
+
+
+
+ +
+
+
+
+ } +
+ ) +} diff --git a/src/component/inputs/TextInput.jsx b/src/component/inputs/TextInput.jsx new file mode 100644 index 0000000..9a3c288 --- /dev/null +++ b/src/component/inputs/TextInput.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function TextInput({type, placeholder}) { + return ( +
+ +
+ ) +} diff --git a/src/component/loaders/MainLoader.jsx b/src/component/loaders/MainLoader.jsx new file mode 100644 index 0000000..94f2790 --- /dev/null +++ b/src/component/loaders/MainLoader.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import Loader from '../../assets/loader/loader.svg' + +export default function MainLoader() { + return ( + +
+
+ loader +
+
+ ) +} 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 067d3b1..4dcd455 100644 --- a/src/index.js +++ b/src/index.js @@ -2,12 +2,15 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; +import { BrowserRouter } from 'react-router-dom'; //import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + ); diff --git a/src/links/siteLinks.js b/src/links/siteLinks.js new file mode 100644 index 0000000..da9fbbb --- /dev/null +++ b/src/links/siteLinks.js @@ -0,0 +1,9 @@ +const siteLinks = { + error: '*', + home: '/', + login: '/auth/login', + signup: '/auth/signup', + forgetpwd: '/auth/forgetpwd' +} + +export default siteLinks \ No newline at end of file diff --git a/src/views/ForgetpwdPage.jsx b/src/views/ForgetpwdPage.jsx new file mode 100644 index 0000000..7801c02 --- /dev/null +++ b/src/views/ForgetpwdPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import Forgetpwd from '../component/auth/Forgetpwd' + +export default function ForgetpwdPage() { + return ( + + ) +} diff --git a/src/views/Home/Home.js b/src/views/Home/Home.js deleted file mode 100644 index 293357a..0000000 --- a/src/views/Home/Home.js +++ /dev/null @@ -1,4 +0,0 @@ -import '../../css/App.css'; -export default function Home(){ - return
Merms Panel Home
; -} \ No newline at end of file diff --git a/src/views/HomePage.js b/src/views/HomePage.js new file mode 100644 index 0000000..d2e23c9 --- /dev/null +++ b/src/views/HomePage.js @@ -0,0 +1,9 @@ +import { Link } from 'react-router-dom'; +import siteLinks from '../links/siteLinks'; + +import '../css/App.css'; + + +export default function HomePage(){ + return
Merms Panel Home Logout
; +} \ No newline at end of file diff --git a/src/views/LoginPage.jsx b/src/views/LoginPage.jsx new file mode 100644 index 0000000..d3643f0 --- /dev/null +++ b/src/views/LoginPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import Login from '../component/auth/Login' + +export default function LoginPage() { + return ( + + ) +} diff --git a/src/views/SignupPage.jsx b/src/views/SignupPage.jsx new file mode 100644 index 0000000..202b4ac --- /dev/null +++ b/src/views/SignupPage.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import Signup from '../component/auth/Signup' + +export default function SignupPage() { + return ( + + ) +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..094094e --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,37 @@ +/** @type {import('tailwindcss').Config} */ +export default { + darkMode: 'class', + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + colors:{ + black:{ + DEFAULT: '#2c2e3e', + gray: '#a6a9b7' + }, + primary: { + DEFAULT: '#8e54e9', + }, + white: { + DEFAULT: '#fff', + light: '#999' + } + }, + screens: { + max_width: '1700px' + }, + fontSize:{ + 10: '10px', + 12: '12px', + 14: '14px' + }, + backgroundImage: { + login_gradient: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)' + } + }, + }, + plugins: [], +} \ No newline at end of file