Merge branch 'main' into feat-jsx-api

src/components/CreateMessageCheck.tsx

@@ -68,14 +68,16 @@ const buttonStyle = css`
   border-radius: 0.5rem;
   width: 7.5rem;
   height: 7.25rem;
+  display: flex;
   text-align: center;
+  justify-content: center;
 
   a {
     display: block;
     color: var(--color-black);
     text-decoration: none;
-    padding: 2rem 1.5rem;
     font-size: 1rem;
+    padding: 2.9rem 1rem;
   }
 `;
 
@@ -84,6 +86,7 @@ const sendButtonStyle = css`
 
   a {
     color: var(--color-white);
+    padding: 2.1rem 1.5rem;
   }
 `;
 
@@ -131,11 +134,7 @@ export const CreateMessageCheck = () => {
 
         <div class={buttonContainerStyle}>
           <div class={buttonStyle}>
-            <a href="./select">
-              気持ちを
-              <br />
-              追加する
-            </a>
+            <a href="./">つくり直す</a>
           </div>
           <div class={cx(buttonStyle, sendButtonStyle)}>
             <a href="./check">

src/components/CreateMessageSelect.tsx

@@ -142,7 +142,7 @@ export const CreateMessageSelect = async () => {
             ))}
           </ul>
           <div class={checkLinkStyle}>
-            <a href="./check">確認</a>
+            <a href="./check">決定</a>
           </div>
         </div>
       </div>

src/components/CreateMessageTop.tsx

@@ -1,29 +1,45 @@
-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;
+  height: 75vh;
   display: flex;
   justify-content: center;
-  margin-top: 3rem;
 
   img {
-    height: calc(100% - 11rem);
+    height: calc(100% - 7rem);
+    margin-top: 4rem;
   }
 `;
 
 const buttonStyle = css`
-  position: absolute;
-  bottom: 4rem;
   background-color: var(--color-base);
   border-radius: 0.5rem;
+  width: 7.5rem;
+  height: 7.25rem;
+  display: flex;
+  text-align: center;
+  justify-content: center;
 
   a {
     display: block;
     color: var(--color-black);
     text-decoration: none;
-    padding: 2rem 1.5rem;
     font-size: 1rem;
+    padding: 2.1rem 1rem;
   }
 `;
 
@@ -34,9 +50,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;