Feature/issue38 add home screen (#40)

ホーム画面の実装を行いました

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

src/components/CreateMessageTop.tsx

@@ -1,6 +1,19 @@
-import { css } from "@hono/hono/css";
+import { css, keyframes } from "@hono/hono/css";
 import { WithHTML } from "../layout/WithHTML.tsx";
 
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to{
+    opacity: 1;
+  }
+`;
+
+const fadeAnimation = css`
+  animation: ${fadeIn} 3s forwards;
+`;
+
 const imageStyle = css`
   height: 85vh;
   display: flex;
@@ -34,9 +47,19 @@ const buttonStyle = css`
 export const CreateMessageTop = () => {
   return (
     <WithHTML>
-      <div>
+      <div class={fadeAnimation}>
+        <audio
+          id="ice-audio"
+          preload="auto"
+          autoplay
+          src="/public/audio/ice.mp3"
+        >
+        </audio>
         <div class={imageStyle}>
-          <img src="/public/images/cocktail-glass.svg" alt="empty glass" />
+          <img
+            src="/public/images/cocktail-glass-empty.svg"
+            alt="empty glass"
+          />
         </div>
         <div class={buttonStyle}>
           <a href="./select">

src/components/router.tsx

@@ -1,4 +1,6 @@
 import { Hono } from "@hono/hono";
+
+import { Home } from "../pages/Home.tsx";
 import { CreateMessageTop } from "./CreateMessageTop.tsx";
 import { CreateMessageSelect } from "./CreateMessageSelect.tsx";
 import { CreateMessageCheck } from "./CreateMessageCheck.tsx";
@@ -10,6 +12,7 @@ import { CreateMessageCheck } from "./CreateMessageCheck.tsx";
 export const createMessage = new Hono();
 
 createMessage
-  .get("/", (ctx) => ctx.html(<CreateMessageTop />))
+  .get("/", (ctx) => ctx.html(<Home />))
+  .get("/create", (ctx) => ctx.html(<CreateMessageTop />))
   .get("/select", (ctx) => ctx.html(<CreateMessageSelect />))
   .get("/check", (ctx) => ctx.html(<CreateMessageCheck />));

src/layout/WithHTML.tsx

@@ -8,6 +8,9 @@ const layoutStyle = css`
       padding: 0;
       box-sizing: border-box;
 
+      --font-jp: "Noto Serif JP", serif;
+      --font-en: "Cormorant Garamond", serif;
+
       --color-black: #000000;
       --color-white: #ffffff;
       --color-main: #443d3a;