add: mode & character page

apps/web/src/containers/Chara.css

@@ -0,0 +1 @@
+.screen.chara {}

apps/web/src/containers/Chara.tsx

@@ -0,0 +1,7 @@
+import './Chara.css'
+
+export function Chara() {
+    return <div className="screen chara"></div>
+}
+
+export default Chara

apps/web/src/containers/Mode.css

@@ -0,0 +1,23 @@
+.screen.mode {
+    gap: 1rem;
+    button {
+        display: flex;
+        flex-direction: column;
+        height: 10rem;
+        gap: 0.5rem;
+        .name {
+            font-size: 3.5rem;
+            font-weight: bold;
+        }
+        .description {
+            display: flex;
+            flex-direction: row;
+            gap: 1rem;
+            span {
+                font-size: 1rem;
+                &::before { content: '['; }
+                &::after { content: ']'; }
+            }
+        }
+    }
+}

apps/web/src/containers/Mode.tsx

@@ -0,0 +1,26 @@
+import { PullCount } from '@/config'
+import { useModeChoose } from '@remake/hooks'
+import './Mode.css'
+
+export function Mode() {
+    const [Mode, choose] = useModeChoose()
+    return (
+        <div className="screen mode">
+            <button onClick={() => choose(Mode.Classic)}>
+                <div className="name">经典模式</div>
+                <div className="description">
+                    <span>{PullCount} 连抽天赋</span>
+                    <span>自由分配属性</span>
+                </div>
+            </button>
+            <button onClick={() => choose(Mode.Celebrity)}>
+                <div className="name">名人模式</div>
+                <div className="description">
+                    <span>前世古代名人，重开到了现代</span>
+                </div>
+            </button>
+        </div>
+    )
+}
+
+export default Mode