My branch

package.json

@@ -10,13 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.4",
+    "@radix-ui/react-checkbox": "1.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@reduxjs/toolkit": "2.2.6",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "jwt-decode": "4.0.0",
     "lucide-react": "0.399.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-redux": "9.1.2",
     "react-router-dom": "6.24.0",
     "tailwind-merge": "2.3.0",
@@ -34,8 +38,10 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
+    "react-router-dom": "6.24.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "webpack-cli": "^5.1.4"
   }
 }

src/App.tsx

@@ -1,26 +1,28 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import LandingPage from "./Pages/LandingPage";
-import NotFound from "./NotFound";
+
+import './App.css'
+import LoginForm from './Pages/LoginForm/LoginForm';
+import Register from './Pages/register/Register';
+import LandingPage from './Pages/LandingPage'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Librarylist from './Pages/Librarylist';
+import Users from './Pages/Users';
 
 function App() {
   return (
-    <>
-      <BrowserRouter>
-        <Routes>
-          <Route path="*" element={<NotFound />} />
-          <Route path="LibraryManagement" element={<LandingPage />} />
-          <Route
-            path="LibraryManagement/management/login"
-            element={<LandingPage />}
-          />
-          <Route
-            path="LibraryManagement/user/login"
-            element={<LandingPage />}
-          />
-        </Routes>
-      </BrowserRouter>
-    </>
-  );
+    <BrowserRouter basename="/LibraryManagement">
+    <Routes>
+      <Route path="/" element={<LandingPage />} />
+      <Route path="/library/login" element={<LoginForm up='library'/>} />
+      <Route path="/user/login" element={<LoginForm up='user'/>} />
+      <Route path='/register' element={<Register/>}/>
+      <Route path='/librarylist' element={<Librarylist/>}/>
+      <Route path='/users' element={<Users/>}/>
+
+
+
+    </Routes>
+  </BrowserRouter>
+  )
 }
 
 export default App;

src/Pages/LandingPage.tsx

@@ -1,10 +1,23 @@
 import { Button } from "@/components/ui/button";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { increment, decrement } from "../store/features/counter/counterSlice"; 
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../store/store"; 
 
