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

src/components/Navbar.jsx

@@ -1,19 +1,41 @@
-import React from 'react'
-import '../scss/styles.scss'
-import '../scss/components/_navbar.scss'
+import React from "react";
+import "../scss/styles.scss";
+import "../scss/components/_navbar.scss";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
   return (
     <nav className="navbar">
       <div className="navbar__logo">MyApp</div>
       <ul className="navbar__links">
-        <li><a href="/" className="navbar__link">Home</a></li>
-        <li><a href="/notebook" className="navbar__link">NoteBook</a></li>
-        <li><a href="/assignment" className="navbar__link">Assignment</a></li>
-        <li><a href="/editor" className="navbar__link">Editor</a></li>
+        <li>
+          <Link to="/" className="navbar__link">
+            Home
+          </Link>
+        </li>
+        <li>
+          <Link to="/notebook" className="navbar__link">
+            NoteBook
+          </Link>
+        </li>
+        <li>
+          <Link to="/assignment" className="navbar__link">
+            Assignment
+          </Link>
+        </li>
+        <li>
+          <Link to="/editor" className="navbar__link">
+            Editor
+          </Link>
+        </li>
+        <li>
+          <Link to="/login" className="navbar__link">
+            Login
+          </Link>
+        </li>
       </ul>
     </nav>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

src/main.jsx

@@ -5,11 +5,10 @@ import "./scss/styles.scss";
 import Navbar from "./components/Navbar";
 import Hero from "./components/Hero";
 import Services from "./components/Services";
+import Header from "./components/Header";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    
     <AppRouter />
-    
   </StrictMode>
 );

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>
   );

src/routers/AppRouter.jsx

@@ -19,22 +19,20 @@ const AppRouter = () => {
   return (
     <BrowserRouter>
       <div className="wrapper">
-        {/* <Header /> */}
         <Navbar />
         <Routes>
-          
           <Route
             path="/"
             element={
               <>
-              <Hero />
-              <Services />
+                <Hero />
+                <Services />
               </>
             }
           />
-          <Route path="login" element={<LoginPage />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route
-            path="editor"
+            path="/editor"
             element={
               <ProtectedRoute>
                 <PageCodeEditor />
@@ -43,7 +41,7 @@ const AppRouter = () => {
           />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
-        
+
         <Footer />
       </div>
     </BrowserRouter>

src/scss/page/_login.scss

@@ -1,3 +1,21 @@
+// .login-page {
+//   min-height: 100vh;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   background-image: url("../../../public/images/grid-background.png");
+//   background-size: cover;
+//   background-position: center;
+//   background-repeat: no-repeat;
+//   background-attachment: fixed;
+
+//   section {
+//     width: 100%;
+//     max-width: 800px;
+//     padding: 20px;
+//   }
+// }
 .App {
   font-family: sans-serif;
   text-align: center;
@@ -10,7 +28,12 @@
 }
 
 body {
-  background: #f6f5f7;
+  background: transparent;
+  background-image: url("../../../public/images/grid-background.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,6 +50,8 @@ h1 {
 
 h2 {
   text-align: center;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 p {
@@ -227,8 +252,8 @@ input {
   justify-content: center;
   align-items: center;
   margin: 0 5px;
-  height: 40px;
-  width: 40px;
+  height: 60px;
+  width: 60px;
 }
 
 footer {