My branch

package.json

@@ -10,13 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@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",
     "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 +36,13 @@
     "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"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.9.5"
   }
 }

src/App.tsx

@@ -1,26 +1,31 @@
-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';
+import Forgot from './Pages/Forgot';
 
 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/>}/>
+      <Route path='/forgot' element={<Forgot/>}/>
+
+
+
+
+    </Routes>
+  </BrowserRouter>
+  )
 }
 
 export default App;

src/Pages/Forgot.tsx

@@ -0,0 +1,87 @@
+import Quote from "@/mycomponents/Quote";
+import { twMerge } from "tailwind-merge";
+import libraryimage from './images/library.jpg'
+import { Input } from "@/components/ui/input";
+import { FaUser } from "react-icons/fa";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import Forgotpwdmodal from "@/mycomponents/Forgotpwdmodal";
+import { useNavigate } from "react-router-dom";
+
+
+function Forgot() {
+  const [isModalOpen , setIsModalOpen] = useState(false);
+  const [isModalTwOpen , setIsModalTwOpen] = useState(false);
+  const Navigate = useNavigate();
+
+  const otpSent = (event:React.FormEvent<HTMLFormElement>) =>{
+    event.preventDefault();
+     setIsModalOpen(true)
+  }
+  const otpSubmit = (event:React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsModalOpen(false);
+    setIsModalTwOpen(true)
+  }
+  const pwdChanged = () => {
+    setIsModalOpen(false);
+    setIsModalTwOpen(false);
+    Navigate("/user/login")
+  }
+
+  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={otpSent}
+          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")}>Recover password</h1>
+          <div className={twMerge("flex flex-col gap-6")}>
+            <div className={twMerge("relative")}>
+              <Input
+                name="email"
+                type="email"
+                placeholder="Enter your email here"
+              />
+              <FaUser
+                className={twMerge(
+                  "absolute right-3 top-1/2 transform -translate-y-1/2"
+                )}
+              />
+            </div>
+
+          </div>
+          <div className="flex justify-center">
+          <Button type="submit" className={twMerge("w-2/4 mt-5")}>
+            Send Otp
+          </Button>
+          </div>
+        </form>
+      </div>
+     {isModalOpen && (
+        <Forgotpwdmodal  step="step1"
+                       onsubmit = {otpSubmit}/>
+     )}
+     {isModalTwOpen && (
+        <Forgotpwdmodal step="step2"
+                       onsubmit = {pwdChanged}/>
+     )}
+      </div>
+  )
+}
+
+export default Forgot

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,105 @@
+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;