From 830010167d44b2419344fa2b6c81a137948a0f94 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 15 Mar 2025 23:43:52 +0900
Subject: feat(frontend): update top page

---
 frontend/app/routes/dashboard.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

(limited to 'frontend/app/routes/dashboard.tsx')

diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 3c4a684..2320744 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -3,6 +3,7 @@ import { Form, useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
 import { apiGetGames } from "../api/client";
 import BorderedContainer from "../components/BorderedContainer";
+import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption";
 import NavigateLink from "../components/NavigateLink";
 import UserIcon from "../components/UserIcon";
 
@@ -31,12 +32,23 @@ export default function Dashboard() {
 					className="w-24 h-24"
 				/>
 			)}
-			<h1 className="text-2xl font-bold">
-				<span className="text-gray-800">{user.display_name}</span>
-				<span className="text-gray-500 ml-2">@{user.username}</span>
-			</h1>
-			<h2 className="text-xl font-semibold text-gray-700">試合</h2>
-			<BorderedContainer>
+			<h1 className="text-3xl font-bold text-gray-800">{user.display_name}</h1>
+			<BorderedContainerWithCaption caption="オンライン予選開催中 (3/21 決勝当日まで)">
+				<p className="text-gray-900 max-w-prose">
+					現在オンライン予選を開催中です。
+					予選問題2問を両方解いたプレイヤーのうち合計スコアが最も小さい2名が、3/21
+					(金) の PHPerKaigi day0 に実施される決勝戦への進出枠を獲得します。
+					当日は、会場の Track A まで是非お越しください！
+				</p>
+				<p className="text-gray-600 max-w-prose">
+					※ 当日会場 Track A
+					にいらっしゃらない場合、次点のスコアを獲得されている方が自動的に決勝進出となります。
+				</p>
+				<p className="text-gray-600 max-w-prose">
+					※ 決勝に参加する予定のない方でも、プレイしていただくことは可能です。
+				</p>
+			</BorderedContainerWithCaption>
+			<BorderedContainerWithCaption caption="試合一覧">
 				<div className="px-4">
 					{games.length === 0 ? (
 						<p>エントリーできる試合はありません</p>
@@ -70,7 +82,7 @@ export default function Dashboard() {
 						</ul>
 					)}
 				</div>
-			</BorderedContainer>
+			</BorderedContainerWithCaption>
 			<Form method="post" action="/logout">
 				<button
 					type="submit"
-- 
cgit v1.2.3-70-g09d2