fixup! put Turtle in subdir

Author: avivkeller

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

@@ -1,11 +1,11 @@
 'use client';
 
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '#site/components/Common/Button';
+import Turtle from '#site/components/Common/Turtle';
 import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
@@ -20,14 +20,7 @@ const NotFoundPage: FC = () => {
       </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>
+        <Turtle />
       </div>
 
       <p className="-mt-4 max-w-sm text-center text-lg">

apps/site/styles/effects.css …omponents/Common/Turtle/index.module.cssapps/site/styles/effects.css renamed to apps/site/components/Common/Turtle/index.module.css apps/site/styles/effects.css renamed to apps/site/components/Common/Turtle/index.module.css

@@ -1,5 +1,6 @@
-@utility turtle {
-  @apply animate-surf
+.turtle {
+  @apply motion-safe:animate-surf
+    animate-surf
     absolute
     z-10
     translate-x-0
@@ -16,12 +17,13 @@
     after:bg-[url('/static/images/smoke.gif')]
     after:opacity-[0.15]
     after:content-['']
+    motion-reduce:animate-none
     after:md:-left-1/2
     after:md:top-1/2;
+}
 
-  & img {
-    @apply h-auto
-      w-24
-      md:w-48;
-  }
+.image {
+  @apply h-auto
+    w-24
+    md:w-48;
 }

apps/site/components/Common/Turtle/index.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+const Turtle: FC = () => (
+  <div className={styles.turtle}>
+    <Image
+      className={styles.image}
+      src="/static/images/node-mascot.svg"
+      alt="The Node.js mascot"
+      height={115}
+      width={100}
+    />
+  </div>
+);
+
+export default Turtle;

apps/site/styles/index.css

@@ -7,5 +7,4 @@
 */
 
 @import '@node-core/ui-components/styles/index.css';
-@import './effects.css';
 @import './locales.css';