6492 surfin 404 (#7056)

* feat: turtle surfin

* fix indentation per our style

* specify unit on TW

* better whitespace

at least on Chrome responsive mode this looks better. still testing

* unit of measures on all arbitrary values

* Apply suggestions from code review

Co-authored-by: Caner Akdas <[email protected]>
Signed-off-by: Brian Muenzenmeyer <[email protected]>

* use TW content rule

* center the error state headings

did not alter .special, as that is used for the homepage

---------

Signed-off-by: Brian Muenzenmeyer <[email protected]>
Co-authored-by: Darcy Clarke <[email protected]>
Co-authored-by: Caner Akdas <[email protected]>

Author: 3 people

apps/site/app/[locale]/error.tsx

@@ -19,7 +19,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
 
       <main>
         500
-        <h1 className="special -mt-4">
+        <h1 className="special -mt-4 text-center">
           {t('layouts.error.internalServerError.title')}
         </h1>
         <p className="-mt-4 max-w-sm text-center text-lg">

apps/site/app/[locale]/not-found.tsx

@@ -18,14 +18,18 @@ const NotFoundPage: FC = () => {
 
       <main>
         404
-        <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
-        <div className="my-4 flex items-center justify-center">
-          <Image
-            src="/static/images/node-mascot.svg"
-            alt="The Node.js mascot"
-            height={114.69}
-            width={100}
-          />
+        <h1 className="special -mt-4 text-center">
+          {t('layouts.error.notFound.title')}
+        </h1>
+        <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
+          <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
+            <Image
+              src="/static/images/node-mascot.svg"
+              alt="The Node.js mascot"
+              height={114.69}
+              width={100}
+            />
+          </div>
         </div>
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.notFound.description')}

apps/site/app/global-error.tsx

@@ -21,7 +21,9 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
 
             <main>
               500
-              <h1 className="special -mt-4">Internal Server Error</h1>
+              <h1 className="special -mt-4 text-center">
+                Internal Server Error
+              </h1>
               <p className="-mt-4 max-w-sm text-center text-lg">
                 This page has thrown a non-recoverable error.
               </p>

apps/site/public/static/images/smoke.gif

@@ -10,3 +10,34 @@ h1.special {
     md:leading-[4rem]
     md:-tracking-[0.06rem];
 }
+
+.turtle {
+  @apply animate-surf
+    absolute
+    z-10
+    translate-x-0
+    translate-y-0;
+}
+
+.turtle img {
+  @apply h-auto
+    w-24
+    md:w-48;
+}
+
+.turtle::after {
+  @apply absolute
+    -left-full
+    top-[20%]
+    -z-10
+    block
+    h-36
+    w-36
+    -rotate-90
+    select-none
+    bg-[url('/static/images/smoke.gif')]
+    opacity-[0.15]
+    content-['']
+    md:-left-1/2
+    md:top-1/2;
+}

apps/site/styles/effects.css

@@ -139,6 +139,18 @@ export default {
       spacing: { '4.5': '1.125rem', '18': '4.5rem' },
       aria: { current: 'current="page"' },
       maxWidth: { '8xl': '95rem' },
+      animation: {
+        surf: 'surf 1s infinite ease-in-out',
+      },
+      keyframes: {
+        surf: {
+          '0%': { transform: 'translate(0, 0)' },
+          '25%': { transform: 'translate(0, 6px)' },
+          '50%': { transform: 'translate(0, -6px)' },
+          '75%': { transform: 'translate(0, 3px)' },
+          '100%': { transform: 'translate(0, 0)' },
+        },
+      },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],