add description to tasks

src/app/(game)/page.tsx

@@ -5,6 +5,7 @@ import { Menu } from "@/components/Menu";
 import { activities, type ActivityType } from "@/data/activity";
 import { heading } from "@/varients/heading";
 import { text } from "@/varients/text";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -50,6 +51,52 @@ function Activity({
 
 type Filter = "all" | "finished" | "unfinished";
 
+const menus = [
+  {
+    name: "攤位",
+    description: [
+      <p key="booth-1">
+        驚喜總藏身於次次交流之中，去聽聽看、玩玩看各種不同的攤位都在做些什麼吧！依照各攤位的指示完成其要求條件，並出示您的
+        QR code 碼給攤位端掃描，即可獲得該攤位的拼圖獎勵。
+      </p>,
+      <p key="booth-2">
+        註：您可以在 OPass 系統左上角的選單中找到自己的 QR code 碼。
+      </p>,
+    ],
+  },
+  {
+    name: "年會活動",
+    description: [
+      <p key="event-1">
+        邁開您的腳步，來一一踩點{" "}
+        <Link
+          href="https://sitcon.org/2024/events/"
+          className="text-blue-500 underline hover:underline-offset-2"
+        >
+          SITCON 2024 各大年會活動
+        </Link>{" "}
+        吧！請您在走訪各項有趣活動的過程中，找到藏身於活動地點各個角落的 QR code
+        碼，並依照活動說明中的提示完成任務，即可獲得其對應之拼圖獎勵。（請尊重每位與會者的活動體驗，不得逕行翻拍）
+      </p>,
+    ],
+  },
+  {
+    name: "Bonus",
+    description: [
+      <p key="bonus-1">
+        除了攤位及年會活動，我們也準備了 Bonus 特別活動，助您加滿血量！！
+      </p>,
+      <p key="bonus-2">
+        今天，請和我們一起探險、一起玩耍、一起收穫更多驚喜 ☆ﾐ(o*･ω･)ﾉ
+      </p>,
+      <p key="bonus-3">
+        {" "}
+        依照各別活動說明中的提示完成任務，即可獲得其對應之拼圖獎勵。
+      </p>,
+    ],
+  },
+];
+
 export default function Home() {
   const [active, setActive] = useState(0);
   const finished = [[1, 2, 5], [1, 2], [4]][active]; // TODO: useFinished('session')
@@ -67,24 +114,22 @@ export default function Home() {
   }));
 
   const totalN = data.filter((item) => item.isFinished || !item.hide).length;
-  const finishedN =
-    data.filter((item, index) => isActivityFinished(item, index)).length;
+  const finishedN = data.filter((item, index) =>
+    isActivityFinished(item, index),
+  ).length;
 
   return (
     <div>
       <Menu
-        texts={["攤位", "年會活動", "Bonus"]}
+        texts={menus.map((menu) => menu.name) as [string, string, string]}
         active={active}
         setActive={setActive}
       />
 
       <div className="mx-8 my-8 flex flex-col gap-4">
         <div className="flex flex-col gap-1">
           <h5 className={heading({ level: 5 })}>如何完成任務?</h5>
-          <p className={text({ level: 3 })}>
-            Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-            cillum sint consectetur cupidatat.
-          </p>
+          <p className={text({ level: 3 })}>{menus[active].description}</p>
         </div>
 
         <div className="flex items-center gap-3">