Improved 404 and 500 pages

src/components/Panels/MainPanel.tsx

@@ -52,7 +52,6 @@ export const MainPanel = (): JSX.Element => {
           />
         </div>
       )}
-
       <div>
         <div className="grid place-items-center">
           <Link href="/" className="flex w-full justify-center">

src/pages/404.tsx

@@ -4,6 +4,8 @@ import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel } from "components/Panels/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
+import { Img } from "components/Img";
+import { useAppLayout } from "contexts/AppLayoutContext";
 
 /*
  *                                           ╭────────╮
@@ -12,18 +14,24 @@ import { getLangui } from "graphql/fetchLocalData";
 
 interface Props extends AppLayoutRequired {}
 
-const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => (
+const FourOhFour = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  <AppLayout
+  const { langui } = useAppLayout();
-    contentPanel={
+  return (
-      <ContentPanel>
+    <AppLayout
-        <h1>{openGraph.title}</h1>
+      contentPanel={
-        <ReturnButton href="/" title="Home" />
+        <ContentPanel>
-      </ContentPanel>
+          <Img src={"/gameover_cards.webp"} className="animate-zoom-in drop-shadow-shade-lg" />
-    }
+          <div className="mt-8 grid place-items-center gap-6">
-    openGraph={openGraph}
+            <h2>{langui.page_not_found}</h2>
-    {...otherProps}
+            <ReturnButton href="/" title="Home" />
-  />
+          </div>
-);
+        </ContentPanel>
+      }
+      openGraph={openGraph}
+      {...otherProps}
+    />
+  );
+};
 export default FourOhFour;
 
 /*

src/pages/500.tsx

@@ -4,6 +4,8 @@ import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel } from "components/Panels/ContentPanel";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
+import { Img } from "components/Img";
+import { useAppLayout } from "contexts/AppLayoutContext";
 
 /*
  *                                           ╭────────╮
@@ -12,18 +14,24 @@ import { getLangui } from "graphql/fetchLocalData";
 
 interface Props extends AppLayoutRequired {}
 
-const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => (
+const FiveHundred = ({ openGraph, ...otherProps }: Props): JSX.Element => {
-  <AppLayout
+  const { langui } = useAppLayout();
-    contentPanel={
+  return (
-      <ContentPanel>
+    <AppLayout
-        <h1>{openGraph.title}</h1>
+      contentPanel={
-        <ReturnButton href="/" title="Home" />
+        <ContentPanel>
-      </ContentPanel>
+          <Img src={"/gameover_cards.webp"} className="animate-zoom-in drop-shadow-shade-lg" />
-    }
+          <div className="mt-8 grid place-items-center gap-6">
-    openGraph={openGraph}
+            <h2>{langui.page_not_found}</h2>
-    {...otherProps}
+            <ReturnButton href="/" title="Home" />
-  />
+          </div>
-);
+        </ContentPanel>
+      }
+      openGraph={openGraph}
+      {...otherProps}
+    />
+  );
+};
 export default FiveHundred;
 
 /*
@@ -39,4 +47,4 @@ export const getStaticProps: GetStaticProps = (context) => {
   return {
     props: props,
   };
-};
+};

src/tailwind.css

@@ -175,7 +175,26 @@ input[type="submit"] {
 /* ANIMATION */
 
 .animation-carret {
-  animation: blink 1s step-end infinite;
+  animation-name: blink;
+  animation-duration: 1s;
+  animation-timing-function: step-end;
+  animation-iteration-count: infinite;
+}
+
+.animate-zoom-in {
+  animation-name: zoom-in;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: 1;
+}
+
+@keyframes zoom-in {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 @keyframes blink {