+
 const LandingPage = () => {
+  const navigate = useNavigate();
+
+  const handleCreateLibrary = () => {
+    navigate("library/login");
+  };
+
+  const handleJoinLibrary = () => {
+    navigate("user/login");
+  };
+
+
+
   const count = useSelector((state: RootState) => state.counter.count);
   const dispatch = useDispatch();
 
@@ -37,12 +50,10 @@ const LandingPage = () => {
 
 
       <div className="flex gap-[20px] mt-[50px]">
-        <Link to={"management/login"}>
-          <Button variant="outline">Create A Library</Button>
-        </Link>
-        <Link to={"management/login"}>
-          <Button>Join A Library</Button>
-        </Link>
+        <Button variant="outline" onClick={handleCreateLibrary}>
+          Create A Library
+        </Button>
+        <Button onClick={handleJoinLibrary}>Join A Library</Button>
       </div>
     </div>
   );

src/Pages/Librarylist.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Nav from "@/mycomponents/Nav";
+import Modal from "@/mycomponents/Modal";
+
+function Librarylist() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
+
+  const [selectLibrary, setSelectLibrary] = useState<Library | null>(null);
+
+  interface Library {
+    id: number;
+    name: string;
+    description: string;
+    image: string;
+  }
+
+  const libraries: Library[] = [
+    {
+      id: 1,
+      name: "library 1",
+      description: "hbn",
+      image: "./images/book.jpg",
+    },
+    {
+      id: 2,
+      name: "library 2",
+      description: "good library",
+      image: "./images/book.jpg",
+    },
+    {
+      id: 3,
+      name: "library 3",
+      description: "wifi available",
+      image: "./images/book.jpg",
+    },
+  ];
+
+  const openModal = (library: Library) => {
+    setSelectLibrary(library);
+    setIsModalOpen(true);
+  };
+
+  const openSecondModal = () => {
+    setIsModalOpen(false);
+    setIsSecondModalOpen(true);
+  };
+  const closeSecondModal = () => {
+    setIsSecondModalOpen(false);
+  };
+
+  return (
+    <div>
+
+      <div className="flex items-center justify-center h-full ">
+        <div className="flex flex-col w-11/12 gap-8">
+          <div>
+          <Nav />
+            <h1 className="text-[48px] ml-4 mt-3 font-bold">
+              List of Libraries
+            </h1>
+            <p className=" text-[18px] text-gray-400 ml-4">
+              Search for your suitable library
+            </p>
+          </div>
+          <Input className="mt-2" placeholder="Search Library"></Input>
+          {/* library lists */}
+          {libraries.map((library) => (
+            <div
+              key={library.id}
+              className="flex flex-row h-36 w-full  border border-neutral-300 rounded-r-2xl rounded-l-2xl"
+            >
+              <div className="h-28 w-28 mx-4 my-4 ">
+                <img src={library.image} alt="" />
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-[28px] font-bold space-x-3">
+                  {library.name}
+                </h1>
+                <p id="description" className="text-gray-400 ">
+                  library having Ac, Wifi etc.
+                </p>
+                <Button onClick={() => openModal(library)}>Book Now</Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      {isModalOpen && selectLibrary && (
+        <Modal user="first" library={selectLibrary.name}  onProceed={openSecondModal} onClose={closeSecondModal}/>
+      )}
+      {isSecondModalOpen && selectLibrary && (
+       <Modal user="second" library={selectLibrary.name}  onProceed={openSecondModal} onClose = { closeSecondModal}/>
+      )}
+    </div>
+  );
+}
+
+export default Librarylist;

src/Pages/LoginForm/LoginForm.tsx

@@ -0,0 +1,111 @@
+import { FaUser, FaLock } from "react-icons/fa";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Link } from "react-router-dom";
+import Quote from "@/mycomponents/Quote";
+import { twMerge } from "tailwind-merge";
+import { useNavigate } from "react-router-dom";
+import libraryimage from "./images/library.jpg";
+import googleimage from "./images/Google.jpg";
+interface LoginFormProps {
+  up: string;
+}
+
+const LoginForm: React.FC<LoginFormProps> = (props) => {
+  const navigate = useNavigate();
+
+  const goList = () => {
+    if (props.up == "user") {
+      navigate("/librarylist");
+    } else {
+      navigate("/users");
+    }
+  };
+  return (
+    <div
+      className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
+    >
+      <div className={twMerge("md:w-1/2 relative")}>
+        <img
+          className={twMerge("h-full w-full object-cover")}
+          src={libraryimage}
+          alt=""
+        />
+        <div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
+          <Quote />
+        </div>
+      </div>
+
+      <div className="md:w-1/2 flex items-center justify-center">
+        <form
+          onSubmit={goList}
+          className={twMerge(
+            "border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
+          )}
+        >
+          <h1 className={twMerge("text-2xl text-center mb-6")}>Log In</h1>
+          <div className={twMerge("flex flex-col gap-6")}>
+            <div className={twMerge("relative")}>
+              <Input type="email" placeholder="Email" />
+              <FaUser
+                className={twMerge(
+                  "absolute right-3 top-1/2 transform -translate-y-1/2"
+                )}
+              />
+            </div>
+            <div className={twMerge("relative")}>
+              <Input type="password" placeholder="Password" />
+              <FaLock
+                className={twMerge(
+                  "absolute right-3 top-1/2 transform -translate-y-1/2"
+                )}
+              />
+            </div>
+          </div>
+          <div className={twMerge("flex items-center gap-14 mt-4")}>
+            <label>
+              <Checkbox className="ml-5" /> Remember me
+            </label>
+            <Link className={twMerge("text-blue-700")} to="/">
+              Forgot password?
+            </Link>
+          </div>
+          <Button type="submit" className={twMerge("w-full mt-6")}>
+            Login
+          </Button>
+          <p
+            className={twMerge(
+              'mt-6 text-center  relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3'
+            )}
+          >
+            Or Login with
+          </p>
+          <div className={twMerge("flex justify-center gap-4 mt-2")}>
+            <Button
+              variant="outline"
+              className={twMerge("flex items-center gap-1")}
+            >
+              <img
+                className={twMerge("h-3 w-3")}
+                src={googleimage}
+                alt="Google"
+              />
+              Google
+            </Button>
+          </div>
+          <div className={twMerge("text-center mt-4")}>
+            <p>
+              Want to register?{" "}
+              <Link className={twMerge("text-blue-700")} to="/register">
+                Register
+              </Link>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;