Log in and Signup pages added

package.json

@@ -8,6 +8,8 @@
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0"
   },
   "scripts": {

src/App.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Home from "./components/Home";
+import Login from "./pages/LoginPage";
+import Signup from "./pages/SignupPage";
+import { Routes, Route } from "react-router-dom";
+
+export default function App() {
+  return (
+    <>
+      <Routes>
+        <Route exact path="/" element={<Home />}></Route>
+        <Route path="/login" element={<Login />}></Route>
+        <Route path="/signup" element={<Signup />}></Route>
+      </Routes>
+    </>
+  );
+}

src/components/Header/Header.js

@@ -1,5 +1,6 @@
 import React from "react";
 import NavLink from "./_NavLink";
+import {Link} from "react-router-dom";
 
 const Header = ({ ChangePage, CurrentPage, Resume }) => {
   return (
@@ -15,6 +16,9 @@ const Header = ({ ChangePage, CurrentPage, Resume }) => {
           />
         ))}
       </ul>
+      <Link to="/login" className="btn btn-primary btn-sm col-1">
+          Login
+      </Link>
       <a
         href="https://rezyume.co/"
         target="_blank"

src/index.js

@@ -1,13 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./components/App";
-
+import App from "./App";
 import "./styles/App.scss";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  BrowserRouter,
+} from "react-router-dom";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root"));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
+ReactDOM.render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("root")
+);
 serviceWorker.unregister();

src/pages/LoginPage/index.css

@@ -0,0 +1,38 @@
+/* .container{
+    background-color: #003100;
+} */
+
+.loginform {
+  background-color: #003100;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+  align-items: center;
+  height: 400px;
+  margin: 10rem;
+}
+.inputSubmit {
+  background-color: #0000ff;
+  color: white;
+  margin-left: 1rem;
+  border-radius: 10px;
+  width: 100px;
+  outline-width: 0;
+  margin-right: 20px;
+}
+.input {
+  padding-left: 5rem;
+  padding: 0.4rem;
+  margin: 1rem;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+}
+.Submit-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+h1 {
+  color: greenyellow;
+}

src/pages/LoginPage/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./index.css";
+import { Link } from "react-router-dom";
+
+function Login() {
+  return (
+    <div className="container">
+      <div className="loginform">
+        <h1>Log In</h1>
+        <div>
+          <input
+            className="input"
+            type="email"
+            placeholder="Email"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div>
+          <input
+            className="input"
+            type="password"
+            placeholder="Password"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div className="Submit-form">
+          <div>
+            <input className="inputSubmit" type="submit" value="Login" />
+          </div>
+          <div>
+            <Link to="/Signup">New User ?</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

src/pages/SignupPage/index.css

@@ -0,0 +1,39 @@
+/* .container{
+    background-color: #003100;
+} */
+
+.loginform {
+  background-color: #003100;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+  align-items: center;
+  height: 400px;
+  margin: 10rem;
+}
+.inputSubmit {
+  background-color: #0000ff;
+  color: white;
+  margin-left: 1rem;
+  display: inline-block;
+  border-radius: 10px;
+  width: 100px;
+  outline-width: 0;
+  margin-right: 20px;
+}
+.input {
+  padding-left: 5rem;
+  padding: 0.4rem;
+  margin: 1rem;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+}
+.Submit-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+h1 {
+  color: greenyellow;
+}

src/pages/SignupPage/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import "./index.css";
+import { Link } from "react-router-dom";
+
+function Signup() {
+  return (
+    <div className="container">
+      <div className="loginform">
+        <h1>Sign up</h1>
+        <div>
+          <input
+            className="input"
+            type="email"
+            placeholder="Email"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div>
+          <input
+            className="input"
+            type="password"
+            placeholder="Password"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div>
+          <input
+            className="input"
+            type="password"
+            placeholder="Confirm Password"
+            autocomplete="off"
+            required
+          />
+        </div>
+        <div className="Submit-form">
+          <div>
+            <input className="inputSubmit" type="submit" value="Signup" />
+          </div>
+          <div>
+            <Link to="/login"> Already Registered?</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Signup;