feat(404.css): add new CSS file for styling 404 error page to improve…

… user experience

feat(404.html): add new 404 error page layout to provide better navigation options for users when they encounter a 404 error

assets/css/extended/404.css

@@ -0,0 +1,57 @@
+.not-found-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 80vh;
+  text-align: center;
+}
+
+.not-found-title {
+  font-size: 160px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.not-found-text {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.not-found-list {
+  text-align: center;
+  margin-bottom: 20px;
+  list-style-type: none;
+  padding: 0;
+}
+
+.not-found-list li {
+  margin-bottom: 10px;
+}
+
+#searchbox {
+  margin-bottom: 20px;
+}
+
+#searchInput {
+  width: 300px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+#searchResults {
+  list-style-type: none;
+  padding: 0;
+  margin: 10px 0;
+  text-align: center;
+}
+
+#searchResults li {
+  margin-bottom: 5px;
+}
+
+.not-found-contact {
+  font-size: 18px;
+}

layouts/404.html

@@ -0,0 +1,13 @@
+{{- define "main" }}
+<div class="not-found-container">
+  <h1 class="not-found-title">404</h1>
+  <p class="not-found-text">Oops! The page you're looking for could not be found.</p>
+  <p class="not-found-text">Here are a few things you can try:</p>
+  <ul class="not-found-list">
+    <li><a href="{{ "/search/" | relURL }}">Perform a search</a>.</li>
+    <li><a href="{{ "/tags/" | relURL }}">Checkout the tags page</a>.</li>
+    <li><a href="{{ "/" | relURL }}">Visit the homepage</a>.</li>
+    <li><a href="{{ "/about/" | relURL }}">If you believe this is an error, please  contact me</a>.</li>
+    </ul>
+</div>
+{{- end }}{{/* end main */ -}}