diff --git a/apps/site/app/[locale]/error.tsx b/apps/site/app/[locale]/error.tsx index 8f642ae363cc6..a62a830d1f1ed 100644 --- a/apps/site/app/[locale]/error.tsx +++ b/apps/site/app/[locale]/error.tsx @@ -19,7 +19,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
500 -

+

{t('layouts.error.internalServerError.title')}

diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx index bb7b53628c709..44d8839a42d7d 100644 --- a/apps/site/app/[locale]/not-found.tsx +++ b/apps/site/app/[locale]/not-found.tsx @@ -18,14 +18,18 @@ const NotFoundPage: FC = () => {

404 -

{t('layouts.error.notFound.title')}

-
- The Node.js mascot +

+ {t('layouts.error.notFound.title')} +

+
+
+ The Node.js mascot +

{t('layouts.error.notFound.description')} diff --git a/apps/site/app/global-error.tsx b/apps/site/app/global-error.tsx index 20d1cb618a735..6cab08ae716f9 100644 --- a/apps/site/app/global-error.tsx +++ b/apps/site/app/global-error.tsx @@ -21,7 +21,9 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {

500 -

Internal Server Error

+

+ Internal Server Error +

This page has thrown a non-recoverable error.

diff --git a/apps/site/public/static/images/smoke.gif b/apps/site/public/static/images/smoke.gif new file mode 100644 index 0000000000000..df014e59c9d17 Binary files /dev/null and b/apps/site/public/static/images/smoke.gif differ diff --git a/apps/site/styles/effects.css b/apps/site/styles/effects.css index bececd16aae56..874840458209a 100644 --- a/apps/site/styles/effects.css +++ b/apps/site/styles/effects.css @@ -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; +} diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts index 60992522b0ca3..4ea21ba1b8050 100644 --- a/apps/site/tailwind.config.ts +++ b/apps/site/tailwind.config.ts @@ -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"]'],