update Home page

src/styles/core.scss

@@ -26,7 +26,7 @@ table {
 #root {
   margin: 0 auto;
   text-align: center;
-  width: 100%
+  width: 100%;
 }
 
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"),

src/ui/Home/index.module.scss

+#root {
+  height: 100%;
+}
+
 body {
   text-align: center;
   position: relative;
@@ -46,4 +50,54 @@ body {
 
 .container {
   position: relative;
+  display: flex;
+  width: 100%;
+  height: 95vh;
+  align-items: center;
+
+  .bg {
+    width: 100%;
+    height: 100%;
+    background: url(/neos-assets/home-background.png);
+    background-size: cover;
+    opacity: .2;
+  }
+
+  .box {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+    height: 500px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: #333b51;
+    opacity: .8;
+    border-radius: 1.2em;
+    box-shadow: 0 2px 10px -5px rgba(9,2,4,.8);
+    align-items: center;
+
+    p {
+      font-size: 2em;
+    }
+
+    button {
+      font-size: 1.2em;
+      width: 350px;
+      height: 45px;
+      margin: .5em;
+      background-color: #2c2c2c;
+      border-width: .3em;
+      border-image: url(/neos-assets/border.webp) 10;
+    }
+    
+    button:hover {
+      background-color: #393983;
+    }
+
+    button:active {
+      background-color: #9d3939;
+    }
+  }
 }

src/ui/Home/index.tsx

@@ -45,6 +45,18 @@ const Home: React.FC = () => {
           </a>
         </div>
       </div>
+      <div className={styles.container}>
+        <div className={styles.bg}></div>
+        <div className={styles.box}>
+          <p>欢迎来到NEOS</p>
+          <button>娱乐匹配</button>
+          <button>竞技匹配</button>
+          <button>自定义匹配</button>
+          <button>人机对战</button>
+          <button>录像回放</button>
+          <button>卡组编辑</button>
+        </div>
+      </div>
     </>
   );
 };