⚡️ perf(_new): update for 404

public/404.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>404 - Page Not Found</title>
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
   <style>
     * {
       margin: 0;
@@ -15,56 +14,90 @@
     }
 
     body {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      background-color: #f4f7f6;
       font-family: 'Poppins', sans-serif;
+      background: #f7f7f7;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
       color: #333;
+      text-align: center;
     }
 
     .container {
-      text-align: center;
       max-width: 600px;
-      padding: 20px;
+      padding: 40px;
       background-color: #fff;
-      border-radius: 10px;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+      border-radius: 12px;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+      animation: fadeIn 1s ease-in-out;
     }
 
     h1 {
-      font-size: 6rem;
-      font-weight: 600;
-      color: #ff5c5c;
+      font-size: 7rem;
+      color: #ff6347;
+      font-weight: 700;
       margin-bottom: 20px;
+      animation: bounceIn 1s;
     }
 
     h2 {
       font-size: 2rem;
-      margin-bottom: 30px;
       color: #555;
+      margin-bottom: 30px;
+    }
+
+    .message {
+      font-size: 1.2rem;
+      color: #888;
+      margin-bottom: 20px;
     }
 
     .btn-home {
       display: inline-block;
-      padding: 12px 30px;
+      padding: 14px 30px;
       font-size: 1.2rem;
-      background-color: #ff5c5c;
+      background-color: #ff6347;
       color: #fff;
       text-decoration: none;
       border-radius: 8px;
-      transition: background-color 0.3s;
+      transition: background-color 0.3s ease;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
     .btn-home:hover {
-      background-color: #e04c4c;
+      background-color: #e5533d;
+      transform: translateY(-2px);
     }
 
     .footer {
-      margin-top: 30px;
-      font-size: 1rem;
+      font-size: 0.9rem;
       color: #aaa;
+      margin-top: 30px;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes bounceIn {
+      0% {
+        transform: scale(0);
+      }
+
+      50% {
+        transform: scale(1.2);
+      }
+
+      100% {
+        transform: scale(1);
+      }
     }
   </style>
 </head>
@@ -73,11 +106,19 @@
   <div class="container">
     <h1>404</h1>
     <h2>Oops! The page you're looking for doesn't exist.</h2>
+    <p class="message">We couldn't find the page you're looking for. But don't worry, you can go back to the home page.</p>
     <a href="/" class="btn-home">Go Back to Home</a>
     <div class="footer">
       <p>Snigdha OS | 2024</p>
     </div>
   </div>
+
+  <script>
+    // Redirect to the root index.html page after a slight delay
+    setTimeout(function() {
+      window.location.replace("/");
+    }, 5000); // Redirect after 5 seconds
+  </script>
 </body>
 
 </html>