From cbc34897342cc0d1510d666f1dd683c251c1ad8b Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Sun, 14 Jan 2024 23:26:24 +0300
Subject: [PATCH 01/11] feat: not found layout

---
 app/[locale]/not-found.tsx     |  6 ++++-
 i18n/locales/en.json           |  5 ++++
 layouts/New/NotFound.tsx       | 39 +++++++++++++++++++++++++++
 layouts/New/layouts.module.css | 49 ++++++++++++++++++++++++++++++++++
 styles/new/markdown.css        |  4 +++
 5 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 layouts/New/NotFound.tsx

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 15c704c55d4cc..022292a290558 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -3,6 +3,10 @@
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import NotFoundLayout from '@/layouts/New/NotFound';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove when website redesign is done */
 const LocalizedNotFound: FC = () => {
   const t = useTranslations();
 
@@ -14,4 +18,4 @@ const LocalizedNotFound: FC = () => {
   );
 };
 
-export default LocalizedNotFound;
+export default ENABLE_WEBSITE_REDESIGN ? NotFoundLayout : LocalizedNotFound;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 51814c4f8cf38..fef879dcc2f5b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -208,6 +208,11 @@
         "weekly-updates": "Weekly Updates",
         "wg": "Working Groups"
       }
+    },
+    "notFound": {
+      "title": "Page could not be found",
+      "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage.",
+      "backToHome": "Back to Home"
     }
   },
   "pages": {
diff --git a/layouts/New/NotFound.tsx b/layouts/New/NotFound.tsx
new file mode 100644
index 0000000000000..cbd881b6b7bfb
--- /dev/null
+++ b/layouts/New/NotFound.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Button from '@/components/Common/Button';
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+
+import styles from './layouts.module.css';
+
+const NotFoundLayout: FC = () => {
+  const t = useTranslations();
+
+  return (
+    <>
+      <WithNavBar />
+
+      <div className={styles.notFoundLayout}>
+        <div className="glowingBackdrop" />
+
+        <main>
+          <span>404</span>
+          <h1>{t('layouts.notFound.title')}</h1>
+          <h2>{t('layouts.notFound.description')}</h2>
+          <Button href="/">
+            {t('layouts.notFound.backToHome')}
+            <ArrowRightIcon />
+          </Button>
+        </main>
+      </div>
+
+      <WithFooter />
+    </>
+  );
+};
+
+export default NotFoundLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index 91fdf4626f6ae..31a92c43fb152 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -216,3 +216,52 @@
     }
   }
 }
+
+.notFoundLayout {
+  @apply flex
+    items-center
+    justify-center
+    xs:px-4
+    xs:py-8;
+
+  main {
+    @apply flex
+      max-w-xl
+      flex-col
+      items-center
+      gap-0
+      text-center;
+
+    h1 {
+      @apply bg-gradient-to-b
+        from-neutral-900
+        to-neutral-900/80
+        bg-clip-text
+        py-4
+        text-5xl
+        font-semibold
+        [-webkit-text-fill-color:transparent]
+        xs:text-3xl
+        dark:from-white
+        dark:to-white/80;
+    }
+
+    h2 {
+      @apply max-w-sm
+        text-lg
+        font-regular
+        xs:text-base;
+    }
+
+    a {
+      @apply mt-8
+        flex
+        items-center
+        gap-2;
+
+      svg {
+        @apply w-5;
+      }
+    }
+  }
+}
diff --git a/styles/new/markdown.css b/styles/new/markdown.css
index c7e951a6a07db..b3c38b4af92b3 100644
--- a/styles/new/markdown.css
+++ b/styles/new/markdown.css
@@ -73,6 +73,10 @@ main {
         dark:text-green-300;
     }
 
