feat: update index page

packages/client/src/common.scss

@@ -20,6 +20,7 @@ $avatarsPath: './assets/avatar/';
 }
 
 body {
+    min-width: 1280px;
     background: #dfc380;
 }
 

packages/client/src/pages/home/index.tsx

@@ -17,6 +17,8 @@ import { Has, getComponentValue } from '@latticexyz/recs';
 import { decodeEntity } from "@latticexyz/store-sync/recs";
 import { ethers } from 'ethers';
 
+import indexDuckImg from '@/assets/img/duck_index.png';
+
 import lootAbi from '../../../../contracts/out/Loot.sol/MLoot.abi.json'
 import userAbi from '../../../../contracts/out/User.sol/MUser.abi.json'
 import pluginAbi from '../../../../contracts/out/Plugin.sol/MPlugin.abi.json'
@@ -262,9 +264,26 @@ const Home = () => {
       />
       {
         step === 'play' && (
-          <section className="mi-section">
-            <button className="play-btn mi-btn" onClick={play}>PLAY NOW</button>
-            <button className="play-btn mi-btn" onClick={initUserInfoFun}>INIT USER</button>
+          <section className="mi-section index-section">
+            <div className="section-box">
+              <div className="intro-box">
+                <h1 className={'intro-title'}>Welcome to Mississippi</h1>
+                <p>
+                  An ancient cave, cursed by its creator, opens intermittently as if alive <br/><br/>
+
+                  The cavern is rich in energy gems that prudent adventurers can take, while those who miss the time to leave due to greed will be trapped in the cavern forever <br/><br/>
+
+                  The Mississippi Company executives saw the value of the caves and decided to monopolize them <br/><br/>
+
+                  Just when the plan was about to succeed, a group of crazy duck adventurers stormed into the cave...
+                </p>
+                <button className="play-btn mi-btn" onClick={play}>PLAY NOW</button>
+                <button className="play-btn mi-btn" onClick={initUserInfoFun}>INIT USER</button>
+
+              </div>
+            </div>
+            <img src={indexDuckImg} alt="duck" className={'duck-index'}/>
+
           </section>
         )
       }

packages/client/src/pages/home/styles.scss

@@ -9,18 +9,46 @@
         padding-top: 116px;
         height: 100%;
 
-        .play-btn {
+    }
+
+    .index-section {
+
+        .duck-index {
             position: absolute;
-            width: 210px;
-            height: 66px;
-            left: 50%;
-            bottom: 25%;
-            font-size: 16px;
-            transform: translate3d(-50%, 0, 0);
-            & ~ .play-btn {
-                margin-top: 100px;
-                bottom: calc(25% - 100px);
+            bottom: 0;
+            right: 20px;
+            width: 720px;
+        }
+
+        .intro-box {
+            font-family: MISS, sans-serif;
+            width: 600px;
+            color: #fff;
+
+            h1 {
+                margin: 60px auto 40px;
+                text-align: center;
+                font-size: 28px;
             }
+
+            p {
+                font-size: 16px;
+                line-height: 2;
+            }
+
+            .play-btn {
+                display: block;
+                margin: 40px auto;
+                width: 210px;
+                height: 66px;
+                font-size: 16px;
+            }
+        }
+
+        .section-box {
+            position: relative;
+            width: 1280px;
+            margin: 0 auto;
         }
     }