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;