feat(frontend): update top page

3 files changed, 26 insertions, 14 deletions

diff --git a/frontend/app/components/BorderedContainerWithCaption.tsx b/frontend/app/components/BorderedContainerWithCaption.tsx
index 0fee425..5446ddc 100644
--- a/frontend/app/components/BorderedContainerWithCaption.tsx
+++ b/frontend/app/components/BorderedContainerWithCaption.tsx
@@ -13,7 +13,7 @@ export default function BorderedContainerWithCaption({
 	return (
 		<BorderedContainer>
 			<div className="flex flex-col gap-4">
-				<h2 className="text-center text-lg">{caption}</h2>
+				<h2 className="text-center text-lg font-semibold">{caption}</h2>
 				{children}
 			</div>
 		</BorderedContainer>
diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx
index 651a61c..5ec60e5 100644
--- a/frontend/app/routes/_index.tsx
+++ b/frontend/app/routes/_index.tsx
@@ -1,6 +1,6 @@
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { ensureUserNotLoggedIn } from "../.server/auth";
-import BorderedContainer from "../components/BorderedContainer";
+import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption";
 import NavigateLink from "../components/NavigateLink";
 
 export const meta: MetaFunction = () => [
@@ -26,16 +26,16 @@ export default function Index() {
 				</div>
 			</div>
 			<div className="mx-2">
-				<BorderedContainer>
+				<BorderedContainerWithCaption caption="オンライン予選開催中 (3/21 決勝当日まで)">
 					<p className="text-gray-900 max-w-prose">
 						PHPer コードバトルは指示された動作をする PHP
 						コードをより短く書けた方が勝ち、という 1 対 1
 						の対戦コンテンツです。3/21（金）day0 前夜祭では 3/8
-						に実施された予選を勝ち抜いたプレイヤーによるトーナメント形式での
-						PHPer コードバトルを実施します。
-						ここでは短いコードが正義です！可読性も保守性も放り投げた、イベントならではのコードをお楽しみください！
+						に実施されたオフライン予選と、当日まで開催しているオンライン予選を勝ち抜いたプレイヤーによるトーナメント形式での
+						PHPer コードバトルを実施します。ここでは短いコードが正義です！
+						可読性も保守性も放り投げた、イベントならではのコードをお楽しみください！
 					</p>
-				</BorderedContainer>
+				</BorderedContainerWithCaption>
 			</div>
 			<div>
 				<NavigateLink to="/login">ログイン</NavigateLink>
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"