From e8fad94a46c937dbb4a1d9feba4bf04ac82746f3 Mon Sep 17 00:00:00 2001
From: Syed Moazam Ali <107930498+MoazamAli45@users.noreply.github.com>
Date: Tue, 15 Oct 2024 16:58:34 +0500
Subject: [PATCH 1/3] Custom 404 Page Added

---
 src/App.jsx                 | 20 +++++++++++---------
 src/components/NotFound.jsx | 31 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NotFound.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 059a4db..ec5e303 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,13 @@
 // import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Header from './components/Header';
-import Home from './components/Home';
-import Appointments from './components/Appointments';
-import Patients from './components/Patients';
-import Doctors from './components/Doctors';
-import Admin from './components/Admin';
-import Footer from './components/Footer';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Home from "./components/Home";
+import Appointments from "./components/Appointments";
+import Patients from "./components/Patients";
+import Doctors from "./components/Doctors";
+import Admin from "./components/Admin";
+import Footer from "./components/Footer";
+import NotFound from "./components/NotFound";
 
 function App() {
   return (
@@ -20,6 +21,8 @@ function App() {
             <Route path="/patients" element={<Patients />} />
             <Route path="/doctors" element={<Doctors />} />
             <Route path="/admin" element={<Admin />} />
+            {/*  Catching All other routes */}
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </main>
         <Footer />
@@ -28,5 +31,4 @@ function App() {
   );
 }
 
-
 export default App;
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
new file mode 100644
index 0000000..3b1f72f
--- /dev/null
+++ b/src/components/NotFound.jsx
@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <section className="bg-transparent flex items-center justify-center h-full">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-green-500">
+            404
+          </h1>
+          <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl">
+            {"Something's missing."}
+          </p>
+          <p className="mb-4 text-lg font-light text-gray-500">
+            {
+              " Sorry, we can't find that page. You'll find lots to explore on the home page."
+            }
+          </p>
+          <Link
+            to={"/"}
+            className="inline-flex text-white bg-gradient-to-r from-green-500 to-green-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-4"
+          >
+            Back to Homepage
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NotFound;

From f63b888813b4cd68608a6722bdfe57ef7d3d4013 Mon Sep 17 00:00:00 2001
From: Mayank Gupta <mayank@Mayanks-MacBook-Air.local>
Date: Tue, 15 Oct 2024 20:57:02 +0530
Subject: [PATCH 2/3] working

---
 Frontend/src/components/Header.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/Header.jsx b/Frontend/src/components/Header.jsx
index cf3c45c..975d666 100644
--- a/Frontend/src/components/Header.jsx
+++ b/Frontend/src/components/Header.jsx
@@ -4,7 +4,7 @@ import { useMediaQuery } from "../hooks/useMediaQuery";
 
 const Header = () => {
     const isTablet = useMediaQuery("only screen and (max-width: 768px)");
-    const [isMenuOpen, setIsMenuOpen] = useState(false);// Use useNavigate instead of useHistory
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
@@ -13,7 +13,12 @@ const Header = () => {
     return (
         <header className="bg-gradient-to-r from-green-500 to-green-700 text-white p-4 sticky top-0 z-10 shadow-lg transition duration-300">
             <nav className="flex justify-between items-center">
-                <div className="text-lg font-bold transition-transform transform hover:scale-105">HMS</div>
+                <div className="text-lg font-bold transition-transform transform hover:scale-105">
+                    {/* Wrap HMS with a Link component */}
+                    <Link to="/" className="hover:text-gray-300 transition duration-300">
+                        HMS
+                    </Link>
+                </div>
                 {isTablet ? (
                     <>
                         <button onClick={toggleMenu} className="focus:outline-none">

From ec1919253890204744880cb7c2b0a361d55805bc Mon Sep 17 00:00:00 2001
From: Yazdan Haider <yazdanhaider007@gmail.com>
Date: Tue, 15 Oct 2024 21:34:21 +0530
Subject: [PATCH 3/3] Deleted comment in App

---
 Frontend/src/App.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index ec5e303..ab9345c 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -21,7 +21,6 @@ function App() {
             <Route path="/patients" element={<Patients />} />
             <Route path="/doctors" element={<Doctors />} />
             <Route path="/admin" element={<Admin />} />
-            {/*  Catching All other routes */}
             <Route path="*" element={<NotFound />} />
           </Routes>
         </main>