refactor: review updates

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,18 +29,20 @@ const legacyLayouts = {
   'index.hbs': LegacyIndexLayout,
   'learn.hbs': LegacyLearnLayout,
   'page.hbs': LegacyDefaultLayout,
+  'home.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,
-  '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 }>;

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;

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

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>

pages/en/new-design/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Run JavaScript Everywhere
-layout: centered.hbs
+layout: home.hbs
 ---
 
 <section>

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';