From be3dd46041e1cacc550b3880d89b7fd983647d10 Mon Sep 17 00:00:00 2001
From: asmit27rai <raiasmit10@gmail.com>
Date: Sat, 1 Jun 2024 12:16:54 +0530
Subject: [PATCH] frontend: Work On The Error Page \n This commit is for
 modified error pages that show if unknown route is accessed and then it give
 link to homepage by using link from react-router-dom and also remove display
 flex option from body \n  Fixes: #21

---
 backend/package-lock.json    |  1 +
 frontend/src/index.css       |  2 +-
 frontend/src/pages/Error.tsx | 18 +++++++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 8a7aa85..96cf9fc 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -7146,6 +7146,7 @@
             "version": "5.4.5",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
             "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+            "dev": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 947e619..6474d5c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -28,7 +28,7 @@ a:hover {
 
 body {
     margin: 0;
-    display: flex;
+    /* display: flex; */
     place-items: center;
     min-width: 320px;
     min-height: 100vh;
diff --git a/frontend/src/pages/Error.tsx b/frontend/src/pages/Error.tsx
index 7a93fd7..350b21c 100644
--- a/frontend/src/pages/Error.tsx
+++ b/frontend/src/pages/Error.tsx
@@ -2,9 +2,21 @@ import { Link } from 'react-router-dom';
 
 function Error() {
     return (
-        <div>
-            This page does not exist!
-            <Link to="home">Go back to homepage</Link>
+        <div className="flex flex-col items-center justify-center min-h-screen ">
+            <div className="text-center">
+                <h1 className="text-9xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 mb-4">
+                    404
+                </h1>
+                <p className="text-2xl mb-8 text-white ">
+                    This page does not exist!
+                </p>
+                <Link
+                    to="/"
+                    className="px-6 py-3 bg-blue-500 text-white rounded-full hover:text-black hover:bg-blue-600 hover:shadow-lg transform hover:scale-105 transition duration-300"
+                >
+                    Go Back To Homepage
+                </Link>
+            </div>
         </div>
     );
 }