Add authentication pages and routing;

src/pages/LoginPage.jsx

@@ -0,0 +1,64 @@
+// Page - Login
+import { useEffect, useState } from "react";
+import SignInForm from "./SignIn";
+import SignUpForm from "./SignUp";
+import "../scss/styles.scss";
+
+const LoginPage = () => {
+  const [type, setType] = useState("signIn");
+
+  useEffect(() => {
+    document.title = "Login / Sign Up";
+  }, []);
+
+  const handleOnClick = (text) => {
+    if (text !== type) {
+      setType(text);
+    }
+  };
+
+  const containerClass =
+    "container " + (type === "signUp" ? "right-panel-active" : "");
+
+  return (
+    <main className="login-page">
+      <section>
+        <h2>Sign In/Sign Up</h2>
+        <div className={containerClass} id="container">
+          <SignUpForm />
+          <SignInForm />
+          <div className="overlay-container">
+            <div className="overlay">
+              <div className="overlay-panel overlay-left">
+                <h1>Welcome Back!</h1>
+                <p>
+                  To keep connected with us please login with your personal info
+                </p>
+                <button
+                  className="ghost"
+                  id="signIn"
+                  onClick={() => handleOnClick("signIn")}
+                >
+                  Sign In
+                </button>
+              </div>
+              <div className="overlay-panel overlay-right">
+                <h1>Hello, Friend!</h1>
+                <p>Enter your personal details and start journey with us</p>
+                <button
+                  className="ghost"
+                  id="signUp"
+                  onClick={() => handleOnClick("signUp")}
+                >
+                  Sign Up
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default LoginPage;

src/pages/SignIn.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
+function SignInForm() {
+  const [state, setState] = React.useState({
+    email: "",
+    password: "",
+  });
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    setState({
+      ...state,
+      [evt.target.name]: value,
+    });
+  };
+
+  const handleOnSubmit = (evt) => {
+    evt.preventDefault();
+
+    const { email, password } = state;
+    alert(`You are login with email: ${email} and password: ${password}`);
+
+    for (const key in state) {
+      setState({
+        ...state,
+        [key]: "",
+      });
+    }
+  };
+
+  return (
+    <div className="form-container sign-in-container">
+      <form onSubmit={handleOnSubmit}>
+        <h1>Sign in</h1>
+        <div className="social-container">
+          <a href="#" className="social">
+            <i className="fab fa-facebook-f" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-google-plus-g" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-linkedin-in" />
+          </a>
+        </div>
+        <span>or use your account</span>
+        <input
+          type="email"
+          placeholder="Email"
+          name="email"
+          value={state.email}
+          onChange={handleChange}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={state.password}
+          onChange={handleChange}
+        />
+        <a href="#">Forgot your password?</a>
+        <button>Sign In</button>
+      </form>
+    </div>
+  );
+}
+
+export default SignInForm;

src/pages/SignUp.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+function SignUpForm() {
+  const [state, setState] = React.useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    setState({
+      ...state,
+      [evt.target.name]: value,
+    });
+  };
+
+  const handleOnSubmit = (evt) => {
+    evt.preventDefault();
+
+    const { name, email, password } = state;
+    alert(
+      `You are sign up with name: ${name} email: ${email} and password: ${password}`
+    );
+
+    for (const key in state) {
+      setState({
+        ...state,
+        [key]: "",
+      });
+    }
+  };
+
+  return (
+    <div className="form-container sign-up-container">
+      <form onSubmit={handleOnSubmit}>
+        <h1>Create Account</h1>
+        <div className="social-container">
+          <a href="#" className="social">
+            <i className="fab fa-facebook-f" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-google-plus-g" />
+          </a>
+          <a href="#" className="social">
+            <i className="fab fa-linkedin-in" />
+          </a>
+        </div>
+        <span>or use your email for registration</span>
+        <input
+          type="text"
+          name="name"
+          value={state.name}
+          onChange={handleChange}
+          placeholder="Name"
+        />
+        <input
+          type="email"
+          name="email"
+          value={state.email}
+          onChange={handleChange}
+          placeholder="Email"
+        />
+        <input
+          type="password"
+          name="password"
+          value={state.password}
+          onChange={handleChange}
+          placeholder="Password"
+        />
+        <button>Sign Up</button>
+      </form>
+    </div>
+  );
+}
+
+export default SignUpForm;