chore: updating 404 page

docs/stylesheets/custom.css

@@ -159,4 +159,159 @@ html [data-md-color-primary=black] .md-nav--primary .md-nav__title[for=__drawer]
 
 [data-md-color-scheme="default"] code {
   background-color: rgb(246, 248, 250) !important;
+}
+
+/* ----------------------------------------------------------------------------
+   404 page (Material override)
+---------------------------------------------------------------------------- */
+
+body:has(.agntcy-not-found) .md-sidebar--primary,
+body:has(.agntcy-not-found) .md-sidebar--secondary {
+  display: none;
+}
+
+body:has(.agntcy-not-found) .md-content {
+  max-width: none;
+}
+
+body:has(.agntcy-not-found) .md-content__inner {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  padding-top: 3rem;
+}
+
+body:has(.agntcy-not-found) .md-content__inner::before {
+  display: none;
+}
+
+.agntcy-not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  max-width: 36rem;
+  margin: 0 auto 4rem;
+  padding: 0 1rem;
+}
+
+.agntcy-not-found__code {
+  margin: 0 0 0.75rem;
+  font-size: clamp(4rem, 12vw, 6.5rem);
+  font-weight: 700;
+  line-height: 1;
+  background: linear-gradient(
+    101.5deg,
+    rgb(251, 171, 44) 0%,
+    rgb(24, 122, 220) 53%,
+    rgb(0, 20, 43) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.md-typeset .agntcy-not-found__title {
+  margin: 0 0 1rem;
+  font-weight: 300;
+  font-size: 1.75rem;
+  line-height: 1.25;
+  text-align: center;
+  color: var(--md-default-fg-color);
+}
+
+.md-typeset .agntcy-not-found__lede {
+  margin: 0 0 2rem;
+  max-width: 28rem;
+  text-align: center;
+  text-wrap: balance;
+}
+
+.md-typeset .agntcy-not-found__lede p {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--md-default-fg-color--light);
+}
+
+.md-typeset .agntcy-not-found__lede p + p {
+  margin-top: 0.35rem;
+}
+
+.agntcy-not-found__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.md-typeset .agntcy-not-found__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.6rem 1.5rem;
+  border-radius: 50px;
+  background: var(--md-default-bg-color--light);
+  color: var(--md-default-fg-color);
+  border: 1px solid var(--md-default-fg-color--lightest);
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.md-typeset .agntcy-not-found__btn:not(.agntcy-not-found__btn--primary):hover,
+.md-typeset .agntcy-not-found__btn:not(.agntcy-not-found__btn--primary):focus-visible {
+  color: var(--md-accent-fg-color);
+  background: var(--md-default-bg-color);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(2, 81, 175, 0.12);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .agntcy-not-found__btn:not(.agntcy-not-found__btn--primary):hover,
+[data-md-color-scheme="slate"] .md-typeset .agntcy-not-found__btn:not(.agntcy-not-found__btn--primary):focus-visible {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+}
+
+.md-typeset .agntcy-not-found__btn:focus-visible {
+  outline: 2px solid var(--md-accent-fg-color);
+  outline-offset: 3px;
+}
+
+.md-typeset .agntcy-not-found__btn svg {
+  fill: currentColor;
+  height: 1.1em;
+  width: 1.1em;
+  flex-shrink: 0;
+}
+
+.md-typeset .agntcy-not-found__btn--primary {
+  background: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+  color: rgb(255, 255, 255);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .agntcy-not-found__btn--primary {
+  color: rgb(3, 20, 43);
+}
+
+.md-typeset .agntcy-not-found__btn--primary:hover,
+.md-typeset .agntcy-not-found__btn--primary:focus-visible {
+  background: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+  color: rgb(255, 255, 255);
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(2, 81, 175, 0.2);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .agntcy-not-found__btn--primary:hover,
+[data-md-color-scheme="slate"] .md-typeset .agntcy-not-found__btn--primary:focus-visible {
+  color: rgb(3, 20, 43);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
 }

mkdocs/overrides/404.html

@@ -0,0 +1,21 @@
+{#-
+  Copyright AGNTCY Contributors (https://github.com/agntcy)
+  SPDX-License-Identifier: Apache-2.0
+-#}
+{% extends "main.html" %}
+{% block content %}
+  <div class="agntcy-not-found">
+    <p class="agntcy-not-found__code" aria-hidden="true">404</p>
+    <h1 class="agntcy-not-found__title">Page not found</h1>
+    <div class="agntcy-not-found__lede">
+      <p>The page you requested does not exist or may have moved.</p>
+      <p>Try the search above, or head back home.</p>
+    </div>
+    <div class="agntcy-not-found__actions">
+      <a class="agntcy-not-found__btn agntcy-not-found__btn--primary" href="{{ nav.homepage.url | url }}">
+        Back to home
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+      </a>
+    </div>
+  </div>
+{% endblock %}