+    &[role='button'] {
+      @apply xs:no-underline;
+    }
+
     &:has(code) {
       @apply xs:decoration-neutral-800
         dark:xs:decoration-neutral-200;

From e894957d3e33b609230c26456ba369ac3a2d4424 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Tue, 16 Jan 2024 04:12:52 +0300
Subject: [PATCH 02/11] refactor: markdown content

---
 app/[locale]/not-found.tsx             | 34 ++++++++-----
 components/withLayout.tsx              |  5 +-
 i18n/locales/en.json                   |  5 --
 layouts/New/{Home.tsx => Centered.tsx} |  6 +--
 layouts/New/NotFound.tsx               | 39 ---------------
 layouts/New/layouts.module.css         | 69 +++++++-------------------
 pages/en/new-design/404.mdx            | 20 ++++++++
 pages/en/new-design/index.mdx          |  2 +-
 types/layouts.ts                       |  5 +-
 9 files changed, 71 insertions(+), 114 deletions(-)
 rename layouts/New/{Home.tsx => Centered.tsx} (70%)
 delete mode 100644 layouts/New/NotFound.tsx
 create mode 100644 pages/en/new-design/404.mdx

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 022292a290558..e8097ad1d7b10 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -1,21 +1,31 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
+import { getLocale } from 'next-intl/server';
 import type { FC } from 'react';
 
-import NotFoundLayout from '@/layouts/New/NotFound';
+import { MDXRenderer } from '@/components/mdxRenderer';
+import WithLayout from '@/components/withLayout';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+import { dynamicRouter } from '@/next.dynamic.mjs';
+
+const LocalizedNotFound: FC = async () => {
+  const locale = await getLocale();
+
+  /** @deprecated replace the legacy page when website redesign is done */
+  const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'new-design/404' : '404';
+
+  // Retrieves the markdown source created for the not-found page
+  const { source, filename } = await dynamicRouter.getMarkdownFile(
+    locale,
+    notFoundSource
+  );
 
-/** @deprecated remove when website redesign is done */
-const LocalizedNotFound: FC = () => {
-  const t = useTranslations();
+  // Parses the source Markdown content and returns a React Component
+  const { MDXContent } = await dynamicRouter.getMDXContent(source, filename);
 
   return (
-    <div className="container">
-      <h2>{t('pages.404.title')}</h2>
-      <h3>{t('pages.404.description')}</h3>
-    </div>
+    <WithLayout layout="centered.hbs">
+      <MDXRenderer Component={MDXContent} />
+    </WithLayout>
   );
 };
 
-export default ENABLE_WEBSITE_REDESIGN ? NotFoundLayout : LocalizedNotFound;
+export default LocalizedNotFound;
diff --git a/components/withLayout.tsx b/components/withLayout.tsx
index 771a57a7d702f..d9d9661fa5e44 100644
--- a/components/withLayout.tsx
+++ b/components/withLayout.tsx
@@ -10,9 +10,9 @@ import LegacyIndexLayout from '@/layouts/IndexLayout';
 import LegacyLearnLayout from '@/layouts/LearnLayout';
 import AboutLayout from '@/layouts/New/About';
 import BlogLayout from '@/layouts/New/Blog';
+import CenteredLayout from '@/layouts/New/Centered';
 import DefaultLayout from '@/layouts/New/Default';
 import DocsLayout from '@/layouts/New/Docs';
-import HomeLayout from '@/layouts/New/Home';
 import LearnLayout from '@/layouts/New/Learn';
 import PostLayout from '@/layouts/New/Post';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
@@ -28,13 +28,14 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
+  'centered.hbs': LegacyDefaultLayout,
 } satisfies Record<LegacyLayouts, FC>;
 
 /** all the currently available layouts from website redesign */
 const redesignLayouts = {
   'about.hbs': AboutLayout,
   'docs.hbs': DocsLayout,
-  'home.hbs': HomeLayout,
+  'centered.hbs': CenteredLayout,
   'learn.hbs': LearnLayout,
   'page.hbs': DefaultLayout,
   'blog-post.hbs': PostLayout,
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fef879dcc2f5b..51814c4f8cf38 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -208,11 +208,6 @@
         "weekly-updates": "Weekly Updates",
         "wg": "Working Groups"
       }
-    },
-    "notFound": {
-      "title": "Page could not be found",
-      "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage.",
-      "backToHome": "Back to Home"
     }
   },
   "pages": {
diff --git a/layouts/New/Home.tsx b/layouts/New/Centered.tsx
similarity index 70%
rename from layouts/New/Home.tsx
rename to layouts/New/Centered.tsx
index a947f049bb1a2..9ed872cca3661 100644
--- a/layouts/New/Home.tsx
+++ b/layouts/New/Centered.tsx
@@ -5,11 +5,11 @@ import WithNavBar from '@/components/withNavBar';
 
 import styles from './layouts.module.css';
 
-const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
+const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <div className={styles.homeLayout}>
+    <div className={styles.centeredLayout}>
       <div className="glowingBackdrop" />
 
       <main>{children}</main>
@@ -19,4 +19,4 @@ const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
   </>
 );
 
-export default HomeLayout;
+export default CenteredLayout;
diff --git a/layouts/New/NotFound.tsx b/layouts/New/NotFound.tsx
deleted file mode 100644
index cbd881b6b7bfb..0000000000000
--- a/layouts/New/NotFound.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import { ArrowRightIcon } from '@heroicons/react/24/solid';
-import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
-
-import Button from '@/components/Common/Button';
-import WithFooter from '@/components/withFooter';
-import WithNavBar from '@/components/withNavBar';
-
-import styles from './layouts.module.css';
-
-const NotFoundLayout: FC = () => {
-  const t = useTranslations();
-
-  return (
-    <>
-      <WithNavBar />
-
-      <div className={styles.notFoundLayout}>
-        <div className="glowingBackdrop" />
-
-        <main>
-          <span>404</span>
-          <h1>{t('layouts.notFound.title')}</h1>
-          <h2>{t('layouts.notFound.description')}</h2>
-          <Button href="/">
-            {t('layouts.notFound.backToHome')}
-            <ArrowRightIcon />
-          </Button>
-        </main>
-      </div>
-
-      <WithFooter />
-    </>
-  );
-};
-
-export default NotFoundLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index 31a92c43fb152..fe2749c153c4d 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -58,7 +58,7 @@
   }
 }
 
-.homeLayout {
+.centeredLayout {
   @apply flex
     w-full
     items-center
@@ -106,6 +106,24 @@
         }
       }
 
+      &:nth-of-type(1)[role='status'] {
+        @apply max-w-xl
+          items-center
+          gap-2
+          text-center;
+
+        [role='button'] {
+          @apply mt-4
+            flex
+            items-center
+            gap-2;
+
+          svg {
+            @apply w-5;
+          }
+        }
+      }
+
       &:nth-of-type(2) {
         @apply flex
           max-w-md
@@ -216,52 +234,3 @@
     }
   }
 }
