Merge pull request #34 from claustra01/home_Rule+

Home rule+

src/components/responsive/homePC/index.module.css

@@ -38,7 +38,8 @@
 }
 
 .background-logo {
-  opacity: 0.2;
+  opacity: 0.1;
+
   position: absolute;
   top: 50%;
   left: 24%;
@@ -159,3 +160,23 @@ li {
   font-size: 32px;
   z-index: 10;
 }
+
+.text{
+  font-size: 24px;
+  color: #212121;
+  padding: 24px;
+  font-family:  Yuji Syuku,  sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-style: normal;
+  position: absolute; 
+  bottom: 10px; 
+  text-align: left; 
+}
+
+.white-box{
+  width: 50%;
+  height: 30%;
+  background-color: #fff;
+  opacity: 0.4;
+}

src/components/responsive/homePC/index.tsx

@@ -5,6 +5,7 @@ import { copyStringToClipboard } from "../../../utils/copyClipBoard";
 import { requestPermission } from "../../../utils/permission";
 import QRCodeGenerator from "../../QRCodeGenerator";
 import { DefaultButton } from "../../ui/Button";
+import Rule from "../../ui/Rule";
 import TextButton from "../../ui/TextButton";
 import styles from "./index.module.css";
 
@@ -75,6 +76,10 @@ function HomePC() {
 						射的へ向かう
 					</DefaultButton>
 				</div>
+
+				<div className={styles.text}>
+					<Rule />
+				</div>
 			</div>
 			<div className={styles["right-container"]}>
 				<div className={styles["yatai-wrapper"]}>

src/components/responsive/homeSP/index.module.css

@@ -62,3 +62,16 @@ li {
     padding: 12px 0;
     font-size: 18px; 
 }
+
+.text{
+    font-size: 16px;
+    color: #212121;
+    padding: 24px;
+    font-family:  Yuji Syuku,  sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    font-style: normal;
+    position: absolute; 
+    bottom: 10px; 
+    text-align: left; 
+}

src/components/responsive/homeSP/index.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useSocketRefStore } from "../../../store";
 import { requestPermission } from "../../../utils/permission";
 import { DefaultButton } from "../../ui/Button";
+import Rule from "../../ui/Rule";
 import styles from "./index.module.css";
 
 function HomeSP() {
@@ -59,8 +60,11 @@ function HomeSP() {
 						height="380"
 					/>
 				</div>
+				<div className={styles.text}>
+					<Rule />
+				</div>
 				<div className={styles["go-game-sp"]}>
-					<DefaultButton color="red" size="lg" onClick={handleClick}>
+					<DefaultButton color="red" size="md" onClick={handleClick}>
 						射的へ向かう
 					</DefaultButton>
 				</div>

src/components/ui/Rule/index.tsx

@@ -0,0 +1,16 @@
+function Rule() {
+	return (
+		<div>
+			<p>〜ルール〜</p>
+			<p>
+				1,画面にスマホを向け、ポインタの位置を確認(1回につき3発のコルク玉が渡されます)
+				<br />
+				2,狙いを目掛けてスマホのトリガーボタンを押すと当たればGetです
+				<br />
+				3,結果はぜひSNSでポストしてね
+			</p>
+		</div>
+	);
+}
+
+export default Rule;