update login functionality and UI; updated Navbar for routing, modified LoginPage and improve styles.

src/pages/LoginPage.jsx

@@ -8,7 +8,7 @@ const LoginPage = () => {
   const [type, setType] = useState("signIn");
 
   useEffect(() => {
-    document.title = "Login / Sign Up";
+    document.title = "Login / Instructor";
   }, []);
 
   const handleOnClick = (text) => {
@@ -23,7 +23,7 @@ const LoginPage = () => {
   return (
     <main className="login-page">
       <section>
-        <h2>Sign In/Sign Up</h2>
+        <h2>Student/Instructor</h2>
         <div className={containerClass} id="container">
           <SignUpForm />
           <SignInForm />
@@ -31,26 +31,24 @@ const LoginPage = () => {
             <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>
+                <p>Please login with your personal info</p>
                 <button
                   className="ghost"
                   id="signIn"
                   onClick={() => handleOnClick("signIn")}
                 >
-                  Sign In
+                  Student
                 </button>
               </div>
               <div className="overlay-panel overlay-right">
-                <h1>Hello, Friend!</h1>
-                <p>Enter your personal details and start journey with us</p>
+                <h1>Hello, Instructor!</h1>
+                <p>Please enter your personal details here</p>
                 <button
                   className="ghost"
                   id="signUp"
                   onClick={() => handleOnClick("signUp")}
                 >
-                  Sign Up
+                  Instructor
                 </button>
               </div>
             </div>

src/pages/SignIn.jsx

@@ -31,22 +31,16 @@ function SignInForm() {
   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>
+        <h1>Student</h1>
+        {/* <div className="social-container">
           <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>
+        </div> */}
+
         <input
           type="email"
-          placeholder="Email"
+          placeholder="Student Name"
           name="email"
           value={state.email}
           onChange={handleChange}
@@ -58,7 +52,7 @@ function SignInForm() {
           value={state.password}
           onChange={handleChange}
         />
-        <a href="#">Forgot your password?</a>
+
         <button>Sign In</button>
       </form>
     </div>

src/pages/SignUp.jsx

@@ -18,7 +18,7 @@ function SignUpForm() {
 
     const { name, email, password } = state;
     alert(
-      `You are sign up with name: ${name} email: ${email} and password: ${password}`
+      `You are signed in with name: ${name} email: ${email} and password: ${password}`
     );
 
     for (const key in state) {
@@ -32,17 +32,11 @@ function SignUpForm() {
   return (
     <div className="form-container sign-up-container">
       <form onSubmit={handleOnSubmit}>
-        <h1>Create Account</h1>
+        <h1>Instructor</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
@@ -66,7 +60,7 @@ function SignUpForm() {
           onChange={handleChange}
           placeholder="Password"
         />
-        <button>Sign Up</button>
+        <button>Sign in</button>
       </form>
     </div>
   );