-
-.notFoundLayout {
-  @apply flex
-    items-center
-    justify-center
-    xs:px-4
-    xs:py-8;
-
-  main {
-    @apply flex
-      max-w-xl
-      flex-col
-      items-center
-      gap-0
-      text-center;
-
-    h1 {
-      @apply bg-gradient-to-b
-        from-neutral-900
-        to-neutral-900/80
-        bg-clip-text
-        py-4
-        text-5xl
-        font-semibold
-        [-webkit-text-fill-color:transparent]
-        xs:text-3xl
-        dark:from-white
-        dark:to-white/80;
-    }
-
-    h2 {
-      @apply max-w-sm
-        text-lg
-        font-regular
-        xs:text-base;
-    }
-
-    a {
-      @apply mt-8
-        flex
-        items-center
-        gap-2;
-
-      svg {
-        @apply w-5;
-      }
-    }
-  }
-}
diff --git a/pages/en/new-design/404.mdx b/pages/en/new-design/404.mdx
new file mode 100644
index 0000000000000..477b09302f88f
--- /dev/null
+++ b/pages/en/new-design/404.mdx
@@ -0,0 +1,20 @@
+---
+layout: centered.hbs
+permalink: false
+title: 404
+---
+
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
+
+<section role='status'>
+404
+
+<h1 className="special">Page could not be found</h1>
+
+<div>
+  Sorry, we couldn’t find the page you’re after! Try starting again from the
+  homepage.
+</div>
+
+<Button href="/">Back to Home<ArrowRightIcon /></Button>
+</section>
diff --git a/pages/en/new-design/index.mdx b/pages/en/new-design/index.mdx
index b0a60ca340812..9794e29b95bbd 100644
--- a/pages/en/new-design/index.mdx
+++ b/pages/en/new-design/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Run JavaScript Everywhere
-layout: home.hbs
+layout: centered.hbs
 ---
 
 <section>
diff --git a/types/layouts.ts b/types/layouts.ts
index ec7c518c6bc92..a99c725c435e8 100644
--- a/types/layouts.ts
+++ b/types/layouts.ts
@@ -2,7 +2,7 @@
 export type Layouts =
   | 'about.hbs'
   | 'docs.hbs'
-  | 'home.hbs'
+  | 'centered.hbs'
   | 'learn.hbs'
   | 'page.hbs'
   | 'blog-category.hbs'
@@ -17,4 +17,5 @@ export type LegacyLayouts =
   | 'index.hbs'
   | 'docs.hbs'
   | 'download.hbs'
-  | 'page.hbs';
+  | 'page.hbs'
+  | 'centered.hbs';

From 553a5910e4e2df05b2a34481a091ae3d15dd8efb Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Tue, 16 Jan 2024 17:10:48 +0300
Subject: [PATCH 03/11] refactor: source moved outside of the component

---
 app/[locale]/not-found.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index e8097ad1d7b10..6499488f694a4 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -6,12 +6,12 @@ import WithLayout from '@/components/withLayout';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 import { dynamicRouter } from '@/next.dynamic.mjs';
 
