#24

frontend/src/pages/NotFound.tsx

@@ -1,5 +1,6 @@
 import { Helmet } from 'react-helmet-async'
 
+import notFoundImg from '@/assets/images/not-found.gif'
 import MainArea from '@/components/layout/MainArea'
 import { SITE_TITLE } from '@/config'
 
@@ -7,12 +8,19 @@ import { SITE_TITLE } from '@/config'
 export default () => (
     <MainArea>
       <Helmet>
-        <meta name="robots" content="noindex" />
-        <title>ページないよ (笑) | {SITE_TITLE}</title>
+	<meta name="robots" content="noindex" />
+	<title>ページないよ (笑) | {SITE_TITLE}</title>
       </Helmet>
-      <div className="text-6xl font-bold italic text-transparent whitespace-nowrap
-                   bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
-                   bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_white]">
-        404<br />ページないよ（笑）
+      <div className="text-6xl font-bold text-transparent whitespace-nowrap
+		      bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
+		      bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
+		      space-y-6 text-center flex flex-col justify-center items-center">
+	<p>404</p>
+	<div className="flex space-x-4">
+	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
+	  <img src={notFoundImg} alt="404" />
+	  <p style={{ writingMode: 'vertical-rl' }}>帰れ！</p>
+	</div>
+	<p className="mr-[-.5em]">ページないよ（笑）</p>
       </div>
     </MainArea>)