refactor: review updates

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

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;

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

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>

types/layouts.ts

@@ -19,5 +19,4 @@ export type LegacyLayouts =
   | 'docs.hbs'
   | 'download.hbs'
   | 'page.hbs'
-  | 'home.hbs'
   | 'centered.hbs';