+/** @deprecated replace the legacy page when website redesign is done */
+const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'new-design/404' : '404';
+
 const LocalizedNotFound: FC = async () => {
   const locale = await getLocale();
 
-  /** @deprecated replace the legacy page when website redesign is done */
-  const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'new-design/404' : '404';
-
   // Retrieves the markdown source created for the not-found page
   const { source, filename } = await dynamicRouter.getMarkdownFile(
     locale,

From 010b25969f206905e509aafe7f18643b965c62ff Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Tue, 16 Jan 2024 20:36:41 +0300
Subject: [PATCH 04/11] refactor: review updates

---
 components/withLayout.tsx      |  5 ++-
 layouts/New/Home.tsx           | 22 +++++++++++
 layouts/New/layouts.module.css | 70 ++++++++++++++++++++--------------
 pages/en/new-design/404.mdx    |  2 +-
 pages/en/new-design/index.mdx  |  2 +-
 types/layouts.ts               |  6 ++-
 6 files changed, 73 insertions(+), 34 deletions(-)
 create mode 100644 layouts/New/Home.tsx

diff --git a/components/withLayout.tsx b/components/withLayout.tsx
index d9d9661fa5e44..fedde5d48a02e 100644
--- a/components/withLayout.tsx
+++ b/components/withLayout.tsx
@@ -13,6 +13,7 @@ import BlogLayout from '@/layouts/New/Blog';
 import CenteredLayout from '@/layouts/New/Centered';
 import DefaultLayout from '@/layouts/New/Default';
 import DocsLayout from '@/layouts/New/Docs';
+import HomeLayout from '@/layouts/New/Home';
 import LearnLayout from '@/layouts/New/Learn';
 import PostLayout from '@/layouts/New/Post';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
@@ -28,6 +29,7 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
+  'home.hbs': LegacyDefaultLayout,
   'centered.hbs': LegacyDefaultLayout,
 } satisfies Record<LegacyLayouts, FC>;
 
@@ -35,11 +37,12 @@ const legacyLayouts = {
 const redesignLayouts = {
   'about.hbs': AboutLayout,
   'docs.hbs': DocsLayout,
-  'centered.hbs': CenteredLayout,
+  'home.hbs': HomeLayout,
   'learn.hbs': LearnLayout,
   'page.hbs': DefaultLayout,
   'blog-post.hbs': PostLayout,
   'blog-category.hbs': BlogLayout,
+  'centered.hbs': CenteredLayout,
 } satisfies Record<Layouts, FC>;
 
 type WithLayout<L = Layouts | LegacyLayouts> = PropsWithChildren<{ layout: L }>;
diff --git a/layouts/New/Home.tsx b/layouts/New/Home.tsx
new file mode 100644
index 0000000000000..b296712632121
--- /dev/null
+++ b/layouts/New/Home.tsx
@@ -0,0 +1,22 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+
+import styles from './layouts.module.css';
+
+const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <WithNavBar />
+
+    <div className={`${styles.centeredLayout} ${styles.homeLayout}`}>
+      <div className="glowingBackdrop" />
+
+      <main>{children}</main>
+    </div>
+
+    <WithFooter />
+  </>
+);
+
+export default HomeLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index fe2749c153c4d..f8c4ced61119d 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -62,28 +62,21 @@
   @apply flex
     w-full
     items-center
-    justify-center
-    px-4
-    py-14
-    md:px-14
-    lg:px-28;
+    justify-center;
 
   main {
     @apply items-center
-      justify-center
-      gap-8
-      md:flex-row
-      md:gap-14
-      xl:gap-28
-      2xl:gap-32;
+      justify-center;
 
     section {
       &:nth-of-type(1) {
         @apply flex
-          max-w-[500px]
+          max-w-xl
           flex-[1_0]
           flex-col
-          gap-8;
+          items-center
+          gap-2
+          text-center;
 
         > div {
           @apply flex
@@ -95,24 +88,9 @@
             @apply text-base
               md:text-lg;
           }
-
-          small {
-            @apply text-center
-              text-sm
-              text-neutral-800
-              xs:text-xs
-              dark:text-neutral-400;
-          }
         }
-      }
-
-      &:nth-of-type(1)[role='status'] {
-        @apply max-w-xl
-          items-center
-          gap-2
-          text-center;
 
-        [role='button'] {
+        > [role='button'] {
           @apply mt-4
             flex
             items-center
@@ -123,6 +101,40 @@
           }
         }
       }
+    }
+  }
+}
+
+.homeLayout {
+  @apply px-4
+    py-14
+    md:px-14
+    lg:px-28;
+
+  main {
+    @apply gap-8
+      md:flex-row
+      md:gap-14
+      xl:gap-28
+      2xl:gap-32;
+
+    section {
+      &:nth-of-type(1) {
+        @apply max-w-[500px]
+          items-baseline
+          gap-8
+          text-start;
+
+        > div {
+          small {
+            @apply text-center
+              text-sm
+              text-neutral-800
+              xs:text-xs
+              dark:text-neutral-400;
+          }
+        }
+      }
 
       &:nth-of-type(2) {
         @apply flex
diff --git a/pages/en/new-design/404.mdx b/pages/en/new-design/404.mdx
index 477b09302f88f..7133d9eaf708a 100644
--- a/pages/en/new-design/404.mdx
+++ b/pages/en/new-design/404.mdx
@@ -6,7 +6,7 @@ title: 404
 
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
 
-<section role='status'>
+<section>
 404
 
 <h1 className="special">Page could not be found</h1>
diff --git a/pages/en/new-design/index.mdx b/pages/en/new-design/index.mdx
index 9794e29b95bbd..b0a60ca340812 100644
--- a/pages/en/new-design/index.mdx
+++ b/pages/en/new-design/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Run JavaScript Everywhere
-layout: centered.hbs
+layout: home.hbs
 ---
 
 <section>
diff --git a/types/layouts.ts b/types/layouts.ts
index a99c725c435e8..f6dc3646ecfdf 100644
--- a/types/layouts.ts
+++ b/types/layouts.ts
@@ -2,11 +2,12 @@
 export type Layouts =
   | 'about.hbs'
   | 'docs.hbs'
-  | 'centered.hbs'
+  | 'home.hbs'
   | 'learn.hbs'
   | 'page.hbs'
   | 'blog-category.hbs'
-  | 'blog-post.hbs';
+  | 'blog-post.hbs'
+  | 'centered.hbs';
 
 // @TODO: These are legacy layouts that are going to be replaced with the `nodejs/nodejs.dev` Layouts in the future
 export type LegacyLayouts =
@@ -18,4 +19,5 @@ export type LegacyLayouts =
   | 'docs.hbs'
   | 'download.hbs'
   | 'page.hbs'
+  | 'home.hbs'
   | 'centered.hbs';

From a6ee4a8f138908c3dbbe9205cb7ff4b8d2b9d6af Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Tue, 16 Jan 2024 23:11:43 +0300
Subject: [PATCH 05/11] refactor: review updates

---
 components/withLayout.tsx      |   1 -
 layouts/New/Home.tsx           |  17 +---
 layouts/New/layouts.module.css | 151 ++++++++++++++-------------------
 pages/en/new-design/404.mdx    |  12 +--
 types/layouts.ts               |   1 -
 5 files changed, 70 insertions(+), 112 deletions(-)

diff --git a/components/withLayout.tsx b/components/withLayout.tsx
index fedde5d48a02e..161d1b08b2a80 100644
--- a/components/withLayout.tsx
+++ b/components/withLayout.tsx
@@ -29,7 +29,6 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
-  'home.hbs': LegacyDefaultLayout,
   'centered.hbs': LegacyDefaultLayout,
 } satisfies Record<LegacyLayouts, FC>;
 
diff --git a/layouts/New/Home.tsx b/layouts/New/Home.tsx
index b296712632121..83bd7bf18c28d 100644
--- a/layouts/New/Home.tsx
+++ b/layouts/New/Home.tsx
@@ -1,22 +1,13 @@
 import type { FC, PropsWithChildren } from 'react';
 
-import WithFooter from '@/components/withFooter';
-import WithNavBar from '@/components/withNavBar';
+import CenteredLayout from '@/layouts/New/Centered';
 
 import styles from './layouts.module.css';
 
 const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
-  <>
-    <WithNavBar />
-
-    <div className={`${styles.centeredLayout} ${styles.homeLayout}`}>
-      <div className="glowingBackdrop" />
-
-      <main>{children}</main>
-    </div>
-
-    <WithFooter />
-  </>
+  <CenteredLayout>
+    <main className={styles.homeLayout}>{children}</main>
+  </CenteredLayout>
 );
 
 export default HomeLayout;
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
index f8c4ced61119d..bdfa1be9e529e 100644
--- a/layouts/New/layouts.module.css
+++ b/layouts/New/layouts.module.css
@@ -62,113 +62,86 @@
   @apply flex
     w-full
     items-center
-    justify-center;
+    justify-center
+    px-4
+    py-14
+    md:px-14
+    lg:px-28;
 
   main {
     @apply items-center
       justify-center;
+  }
+}
+
+.homeLayout {
+  @apply gap-8
+    md:flex-row
+    md:gap-14
+    xl:gap-28
+    2xl:gap-32;
+
+  section {
+    &:nth-of-type(1) {
+      @apply flex
+        max-w-[500px]
+        flex-[1_0]
+        flex-col
+        gap-8;
 
-    section {
-      &:nth-of-type(1) {
+      > div {
         @apply flex
-          max-w-xl
-          flex-[1_0]
+          max-w-[400px]
           flex-col
-          items-center
-          gap-2
-          text-center;
-
-        > div {
-          @apply flex
-            max-w-[400px]
-            flex-col
-            gap-4;
-
-          p {
-            @apply text-base
-              md:text-lg;
-          }
-        }
+          gap-4;
 
-        > [role='button'] {
-          @apply mt-4
-            flex
-            items-center
-            gap-2;
+        p {
+          @apply text-base
+            md:text-lg;
+        }
 
-          svg {
-            @apply w-5;
-          }
+        small {
+          @apply text-center
+            text-sm
+            text-neutral-800
+            xs:text-xs
+            dark:text-neutral-400;
         }
       }
     }
-  }
-}
 
-.homeLayout {
-  @apply px-4
-    py-14
-    md:px-14
-    lg:px-28;
+    &:nth-of-type(2) {
+      @apply flex
+        max-w-md
+        flex-[1_1]
+        flex-col
+        items-center
+        gap-4
+        md:max-w-2xl
+        lg:max-w-3xl;
+
+      > div {
+        @apply w-fit;
+
+        div[data-state='active'] a {
+          @apply border-none
+            bg-neutral-900
+            px-3
+            py-1.5
+            text-sm
+            font-medium;
 
-  main {
-    @apply gap-8
-      md:flex-row
-      md:gap-14
-      xl:gap-28
-      2xl:gap-32;
-
-    section {
-      &:nth-of-type(1) {
-        @apply max-w-[500px]
-          items-baseline
-          gap-8
-          text-start;
-
-        > div {
-          small {
-            @apply text-center
-              text-sm
-              text-neutral-800
-              xs:text-xs
-              dark:text-neutral-400;
+          &:hover {
+            @apply bg-neutral-800;
           }
         }
       }
 
-      &:nth-of-type(2) {
-        @apply flex
-          max-w-md
-          flex-[1_1]
-          flex-col
-          items-center
-          gap-4
-          md:max-w-2xl
-          lg:max-w-3xl;
-
-        > div {
-          @apply w-fit;
-
-          div[data-state='active'] a {
-            @apply border-none
-              bg-neutral-900
-              px-3
-              py-1.5
-              text-sm
-              font-medium;
-
-            &:hover {
-              @apply bg-neutral-800;
-            }
-          }
-        }
-
-        > p {
-          @apply text-center
-            text-sm
-            text-neutral-800
-            dark:text-neutral-200;
-        }
+      > p {
+        @apply text-center
+          text-sm
+          text-neutral-800
+          dark:text-neutral-200;
       }
     }
   }
diff --git a/pages/en/new-design/404.mdx b/pages/en/new-design/404.mdx
index 7133d9eaf708a..dcd34371fbec2 100644
--- a/pages/en/new-design/404.mdx
+++ b/pages/en/new-design/404.mdx
@@ -4,17 +4,13 @@ permalink: false
 title: 404
 ---
 
-import { ArrowRightIcon } from '@heroicons/react/24/solid';
-
-<section>
 404
 
-<h1 className="special">Page could not be found</h1>
+<h1 className="special -mt-4">Page could not be found</h1>
 
-<div>
+<p className="-mt-4 max-w-sm text-center text-lg">
   Sorry, we couldn’t find the page you’re after! Try starting again from the
   homepage.
-</div>
+</p>
 
-<Button href="/">Back to Home<ArrowRightIcon /></Button>
-</section>
+<Button href="/">Back to Home</Button>
diff --git a/types/layouts.ts b/types/layouts.ts
index f6dc3646ecfdf..84c148158cfe3 100644
--- a/types/layouts.ts
+++ b/types/layouts.ts
@@ -19,5 +19,4 @@ export type LegacyLayouts =
   | 'docs.hbs'
   | 'download.hbs'
   | 'page.hbs'
-  | 'home.hbs'
   | 'centered.hbs';

From 280e68b20c970c4385e4950c84df06dd245045ed Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Tue, 16 Jan 2024 23:33:23 +0300
Subject: [PATCH 06/11] refactor: layout struct

---
 app/[locale]/not-found.tsx | 6 +++++-
 layouts/New/Centered.tsx   | 6 +-----
 layouts/New/Home.tsx       | 2 ++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 6499488f694a4..f582b5b058d03 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -23,7 +23,11 @@ const LocalizedNotFound: FC = async () => {
 
   return (
     <WithLayout layout="centered.hbs">
-      <MDXRenderer Component={MDXContent} />
+      <div className="glowingBackdrop" />
+
+      <main>
+        <MDXRenderer Component={MDXContent} />
+      </main>
     </WithLayout>
   );
 };
diff --git a/layouts/New/Centered.tsx b/layouts/New/Centered.tsx
index 9ed872cca3661..f63f312b451aa 100644
--- a/layouts/New/Centered.tsx
+++ b/layouts/New/Centered.tsx
@@ -9,11 +9,7 @@ const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
   <>
     <WithNavBar />
 
-    <div className={styles.centeredLayout}>
-      <div className="glowingBackdrop" />
-
-      <main>{children}</main>
-    </div>
+    <div className={styles.centeredLayout}>{children}</div>
 
     <WithFooter />
   </>
diff --git a/layouts/New/Home.tsx b/layouts/New/Home.tsx
index 83bd7bf18c28d..2a313f3e07b69 100644
--- a/layouts/New/Home.tsx
+++ b/layouts/New/Home.tsx
@@ -6,6 +6,8 @@ import styles from './layouts.module.css';
 
 const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
   <CenteredLayout>
+    <div className="glowingBackdrop" />
+
     <main className={styles.homeLayout}>{children}</main>
   </CenteredLayout>
 );

From 340eacfbcf2429e61080a6509c6fcc4a2632b5ce Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 17 Jan 2024 01:13:30 +0300
Subject: [PATCH 07/11] refactor: mdx to i18n

---
 app/[locale]/not-found.tsx  | 42 ++++++++++++++++++++-----------------
 i18n/locales/en.json        |  5 +++++
 next.dynamic.constants.mjs  |  2 --
 pages/en/new-design/404.mdx | 16 --------------
 tailwind.config.ts          |  1 +
 5 files changed, 29 insertions(+), 37 deletions(-)
 delete mode 100644 pages/en/new-design/404.mdx

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index f582b5b058d03..4a59e39be5c7d 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -1,35 +1,39 @@
-import { getLocale } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import { MDXRenderer } from '@/components/mdxRenderer';
-import WithLayout from '@/components/withLayout';
+import Button from '@/components/Common/Button';
+import CenteredLayout from '@/layouts/New/Centered';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
-import { dynamicRouter } from '@/next.dynamic.mjs';
 
-/** @deprecated replace the legacy page when website redesign is done */
-const notFoundSource = ENABLE_WEBSITE_REDESIGN ? 'new-design/404' : '404';
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyNotFound: FC = () => {
+  const t = useTranslations();
 
-const LocalizedNotFound: FC = async () => {
-  const locale = await getLocale();
-
-  // Retrieves the markdown source created for the not-found page
-  const { source, filename } = await dynamicRouter.getMarkdownFile(
-    locale,
-    notFoundSource
+  return (
+    <div className="container">
+      <h2>{t('pages.404.title')}</h2>
+      <h3>{t('pages.404.description')}</h3>
+    </div>
   );
+};
 
-  // Parses the source Markdown content and returns a React Component
-  const { MDXContent } = await dynamicRouter.getMDXContent(source, filename);
+const NotFound: FC = async () => {
+  const t = useTranslations();
 
   return (
-    <WithLayout layout="centered.hbs">
+    <CenteredLayout>
       <div className="glowingBackdrop" />
 
       <main>
-        <MDXRenderer Component={MDXContent} />
+        404
+        <h1 className="special -mt-4">{t('layouts.notFound.title')}</h1>
+        <p className="-mt-4 max-w-sm text-center text-lg">
+          {t('layouts.notFound.description')}
+        </p>
+        <Button href="/">{t('layouts.notFound.backToHome')}</Button>
       </main>
-    </WithLayout>
+    </CenteredLayout>
   );
 };
 
-export default LocalizedNotFound;
+export default ENABLE_WEBSITE_REDESIGN ? NotFound : LegacyNotFound;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 51814c4f8cf38..fef879dcc2f5b 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -208,6 +208,11 @@
         "weekly-updates": "Weekly Updates",
         "wg": "Working Groups"
       }
+    },
+    "notFound": {
+      "title": "Page could not be found",
+      "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage.",
+      "backToHome": "Back to Home"
     }
   },
   "pages": {
diff --git a/next.dynamic.constants.mjs b/next.dynamic.constants.mjs
index bbe4da5aa1096..f9dbedd6a5126 100644
--- a/next.dynamic.constants.mjs
+++ b/next.dynamic.constants.mjs
@@ -15,8 +15,6 @@ import { defaultLocale } from './next.locales.mjs';
  * @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
  */
 export const IGNORED_ROUTES = [
-  // This is used to ignore the 404 route for the static generation (/404)
-  ({ pathname }) => pathname === '404',
   // This is used to ignore all blog routes except for the English language
   ({ locale, pathname }) =>
     locale !== defaultLocale.code && /^blog\//.test(pathname),
diff --git a/pages/en/new-design/404.mdx b/pages/en/new-design/404.mdx
deleted file mode 100644
index dcd34371fbec2..0000000000000
--- a/pages/en/new-design/404.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: centered.hbs
-permalink: false
-title: 404
----
-
-404
-
-<h1 className="special -mt-4">Page could not be found</h1>
-
-<p className="-mt-4 max-w-sm text-center text-lg">
-  Sorry, we couldn’t find the page you’re after! Try starting again from the
-  homepage.
-</p>
-
-<Button href="/">Back to Home</Button>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6badfc908c5d0..54767ff20f8cb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,7 @@ export default {
     './layouts/**/*.tsx',
     './.storybook/preview.tsx',
     './.storybook/main.ts',
+    './app/**/*.tsx',
   ],
   theme: {
     colors: {

From 20554dd3de68dde28b13ff0427a93b02209a0067 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 17 Jan 2024 01:20:39 +0300
Subject: [PATCH 08/11] refactor: unused layouts removed into the layouts

---
 app/[locale]/not-found.tsx | 2 ++
 components/withLayout.tsx  | 3 ---
 types/layouts.ts           | 6 ++----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 4a59e39be5c7d..5b1f760da097a 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
diff --git a/components/withLayout.tsx b/components/withLayout.tsx
index 161d1b08b2a80..771a57a7d702f 100644
--- a/components/withLayout.tsx
+++ b/components/withLayout.tsx
@@ -10,7 +10,6 @@ import LegacyIndexLayout from '@/layouts/IndexLayout';
 import LegacyLearnLayout from '@/layouts/LearnLayout';
 import AboutLayout from '@/layouts/New/About';
 import BlogLayout from '@/layouts/New/Blog';
-import CenteredLayout from '@/layouts/New/Centered';
 import DefaultLayout from '@/layouts/New/Default';
 import DocsLayout from '@/layouts/New/Docs';
 import HomeLayout from '@/layouts/New/Home';
@@ -29,7 +28,6 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
-  'centered.hbs': LegacyDefaultLayout,
 } satisfies Record<LegacyLayouts, FC>;
 
 /** all the currently available layouts from website redesign */
@@ -41,7 +39,6 @@ const redesignLayouts = {
   'page.hbs': DefaultLayout,
   'blog-post.hbs': PostLayout,
   'blog-category.hbs': BlogLayout,
-  'centered.hbs': CenteredLayout,
 } satisfies Record<Layouts, FC>;
 
 type WithLayout<L = Layouts | LegacyLayouts> = PropsWithChildren<{ layout: L }>;
diff --git a/types/layouts.ts b/types/layouts.ts
index 84c148158cfe3..ec7c518c6bc92 100644
--- a/types/layouts.ts
+++ b/types/layouts.ts
@@ -6,8 +6,7 @@ export type Layouts =
   | 'learn.hbs'
   | 'page.hbs'
   | 'blog-category.hbs'
-  | 'blog-post.hbs'
-  | 'centered.hbs';
+  | 'blog-post.hbs';
 
 // @TODO: These are legacy layouts that are going to be replaced with the `nodejs/nodejs.dev` Layouts in the future
 export type LegacyLayouts =
@@ -18,5 +17,4 @@ export type LegacyLayouts =
   | 'index.hbs'
   | 'docs.hbs'
   | 'download.hbs'
-  | 'page.hbs'
-  | 'centered.hbs';
+  | 'page.hbs';

From cb9b87e3b7a5cf46f35ce5f76eb9004fe24ee669 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 17 Jan 2024 01:24:41 +0300
Subject: [PATCH 09/11] refactor: unused 404.md removed

---
 app/[locale]/not-found.tsx | 2 +-
 pages/en/404.md            | 9 ---------
 2 files changed, 1 insertion(+), 10 deletions(-)
 delete mode 100644 pages/en/404.md

diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 5b1f760da097a..923f1ebe56c5b 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -19,7 +19,7 @@ const LegacyNotFound: FC = () => {
   );
 };
 
-const NotFound: FC = async () => {
+const NotFound: FC = () => {
   const t = useTranslations();
 
   return (
diff --git a/pages/en/404.md b/pages/en/404.md
deleted file mode 100644
index f3e5a0fc4d15f..0000000000000
--- a/pages/en/404.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: page.hbs
-permalink: false
-title: 404
----
-
-## 404: Page could not be found
-
-### ENOENT: no such file or directory

From e4627784b270618a2dc3323eedc2054b4afeb795 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 17 Jan 2024 02:06:08 +0300
Subject: [PATCH 10/11] feat: global-error and error page

---
 app/[locale]/error.tsx     | 28 ++++++++++++++++++++++++++--
 app/[locale]/not-found.tsx |  6 +++---
 app/global-error.tsx       | 34 ++++++++++++++++++++++++++++++++--
 3 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
index 3022c2f6b9f46..1e610aa62d403 100644
--- a/app/[locale]/error.tsx
+++ b/app/[locale]/error.tsx
@@ -4,7 +4,12 @@ import { captureException } from '@sentry/nextjs';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
-const ErrorPage: FC<{ error: Error }> = ({ error }) => {
+import Button from '@/components/Common/Button';
+import CenteredLayout from '@/layouts/New/Centered';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyErrorPage: FC<{ error: Error }> = ({ error }) => {
   useMemo(() => captureException(error), [error]);
 
   return (
@@ -15,4 +20,23 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
   );
 };
 
-export default ErrorPage;
+const ErrorPage: FC<{ error: Error }> = ({ error }) => {
+  useMemo(() => captureException(error), [error]);
+
+  return (
+    <CenteredLayout>
+      <div className="glowingBackdrop" />
+
+      <main>
+        500
+        <h1 className="special -mt-4">Internal Server Error</h1>
+        <p className="-mt-4 max-w-sm text-center text-lg">
+          This page has thrown a non-recoverable error.
+        </p>
+        <Button href="/">Back to Home</Button>
+      </main>
+    </CenteredLayout>
+  );
+};
+
+export default ENABLE_WEBSITE_REDESIGN ? ErrorPage : LegacyErrorPage;
diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 923f1ebe56c5b..5b8a2a99eae12 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -8,7 +8,7 @@ import CenteredLayout from '@/layouts/New/Centered';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 
 /** @deprecated remove legacy component when website redesign is done */
-const LegacyNotFound: FC = () => {
+const LegacyNotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
@@ -19,7 +19,7 @@ const LegacyNotFound: FC = () => {
   );
 };
 
-const NotFound: FC = () => {
+const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
@@ -38,4 +38,4 @@ const NotFound: FC = () => {
   );
 };
 
-export default ENABLE_WEBSITE_REDESIGN ? NotFound : LegacyNotFound;
+export default ENABLE_WEBSITE_REDESIGN ? NotFoundPage : LegacyNotFoundPage;
diff --git a/app/global-error.tsx b/app/global-error.tsx
index d8653f56254e5..c8f62505e7ca0 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -5,7 +5,12 @@ import ErrorComponent from 'next/error';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
-const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
+import Button from '@/components/Common/Button';
+import CenteredLayout from '@/layouts/New/Centered';
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+
+/** @deprecated remove legacy component when website redesign is done */
+const LegacyGlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   useMemo(() => captureException(error), [error]);
 
   return (
@@ -17,4 +22,29 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   );
 };
 
-export default GlobalErrorPage;
+const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
+  useMemo(() => captureException(error), [error]);
+
+  return (
+    <html>
+      <body>
+        <CenteredLayout>
+          <div className="glowingBackdrop" />
+
+          <main>
+            500
+            <h1 className="special -mt-4">Internal Server Error</h1>
+            <p className="-mt-4 max-w-sm text-center text-lg">
+              This page has thrown a non-recoverable error.
+            </p>
+            <Button href="/">Back to Home</Button>
+          </main>
+        </CenteredLayout>
+      </body>
+    </html>
+  );
+};
+
+export default ENABLE_WEBSITE_REDESIGN
+  ? GlobalErrorPage
+  : LegacyGlobalErrorPage;

From 26409add226e959a61d253c16a325fe8974a403d Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Wed, 17 Jan 2024 18:36:10 +0300
Subject: [PATCH 11/11] refactor: error page i18n support

---
 app/[locale]/error.tsx     | 12 ++++++++----
 app/[locale]/not-found.tsx |  6 +++---
 app/global-error.tsx       | 29 ++++++++++++++++-------------
 i18n/locales/en.json       | 12 +++++++++---
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
index 1e610aa62d403..09751a84cd7df 100644
--- a/app/[locale]/error.tsx
+++ b/app/[locale]/error.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { captureException } from '@sentry/nextjs';
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 
@@ -21,7 +22,8 @@ const LegacyErrorPage: FC<{ error: Error }> = ({ error }) => {
 };
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
-  useMemo(() => captureException(error), [error]);
+  captureException(error);
+  const t = useTranslations();
 
   return (
     <CenteredLayout>
@@ -29,11 +31,13 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
       <main>
         500
-        <h1 className="special -mt-4">Internal Server Error</h1>
+        <h1 className="special -mt-4">
+          {t('layouts.error.internalServerError.title')}
+        </h1>
         <p className="-mt-4 max-w-sm text-center text-lg">
-          This page has thrown a non-recoverable error.
+          {t('layouts.error.internalServerError.description')}
         </p>
-        <Button href="/">Back to Home</Button>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
       </main>
     </CenteredLayout>
   );
diff --git a/app/[locale]/not-found.tsx b/app/[locale]/not-found.tsx
index 5b8a2a99eae12..a49f5100116c4 100644
--- a/app/[locale]/not-found.tsx
+++ b/app/[locale]/not-found.tsx
@@ -28,11 +28,11 @@ const NotFoundPage: FC = () => {
 
       <main>
         404
-        <h1 className="special -mt-4">{t('layouts.notFound.title')}</h1>
+        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
         <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.notFound.description')}
+          {t('layouts.error.notFound.description')}
         </p>
-        <Button href="/">{t('layouts.notFound.backToHome')}</Button>
+        <Button href="/">{t('layouts.error.backToHome')}</Button>
       </main>
     </CenteredLayout>
   );
diff --git a/app/global-error.tsx b/app/global-error.tsx
index c8f62505e7ca0..e67915b8c536a 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -6,6 +6,7 @@ import type { FC } from 'react';
 import { useMemo } from 'react';
 
 import Button from '@/components/Common/Button';
+import BaseLayout from '@/layouts/BaseLayout';
 import CenteredLayout from '@/layouts/New/Centered';
 import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
 
@@ -23,23 +24,25 @@ const LegacyGlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
 };
 
 const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
-  useMemo(() => captureException(error), [error]);
+  captureException(error);
 
   return (
     <html>
       <body>
-        <CenteredLayout>
-          <div className="glowingBackdrop" />
-
-          <main>
-            500
-            <h1 className="special -mt-4">Internal Server Error</h1>
-            <p className="-mt-4 max-w-sm text-center text-lg">
-              This page has thrown a non-recoverable error.
-            </p>
-            <Button href="/">Back to Home</Button>
-          </main>
-        </CenteredLayout>
+        <BaseLayout>
+          <CenteredLayout>
+            <div className="glowingBackdrop" />
+
+            <main>
+              500
+              <h1 className="special -mt-4">Internal Server Error</h1>
+              <p className="-mt-4 max-w-sm text-center text-lg">
+                This page has thrown a non-recoverable error.
+              </p>
+              <Button href="/">Back to Home</Button>
+            </main>
+          </CenteredLayout>
+        </BaseLayout>
       </body>
     </html>
   );
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fef879dcc2f5b..9f9167c82ceb5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -209,9 +209,15 @@
         "wg": "Working Groups"
       }
     },
-    "notFound": {
-      "title": "Page could not be found",
-      "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage.",
+    "error": {
+      "notFound": {
+        "title": "Page could not be found",
+        "description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage."
+      },
+      "internalServerError": {
+        "title": "Internal Server Error",
+        "description": "This page has thrown a non-recoverable error."
+      },
       "backToHome": "Back to Home"
     }
   },