From 6df3619fef5989603638ccb20963d9c035c3d808 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 16:08:53 +0800
Subject: [PATCH 01/14] Add static hackathon fallback for niuma 2026

---
 components/Activity/StaticHackathonDetail.tsx | 143 +++++++++++++++
 constants/staticHackathons.ts                 | 172 ++++++++++++++++++
 pages/hackathon/[id].tsx                      |  39 +++-
 pages/hackathon/[id]/team/[tid].tsx           |   3 +
 4 files changed, 353 insertions(+), 4 deletions(-)
 create mode 100644 components/Activity/StaticHackathonDetail.tsx
 create mode 100644 constants/staticHackathons.ts

diff --git a/components/Activity/StaticHackathonDetail.tsx b/components/Activity/StaticHackathonDetail.tsx
new file mode 100644
index 0000000..665a4e6
--- /dev/null
+++ b/components/Activity/StaticHackathonDetail.tsx
@@ -0,0 +1,143 @@
+import type { FC } from 'react';
+import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
+
+import type { StaticHackathonProfile } from '../../constants/staticHackathons';
+import styles from '../../styles/Hackathon.module.less';
+
+const AgendaTypeLabel: Record<StaticHackathonProfile['agenda'][number]['type'], string> = {
+  enrollment: '报名',
+  formation: '组队',
+  competition: '比赛',
+  evaluation: '评审',
+  break: '展示',
+};
+
+export interface StaticHackathonDetailProps {
+  profile: StaticHackathonProfile;
+}
+
+export const StaticHackathonDetail: FC<StaticHackathonDetailProps> = ({ profile }) => (
+  <>
+    <section className={styles.hero}>
+      <Container>
+        <div className="text-center mb-3">
+          <Badge bg="light" text="dark">
+            {profile.theme}
+          </Badge>
+        </div>
+        <h1 className={`text-center ${styles.title}`}>{profile.name}</h1>
+        <p className={`text-center ${styles.description}`}>{profile.summary}</p>
+
+        <Row className="mt-4 justify-content-center">
+          <Col md={4}>
+            <Card className={styles.infoCard}>
+              <Card.Body>
+                <h5 className="text-white mb-2">📍 活动形式</h5>
+                <p className="text-white-50 mb-0">{profile.location}</p>
+              </Card.Body>
+            </Card>
+          </Col>
+          <Col md={4}>
+            <Card className={styles.infoCard}>
+              <Card.Body>
+                <h5 className="text-white mb-2">⏰ 活动时间</h5>
+                <p className="text-white-50 mb-0">{profile.timeline}</p>
+              </Card.Body>
+            </Card>
+          </Col>
+        </Row>
+
+        <Row className="mt-4 g-3 justify-content-center">
+          {profile.entryLinks.slice(0, 2).map(({ href, label }) => (
+            <Col key={label} md="auto">
+              <Button href={href} target="_blank" rel="noreferrer" size="lg">
+                {label}
+              </Button>
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    </section>
+
+    <Container className="my-5">
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>🔗 报名与入口</h2>
+        <Row className="mt-4 g-3" md={2} xl={3}>
+          {profile.entryLinks.map(({ href, label, note }) => (
+            <Col key={label}>
+              <Card className={styles.darkCard} body>
+                <h3 className="h5 text-white">{label}</h3>
+                <p className="text-white-50 mb-3">{note}</p>
+                <Button href={href} target="_blank" rel="noreferrer" variant="light">
+                  打开链接
+                </Button>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>📅 活动日程</h2>
+        <ol className="list-unstyled mt-4">
+          {profile.agenda.map(({ endedAt, name, startedAt, summary, type }) => (
+            <li key={`${name}-${startedAt}`} className={`${styles.agendaItem} ${styles[type]}`}>
+              <h3 className="h5 text-white mb-2">{name}</h3>
+              <p className="text-white-50 small mb-2">{summary}</p>
+              <div className="d-flex justify-content-between align-items-center gap-3 flex-wrap">
+                <Badge bg="dark">{AgendaTypeLabel[type]}</Badge>
+                <div className="text-white-50 small">
+                  {startedAt} - {endedAt}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <section className={`${styles.section} ${styles.prizeSection}`}>
+        <h2 className={styles.sectionTitle}>🏆 奖项设置</h2>
+        <Row className="mt-4 g-3" md={2} xl={3}>
+          {profile.awards.map(({ name, quota, summary }) => (
+            <Col key={name}>
+              <Card className={styles.lightCard} body>
+                <div className="d-flex justify-content-between align-items-start gap-3">
+                  <h3 className="h5 mb-2">{name}</h3>
+                  <Badge bg="dark">{quota}</Badge>
+                </div>
+                <p className="mb-0">{summary}</p>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>🧾 参赛说明</h2>
+        <Row className="mt-4 g-3" md={2}>
+          {profile.notes.map(note => (
+            <Col key={note}>
+              <Card className={styles.darkCard} body>
+                <p className="text-white-50 mb-0">{note}</p>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>❓ FAQ</h2>
+        <Row className="mt-4 g-3" md={2}>
+          {profile.faq.map(({ answer, question }) => (
+            <Col key={question}>
+              <Card className={styles.darkCard} body>
+                <h3 className="h5 text-white">{question}</h3>
+                <p className="text-white-50 mb-0">{answer}</p>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </section>
+    </Container>
+  </>
+);
diff --git a/constants/staticHackathons.ts b/constants/staticHackathons.ts
new file mode 100644
index 0000000..f9d92af
--- /dev/null
+++ b/constants/staticHackathons.ts
@@ -0,0 +1,172 @@
+export interface StaticHackathonLink {
+  href: string;
+  label: string;
+  note: string;
+}
+
+export interface StaticHackathonAgendaItem {
+  endedAt: string;
+  name: string;
+  startedAt: string;
+  summary: string;
+  type: 'break' | 'competition' | 'enrollment' | 'evaluation' | 'formation';
+}
+
+export interface StaticHackathonPrize {
+  name: string;
+  quota: string;
+  summary: string;
+}
+
+export interface StaticHackathonFAQ {
+  answer: string;
+  question: string;
+}
+
+export interface StaticHackathonProfile {
+  agenda: StaticHackathonAgendaItem[];
+  awards: StaticHackathonPrize[];
+  entryLinks: StaticHackathonLink[];
+  faq: StaticHackathonFAQ[];
+  id: string;
+  location: string;
+  name: string;
+  notes: string[];
+  summary: string;
+  theme: string;
+  timeline: string;
+}
+
+export const staticHackathons: Record<string, StaticHackathonProfile> = {
+  'niuma-hackathon-2026': {
+    id: 'niuma-hackathon-2026',
+    name: '2026 五一牛马 AI 黑客松',
+    summary:
+      '劳动节，用 AI 把自己从重复劳动中解放出来。报名一个月拉满人，组队只给 7 天做决策，比赛压缩为 3 天核心冲刺，再用 Demo Day 做集中展示。',
+    theme: 'AI 解放牛马',
+    location: '线上 + 线下同步',
+    timeline: '2026-03-25 00:00 - 2026-05-06 晚上（UTC+8）',
+    entryLinks: [
+      {
+        label: '队员注册',
+        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnZAJd1yhqHYRmQXmAwlXjkc',
+        note: '所有参赛者先完成报名，进入组队池与官方群。',
+      },
+      {
+        label: '项目注册',
+        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnKsgpHpBXcwh4W6GDg2G7Nc',
+        note: '组队阶段由队长登记项目、成员、赛道和一句话介绍。',
+      },
+      {
+        label: '代码库创建',
+        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnc1mbGsxMm8mS69au3B7uzf',
+        note: '需要官方统一协助建库时使用，不是所有队伍都必须填写。',
+      },
+      {
+        label: '产品提交',
+        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnkrO7EMQlXYR1I41w26Ioyf',
+        note: '比赛截止前由队长或指定提交人统一提交最终作品。',
+      },
+      {
+        label: '活动官网',
+        href: 'https://hack.digitalvio.shop/',
+        note: '查看当前活动主页、时间线和最新说明。',
+      },
+    ],
+    agenda: [
+      {
+        name: '报名阶段',
+        summary: '所有队员完成注册，开始找人、找方向、进入官方群。',
+        startedAt: '2026-03-25 00:00',
+        endedAt: '2026-04-20 23:59',
+        type: 'enrollment',
+      },
+      {
+        name: '组队 / 项目注册',
+        summary: '队长完成项目注册，锁定队伍、赛道和项目介绍。',
+        startedAt: '2026-04-21 00:00',
+        endedAt: '2026-04-28 23:59',
+        type: 'formation',
+      },
+      {
+        name: '比赛冲刺',
+        summary: '3 天核心开发冲刺，围绕 AI Agents、开发者工具、创意娱乐与社会影响展开。',
+        startedAt: '2026-05-01 10:00',
+        endedAt: '2026-05-03 20:00',
+        type: 'competition',
+      },
+      {
+        name: '评审阶段',
+        summary: '评委完成打分与复核，筛出进入 Demo Day 的队伍。',
+        startedAt: '2026-05-03 20:00',
+        endedAt: '2026-05-05 18:00',
+        type: 'evaluation',
+      },
+      {
+        name: 'Demo Day',
+        summary: '集中展示项目成果，并公布最终结果。',
+        startedAt: '2026-05-06 晚上',
+        endedAt: '2026-05-06 晚上',
+        type: 'break',
+      },
+    ],
+    awards: [
+      {
+        name: '一等奖',
+        quota: '1 队',
+        summary: '首页展示 + 资源连接 + 一等奖数字徽章',
+      },
+      {
+        name: '二等奖',
+        quota: '2 队',
+        summary: '社区展示 + 官方收录 + 二等奖数字徽章',
+      },
+      {
+        name: '三等奖',
+        quota: '3 队',
+        summary: '荣誉名单 + 项目合集收录 + 三等奖数字徽章',
+      },
+      {
+        name: '最佳创意奖',
+        quota: '1 队',
+        summary: '专题推荐 + 最佳创意数字徽章',
+      },
+      {
+        name: '最佳牛马精神奖',
+        quota: '1 队',
+        summary: '社区荣誉 + 最佳牛马精神数字徽章',
+      },
+      {
+        name: 'Demo Day 入选',
+        quota: '若干',
+        summary: 'Demo Day 展示资格 + 入选数字徽章',
+      },
+    ],
+    notes: [
+      '每队 1-4 人，支持跨城市、跨公司组队。',
+      '作品需在本次黑客松期间完成核心创作，并包含 AI 核心能力或 AI 驱动体验。',
+      '最终提交建议包含 GitHub 仓库链接、Demo 视频、产品说明和 AI 技术栈说明。',
+      '奖项以数字徽章 + 展示 / 资源连接为主，不承诺实体奖章或现金奖励。',
+    ],
+    faq: [
+      {
+        question: '可以一个人参赛吗？',
+        answer: '可以，单人队伍有效参赛，也可以在官方群里继续找队友。',
+      },
+      {
+        question: '活动鼓励哪些方向？',
+        answer: '鼓励 AI Agents、开发者工具、创意娱乐、社会影响等方向，也支持自由赛道。',
+      },
+      {
+        question: '什么时候截止报名？',
+        answer: '报名截止时间是 2026-04-20 23:59（UTC+8）。',
+      },
+      {
+        question: '什么时候开始比赛？',
+        answer: '比赛将在 2026-05-01 10:00（UTC+8）正式开始。',
+      },
+    ],
+  },
+};
+
+export const getStaticHackathonProfile = (id: string) => staticHackathons[id];
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 6f469b0..2f7d141 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -17,9 +17,14 @@ import {
 import { text2color, UserRankView } from 'idea-react';
 import { formatDate } from 'web-utility';
 
+import { StaticHackathonDetail } from '../../components/Activity/StaticHackathonDetail';
 import { GitCard } from '../../components/Git/Card';
 import { LarkImage } from '../../components/LarkImage';
 import { PageHead } from '../../components/Layout/PageHead';
+import {
+  getStaticHackathonProfile,
+  type StaticHackathonProfile,
+} from '../../constants/staticHackathons';
 import { Activity, ActivityModel } from '../../models/Activity';
 import { fileURLOf } from '../../models/Base';
 import {
@@ -43,6 +48,10 @@ export const getServerSideProps = compose<{ id: string }>(
   cache(),
   errorLogger,
   async ({ params }) => {
+    const staticHackathon = getStaticHackathonProfile(params!.id);
+
+    if (staticHackathon) return { props: { staticHackathon } };
+
     const activity = await new ActivityModel().getOne(params!.id);
 
     const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
@@ -59,15 +68,22 @@ export const getServerSideProps = compose<{ id: string }>(
     return {
       props: {
         activity,
-        hackathon: { people, organizations, agenda, prizes, templates, projects },
+        hackathon: {
+          people,
+          organizations,
+          agenda,
+          prizes,
+          templates,
+          projects,
+        },
       },
     };
   },
 );
 
 interface HackathonDetailProps {
-  activity: Activity;
-  hackathon: {
+  activity?: Activity;
+  hackathon?: {
     people: Person[];
     organizations: Organization[];
     agenda: Agenda[];
@@ -75,11 +91,14 @@ interface HackathonDetailProps {
     templates: Template[];
     projects: Project[];
   };
+  staticHackathon?: StaticHackathonProfile;
 }
 
 const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'];
 
 const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  if (!activity || !hackathon) return null;
+
   const { t } = useContext(I18nContext);
 
   const { name, summary, location, startTime, endTime, databaseSchema } = activity,
@@ -286,4 +305,16 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
   );
 });
 
-export default HackathonDetail;
+const HackathonPage: FC<HackathonDetailProps> = props => {
+  if (props.staticHackathon)
+    return (
+      <>
+        <PageHead title={props.staticHackathon.name} />
+        <StaticHackathonDetail profile={props.staticHackathon} />
+      </>
+    );
+
+  return <HackathonDetail {...props} />;
+};
+
+export default HackathonPage;
diff --git a/pages/hackathon/[id]/team/[tid].tsx b/pages/hackathon/[id]/team/[tid].tsx
index 8f6ae7b..0db0b21 100644
--- a/pages/hackathon/[id]/team/[tid].tsx
+++ b/pages/hackathon/[id]/team/[tid].tsx
@@ -19,6 +19,7 @@ import {
 import { CommentBox } from '../../../../components/Activity/CommentBox';
 import { ProductCard } from '../../../../components/Activity/ProductCard';
 import { PageHead } from '../../../../components/Layout/PageHead';
+import { getStaticHackathonProfile } from '../../../../constants/staticHackathons';
 import { Activity, ActivityModel } from '../../../../models/Activity';
 import {
   Member,
@@ -35,6 +36,8 @@ export const getServerSideProps = compose<Record<'id' | 'tid', string>>(
   cache(),
   errorLogger,
   async ({ params }) => {
+    if (getStaticHackathonProfile(params!.id)) return { notFound: true, props: {} };
+
     const activity = await new ActivityModel().getOne(params!.id);
 
     const { appId, tableIdMap } = activity.databaseSchema;

From fec9d0aa6157c2a71018ffbbae15944484a0671c Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 20:57:19 +0800
Subject: [PATCH 02/14] Generalize hackathon page redesign

---
 components/Activity/StaticHackathonDetail.tsx | 143 --------
 constants/staticHackathons.ts                 | 172 ----------
 pages/hackathon/[id].tsx                      | 313 ++++++++++++------
 pages/hackathon/[id]/team/[tid].tsx           |   3 -
 styles/Hackathon.module.less                  | 139 ++++++++
 5 files changed, 353 insertions(+), 417 deletions(-)
 delete mode 100644 components/Activity/StaticHackathonDetail.tsx
 delete mode 100644 constants/staticHackathons.ts

diff --git a/components/Activity/StaticHackathonDetail.tsx b/components/Activity/StaticHackathonDetail.tsx
deleted file mode 100644
index 665a4e6..0000000
--- a/components/Activity/StaticHackathonDetail.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import type { FC } from 'react';
-import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
-
-import type { StaticHackathonProfile } from '../../constants/staticHackathons';
-import styles from '../../styles/Hackathon.module.less';
-
-const AgendaTypeLabel: Record<StaticHackathonProfile['agenda'][number]['type'], string> = {
-  enrollment: '报名',
-  formation: '组队',
-  competition: '比赛',
-  evaluation: '评审',
-  break: '展示',
-};
-
-export interface StaticHackathonDetailProps {
-  profile: StaticHackathonProfile;
-}
-
-export const StaticHackathonDetail: FC<StaticHackathonDetailProps> = ({ profile }) => (
-  <>
-    <section className={styles.hero}>
-      <Container>
-        <div className="text-center mb-3">
-          <Badge bg="light" text="dark">
-            {profile.theme}
-          </Badge>
-        </div>
-        <h1 className={`text-center ${styles.title}`}>{profile.name}</h1>
-        <p className={`text-center ${styles.description}`}>{profile.summary}</p>
-
-        <Row className="mt-4 justify-content-center">
-          <Col md={4}>
-            <Card className={styles.infoCard}>
-              <Card.Body>
-                <h5 className="text-white mb-2">📍 活动形式</h5>
-                <p className="text-white-50 mb-0">{profile.location}</p>
-              </Card.Body>
-            </Card>
-          </Col>
-          <Col md={4}>
-            <Card className={styles.infoCard}>
-              <Card.Body>
-                <h5 className="text-white mb-2">⏰ 活动时间</h5>
-                <p className="text-white-50 mb-0">{profile.timeline}</p>
-              </Card.Body>
-            </Card>
-          </Col>
-        </Row>
-
-        <Row className="mt-4 g-3 justify-content-center">
-          {profile.entryLinks.slice(0, 2).map(({ href, label }) => (
-            <Col key={label} md="auto">
-              <Button href={href} target="_blank" rel="noreferrer" size="lg">
-                {label}
-              </Button>
-            </Col>
-          ))}
-        </Row>
-      </Container>
-    </section>
-
-    <Container className="my-5">
-      <section className={styles.section}>
-        <h2 className={styles.sectionTitle}>🔗 报名与入口</h2>
-        <Row className="mt-4 g-3" md={2} xl={3}>
-          {profile.entryLinks.map(({ href, label, note }) => (
-            <Col key={label}>
-              <Card className={styles.darkCard} body>
-                <h3 className="h5 text-white">{label}</h3>
-                <p className="text-white-50 mb-3">{note}</p>
-                <Button href={href} target="_blank" rel="noreferrer" variant="light">
-                  打开链接
-                </Button>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-      </section>
-
-      <section className={styles.section}>
-        <h2 className={styles.sectionTitle}>📅 活动日程</h2>
-        <ol className="list-unstyled mt-4">
-          {profile.agenda.map(({ endedAt, name, startedAt, summary, type }) => (
-            <li key={`${name}-${startedAt}`} className={`${styles.agendaItem} ${styles[type]}`}>
-              <h3 className="h5 text-white mb-2">{name}</h3>
-              <p className="text-white-50 small mb-2">{summary}</p>
-              <div className="d-flex justify-content-between align-items-center gap-3 flex-wrap">
-                <Badge bg="dark">{AgendaTypeLabel[type]}</Badge>
-                <div className="text-white-50 small">
-                  {startedAt} - {endedAt}
-                </div>
-              </div>
-            </li>
-          ))}
-        </ol>
-      </section>
-
-      <section className={`${styles.section} ${styles.prizeSection}`}>
-        <h2 className={styles.sectionTitle}>🏆 奖项设置</h2>
-        <Row className="mt-4 g-3" md={2} xl={3}>
-          {profile.awards.map(({ name, quota, summary }) => (
-            <Col key={name}>
-              <Card className={styles.lightCard} body>
-                <div className="d-flex justify-content-between align-items-start gap-3">
-                  <h3 className="h5 mb-2">{name}</h3>
-                  <Badge bg="dark">{quota}</Badge>
-                </div>
-                <p className="mb-0">{summary}</p>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-      </section>
-
-      <section className={styles.section}>
-        <h2 className={styles.sectionTitle}>🧾 参赛说明</h2>
-        <Row className="mt-4 g-3" md={2}>
-          {profile.notes.map(note => (
-            <Col key={note}>
-              <Card className={styles.darkCard} body>
-                <p className="text-white-50 mb-0">{note}</p>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-      </section>
-
-      <section className={styles.section}>
-        <h2 className={styles.sectionTitle}>❓ FAQ</h2>
-        <Row className="mt-4 g-3" md={2}>
-          {profile.faq.map(({ answer, question }) => (
-            <Col key={question}>
-              <Card className={styles.darkCard} body>
-                <h3 className="h5 text-white">{question}</h3>
-                <p className="text-white-50 mb-0">{answer}</p>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-      </section>
-    </Container>
-  </>
-);
diff --git a/constants/staticHackathons.ts b/constants/staticHackathons.ts
deleted file mode 100644
index f9d92af..0000000
--- a/constants/staticHackathons.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-export interface StaticHackathonLink {
-  href: string;
-  label: string;
-  note: string;
-}
-
-export interface StaticHackathonAgendaItem {
-  endedAt: string;
-  name: string;
-  startedAt: string;
-  summary: string;
-  type: 'break' | 'competition' | 'enrollment' | 'evaluation' | 'formation';
-}
-
-export interface StaticHackathonPrize {
-  name: string;
-  quota: string;
-  summary: string;
-}
-
-export interface StaticHackathonFAQ {
-  answer: string;
-  question: string;
-}
-
-export interface StaticHackathonProfile {
-  agenda: StaticHackathonAgendaItem[];
-  awards: StaticHackathonPrize[];
-  entryLinks: StaticHackathonLink[];
-  faq: StaticHackathonFAQ[];
-  id: string;
-  location: string;
-  name: string;
-  notes: string[];
-  summary: string;
-  theme: string;
-  timeline: string;
-}
-
-export const staticHackathons: Record<string, StaticHackathonProfile> = {
-  'niuma-hackathon-2026': {
-    id: 'niuma-hackathon-2026',
-    name: '2026 五一牛马 AI 黑客松',
-    summary:
-      '劳动节，用 AI 把自己从重复劳动中解放出来。报名一个月拉满人，组队只给 7 天做决策，比赛压缩为 3 天核心冲刺，再用 Demo Day 做集中展示。',
-    theme: 'AI 解放牛马',
-    location: '线上 + 线下同步',
-    timeline: '2026-03-25 00:00 - 2026-05-06 晚上（UTC+8）',
-    entryLinks: [
-      {
-        label: '队员注册',
-        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnZAJd1yhqHYRmQXmAwlXjkc',
-        note: '所有参赛者先完成报名，进入组队池与官方群。',
-      },
-      {
-        label: '项目注册',
-        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnKsgpHpBXcwh4W6GDg2G7Nc',
-        note: '组队阶段由队长登记项目、成员、赛道和一句话介绍。',
-      },
-      {
-        label: '代码库创建',
-        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnc1mbGsxMm8mS69au3B7uzf',
-        note: '需要官方统一协助建库时使用，不是所有队伍都必须填写。',
-      },
-      {
-        label: '产品提交',
-        href: 'https://open-source-bazaar.feishu.cn/share/base/shrcnkrO7EMQlXYR1I41w26Ioyf',
-        note: '比赛截止前由队长或指定提交人统一提交最终作品。',
-      },
-      {
-        label: '活动官网',
-        href: 'https://hack.digitalvio.shop/',
-        note: '查看当前活动主页、时间线和最新说明。',
-      },
-    ],
-    agenda: [
-      {
-        name: '报名阶段',
-        summary: '所有队员完成注册，开始找人、找方向、进入官方群。',
-        startedAt: '2026-03-25 00:00',
-        endedAt: '2026-04-20 23:59',
-        type: 'enrollment',
-      },
-      {
-        name: '组队 / 项目注册',
-        summary: '队长完成项目注册，锁定队伍、赛道和项目介绍。',
-        startedAt: '2026-04-21 00:00',
-        endedAt: '2026-04-28 23:59',
-        type: 'formation',
-      },
-      {
-        name: '比赛冲刺',
-        summary: '3 天核心开发冲刺，围绕 AI Agents、开发者工具、创意娱乐与社会影响展开。',
-        startedAt: '2026-05-01 10:00',
-        endedAt: '2026-05-03 20:00',
-        type: 'competition',
-      },
-      {
-        name: '评审阶段',
-        summary: '评委完成打分与复核，筛出进入 Demo Day 的队伍。',
-        startedAt: '2026-05-03 20:00',
-        endedAt: '2026-05-05 18:00',
-        type: 'evaluation',
-      },
-      {
-        name: 'Demo Day',
-        summary: '集中展示项目成果，并公布最终结果。',
-        startedAt: '2026-05-06 晚上',
-        endedAt: '2026-05-06 晚上',
-        type: 'break',
-      },
-    ],
-    awards: [
-      {
-        name: '一等奖',
-        quota: '1 队',
-        summary: '首页展示 + 资源连接 + 一等奖数字徽章',
-      },
-      {
-        name: '二等奖',
-        quota: '2 队',
-        summary: '社区展示 + 官方收录 + 二等奖数字徽章',
-      },
-      {
-        name: '三等奖',
-        quota: '3 队',
-        summary: '荣誉名单 + 项目合集收录 + 三等奖数字徽章',
-      },
-      {
-        name: '最佳创意奖',
-        quota: '1 队',
-        summary: '专题推荐 + 最佳创意数字徽章',
-      },
-      {
-        name: '最佳牛马精神奖',
-        quota: '1 队',
-        summary: '社区荣誉 + 最佳牛马精神数字徽章',
-      },
-      {
-        name: 'Demo Day 入选',
-        quota: '若干',
-        summary: 'Demo Day 展示资格 + 入选数字徽章',
-      },
-    ],
-    notes: [
-      '每队 1-4 人，支持跨城市、跨公司组队。',
-      '作品需在本次黑客松期间完成核心创作，并包含 AI 核心能力或 AI 驱动体验。',
-      '最终提交建议包含 GitHub 仓库链接、Demo 视频、产品说明和 AI 技术栈说明。',
-      '奖项以数字徽章 + 展示 / 资源连接为主，不承诺实体奖章或现金奖励。',
-    ],
-    faq: [
-      {
-        question: '可以一个人参赛吗？',
-        answer: '可以，单人队伍有效参赛，也可以在官方群里继续找队友。',
-      },
-      {
-        question: '活动鼓励哪些方向？',
-        answer: '鼓励 AI Agents、开发者工具、创意娱乐、社会影响等方向，也支持自由赛道。',
-      },
-      {
-        question: '什么时候截止报名？',
-        answer: '报名截止时间是 2026-04-20 23:59（UTC+8）。',
-      },
-      {
-        question: '什么时候开始比赛？',
-        answer: '比赛将在 2026-05-01 10:00（UTC+8）正式开始。',
-      },
-    ],
-  },
-};
-
-export const getStaticHackathonProfile = (id: string) => staticHackathons[id];
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 2f7d141..4fc3ec4 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -3,28 +3,13 @@ import { observer } from 'mobx-react';
 import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
-import {
-  Badge,
-  Button,
-  ButtonGroup,
-  Card,
-  Col,
-  Container,
-  Dropdown,
-  DropdownButton,
-  Row,
-} from 'react-bootstrap';
+import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
 import { text2color, UserRankView } from 'idea-react';
 import { formatDate } from 'web-utility';
 
-import { StaticHackathonDetail } from '../../components/Activity/StaticHackathonDetail';
 import { GitCard } from '../../components/Git/Card';
 import { LarkImage } from '../../components/LarkImage';
 import { PageHead } from '../../components/Layout/PageHead';
-import {
-  getStaticHackathonProfile,
-  type StaticHackathonProfile,
-} from '../../constants/staticHackathons';
 import { Activity, ActivityModel } from '../../models/Activity';
 import { fileURLOf } from '../../models/Base';
 import {
@@ -48,10 +33,6 @@ export const getServerSideProps = compose<{ id: string }>(
   cache(),
   errorLogger,
   async ({ params }) => {
-    const staticHackathon = getStaticHackathonProfile(params!.id);
-
-    if (staticHackathon) return { props: { staticHackathon } };
-
     const activity = await new ActivityModel().getOne(params!.id);
 
     const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
@@ -68,22 +49,15 @@ export const getServerSideProps = compose<{ id: string }>(
     return {
       props: {
         activity,
-        hackathon: {
-          people,
-          organizations,
-          agenda,
-          prizes,
-          templates,
-          projects,
-        },
+        hackathon: { people, organizations, agenda, prizes, templates, projects },
       },
     };
   },
 );
 
 interface HackathonDetailProps {
-  activity?: Activity;
-  hackathon?: {
+  activity: Activity;
+  hackathon: {
     people: Person[];
     organizations: Organization[];
     agenda: Agenda[];
@@ -91,83 +65,240 @@ interface HackathonDetailProps {
     templates: Template[];
     projects: Project[];
   };
-  staticHackathon?: StaticHackathonProfile;
 }
 
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'];
+type FormGroupKey = 'Person' | 'Project' | 'Product' | 'Evaluation';
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  if (!activity || !hackathon) return null;
+interface FormLink {
+  name: string;
+  shared_limit?: string;
+  shared_url: string;
+}
+
+interface FormGroupMeta {
+  description: string;
+  eyebrow: string;
+  title: string;
+}
+
+interface FormGroup {
+  key: FormGroupKey;
+  list: FormLink[];
+  meta: FormGroupMeta;
+}
 
+const FormButtonBar: FormGroupKey[] = ['Person', 'Project', 'Product', 'Evaluation'];
+
+const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
+  Person: {
+    eyebrow: 'Participants',
+    title: '参与者登记',
+    description: '收集报名成员、建立参赛者池，并为后续组队和通知打底。',
+  },
+  Project: {
+    eyebrow: 'Team Lead',
+    title: '项目注册',
+    description: '由队长登记项目名称、成员、赛道和一句话介绍，完成队伍锁定。',
+  },
+  Product: {
+    eyebrow: 'Submission',
+    title: '作品提交',
+    description: '比赛截止前统一提交最终作品、演示链接和补充说明。',
+  },
+  Evaluation: {
+    eyebrow: 'Review',
+    title: '评审入口',
+    description: '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
+  },
+};
+
+const isPublicForm = ({ shared_limit }: FormLink) => shared_limit === 'anyone_editable';
+
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
   const { t } = useContext(I18nContext);
 
-  const { name, summary, location, startTime, endTime, databaseSchema } = activity,
+  const {
+      name,
+      summary,
+      location,
+      startTime,
+      endTime,
+      databaseSchema,
+      host,
+      image,
+      type: activityType,
+    } = activity,
     { people, organizations, agenda, prizes, templates, projects } = hackathon;
-  const { forms } = databaseSchema as BiTableSchema;
+  const forms = (((databaseSchema as BiTableSchema).forms || {}) as Partial<
+    Record<FormGroupKey, FormLink[]>
+  >)!;
+  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
+    const list = forms[key]?.filter(isPublicForm) || [];
+
+    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+  });
+  const primaryForm =
+    formGroups.find(({ key }) => key === 'Person') ||
+    formGroups.find(({ key }) => key === 'Project') ||
+    formGroups[0];
+  const secondaryForm =
+    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
+    formGroups.find(({ key }) => key !== primaryForm?.key);
+  const heroStats = [
+    { label: t('participants'), value: people.length },
+    { label: t('projects'), value: projects.length },
+    { label: t('templates'), value: templates.length },
+    { label: t('organizations'), value: organizations.length },
+  ];
+  const hostTags = ((host as string[] | undefined) || []).slice(0, 3);
+  const agendaPreview = agenda.slice(0, 3);
 
   return (
     <>
       <PageHead title={name as string} />
 
-      {/* Hero Section */}
       <section className={styles.hero}>
         <Container>
-          <h1 className={`text-center ${styles.title}`}>{name as string}</h1>
-          <p className={`text-center ${styles.description}`}>{summary as string}</p>
+          <Row className="align-items-center g-4">
+            <Col lg={7}>
+              <div className={styles.heroEyebrow}>
+                <span className={styles.heroTag}>{(activityType as string) || t('hackathon')}</span>
+                {hostTags.map(tag => (
+                  <span key={tag} className={styles.heroTag}>
+                    {tag}
+                  </span>
+                ))}
+              </div>
 
-          <Row className="mt-4 justify-content-center">
-            <Col md={4}>
-              <Card className={styles.infoCard}>
-                <Card.Body>
-                  <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
-                  <p className="text-white-50 mb-0">
-                    {(location as TableCellLocation)?.full_address}
-                  </p>
-                </Card.Body>
-              </Card>
+              <h1 className={styles.title}>{name as string}</h1>
+              <p className={styles.description}>{summary as string}</p>
+
+              <div className={styles.heroStats}>
+                {heroStats.map(({ label, value }) => (
+                  <span key={label} className={styles.statChip}>
+                    {value} {label}
+                  </span>
+                ))}
+              </div>
+
+              <div className={styles.heroActions}>
+                {primaryForm && (
+                  <Button href={primaryForm.list[0].shared_url} target="_blank" rel="noreferrer">
+                    {primaryForm.meta.title}
+                  </Button>
+                )}
+                {secondaryForm && (
+                  <Button
+                    href={secondaryForm.list[0].shared_url}
+                    target="_blank"
+                    rel="noreferrer"
+                    variant="light"
+                  >
+                    {secondaryForm.meta.title}
+                  </Button>
+                )}
+                {formGroups[0] && (
+                  <Button href="#entry-hub" variant="outline-light">
+                    查看全部入口
+                  </Button>
+                )}
+              </div>
+
+              <Row className="mt-4 g-3">
+                <Col md={6}>
+                  <Card className={styles.infoCard}>
+                    <Card.Body>
+                      <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
+                      <p className="text-white-50 mb-0">
+                        {(location as TableCellLocation)?.full_address}
+                      </p>
+                    </Card.Body>
+                  </Card>
+                </Col>
+                <Col md={6}>
+                  <Card className={styles.infoCard}>
+                    <Card.Body>
+                      <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
+                      <p className="text-white-50 mb-0">
+                        {formatDate(startTime as string)} - {formatDate(endTime as string)}
+                      </p>
+                    </Card.Body>
+                  </Card>
+                </Col>
+              </Row>
             </Col>
-            <Col md={4}>
-              <Card className={styles.infoCard}>
+
+            <Col lg={5}>
+              <Card className={styles.heroVisualCard}>
+                {image && (
+                  <div className={styles.heroImageWrap}>
+                    <LarkImage src={image} alt={name as string} className={styles.heroImage} />
+                  </div>
+                )}
                 <Card.Body>
-                  <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
-                  <p className="text-white-50 mb-0">
-                    {formatDate(startTime as string)} - {formatDate(endTime as string)}
-                  </p>
+                  <div className={styles.heroVisualHead}>
+                    <span className={styles.heroVisualKicker}>Agenda Preview</span>
+                    <strong>{agendaPreview[0]?.name as string}</strong>
+                  </div>
+
+                  <div className={styles.heroVisualList}>
+                    {agendaPreview.map(({ name, startedAt, endedAt }) => (
+                      <div
+                        key={`${name as string}-${startedAt as string}`}
+                        className={styles.heroVisualItem}
+                      >
+                        <strong>{name as string}</strong>
+                        <span>
+                          {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
                 </Card.Body>
               </Card>
             </Col>
           </Row>
-
-          <ButtonGroup className="d-flex mt-3">
-            {FormButtonBar.map((key, index) => {
-              const list = forms[key]?.filter(
-                // @ts-expect-error Upstream types bug
-                ({ shared_limit }) => shared_limit === 'anyone_editable',
-              );
-
-              return !list?.[0] ? null : list.length < 2 ? (
-                <Button href={list[0].shared_url} target="_blank" rel="noreferrer">
-                  {index + 1}. {list[0].name}
-                </Button>
-              ) : (
-                <DropdownButton
-                  as={ButtonGroup}
-                  title={`${index + 1}. ${t('product_submission')}`}
-                  id={`dropdown-${key}`}
-                >
-                  {list.map(({ name, shared_url }) => (
-                    <Dropdown.Item key={name} href={shared_url} target="_blank" rel="noreferrer">
-                      {name}
-                    </Dropdown.Item>
-                  ))}
-                </DropdownButton>
-              );
-            })}
-          </ButtonGroup>
         </Container>
       </section>
 
       <Container className="my-5">
+        {formGroups[0] && (
+          <section id="entry-hub" className={styles.section}>
+            <p className={styles.sectionEyebrow}>Action Hub · Forms</p>
+            <h2 className={styles.sectionTitle}>报名与提交流程</h2>
+            <p className={styles.sectionLead}>
+              入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。
+            </p>
+
+            <Row className="mt-4 g-3" md={2} xl={4}>
+              {formGroups.map(({ key, list, meta }, index) => (
+                <Col key={key}>
+                  <Card className={styles.entryCard} body>
+                    <span className={styles.entryStep}>
+                      Step {String(index + 1).padStart(2, '0')} · {meta.eyebrow}
+                    </span>
+                    <h3 className="h5 text-white mt-2">{meta.title}</h3>
+                    <p className="text-white-50 mb-3">{meta.description}</p>
+                    <div className="d-grid gap-2">
+                      {list.map(({ name, shared_url }) => (
+                        <Button
+                          key={name}
+                          href={shared_url}
+                          target="_blank"
+                          rel="noreferrer"
+                          variant="light"
+                        >
+                          {name}
+                        </Button>
+                      ))}
+                    </div>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          </section>
+        )}
+
         <section className={`${styles.section} ${styles.prizeSection}`}>
           <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
           <div className="mt-4">
@@ -206,7 +337,6 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           </ol>
         </section>
 
-        {/* Mid-front: Organizations - Horizontal logo layout */}
         <section className={styles.section}>
           <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
           <nav className={styles.orgContainer}>
@@ -224,7 +354,6 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           </nav>
         </section>
 
-        {/* Mid-back: Templates - Using GitCard, 3-4 per row */}
         <section className={`${styles.section} ${styles.templateSection}`}>
           <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
           <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
@@ -243,7 +372,6 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           </Row>
         </section>
 
-        {/* Mid-back: Projects - Narrow cards, 3-4 per row */}
         <section className={styles.section}>
           <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
 
@@ -278,7 +406,6 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           </Row>
         </section>
 
-        {/* Footer: Participants - Circular avatars only */}
         <section className={styles.section}>
           <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
           <nav className={styles.participantCloud}>
@@ -305,16 +432,4 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
   );
 });
 
-const HackathonPage: FC<HackathonDetailProps> = props => {
-  if (props.staticHackathon)
-    return (
-      <>
-        <PageHead title={props.staticHackathon.name} />
-        <StaticHackathonDetail profile={props.staticHackathon} />
-      </>
-    );
-
-  return <HackathonDetail {...props} />;
-};
-
-export default HackathonPage;
+export default HackathonDetail;
diff --git a/pages/hackathon/[id]/team/[tid].tsx b/pages/hackathon/[id]/team/[tid].tsx
index 0db0b21..8f6ae7b 100644
--- a/pages/hackathon/[id]/team/[tid].tsx
+++ b/pages/hackathon/[id]/team/[tid].tsx
@@ -19,7 +19,6 @@ import {
 import { CommentBox } from '../../../../components/Activity/CommentBox';
 import { ProductCard } from '../../../../components/Activity/ProductCard';
 import { PageHead } from '../../../../components/Layout/PageHead';
-import { getStaticHackathonProfile } from '../../../../constants/staticHackathons';
 import { Activity, ActivityModel } from '../../../../models/Activity';
 import {
   Member,
@@ -36,8 +35,6 @@ export const getServerSideProps = compose<Record<'id' | 'tid', string>>(
   cache(),
   errorLogger,
   async ({ params }) => {
-    if (getStaticHackathonProfile(params!.id)) return { notFound: true, props: {} };
-
     const activity = await new ActivityModel().getOne(params!.id);
 
     const { appId, tableIdMap } = activity.databaseSchema;
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index 795c2f6..e6fdec6 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -44,6 +44,107 @@
   font-size: 1.2rem;
 }
 
+.heroEyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.heroTag {
+  display: inline-flex;
+  align-items: center;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
+  background: rgba(4, 4, 15, 0.28);
+  padding: 0.45rem 0.9rem;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.heroStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.statChip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  padding: 0.5rem 0.95rem;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.75rem;
+}
+
+.heroVisualCard {
+  overflow: hidden;
+  box-shadow: 0 18px 50px rgba(10, 12, 30, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 24px;
+  background: linear-gradient(135deg, rgba(10, 12, 30, 0.82), rgba(37, 44, 84, 0.62));
+  color: #fff;
+}
+
+.heroImageWrap {
+  background: rgba(255, 255, 255, 0.05);
+  aspect-ratio: 16 / 10;
+}
+
+.heroImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.heroVisualHead {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.heroVisualKicker {
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.72;
+  font-size: 0.8rem;
+}
+
+.heroVisualList {
+  display: grid;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.heroVisualItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.85rem 1rem;
+
+  span {
+    opacity: 0.74;
+    font-size: 0.88rem;
+  }
+}
+
 .infoCard {
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
@@ -79,6 +180,44 @@
   background-clip: text;
 }
 
+.sectionEyebrow {
+  margin-bottom: 0.5rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #7d8ff5;
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.sectionLead {
+  margin: 0;
+  max-width: 760px;
+  color: rgba(33, 37, 41, 0.72);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+.entryCard {
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: linear-gradient(135deg, #1d2f72, #5c2f91);
+  min-height: 100%;
+  color: #fff;
+
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 16px 40px rgba(35, 48, 116, 0.25);
+  }
+}
+
+.entryStep {
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.72;
+  font-size: 0.82rem;
+}
+
 // Vibrant cards - Multicolor gradient background
 .darkCard {
   transition: all 0.3s ease;

From 6c5d0fa6016e9006ba9a227273a082eedc4c1525 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 21:36:16 +0800
Subject: [PATCH 03/14] Address hackathon page review feedback

---
 pages/hackathon/[id].tsx     | 176 ++++++++++++++++++-----------------
 styles/Hackathon.module.less |  50 +++-------
 translation/en-US.ts         |  21 +++++
 translation/zh-CN.ts         |  21 +++++
 translation/zh-TW.ts         |  21 +++++
 5 files changed, 165 insertions(+), 124 deletions(-)

diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 4fc3ec4..6917103 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,4 +1,4 @@
-import { BiTableSchema, TableCellLocation, TableCellUser } from 'mobx-lark';
+import { BiTableSchema, TableCellLocation, TableCellUser, TableFormView } from 'mobx-lark';
 import { observer } from 'mobx-react';
 import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
@@ -67,18 +67,15 @@ interface HackathonDetailProps {
   };
 }
 
-type FormGroupKey = 'Person' | 'Project' | 'Product' | 'Evaluation';
+const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
 
-interface FormLink {
-  name: string;
-  shared_limit?: string;
-  shared_url: string;
-}
+type FormGroupKey = (typeof FormButtonBar)[number];
+type FormLink = TableFormView;
 
 interface FormGroupMeta {
-  description: string;
-  eyebrow: string;
-  title: string;
+  description: I18nKey;
+  eyebrow: I18nKey;
+  title: I18nKey;
 }
 
 interface FormGroup {
@@ -87,32 +84,31 @@ interface FormGroup {
   meta: FormGroupMeta;
 }
 
-const FormButtonBar: FormGroupKey[] = ['Person', 'Project', 'Product', 'Evaluation'];
-
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
-    eyebrow: 'Participants',
-    title: '参与者登记',
-    description: '收集报名成员、建立参赛者池，并为后续组队和通知打底。',
+    eyebrow: 'participants',
+    title: 'hackathon_participant_registration',
+    description: 'hackathon_participant_registration_description',
   },
   Project: {
-    eyebrow: 'Team Lead',
-    title: '项目注册',
-    description: '由队长登记项目名称、成员、赛道和一句话介绍，完成队伍锁定。',
+    eyebrow: 'hackathon_team_lead',
+    title: 'hackathon_project_registration',
+    description: 'hackathon_project_registration_description',
   },
   Product: {
-    eyebrow: 'Submission',
-    title: '作品提交',
-    description: '比赛截止前统一提交最终作品、演示链接和补充说明。',
+    eyebrow: 'hackathon_submission',
+    title: 'product_submission',
+    description: 'hackathon_product_submission_description',
   },
   Evaluation: {
-    eyebrow: 'Review',
-    title: '评审入口',
-    description: '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
+    eyebrow: 'hackathon_review',
+    title: 'hackathon_evaluation_entry',
+    description: 'hackathon_evaluation_entry_description',
   },
 };
 
-const isPublicForm = ({ shared_limit }: FormLink) => shared_limit === 'anyone_editable';
+const isPublicForm = ({ shared, shared_limit }: FormLink) =>
+  shared || ['tenant_editable', 'anyone_editable'].includes(shared_limit as string);
 
 const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
   const { t } = useContext(I18nContext);
@@ -150,7 +146,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     { label: t('templates'), value: templates.length },
     { label: t('organizations'), value: organizations.length },
   ];
-  const hostTags = ((host as string[] | undefined) || []).slice(0, 3);
+  const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
   const agendaPreview = agenda.slice(0, 3);
 
   return (
@@ -161,30 +157,30 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
         <Container>
           <Row className="align-items-center g-4">
             <Col lg={7}>
-              <div className={styles.heroEyebrow}>
-                <span className={styles.heroTag}>{(activityType as string) || t('hackathon')}</span>
+              <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
+                <li className={styles.heroTag}>{(activityType as string) || t('hackathon')}</li>
                 {hostTags.map(tag => (
-                  <span key={tag} className={styles.heroTag}>
+                  <li key={tag} className={styles.heroTag}>
                     {tag}
-                  </span>
+                  </li>
                 ))}
-              </div>
+              </ul>
 
               <h1 className={styles.title}>{name as string}</h1>
               <p className={styles.description}>{summary as string}</p>
 
-              <div className={styles.heroStats}>
+              <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
                 {heroStats.map(({ label, value }) => (
-                  <span key={label} className={styles.statChip}>
+                  <li key={label} className={styles.statChip}>
                     {value} {label}
-                  </span>
+                  </li>
                 ))}
-              </div>
+              </ul>
 
-              <div className={styles.heroActions}>
+              <nav className="d-flex flex-wrap gap-3 mt-4">
                 {primaryForm && (
                   <Button href={primaryForm.list[0].shared_url} target="_blank" rel="noreferrer">
-                    {primaryForm.meta.title}
+                    {t(primaryForm.meta.title)}
                   </Button>
                 )}
                 {secondaryForm && (
@@ -194,35 +190,32 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
                     rel="noreferrer"
                     variant="light"
                   >
-                    {secondaryForm.meta.title}
+                    {t(secondaryForm.meta.title)}
                   </Button>
                 )}
                 {formGroups[0] && (
                   <Button href="#entry-hub" variant="outline-light">
-                    查看全部入口
+                    {t('hackathon_view_all_entries')}
                   </Button>
                 )}
-              </div>
-
-              <Row className="mt-4 g-3">
-                <Col md={6}>
-                  <Card className={styles.infoCard}>
-                    <Card.Body>
-                      <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
-                      <p className="text-white-50 mb-0">
-                        {(location as TableCellLocation)?.full_address}
-                      </p>
-                    </Card.Body>
+              </nav>
+
+              <Row className="mt-4 g-3" md={2}>
+                <Col>
+                  <Card className={styles.infoCard} body>
+                    <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
+                    <address className="text-white-50 mb-0 fst-normal">
+                      {(location as TableCellLocation)?.full_address}
+                    </address>
                   </Card>
                 </Col>
-                <Col md={6}>
-                  <Card className={styles.infoCard}>
-                    <Card.Body>
-                      <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
-                      <p className="text-white-50 mb-0">
-                        {formatDate(startTime as string)} - {formatDate(endTime as string)}
-                      </p>
-                    </Card.Body>
+                <Col>
+                  <Card className={styles.infoCard} body>
+                    <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
+                    <p className="text-white-50 mb-0">
+                      <time dateTime={startTime as string}>{formatDate(startTime as string)}</time>{' '}
+                      - <time dateTime={endTime as string}>{formatDate(endTime as string)}</time>
+                    </p>
                   </Card>
                 </Col>
               </Row>
@@ -236,24 +229,32 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
                   </div>
                 )}
                 <Card.Body>
-                  <div className={styles.heroVisualHead}>
-                    <span className={styles.heroVisualKicker}>Agenda Preview</span>
-                    <strong>{agendaPreview[0]?.name as string}</strong>
-                  </div>
-
-                  <div className={styles.heroVisualList}>
-                    {agendaPreview.map(({ name, startedAt, endedAt }) => (
-                      <div
-                        key={`${name as string}-${startedAt as string}`}
-                        className={styles.heroVisualItem}
-                      >
-                        <strong>{name as string}</strong>
-                        <span>
-                          {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
-                        </span>
+                  {agendaPreview[0] && (
+                    <dl className="d-grid gap-3 mb-0">
+                      <div className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}>
+                        <dt className={styles.heroVisualKicker}>{t('hackathon_agenda_preview')}</dt>
+                        <dd className="fw-semibold">{agendaPreview[0].name as string}</dd>
                       </div>
-                    ))}
-                  </div>
+
+                      {agendaPreview.map(({ name, startedAt, endedAt }) => (
+                        <div
+                          key={`${name as string}-${startedAt as string}`}
+                          className={styles.heroVisualItem}
+                        >
+                          <dt className="fw-semibold">{name as string}</dt>
+                          <dd>
+                            <time dateTime={startedAt as string}>
+                              {formatDate(startedAt as string)}
+                            </time>{' '}
+                            -{' '}
+                            <time dateTime={endedAt as string}>
+                              {formatDate(endedAt as string)}
+                            </time>
+                          </dd>
+                        </div>
+                      ))}
+                    </dl>
+                  )}
                 </Card.Body>
               </Card>
             </Col>
@@ -264,22 +265,23 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       <Container className="my-5">
         {formGroups[0] && (
           <section id="entry-hub" className={styles.section}>
-            <p className={styles.sectionEyebrow}>Action Hub · Forms</p>
-            <h2 className={styles.sectionTitle}>报名与提交流程</h2>
-            <p className={styles.sectionLead}>
-              入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。
-            </p>
+            <hgroup className="mb-0">
+              <p className={styles.sectionEyebrow}>{t('hackathon_action_hub')}</p>
+              <h2 className={styles.sectionTitle}>{t('hackathon_entry_flow')}</h2>
+              <p className={styles.sectionLead}>{t('hackathon_entry_flow_description')}</p>
+            </hgroup>
 
-            <Row className="mt-4 g-3" md={2} xl={4}>
+            <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
               {formGroups.map(({ key, list, meta }, index) => (
-                <Col key={key}>
+                <Col as="li" key={key}>
                   <Card className={styles.entryCard} body>
                     <span className={styles.entryStep}>
-                      Step {String(index + 1).padStart(2, '0')} · {meta.eyebrow}
+                      {t('hackathon_step')} {String(index + 1).padStart(2, '0')} ·{' '}
+                      {t(meta.eyebrow)}
                     </span>
-                    <h3 className="h5 text-white mt-2">{meta.title}</h3>
-                    <p className="text-white-50 mb-3">{meta.description}</p>
-                    <div className="d-grid gap-2">
+                    <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
+                    <p className="text-white-50 mb-3">{t(meta.description)}</p>
+                    <nav className="d-grid gap-2">
                       {list.map(({ name, shared_url }) => (
                         <Button
                           key={name}
@@ -291,7 +293,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
                           {name}
                         </Button>
                       ))}
-                    </div>
+                    </nav>
                   </Card>
                 </Col>
               ))}
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index e6fdec6..b5bfc5f 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -44,13 +44,6 @@
   font-size: 1.2rem;
 }
 
-.heroEyebrow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
 .heroTag {
   display: inline-flex;
   align-items: center;
@@ -64,13 +57,6 @@
   font-size: 0.9rem;
 }
 
-.heroStats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-}
-
 .statChip {
   display: inline-flex;
   align-items: center;
@@ -82,13 +68,6 @@
   font-size: 0.9rem;
 }
 
-.heroActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 1.75rem;
-}
-
 .heroVisualCard {
   overflow: hidden;
   box-shadow: 0 18px 50px rgba(10, 12, 30, 0.35);
@@ -109,14 +88,6 @@
   object-fit: cover;
 }
 
-.heroVisualHead {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.75rem;
-  align-items: center;
-}
-
 .heroVisualKicker {
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -124,12 +95,6 @@
   font-size: 0.8rem;
 }
 
-.heroVisualList {
-  display: grid;
-  gap: 0.75rem;
-  margin-top: 1rem;
-}
-
 .heroVisualItem {
   display: flex;
   flex-direction: column;
@@ -139,12 +104,24 @@
   background: rgba(255, 255, 255, 0.06);
   padding: 0.85rem 1rem;
 
-  span {
+  dt {
+    margin: 0;
+  }
+
+  dd {
     opacity: 0.74;
+    margin: 0;
     font-size: 0.88rem;
   }
 }
 
+.heroVisualHead {
+  dd {
+    opacity: 1;
+    font-size: 1rem;
+  }
+}
+
 .infoCard {
   backdrop-filter: blur(10px);
   transition: all 0.3s ease;
@@ -152,7 +129,6 @@
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 16px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
-  padding: 1.5rem;
 
   &:hover {
     transform: translateY(-5px);
diff --git a/translation/en-US.ts b/translation/en-US.ts
index c720c6d..f69d9cf 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -217,6 +217,27 @@ export default {
   event_duration: 'Duration',
   product_submission: 'Product Submission Form',
   agenda: 'Agenda',
+  hackathon_participant_registration: 'Participant Registration',
+  hackathon_participant_registration_description:
+    'Collect participant profiles to support sign-up, team formation, and updates.',
+  hackathon_team_lead: 'Team Lead',
+  hackathon_project_registration: 'Project Registration',
+  hackathon_project_registration_description:
+    'Register the project name, teammates, track, and one-line pitch to lock the team.',
+  hackathon_submission: 'Submission',
+  hackathon_product_submission_description:
+    'Submit the final build, demo link, and supporting notes before the deadline.',
+  hackathon_review: 'Review',
+  hackathon_evaluation_entry: 'Evaluation Portal',
+  hackathon_evaluation_entry_description:
+    'Used by judges or mentors during scoring, review, and result consolidation.',
+  hackathon_view_all_entries: 'View All Forms',
+  hackathon_agenda_preview: 'Agenda Preview',
+  hackathon_action_hub: 'Action Hub · Forms',
+  hackathon_entry_flow: 'Registration and Submission Flow',
+  hackathon_entry_flow_description:
+    'Entries are generated from the current activity schema so different events can reuse the same page structure.',
+  hackathon_step: 'Step',
   participants: 'Participants',
   organizations: 'Organizations',
   prizes: 'Prizes',
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 64c4e2a..3df6b91 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -213,6 +213,27 @@ export default {
   event_duration: '活动时间',
   product_submission: '产品提交',
   agenda: '日程安排',
+  hackathon_participant_registration: '参与者登记',
+  hackathon_participant_registration_description:
+    '收集报名成员、建立参赛者池，并为后续组队和通知打底。',
+  hackathon_team_lead: '队长',
+  hackathon_project_registration: '项目注册',
+  hackathon_project_registration_description:
+    '登记项目名称、成员、赛道和一句话介绍，完成队伍锁定。',
+  hackathon_submission: '提交',
+  hackathon_product_submission_description:
+    '比赛截止前统一提交最终作品、演示链接和补充说明。',
+  hackathon_review: '评审',
+  hackathon_evaluation_entry: '评审入口',
+  hackathon_evaluation_entry_description:
+    '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
+  hackathon_view_all_entries: '查看全部入口',
+  hackathon_agenda_preview: '议程预览',
+  hackathon_action_hub: '入口中心 · 表单',
+  hackathon_entry_flow: '报名与提交流程',
+  hackathon_entry_flow_description:
+    '入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。',
+  hackathon_step: '步骤',
   participants: '参与者',
   organizations: '组织方',
   prizes: '奖项',
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index 284879a..cdc305d 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -213,6 +213,27 @@ export default {
   event_duration: '活動時間',
   product_submission: '產品提交',
   agenda: '日程安排',
+  hackathon_participant_registration: '參與者登記',
+  hackathon_participant_registration_description:
+    '收集報名成員、建立參賽者池，並為後續組隊和通知打底。',
+  hackathon_team_lead: '隊長',
+  hackathon_project_registration: '項目註冊',
+  hackathon_project_registration_description:
+    '登記項目名稱、成員、賽道和一句話介紹，完成隊伍鎖定。',
+  hackathon_submission: '提交',
+  hackathon_product_submission_description:
+    '比賽截止前統一提交最終作品、演示連結和補充說明。',
+  hackathon_review: '評審',
+  hackathon_evaluation_entry: '評審入口',
+  hackathon_evaluation_entry_description:
+    '評委或導師在評審階段使用，用於評分、複核與結果整理。',
+  hackathon_view_all_entries: '查看全部入口',
+  hackathon_agenda_preview: '議程預覽',
+  hackathon_action_hub: '入口中心 · 表單',
+  hackathon_entry_flow: '報名與提交流程',
+  hackathon_entry_flow_description:
+    '入口會根據活動當前配置自動生成。不同活動可以共用同一套頁面結構，而不是為每次活動單開專頁。',
+  hackathon_step: '步驟',
   participants: '參與者',
   organizations: '組織方',
   prizes: '獎項',

From 16740379f11346129ab33a663cde7c5dcd113fc5 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 21:52:36 +0800
Subject: [PATCH 04/14] Polish remaining hackathon review fixes

---
 pages/hackathon/[id].tsx     | 794 +++++++++++++++++++----------------
 styles/Hackathon.module.less |  26 +-
 2 files changed, 451 insertions(+), 369 deletions(-)

diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 6917103..aef78b9 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,17 +1,22 @@
-import { BiTableSchema, TableCellLocation, TableCellUser, TableFormView } from 'mobx-lark';
-import { observer } from 'mobx-react';
-import Link from 'next/link';
-import { cache, compose, errorLogger } from 'next-ssr-middleware';
-import { FC, useContext } from 'react';
-import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
-import { text2color, UserRankView } from 'idea-react';
-import { formatDate } from 'web-utility';
-
-import { GitCard } from '../../components/Git/Card';
-import { LarkImage } from '../../components/LarkImage';
-import { PageHead } from '../../components/Layout/PageHead';
-import { Activity, ActivityModel } from '../../models/Activity';
-import { fileURLOf } from '../../models/Base';
+import {
+  BiTableSchema,
+  TableCellLocation,
+  TableCellUser,
+  TableFormView,
+} from "mobx-lark";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { cache, compose, errorLogger } from "next-ssr-middleware";
+import { FC, useContext } from "react";
+import { Badge, Button, Card, Col, Container, Row } from "react-bootstrap";
+import { text2color, UserRankView } from "idea-react";
+import { formatDate } from "web-utility";
+
+import { GitCard } from "../../components/Git/Card";
+import { LarkImage } from "../../components/LarkImage";
+import { PageHead } from "../../components/Layout/PageHead";
+import { Activity, ActivityModel } from "../../models/Activity";
+import { fileURLOf } from "../../models/Base";
 import {
   Agenda,
   AgendaModel,
@@ -25,9 +30,9 @@ import {
   ProjectModel,
   Template,
   TemplateModel,
-} from '../../models/Hackathon';
-import { I18nContext, I18nKey } from '../../models/Translation';
-import styles from '../../styles/Hackathon.module.less';
+} from "../../models/Hackathon";
+import { I18nContext, I18nKey } from "../../models/Translation";
+import styles from "../../styles/Hackathon.module.less";
 
 export const getServerSideProps = compose<{ id: string }>(
   cache(),
@@ -37,19 +42,27 @@ export const getServerSideProps = compose<{ id: string }>(
 
     const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
 
-    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
-      new PersonModel(appId, tableIdMap.Person).getAll(),
-      new OrganizationModel(appId, tableIdMap.Organization).getAll(),
-      new AgendaModel(appId, tableIdMap.Agenda).getAll(),
-      new PrizeModel(appId, tableIdMap.Prize).getAll(),
-      new TemplateModel(appId, tableIdMap.Template).getAll(),
-      new ProjectModel(appId, tableIdMap.Project).getAll(),
-    ]);
+    const [people, organizations, agenda, prizes, templates, projects] =
+      await Promise.all([
+        new PersonModel(appId, tableIdMap.Person).getAll(),
+        new OrganizationModel(appId, tableIdMap.Organization).getAll(),
+        new AgendaModel(appId, tableIdMap.Agenda).getAll(),
+        new PrizeModel(appId, tableIdMap.Prize).getAll(),
+        new TemplateModel(appId, tableIdMap.Template).getAll(),
+        new ProjectModel(appId, tableIdMap.Project).getAll(),
+      ]);
 
     return {
       props: {
         activity,
-        hackathon: { people, organizations, agenda, prizes, templates, projects },
+        hackathon: {
+          people,
+          organizations,
+          agenda,
+          prizes,
+          templates,
+          projects,
+        },
       },
     };
   },
@@ -67,371 +80,434 @@ interface HackathonDetailProps {
   };
 }
 
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
+const FormButtonBar = ["Person", "Project", "Product", "Evaluation"] as const;
 
 type FormGroupKey = (typeof FormButtonBar)[number];
-type FormLink = TableFormView;
-
-interface FormGroupMeta {
-  description: I18nKey;
-  eyebrow: I18nKey;
-  title: I18nKey;
-}
+type FormGroupMeta = Record<"title" | "description" | "eyebrow", I18nKey>;
 
 interface FormGroup {
   key: FormGroupKey;
-  list: FormLink[];
+  list: TableFormView[];
   meta: FormGroupMeta;
 }
 
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
-    eyebrow: 'participants',
-    title: 'hackathon_participant_registration',
-    description: 'hackathon_participant_registration_description',
+    eyebrow: "participants",
+    title: "hackathon_participant_registration",
+    description: "hackathon_participant_registration_description",
   },
   Project: {
-    eyebrow: 'hackathon_team_lead',
-    title: 'hackathon_project_registration',
-    description: 'hackathon_project_registration_description',
+    eyebrow: "hackathon_team_lead",
+    title: "hackathon_project_registration",
+    description: "hackathon_project_registration_description",
   },
   Product: {
-    eyebrow: 'hackathon_submission',
-    title: 'product_submission',
-    description: 'hackathon_product_submission_description',
+    eyebrow: "hackathon_submission",
+    title: "product_submission",
+    description: "hackathon_product_submission_description",
   },
   Evaluation: {
-    eyebrow: 'hackathon_review',
-    title: 'hackathon_evaluation_entry',
-    description: 'hackathon_evaluation_entry_description',
+    eyebrow: "hackathon_review",
+    title: "hackathon_evaluation_entry",
+    description: "hackathon_evaluation_entry_description",
   },
 };
 
-const isPublicForm = ({ shared, shared_limit }: FormLink) =>
-  shared || ['tenant_editable', 'anyone_editable'].includes(shared_limit as string);
-
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  const { t } = useContext(I18nContext);
-
-  const {
-      name,
-      summary,
-      location,
-      startTime,
-      endTime,
-      databaseSchema,
-      host,
-      image,
-      type: activityType,
-    } = activity,
-    { people, organizations, agenda, prizes, templates, projects } = hackathon;
-  const forms = (((databaseSchema as BiTableSchema).forms || {}) as Partial<
-    Record<FormGroupKey, FormLink[]>
-  >)!;
-  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
-    const list = forms[key]?.filter(isPublicForm) || [];
-
-    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
-  });
-  const primaryForm =
-    formGroups.find(({ key }) => key === 'Person') ||
-    formGroups.find(({ key }) => key === 'Project') ||
-    formGroups[0];
-  const secondaryForm =
-    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
-    formGroups.find(({ key }) => key !== primaryForm?.key);
-  const heroStats = [
-    { label: t('participants'), value: people.length },
-    { label: t('projects'), value: projects.length },
-    { label: t('templates'), value: templates.length },
-    { label: t('organizations'), value: organizations.length },
-  ];
-  const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
-  const agendaPreview = agenda.slice(0, 3);
-
-  return (
-    <>
-      <PageHead title={name as string} />
-
-      <section className={styles.hero}>
-        <Container>
-          <Row className="align-items-center g-4">
-            <Col lg={7}>
-              <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
-                <li className={styles.heroTag}>{(activityType as string) || t('hackathon')}</li>
-                {hostTags.map(tag => (
-                  <li key={tag} className={styles.heroTag}>
-                    {tag}
-                  </li>
-                ))}
-              </ul>
-
-              <h1 className={styles.title}>{name as string}</h1>
-              <p className={styles.description}>{summary as string}</p>
-
-              <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
-                {heroStats.map(({ label, value }) => (
-                  <li key={label} className={styles.statChip}>
-                    {value} {label}
+const isPublicForm = ({ shared, shared_limit }: TableFormView) =>
+  shared ||
+  ["tenant_editable", "anyone_editable"].includes(shared_limit as string);
+
+const HackathonDetail: FC<HackathonDetailProps> = observer(
+  ({ activity, hackathon }) => {
+    const { t } = useContext(I18nContext);
+
+    const {
+        name,
+        summary,
+        location,
+        startTime,
+        endTime,
+        databaseSchema,
+        host,
+        image,
+        type: activityType,
+      } = activity,
+      { people, organizations, agenda, prizes, templates, projects } =
+        hackathon;
+    const forms = (((databaseSchema as BiTableSchema).forms || {}) as Partial<
+      Record<FormGroupKey, TableFormView[]>
+    >)!;
+    const formGroups = FormButtonBar.flatMap<FormGroup>((key) => {
+      const list = forms[key]?.filter(isPublicForm) || [];
+
+      return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+    });
+    const primaryForm =
+      formGroups.find(({ key }) => key === "Person") ||
+      formGroups.find(({ key }) => key === "Project") ||
+      formGroups[0];
+    const secondaryForm =
+      formGroups.find(
+        ({ key }) => key === "Project" && key !== primaryForm?.key,
+      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
+    const heroStats = [
+      { label: t("participants"), value: people.length },
+      { label: t("projects"), value: projects.length },
+      { label: t("templates"), value: templates.length },
+      { label: t("organizations"), value: organizations.length },
+    ];
+    const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
+    const agendaPreview = agenda.slice(0, 3);
+
+    return (
+      <>
+        <PageHead title={name as string} />
+
+        <section className={styles.hero}>
+          <Container>
+            <Row className="align-items-center g-4">
+              <Col lg={7}>
+                <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
+                  <li className={styles.heroTag}>
+                    {(activityType as string) || t("hackathon")}
                   </li>
-                ))}
-              </ul>
-
-              <nav className="d-flex flex-wrap gap-3 mt-4">
-                {primaryForm && (
-                  <Button href={primaryForm.list[0].shared_url} target="_blank" rel="noreferrer">
-                    {t(primaryForm.meta.title)}
-                  </Button>
-                )}
-                {secondaryForm && (
-                  <Button
-                    href={secondaryForm.list[0].shared_url}
-                    target="_blank"
-                    rel="noreferrer"
-                    variant="light"
-                  >
-                    {t(secondaryForm.meta.title)}
-                  </Button>
-                )}
-                {formGroups[0] && (
-                  <Button href="#entry-hub" variant="outline-light">
-                    {t('hackathon_view_all_entries')}
-                  </Button>
-                )}
-              </nav>
-
-              <Row className="mt-4 g-3" md={2}>
-                <Col>
-                  <Card className={styles.infoCard} body>
-                    <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
-                    <address className="text-white-50 mb-0 fst-normal">
-                      {(location as TableCellLocation)?.full_address}
-                    </address>
-                  </Card>
-                </Col>
-                <Col>
-                  <Card className={styles.infoCard} body>
-                    <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
-                    <p className="text-white-50 mb-0">
-                      <time dateTime={startTime as string}>{formatDate(startTime as string)}</time>{' '}
-                      - <time dateTime={endTime as string}>{formatDate(endTime as string)}</time>
-                    </p>
-                  </Card>
-                </Col>
-              </Row>
-            </Col>
-
-            <Col lg={5}>
-              <Card className={styles.heroVisualCard}>
-                {image && (
-                  <div className={styles.heroImageWrap}>
-                    <LarkImage src={image} alt={name as string} className={styles.heroImage} />
-                  </div>
-                )}
-                <Card.Body>
-                  {agendaPreview[0] && (
-                    <dl className="d-grid gap-3 mb-0">
-                      <div className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}>
-                        <dt className={styles.heroVisualKicker}>{t('hackathon_agenda_preview')}</dt>
-                        <dd className="fw-semibold">{agendaPreview[0].name as string}</dd>
-                      </div>
+                  {hostTags.map((tag) => (
+                    <li key={tag} className={styles.heroTag}>
+                      {tag}
+                    </li>
+                  ))}
+                </ul>
+
+                <h1 className={styles.title}>{name as string}</h1>
+                <p className={styles.description}>{summary as string}</p>
+
+                <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
+                  {heroStats.map(({ label, value }) => (
+                    <li key={label} className={styles.statChip}>
+                      {value} {label}
+                    </li>
+                  ))}
+                </ul>
+
+                <nav className="d-flex flex-wrap gap-3 mt-4">
+                  {primaryForm && (
+                    <Button
+                      href={primaryForm.list[0].shared_url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {t(primaryForm.meta.title)}
+                    </Button>
+                  )}
+                  {secondaryForm && (
+                    <Button
+                      href={secondaryForm.list[0].shared_url}
+                      target="_blank"
+                      rel="noreferrer"
+                      variant="light"
+                    >
+                      {t(secondaryForm.meta.title)}
+                    </Button>
+                  )}
+                  {formGroups[0] && (
+                    <Button href="#entry-hub" variant="outline-light">
+                      {t("hackathon_view_all_entries")}
+                    </Button>
+                  )}
+                </nav>
+
+                <Row className="mt-4 g-3" md={2}>
+                  <Col>
+                    <Card className={styles.infoCard} body>
+                      <h5 className="text-white mb-2">
+                        📍 {t("event_location")}
+                      </h5>
+                      <address className="text-white-50 mb-0 fst-normal">
+                        {(location as TableCellLocation)?.full_address}
+                      </address>
+                    </Card>
+                  </Col>
+                  <Col>
+                    <Card className={styles.infoCard} body>
+                      <h5 className="text-white mb-2">
+                        ⏰ {t("event_duration")}
+                      </h5>
+                      <p className="text-white-50 mb-0">
+                        <time dateTime={startTime as string}>
+                          {formatDate(startTime as string)}
+                        </time>{" "}
+                        -{" "}
+                        <time dateTime={endTime as string}>
+                          {formatDate(endTime as string)}
+                        </time>
+                      </p>
+                    </Card>
+                  </Col>
+                </Row>
+              </Col>
 
-                      {agendaPreview.map(({ name, startedAt, endedAt }) => (
+              <Col lg={5}>
+                <Card className={styles.heroVisualCard}>
+                  {image && (
+                    <div className={styles.heroImageWrap}>
+                      <LarkImage
+                        src={image}
+                        alt={name as string}
+                        className="w-100 h-100 object-fit-cover"
+                      />
+                    </div>
+                  )}
+                  <Card.Body>
+                    {agendaPreview[0] && (
+                      <dl className="d-grid gap-3 mb-0">
                         <div
-                          key={`${name as string}-${startedAt as string}`}
-                          className={styles.heroVisualItem}
+                          className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}
                         >
-                          <dt className="fw-semibold">{name as string}</dt>
-                          <dd>
-                            <time dateTime={startedAt as string}>
-                              {formatDate(startedAt as string)}
-                            </time>{' '}
-                            -{' '}
-                            <time dateTime={endedAt as string}>
-                              {formatDate(endedAt as string)}
-                            </time>
+                          <dt className={styles.heroVisualKicker}>
+                            {t("hackathon_agenda_preview")}
+                          </dt>
+                          <dd className="fw-semibold">
+                            {agendaPreview[0].name as string}
                           </dd>
                         </div>
-                      ))}
-                    </dl>
-                  )}
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-        </Container>
-      </section>
-
-      <Container className="my-5">
-        {formGroups[0] && (
-          <section id="entry-hub" className={styles.section}>
-            <hgroup className="mb-0">
-              <p className={styles.sectionEyebrow}>{t('hackathon_action_hub')}</p>
-              <h2 className={styles.sectionTitle}>{t('hackathon_entry_flow')}</h2>
-              <p className={styles.sectionLead}>{t('hackathon_entry_flow_description')}</p>
-            </hgroup>
-
-            <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
-              {formGroups.map(({ key, list, meta }, index) => (
-                <Col as="li" key={key}>
-                  <Card className={styles.entryCard} body>
-                    <span className={styles.entryStep}>
-                      {t('hackathon_step')} {String(index + 1).padStart(2, '0')} ·{' '}
-                      {t(meta.eyebrow)}
-                    </span>
-                    <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
-                    <p className="text-white-50 mb-3">{t(meta.description)}</p>
-                    <nav className="d-grid gap-2">
-                      {list.map(({ name, shared_url }) => (
-                        <Button
-                          key={name}
-                          href={shared_url}
-                          target="_blank"
-                          rel="noreferrer"
-                          variant="light"
-                        >
-                          {name}
-                        </Button>
-                      ))}
-                    </nav>
-                  </Card>
-                </Col>
-              ))}
+
+                        {agendaPreview.map(({ name, startedAt, endedAt }) => (
+                          <div
+                            key={`${name as string}-${startedAt as string}`}
+                            className={styles.heroVisualItem}
+                          >
+                            <dt className="fw-semibold">{name as string}</dt>
+                            <dd>
+                              <time dateTime={startedAt as string}>
+                                {formatDate(startedAt as string)}
+                              </time>{" "}
+                              -{" "}
+                              <time dateTime={endedAt as string}>
+                                {formatDate(endedAt as string)}
+                              </time>
+                            </dd>
+                          </div>
+                        ))}
+                      </dl>
+                    )}
+                  </Card.Body>
+                </Card>
+              </Col>
             </Row>
-          </section>
-        )}
-
-        <section className={`${styles.section} ${styles.prizeSection}`}>
-          <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
-          <div className="mt-4">
-            <UserRankView
-              title={t('prizes')}
-              rank={prizes.map(({ name, image, price }, index) => ({
-                id: `prize-${index}`,
-                name: name as string,
-                avatar: fileURLOf(image),
-                score: price as number,
-              }))}
-            />
-          </div>
+          </Container>
         </section>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
-          <ol className="list-unstyled mt-4">
-            {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
-              <li
-                key={name as string}
-                className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || 'break']}`}
-              >
-                <h5 className="text-white mb-2">{name as string}</h5>
-                <p className="text-white-50 small mb-2">{summary as string}</p>
-                <div className="d-flex justify-content-between align-items-center">
-                  <Badge bg={text2color(type as string)} className="me-2">
-                    {t(type as I18nKey)}
-                  </Badge>
-                  <div className="text-white-50 small">
-                    {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
+        <Container className="my-5">
+          {formGroups[0] && (
+            <section id="entry-hub" className={styles.section}>
+              <hgroup className="mb-0">
+                <p className={styles.sectionEyebrow}>
+                  {t("hackathon_action_hub")}
+                </p>
+                <h2 className={styles.sectionTitle}>
+                  {t("hackathon_entry_flow")}
+                </h2>
+                <p className={styles.sectionLead}>
+                  {t("hackathon_entry_flow_description")}
+                </p>
+              </hgroup>
+
+              <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
+                {formGroups.map(({ key, list, meta }, index) => (
+                  <Col as="li" key={key}>
+                    <Card className={styles.entryCard} body>
+                      <span className={styles.entryStep}>
+                        {t("hackathon_step")}{" "}
+                        {String(index + 1).padStart(2, "0")} · {t(meta.eyebrow)}
+                      </span>
+                      <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
+                      <p className="text-white-50 mb-3">
+                        {t(meta.description)}
+                      </p>
+                      <nav className="d-grid gap-2">
+                        {list.map(({ name, shared_url }) => (
+                          <Button
+                            key={name}
+                            href={shared_url}
+                            target="_blank"
+                            rel="noreferrer"
+                            variant="light"
+                          >
+                            {name}
+                          </Button>
+                        ))}
+                      </nav>
+                    </Card>
+                  </Col>
+                ))}
+              </Row>
+            </section>
+          )}
+
+          <section className={`${styles.section} ${styles.prizeSection}`}>
+            <h2 className={styles.sectionTitle}>🏆 {t("prizes")}</h2>
+            <div className="mt-4">
+              <UserRankView
+                title={t("prizes")}
+                rank={prizes.map(({ name, image, price }, index) => ({
+                  id: `prize-${index}`,
+                  name: name as string,
+                  avatar: fileURLOf(image),
+                  score: price as number,
+                }))}
+              />
+            </div>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>📅 {t("agenda")}</h2>
+            <ol className="list-unstyled mt-4">
+              {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
+                <li
+                  key={name as string}
+                  className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || "break"]}`}
+                >
+                  <h5 className="text-white mb-2">{name as string}</h5>
+                  <p className="text-white-50 small mb-2">
+                    {summary as string}
+                  </p>
+                  <div className="d-flex justify-content-between align-items-center">
+                    <Badge bg={text2color(type as string)} className="me-2">
+                      {t(type as I18nKey)}
+                    </Badge>
+                    <div className="text-white-50 small">
+                      {formatDate(startedAt as string)} -{" "}
+                      {formatDate(endedAt as string)}
+                    </div>
                   </div>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </section>
+                </li>
+              ))}
+            </ol>
+          </section>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
-          <nav className={styles.orgContainer}>
-            {organizations.map(({ name, link, logo }) => (
-              <a
-                key={name as string}
-                href={link as string}
-                target="_blank"
-                rel="noreferrer"
-                title={name as string}
-              >
-                <LarkImage src={logo} alt={name as string} className={styles.orgLogo} />
-              </a>
-            ))}
-          </nav>
-        </section>
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>🏢 {t("organizations")}</h2>
+            <nav className={styles.orgContainer}>
+              {organizations.map(({ name, link, logo }) => (
+                <a
+                  key={name as string}
+                  href={link as string}
+                  target="_blank"
+                  rel="noreferrer"
+                  title={name as string}
+                >
+                  <LarkImage
+                    src={logo}
+                    alt={name as string}
+                    className={styles.orgLogo}
+                  />
+                </a>
+              ))}
+            </nav>
+          </section>
 
-        <section className={`${styles.section} ${styles.templateSection}`}>
-          <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
-          <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
-            {templates.map(({ name, languages, tags, sourceLink, summary, previewLink }) => (
-              <Col key={name as string}>
-                <GitCard
-                  full_name={name as string}
-                  html_url={sourceLink as string}
-                  languages={languages as string[]}
-                  topics={tags as string[]}
-                  description={summary as string}
-                  homepage={previewLink as string}
-                />
-              </Col>
-            ))}
-          </Row>
-        </section>
+          <section className={`${styles.section} ${styles.templateSection}`}>
+            <h2 className={styles.sectionTitle}>🛠️ {t("templates")}</h2>
+            <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
+              {templates.map(
+                ({
+                  name,
+                  languages,
+                  tags,
+                  sourceLink,
+                  summary,
+                  previewLink,
+                }) => (
+                  <Col key={name as string}>
+                    <GitCard
+                      full_name={name as string}
+                      html_url={sourceLink as string}
+                      languages={languages as string[]}
+                      topics={tags as string[]}
+                      description={summary as string}
+                      homepage={previewLink as string}
+                    />
+                  </Col>
+                ),
+              )}
+            </Row>
+          </section>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
-
-          <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
-            {projects.map(({ id, name, score, summary, createdBy, members }) => (
-              <Col as="li" key={name as string}>
-                <Card className={styles.projectCard} body>
-                  <div className="d-flex justify-content-between align-items-start mb-3">
-                    <h6 className="text-white flex-grow-1">
-                      <Link
-                        className="stretched-link"
-                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
-                      >
-                        {name as string}
-                      </Link>
-                    </h6>
-                    <div className={styles.scoreCircle}>{score as number}</div>
-                  </div>
-                  <p className="text-white-50 small mb-3">{summary as string}</p>
-                  <div className="text-white-50 small mb-2">
-                    <strong>{t('created_by')}:</strong>{' '}
-                    <a href={`mailto:${(createdBy as TableCellUser)?.email}`}>
-                      {(createdBy as TableCellUser)?.name}
-                    </a>
-                  </div>
-                  <div className="text-white-50 small">
-                    <strong>{t('members')}:</strong> {(members as string[]).join(', ')}
-                  </div>
-                </Card>
-              </Col>
-            ))}
-          </Row>
-        </section>
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>💡 {t("projects")}</h2>
+
+            <Row
+              as="ul"
+              className="list-unstyled mt-4 g-3"
+              md={2}
+              lg={3}
+              xl={4}
+            >
+              {projects.map(
+                ({ id, name, score, summary, createdBy, members }) => (
+                  <Col as="li" key={name as string}>
+                    <Card className={styles.projectCard} body>
+                      <div className="d-flex justify-content-between align-items-start mb-3">
+                        <h6 className="text-white flex-grow-1">
+                          <Link
+                            className="stretched-link"
+                            href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                          >
+                            {name as string}
+                          </Link>
+                        </h6>
+                        <div className={styles.scoreCircle}>
+                          {score as number}
+                        </div>
+                      </div>
+                      <p className="text-white-50 small mb-3">
+                        {summary as string}
+                      </p>
+                      <div className="text-white-50 small mb-2">
+                        <strong>{t("created_by")}:</strong>{" "}
+                        <a
+                          href={`mailto:${(createdBy as TableCellUser)?.email}`}
+                        >
+                          {(createdBy as TableCellUser)?.name}
+                        </a>
+                      </div>
+                      <div className="text-white-50 small">
+                        <strong>{t("members")}:</strong>{" "}
+                        {(members as string[] | undefined)?.join(", ") || "-"}
+                      </div>
+                    </Card>
+                  </Col>
+                ),
+              )}
+            </Row>
+          </section>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
-          <nav className={styles.participantCloud}>
-            {people.map(({ name, avatar, githubLink }) => (
-              <a
-                key={name as string}
-                className="text-center"
-                target="_blank"
-                rel="noreferrer"
-                href={githubLink as string}
-              >
-                <LarkImage
-                  className={styles.avatar}
-                  src={avatar}
-                  alt={name as string}
-                  title={name as string}
-                />
-              </a>
-            ))}
-          </nav>
-        </section>
-      </Container>
-    </>
-  );
-});
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>👥 {t("participants")}</h2>
+            <nav className={styles.participantCloud}>
+              {people.map(({ name, avatar, githubLink }) => (
+                <a
+                  key={name as string}
+                  className="text-center"
+                  target="_blank"
+                  rel="noreferrer"
+                  href={githubLink as string}
+                >
+                  <LarkImage
+                    className={styles.avatar}
+                    src={avatar}
+                    alt={name as string}
+                    title={name as string}
+                  />
+                </a>
+              ))}
+            </nav>
+          </section>
+        </Container>
+      </>
+    );
+  },
+);
 
 export default HackathonDetail;
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index b5bfc5f..26ae2e5 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -12,12 +12,16 @@
     top: -50%;
     left: -50%;
     animation: grid-animation 20s linear infinite;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+    background: radial-gradient(
+      circle,
+      rgba(255, 255, 255, 0.1) 1px,
+      transparent 1px
+    );
     background-size: 50px 50px;
     width: 200%;
     height: 200%;
     pointer-events: none;
-    content: '';
+    content: "";
   }
 }
 
@@ -73,7 +77,11 @@
   box-shadow: 0 18px 50px rgba(10, 12, 30, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 24px;
-  background: linear-gradient(135deg, rgba(10, 12, 30, 0.82), rgba(37, 44, 84, 0.62));
+  background: linear-gradient(
+    135deg,
+    rgba(10, 12, 30, 0.82),
+    rgba(37, 44, 84, 0.62)
+  );
   color: #fff;
 }
 
@@ -82,12 +90,6 @@
   aspect-ratio: 16 / 10;
 }
 
-.heroImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .heroVisualKicker {
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -128,7 +130,11 @@
   margin-bottom: 1rem;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 16px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.05)
+  );
 
   &:hover {
     transform: translateY(-5px);

From ae8eed33aa16f2f8b0ef643770a53522233fdc78 Mon Sep 17 00:00:00 2001
From: TechQuery <shiy2008@gmail.com>
Date: Mon, 30 Mar 2026 22:07:11 +0800
Subject: [PATCH 05/14] [fix] many CodeX bugs

---
 pages/api/Lark/document/copy/[...slug].ts |   2 +-
 pages/hackathon/[id].tsx                  | 791 ++++++++++------------
 styles/Hackathon.module.less              |  42 +-
 3 files changed, 371 insertions(+), 464 deletions(-)

diff --git a/pages/api/Lark/document/copy/[...slug].ts b/pages/api/Lark/document/copy/[...slug].ts
index dd9f453..8c2de97 100644
--- a/pages/api/Lark/document/copy/[...slug].ts
+++ b/pages/api/Lark/document/copy/[...slug].ts
@@ -18,7 +18,7 @@ router.post('/:type/:id', safeAPI, verifyJWT, async (context: Context) => {
       ? await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken)
       : await lark.copyFile(`${type as LarkDocumentPathType}/${id}`, name, parentToken);
 
-  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.obj_token;
+  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.node_token;
 
   if (ownerType && ownerId)
     try {
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index aef78b9..cb015e2 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,22 +1,17 @@
-import {
-  BiTableSchema,
-  TableCellLocation,
-  TableCellUser,
-  TableFormView,
-} from "mobx-lark";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { cache, compose, errorLogger } from "next-ssr-middleware";
-import { FC, useContext } from "react";
-import { Badge, Button, Card, Col, Container, Row } from "react-bootstrap";
-import { text2color, UserRankView } from "idea-react";
-import { formatDate } from "web-utility";
-
-import { GitCard } from "../../components/Git/Card";
-import { LarkImage } from "../../components/LarkImage";
-import { PageHead } from "../../components/Layout/PageHead";
-import { Activity, ActivityModel } from "../../models/Activity";
-import { fileURLOf } from "../../models/Base";
+import { BiTableSchema, TableCellLocation, TableCellUser, TableFormView } from 'mobx-lark';
+import { observer } from 'mobx-react';
+import Link from 'next/link';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
+import { FC, useContext } from 'react';
+import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
+import { text2color, UserRankView } from 'idea-react';
+import { formatDate } from 'web-utility';
+
+import { GitCard } from '../../components/Git/Card';
+import { LarkImage } from '../../components/LarkImage';
+import { PageHead } from '../../components/Layout/PageHead';
+import { Activity, ActivityModel } from '../../models/Activity';
+import { fileURLOf } from '../../models/Base';
 import {
   Agenda,
   AgendaModel,
@@ -30,9 +25,9 @@ import {
   ProjectModel,
   Template,
   TemplateModel,
-} from "../../models/Hackathon";
-import { I18nContext, I18nKey } from "../../models/Translation";
-import styles from "../../styles/Hackathon.module.less";
+} from '../../models/Hackathon';
+import { I18nContext, I18nKey } from '../../models/Translation';
+import styles from '../../styles/Hackathon.module.less';
 
 export const getServerSideProps = compose<{ id: string }>(
   cache(),
@@ -40,29 +35,21 @@ export const getServerSideProps = compose<{ id: string }>(
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
 
-    const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
+    const { appId, tableIdMap } = (activity.databaseSchema || {}) as BiTableSchema;
 
-    const [people, organizations, agenda, prizes, templates, projects] =
-      await Promise.all([
-        new PersonModel(appId, tableIdMap.Person).getAll(),
-        new OrganizationModel(appId, tableIdMap.Organization).getAll(),
-        new AgendaModel(appId, tableIdMap.Agenda).getAll(),
-        new PrizeModel(appId, tableIdMap.Prize).getAll(),
-        new TemplateModel(appId, tableIdMap.Template).getAll(),
-        new ProjectModel(appId, tableIdMap.Project).getAll(),
-      ]);
+    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
+      new PersonModel(appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(appId, tableIdMap.Template).getAll(),
+      new ProjectModel(appId, tableIdMap.Project).getAll(),
+    ]);
 
     return {
       props: {
         activity,
-        hackathon: {
-          people,
-          organizations,
-          agenda,
-          prizes,
-          templates,
-          projects,
-        },
+        hackathon: { people, organizations, agenda, prizes, templates, projects },
       },
     };
   },
@@ -80,10 +67,10 @@ interface HackathonDetailProps {
   };
 }
 
-const FormButtonBar = ["Person", "Project", "Product", "Evaluation"] as const;
+const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
 
 type FormGroupKey = (typeof FormButtonBar)[number];
-type FormGroupMeta = Record<"title" | "description" | "eyebrow", I18nKey>;
+type FormGroupMeta = Record<'title' | 'description' | 'eyebrow', I18nKey>;
 
 interface FormGroup {
   key: FormGroupKey;
@@ -93,421 +80,355 @@ interface FormGroup {
 
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
-    eyebrow: "participants",
-    title: "hackathon_participant_registration",
-    description: "hackathon_participant_registration_description",
+    eyebrow: 'participants',
+    title: 'hackathon_participant_registration',
+    description: 'hackathon_participant_registration_description',
   },
   Project: {
-    eyebrow: "hackathon_team_lead",
-    title: "hackathon_project_registration",
-    description: "hackathon_project_registration_description",
+    eyebrow: 'hackathon_team_lead',
+    title: 'hackathon_project_registration',
+    description: 'hackathon_project_registration_description',
   },
   Product: {
-    eyebrow: "hackathon_submission",
-    title: "product_submission",
-    description: "hackathon_product_submission_description",
+    eyebrow: 'hackathon_submission',
+    title: 'product_submission',
+    description: 'hackathon_product_submission_description',
   },
   Evaluation: {
-    eyebrow: "hackathon_review",
-    title: "hackathon_evaluation_entry",
-    description: "hackathon_evaluation_entry_description",
+    eyebrow: 'hackathon_review',
+    title: 'hackathon_evaluation_entry',
+    description: 'hackathon_evaluation_entry_description',
   },
 };
 
-const isPublicForm = ({ shared, shared_limit }: TableFormView) =>
-  shared ||
-  ["tenant_editable", "anyone_editable"].includes(shared_limit as string);
-
-const HackathonDetail: FC<HackathonDetailProps> = observer(
-  ({ activity, hackathon }) => {
-    const { t } = useContext(I18nContext);
-
-    const {
-        name,
-        summary,
-        location,
-        startTime,
-        endTime,
-        databaseSchema,
-        host,
-        image,
-        type: activityType,
-      } = activity,
-      { people, organizations, agenda, prizes, templates, projects } =
-        hackathon;
-    const forms = (((databaseSchema as BiTableSchema).forms || {}) as Partial<
-      Record<FormGroupKey, TableFormView[]>
-    >)!;
-    const formGroups = FormButtonBar.flatMap<FormGroup>((key) => {
-      const list = forms[key]?.filter(isPublicForm) || [];
-
-      return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
-    });
-    const primaryForm =
-      formGroups.find(({ key }) => key === "Person") ||
-      formGroups.find(({ key }) => key === "Project") ||
-      formGroups[0];
-    const secondaryForm =
-      formGroups.find(
-        ({ key }) => key === "Project" && key !== primaryForm?.key,
-      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
-    const heroStats = [
-      { label: t("participants"), value: people.length },
-      { label: t("projects"), value: projects.length },
-      { label: t("templates"), value: templates.length },
-      { label: t("organizations"), value: organizations.length },
-    ];
-    const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
-    const agendaPreview = agenda.slice(0, 3);
-
-    return (
-      <>
-        <PageHead title={name as string} />
-
-        <section className={styles.hero}>
-          <Container>
-            <Row className="align-items-center g-4">
-              <Col lg={7}>
-                <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
-                  <li className={styles.heroTag}>
-                    {(activityType as string) || t("hackathon")}
+const isPublicForm = ({ shared_limit }: TableFormView) =>
+  ['anyone_editable'].includes(shared_limit as string);
+
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  const { t } = useContext(I18nContext);
+
+  const {
+      name,
+      summary,
+      location,
+      startTime,
+      endTime,
+      databaseSchema,
+      host,
+      image,
+      type: activityType,
+    } = activity,
+    { people, organizations, agenda, prizes, templates, projects } = hackathon;
+  const { forms } = (databaseSchema || {}) as BiTableSchema;
+
+  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
+    const list = forms[key]?.filter(isPublicForm) || [];
+
+    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+  });
+  const primaryForm =
+    formGroups.find(({ key }) => key === 'Person') ||
+    formGroups.find(({ key }) => key === 'Project') ||
+    formGroups[0];
+  const secondaryForm =
+    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
+    formGroups.find(({ key }) => key !== primaryForm?.key);
+  const heroStats = [
+    { label: t('participants'), value: people.length },
+    { label: t('projects'), value: projects.length },
+    { label: t('templates'), value: templates.length },
+    { label: t('organizations'), value: organizations.length },
+  ];
+  const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
+  const agendaPreview = agenda.slice(0, 3);
+
+  return (
+    <>
+      <PageHead title={name as string} />
+
+      <section className={styles.hero}>
+        <Container>
+          <Row className="align-items-center g-4">
+            <Col lg={7}>
+              <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
+                <li className={styles.heroTag}>{(activityType as string) || t('hackathon')}</li>
+                {hostTags.map(tag => (
+                  <li key={tag} className={styles.heroTag}>
+                    {tag}
                   </li>
-                  {hostTags.map((tag) => (
-                    <li key={tag} className={styles.heroTag}>
-                      {tag}
-                    </li>
-                  ))}
-                </ul>
-
-                <h1 className={styles.title}>{name as string}</h1>
-                <p className={styles.description}>{summary as string}</p>
-
-                <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
-                  {heroStats.map(({ label, value }) => (
-                    <li key={label} className={styles.statChip}>
-                      {value} {label}
-                    </li>
-                  ))}
-                </ul>
-
-                <nav className="d-flex flex-wrap gap-3 mt-4">
-                  {primaryForm && (
-                    <Button
-                      href={primaryForm.list[0].shared_url}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {t(primaryForm.meta.title)}
-                    </Button>
-                  )}
-                  {secondaryForm && (
-                    <Button
-                      href={secondaryForm.list[0].shared_url}
-                      target="_blank"
-                      rel="noreferrer"
-                      variant="light"
-                    >
-                      {t(secondaryForm.meta.title)}
-                    </Button>
-                  )}
-                  {formGroups[0] && (
-                    <Button href="#entry-hub" variant="outline-light">
-                      {t("hackathon_view_all_entries")}
-                    </Button>
-                  )}
-                </nav>
-
-                <Row className="mt-4 g-3" md={2}>
-                  <Col>
-                    <Card className={styles.infoCard} body>
-                      <h5 className="text-white mb-2">
-                        📍 {t("event_location")}
-                      </h5>
-                      <address className="text-white-50 mb-0 fst-normal">
-                        {(location as TableCellLocation)?.full_address}
-                      </address>
-                    </Card>
-                  </Col>
-                  <Col>
-                    <Card className={styles.infoCard} body>
-                      <h5 className="text-white mb-2">
-                        ⏰ {t("event_duration")}
-                      </h5>
-                      <p className="text-white-50 mb-0">
-                        <time dateTime={startTime as string}>
-                          {formatDate(startTime as string)}
-                        </time>{" "}
-                        -{" "}
-                        <time dateTime={endTime as string}>
-                          {formatDate(endTime as string)}
-                        </time>
-                      </p>
-                    </Card>
-                  </Col>
-                </Row>
-              </Col>
+                ))}
+              </ul>
 
-              <Col lg={5}>
-                <Card className={styles.heroVisualCard}>
-                  {image && (
-                    <div className={styles.heroImageWrap}>
-                      <LarkImage
-                        src={image}
-                        alt={name as string}
-                        className="w-100 h-100 object-fit-cover"
-                      />
-                    </div>
-                  )}
-                  <Card.Body>
-                    {agendaPreview[0] && (
-                      <dl className="d-grid gap-3 mb-0">
+              <h1 className={styles.title}>{name as string}</h1>
+              <p className={styles.description}>{summary as string}</p>
+
+              <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
+                {heroStats.map(({ label, value }) => (
+                  <li key={label} className={styles.statChip}>
+                    {value} {label}
+                  </li>
+                ))}
+              </ul>
+
+              <nav className="d-flex flex-wrap gap-3 mt-4">
+                {primaryForm && (
+                  <Button href={primaryForm.list[0].shared_url} target="_blank" rel="noreferrer">
+                    {t(primaryForm.meta.title)}
+                  </Button>
+                )}
+                {secondaryForm && (
+                  <Button
+                    href={secondaryForm.list[0].shared_url}
+                    target="_blank"
+                    rel="noreferrer"
+                    variant="light"
+                  >
+                    {t(secondaryForm.meta.title)}
+                  </Button>
+                )}
+                {formGroups[0] && (
+                  <Button href="#entry-hub" variant="outline-light">
+                    {t('hackathon_view_all_entries')}
+                  </Button>
+                )}
+              </nav>
+
+              <Row className="mt-4 g-3" md={2}>
+                <Col>
+                  <Card className={styles.infoCard} body>
+                    <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
+                    <address className="text-white-50 mb-0 fst-normal">
+                      {(location as TableCellLocation)?.full_address}
+                    </address>
+                  </Card>
+                </Col>
+                <Col>
+                  <Card className={styles.infoCard} body>
+                    <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
+                    <p className="text-white-50 mb-0">
+                      <time dateTime={startTime as string}>{formatDate(startTime as string)}</time>{' '}
+                      - <time dateTime={endTime as string}>{formatDate(endTime as string)}</time>
+                    </p>
+                  </Card>
+                </Col>
+              </Row>
+            </Col>
+
+            <Col lg={5}>
+              <Card className={styles.heroVisualCard}>
+                {image && (
+                  <div className={styles.heroImageWrap}>
+                    <LarkImage
+                      src={image}
+                      alt={name as string}
+                      className="w-100 h-100 object-fit-cover"
+                    />
+                  </div>
+                )}
+                <Card.Body>
+                  {agendaPreview[0] && (
+                    <dl className="d-grid gap-3 mb-0">
+                      <div className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}>
+                        <dt className={styles.heroVisualKicker}>{t('hackathon_agenda_preview')}</dt>
+                        <dd className="fw-semibold">{agendaPreview[0].name as string}</dd>
+                      </div>
+
+                      {agendaPreview.map(({ name, startedAt, endedAt }) => (
                         <div
-                          className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}
+                          key={`${name as string}-${startedAt as string}`}
+                          className={styles.heroVisualItem}
                         >
-                          <dt className={styles.heroVisualKicker}>
-                            {t("hackathon_agenda_preview")}
-                          </dt>
-                          <dd className="fw-semibold">
-                            {agendaPreview[0].name as string}
+                          <dt className="fw-semibold">{name as string}</dt>
+                          <dd>
+                            <time dateTime={startedAt as string}>
+                              {formatDate(startedAt as string)}
+                            </time>{' '}
+                            -{' '}
+                            <time dateTime={endedAt as string}>
+                              {formatDate(endedAt as string)}
+                            </time>
                           </dd>
                         </div>
-
-                        {agendaPreview.map(({ name, startedAt, endedAt }) => (
-                          <div
-                            key={`${name as string}-${startedAt as string}`}
-                            className={styles.heroVisualItem}
-                          >
-                            <dt className="fw-semibold">{name as string}</dt>
-                            <dd>
-                              <time dateTime={startedAt as string}>
-                                {formatDate(startedAt as string)}
-                              </time>{" "}
-                              -{" "}
-                              <time dateTime={endedAt as string}>
-                                {formatDate(endedAt as string)}
-                              </time>
-                            </dd>
-                          </div>
-                        ))}
-                      </dl>
-                    )}
-                  </Card.Body>
-                </Card>
-              </Col>
+                      ))}
+                    </dl>
+                  )}
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+
+      <Container className="my-5">
+        {formGroups[0] && (
+          <section id="entry-hub" className={styles.section}>
+            <hgroup className="mb-0">
+              <p className={styles.sectionEyebrow}>{t('hackathon_action_hub')}</p>
+              <h2 className={styles.sectionTitle}>{t('hackathon_entry_flow')}</h2>
+              <p className={styles.sectionLead}>{t('hackathon_entry_flow_description')}</p>
+            </hgroup>
+
+            <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
+              {formGroups.map(({ key, list, meta }, index) => (
+                <Col as="li" key={key}>
+                  <Card className={styles.entryCard} body>
+                    <span className={styles.entryStep}>
+                      {t('hackathon_step')} {String(index + 1).padStart(2, '0')} · {t(meta.eyebrow)}
+                    </span>
+                    <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
+                    <p className="text-white-50 mb-3">{t(meta.description)}</p>
+                    <nav className="d-grid gap-2">
+                      {list.map(({ name, shared_url }) => (
+                        <Button
+                          key={name}
+                          href={shared_url}
+                          target="_blank"
+                          rel="noreferrer"
+                          variant="light"
+                        >
+                          {name}
+                        </Button>
+                      ))}
+                    </nav>
+                  </Card>
+                </Col>
+              ))}
             </Row>
-          </Container>
-        </section>
-
-        <Container className="my-5">
-          {formGroups[0] && (
-            <section id="entry-hub" className={styles.section}>
-              <hgroup className="mb-0">
-                <p className={styles.sectionEyebrow}>
-                  {t("hackathon_action_hub")}
-                </p>
-                <h2 className={styles.sectionTitle}>
-                  {t("hackathon_entry_flow")}
-                </h2>
-                <p className={styles.sectionLead}>
-                  {t("hackathon_entry_flow_description")}
-                </p>
-              </hgroup>
-
-              <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
-                {formGroups.map(({ key, list, meta }, index) => (
-                  <Col as="li" key={key}>
-                    <Card className={styles.entryCard} body>
-                      <span className={styles.entryStep}>
-                        {t("hackathon_step")}{" "}
-                        {String(index + 1).padStart(2, "0")} · {t(meta.eyebrow)}
-                      </span>
-                      <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
-                      <p className="text-white-50 mb-3">
-                        {t(meta.description)}
-                      </p>
-                      <nav className="d-grid gap-2">
-                        {list.map(({ name, shared_url }) => (
-                          <Button
-                            key={name}
-                            href={shared_url}
-                            target="_blank"
-                            rel="noreferrer"
-                            variant="light"
-                          >
-                            {name}
-                          </Button>
-                        ))}
-                      </nav>
-                    </Card>
-                  </Col>
-                ))}
-              </Row>
-            </section>
-          )}
-
-          <section className={`${styles.section} ${styles.prizeSection}`}>
-            <h2 className={styles.sectionTitle}>🏆 {t("prizes")}</h2>
-            <div className="mt-4">
-              <UserRankView
-                title={t("prizes")}
-                rank={prizes.map(({ name, image, price }, index) => ({
-                  id: `prize-${index}`,
-                  name: name as string,
-                  avatar: fileURLOf(image),
-                  score: price as number,
-                }))}
-              />
-            </div>
           </section>
+        )}
+
+        <section className={`${styles.section} ${styles.prizeSection}`}>
+          <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
+          <div className="mt-4">
+            <UserRankView
+              title={t('prizes')}
+              rank={prizes.map(({ name, image, price }, index) => ({
+                id: `prize-${index}`,
+                name: name as string,
+                avatar: fileURLOf(image),
+                score: price as number,
+              }))}
+            />
+          </div>
+        </section>
 
-          <section className={styles.section}>
-            <h2 className={styles.sectionTitle}>📅 {t("agenda")}</h2>
-            <ol className="list-unstyled mt-4">
-              {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
-                <li
-                  key={name as string}
-                  className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || "break"]}`}
-                >
-                  <h5 className="text-white mb-2">{name as string}</h5>
-                  <p className="text-white-50 small mb-2">
-                    {summary as string}
-                  </p>
-                  <div className="d-flex justify-content-between align-items-center">
-                    <Badge bg={text2color(type as string)} className="me-2">
-                      {t(type as I18nKey)}
-                    </Badge>
-                    <div className="text-white-50 small">
-                      {formatDate(startedAt as string)} -{" "}
-                      {formatDate(endedAt as string)}
-                    </div>
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
+          <ol className="list-unstyled mt-4">
+            {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
+              <li
+                key={name as string}
+                className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || 'break']}`}
+              >
+                <h5 className="text-white mb-2">{name as string}</h5>
+                <p className="text-white-50 small mb-2">{summary as string}</p>
+                <div className="d-flex justify-content-between align-items-center">
+                  <Badge bg={text2color(type as string)} className="me-2">
+                    {t(type as I18nKey)}
+                  </Badge>
+                  <div className="text-white-50 small">
+                    {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
                   </div>
-                </li>
-              ))}
-            </ol>
-          </section>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </section>
 
-          <section className={styles.section}>
-            <h2 className={styles.sectionTitle}>🏢 {t("organizations")}</h2>
-            <nav className={styles.orgContainer}>
-              {organizations.map(({ name, link, logo }) => (
-                <a
-                  key={name as string}
-                  href={link as string}
-                  target="_blank"
-                  rel="noreferrer"
-                  title={name as string}
-                >
-                  <LarkImage
-                    src={logo}
-                    alt={name as string}
-                    className={styles.orgLogo}
-                  />
-                </a>
-              ))}
-            </nav>
-          </section>
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
+          <nav className={styles.orgContainer}>
+            {organizations.map(({ name, link, logo }) => (
+              <a
+                key={name as string}
+                href={link as string}
+                target="_blank"
+                rel="noreferrer"
+                title={name as string}
+              >
+                <LarkImage src={logo} alt={name as string} className={styles.orgLogo} />
+              </a>
+            ))}
+          </nav>
+        </section>
 
-          <section className={`${styles.section} ${styles.templateSection}`}>
-            <h2 className={styles.sectionTitle}>🛠️ {t("templates")}</h2>
-            <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
-              {templates.map(
-                ({
-                  name,
-                  languages,
-                  tags,
-                  sourceLink,
-                  summary,
-                  previewLink,
-                }) => (
-                  <Col key={name as string}>
-                    <GitCard
-                      full_name={name as string}
-                      html_url={sourceLink as string}
-                      languages={languages as string[]}
-                      topics={tags as string[]}
-                      description={summary as string}
-                      homepage={previewLink as string}
-                    />
-                  </Col>
-                ),
-              )}
-            </Row>
-          </section>
+        <section className={`${styles.section} ${styles.templateSection}`}>
+          <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
+          <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
+            {templates.map(({ name, languages, tags, sourceLink, summary, previewLink }) => (
+              <Col key={name as string}>
+                <GitCard
+                  full_name={name as string}
+                  html_url={sourceLink as string}
+                  languages={languages as string[]}
+                  topics={tags as string[]}
+                  description={summary as string}
+                  homepage={previewLink as string}
+                />
+              </Col>
+            ))}
+          </Row>
+        </section>
 
-          <section className={styles.section}>
-            <h2 className={styles.sectionTitle}>💡 {t("projects")}</h2>
-
-            <Row
-              as="ul"
-              className="list-unstyled mt-4 g-3"
-              md={2}
-              lg={3}
-              xl={4}
-            >
-              {projects.map(
-                ({ id, name, score, summary, createdBy, members }) => (
-                  <Col as="li" key={name as string}>
-                    <Card className={styles.projectCard} body>
-                      <div className="d-flex justify-content-between align-items-start mb-3">
-                        <h6 className="text-white flex-grow-1">
-                          <Link
-                            className="stretched-link"
-                            href={`${ActivityModel.getLink(activity)}/team/${id}`}
-                          >
-                            {name as string}
-                          </Link>
-                        </h6>
-                        <div className={styles.scoreCircle}>
-                          {score as number}
-                        </div>
-                      </div>
-                      <p className="text-white-50 small mb-3">
-                        {summary as string}
-                      </p>
-                      <div className="text-white-50 small mb-2">
-                        <strong>{t("created_by")}:</strong>{" "}
-                        <a
-                          href={`mailto:${(createdBy as TableCellUser)?.email}`}
-                        >
-                          {(createdBy as TableCellUser)?.name}
-                        </a>
-                      </div>
-                      <div className="text-white-50 small">
-                        <strong>{t("members")}:</strong>{" "}
-                        {(members as string[] | undefined)?.join(", ") || "-"}
-                      </div>
-                    </Card>
-                  </Col>
-                ),
-              )}
-            </Row>
-          </section>
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
+
+          <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
+            {projects.map(({ id, name, score, summary, createdBy, members }) => (
+              <Col as="li" key={name as string}>
+                <Card className={styles.projectCard} body>
+                  <div className="d-flex justify-content-between align-items-start mb-3">
+                    <h6 className="text-white flex-grow-1">
+                      <Link
+                        className="stretched-link"
+                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                      >
+                        {name as string}
+                      </Link>
+                    </h6>
+                    <div className={styles.scoreCircle}>{score as number}</div>
+                  </div>
+                  <p className="text-white-50 small mb-3">{summary as string}</p>
+                  <div className="text-white-50 small mb-2">
+                    <strong>{t('created_by')}:</strong>{' '}
+                    <a href={`mailto:${(createdBy as TableCellUser)?.email}`}>
+                      {(createdBy as TableCellUser)?.name}
+                    </a>
+                  </div>
+                  <div className="text-white-50 small">
+                    <strong>{t('members')}:</strong>{' '}
+                    {(members as string[] | undefined)?.join(', ') || '-'}
+                  </div>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </section>
 
-          <section className={styles.section}>
-            <h2 className={styles.sectionTitle}>👥 {t("participants")}</h2>
-            <nav className={styles.participantCloud}>
-              {people.map(({ name, avatar, githubLink }) => (
-                <a
-                  key={name as string}
-                  className="text-center"
-                  target="_blank"
-                  rel="noreferrer"
-                  href={githubLink as string}
-                >
-                  <LarkImage
-                    className={styles.avatar}
-                    src={avatar}
-                    alt={name as string}
-                    title={name as string}
-                  />
-                </a>
-              ))}
-            </nav>
-          </section>
-        </Container>
-      </>
-    );
-  },
-);
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
+          <nav className={styles.participantCloud}>
+            {people.map(({ name, avatar, githubLink }) => (
+              <a
+                key={name as string}
+                className="text-center"
+                target="_blank"
+                rel="noreferrer"
+                href={githubLink as string}
+              >
+                <LarkImage
+                  className={styles.avatar}
+                  src={avatar}
+                  alt={name as string}
+                  title={name as string}
+                />
+              </a>
+            ))}
+          </nav>
+        </section>
+      </Container>
+    </>
+  );
+});
 
 export default HackathonDetail;
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index 26ae2e5..cb62098 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -12,16 +12,12 @@
     top: -50%;
     left: -50%;
     animation: grid-animation 20s linear infinite;
-    background: radial-gradient(
-      circle,
-      rgba(255, 255, 255, 0.1) 1px,
-      transparent 1px
-    );
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
     background-size: 50px 50px;
     width: 200%;
     height: 200%;
     pointer-events: none;
-    content: "";
+    content: '';
   }
 }
 
@@ -73,15 +69,11 @@
 }
 
 .heroVisualCard {
-  overflow: hidden;
   box-shadow: 0 18px 50px rgba(10, 12, 30, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(10, 12, 30, 0.82),
-    rgba(37, 44, 84, 0.62)
-  );
+  background: linear-gradient(135deg, rgba(10, 12, 30, 0.82), rgba(37, 44, 84, 0.62));
+  overflow: hidden;
   color: #fff;
 }
 
@@ -91,10 +83,10 @@
 }
 
 .heroVisualKicker {
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
   opacity: 0.72;
   font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .heroVisualItem {
@@ -117,11 +109,9 @@
   }
 }
 
-.heroVisualHead {
-  dd {
-    opacity: 1;
-    font-size: 1rem;
-  }
+.heroVisualHead dd {
+  opacity: 1;
+  font-size: 1rem;
 }
 
 .infoCard {
@@ -130,11 +120,7 @@
   margin-bottom: 1rem;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 16px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0.05)
-  );
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
 
   &:hover {
     transform: translateY(-5px);
@@ -164,11 +150,11 @@
 
 .sectionEyebrow {
   margin-bottom: 0.5rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
   color: #7d8ff5;
   font-weight: 700;
   font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .sectionLead {
@@ -194,10 +180,10 @@
 }
 
 .entryStep {
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
   opacity: 0.72;
   font-size: 0.82rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
 // Vibrant cards - Multicolor gradient background

From d6c6f97990f483041e14aa0e7c086463516670d0 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 22:37:14 +0800
Subject: [PATCH 06/14] Rewrite hackathon detail layout

---
 pages/hackathon/[id].tsx     | 1292 +++++++++++++++++++++++++---------
 styles/Hackathon.module.less | 1262 ++++++++++++++++++++++++++-------
 2 files changed, 1961 insertions(+), 593 deletions(-)

diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index cb015e2..b98efff 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,17 +1,20 @@
-import { BiTableSchema, TableCellLocation, TableCellUser, TableFormView } from 'mobx-lark';
-import { observer } from 'mobx-react';
-import Link from 'next/link';
-import { cache, compose, errorLogger } from 'next-ssr-middleware';
-import { FC, useContext } from 'react';
-import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
-import { text2color, UserRankView } from 'idea-react';
-import { formatDate } from 'web-utility';
-
-import { GitCard } from '../../components/Git/Card';
-import { LarkImage } from '../../components/LarkImage';
-import { PageHead } from '../../components/Layout/PageHead';
-import { Activity, ActivityModel } from '../../models/Activity';
-import { fileURLOf } from '../../models/Base';
+import {
+  BiTableSchema,
+  TableCellLocation,
+  TableCellUser,
+  TableCellValue,
+  TableFormView,
+} from "mobx-lark";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { cache, compose, errorLogger } from "next-ssr-middleware";
+import { FC, useContext } from "react";
+import { Col, Container, Row } from "react-bootstrap";
+import { formatDate } from "web-utility";
+
+import { LarkImage } from "../../components/LarkImage";
+import { PageHead } from "../../components/Layout/PageHead";
+import { Activity, ActivityModel } from "../../models/Activity";
 import {
   Agenda,
   AgendaModel,
@@ -25,31 +28,59 @@ import {
   ProjectModel,
   Template,
   TemplateModel,
-} from '../../models/Hackathon';
-import { I18nContext, I18nKey } from '../../models/Translation';
-import styles from '../../styles/Hackathon.module.less';
+} from "../../models/Hackathon";
+import { I18nContext, I18nKey } from "../../models/Translation";
+import styles from "../../styles/Hackathon.module.less";
+
+const RequiredTableKeys = [
+  "Person",
+  "Organization",
+  "Agenda",
+  "Prize",
+  "Template",
+  "Project",
+] as const;
+
+type RequiredTableKey = (typeof RequiredTableKeys)[number];
 
 export const getServerSideProps = compose<{ id: string }>(
   cache(),
   errorLogger,
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
+    const schema = activity.databaseSchema as
+      | Partial<BiTableSchema>
+      | undefined;
+    const tableIdMap = schema?.tableIdMap as
+      | Partial<Record<RequiredTableKey, string>>
+      | undefined;
+
+    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
 
-    const { appId, tableIdMap } = (activity.databaseSchema || {}) as BiTableSchema;
+    for (const key of RequiredTableKeys)
+      if (!tableIdMap[key]) return { notFound: true, props: {} };
 
-    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
-      new PersonModel(appId, tableIdMap.Person).getAll(),
-      new OrganizationModel(appId, tableIdMap.Organization).getAll(),
-      new AgendaModel(appId, tableIdMap.Agenda).getAll(),
-      new PrizeModel(appId, tableIdMap.Prize).getAll(),
-      new TemplateModel(appId, tableIdMap.Template).getAll(),
-      new ProjectModel(appId, tableIdMap.Project).getAll(),
-    ]);
+    const [people, organizations, agenda, prizes, templates, projects] =
+      await Promise.all([
+        new PersonModel(schema.appId, tableIdMap.Person).getAll(),
+        new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
+        new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
+        new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
+        new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
+        new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
+      ]);
 
     return {
       props: {
         activity,
-        hackathon: { people, organizations, agenda, prizes, templates, projects },
+        hackathon: {
+          people,
+          organizations,
+          agenda,
+          prizes,
+          templates,
+          projects,
+        },
       },
     };
   },
@@ -67,10 +98,23 @@ interface HackathonDetailProps {
   };
 }
 
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
+const FormButtonBar = ["Person", "Project", "Product", "Evaluation"] as const;
+const HeroBadgeTone = [
+  "heroBadgeCyan",
+  "heroBadgeGold",
+  "heroBadgeGreen",
+  "heroBadgeRose",
+] as const;
+const HighlightIcons = ["👥", "🚀", "🛠", "🏆", "🤝", "📅"] as const;
 
 type FormGroupKey = (typeof FormButtonBar)[number];
-type FormGroupMeta = Record<'title' | 'description' | 'eyebrow', I18nKey>;
+type FormGroupMeta = Record<"title" | "description" | "eyebrow", I18nKey>;
+type AgendaToneClass =
+  | "formation"
+  | "enrollment"
+  | "competition"
+  | "break"
+  | "evaluation";
 
 interface FormGroup {
   key: FormGroupKey;
@@ -80,355 +124,923 @@ interface FormGroup {
 
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
-    eyebrow: 'participants',
-    title: 'hackathon_participant_registration',
-    description: 'hackathon_participant_registration_description',
+    eyebrow: "participants",
+    title: "hackathon_participant_registration",
+    description: "hackathon_participant_registration_description",
   },
   Project: {
-    eyebrow: 'hackathon_team_lead',
-    title: 'hackathon_project_registration',
-    description: 'hackathon_project_registration_description',
+    eyebrow: "hackathon_team_lead",
+    title: "hackathon_project_registration",
+    description: "hackathon_project_registration_description",
   },
   Product: {
-    eyebrow: 'hackathon_submission',
-    title: 'product_submission',
-    description: 'hackathon_product_submission_description',
+    eyebrow: "hackathon_submission",
+    title: "product_submission",
+    description: "hackathon_product_submission_description",
   },
   Evaluation: {
-    eyebrow: 'hackathon_review',
-    title: 'hackathon_evaluation_entry',
-    description: 'hackathon_evaluation_entry_description',
+    eyebrow: "hackathon_review",
+    title: "hackathon_evaluation_entry",
+    description: "hackathon_evaluation_entry_description",
   },
 };
 
+const AgendaTypeClassMap: Partial<Record<string, AgendaToneClass>> = {
+  workshop: "formation",
+  formation: "formation",
+  presentation: "enrollment",
+  enrollment: "enrollment",
+  coding: "competition",
+  competition: "competition",
+  break: "break",
+  ceremony: "evaluation",
+  evaluation: "evaluation",
+};
+
+const AgendaTypeLabelMap: Partial<Record<string, I18nKey>> = {
+  workshop: "workshop",
+  presentation: "presentation",
+  coding: "coding",
+  break: "break",
+  ceremony: "ceremony",
+};
+
 const isPublicForm = ({ shared_limit }: TableFormView) =>
-  ['anyone_editable'].includes(shared_limit as string);
-
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  const { t } = useContext(I18nContext);
-
-  const {
-      name,
-      summary,
-      location,
-      startTime,
-      endTime,
-      databaseSchema,
-      host,
-      image,
-      type: activityType,
-    } = activity,
-    { people, organizations, agenda, prizes, templates, projects } = hackathon;
-  const { forms } = (databaseSchema || {}) as BiTableSchema;
-
-  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
-    const list = forms[key]?.filter(isPublicForm) || [];
-
-    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
-  });
-  const primaryForm =
-    formGroups.find(({ key }) => key === 'Person') ||
-    formGroups.find(({ key }) => key === 'Project') ||
-    formGroups[0];
-  const secondaryForm =
-    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
-    formGroups.find(({ key }) => key !== primaryForm?.key);
-  const heroStats = [
-    { label: t('participants'), value: people.length },
-    { label: t('projects'), value: projects.length },
-    { label: t('templates'), value: templates.length },
-    { label: t('organizations'), value: organizations.length },
+  ["anyone_editable"].includes(shared_limit as string);
+
+const formatMoment = (value?: TableCellValue) =>
+  value ? formatDate(value as string) : "";
+
+const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
+  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(" - ");
+
+const previewText = (items: TableCellValue[], fallback: string) =>
+  items
+    .map((item) => item?.toString())
+    .filter(Boolean)
+    .slice(0, 2)
+    .join(" · ") || fallback;
+
+const agendaToneClassOf = (type: TableCellValue, index: number) => {
+  const normalized = type?.toString().toLowerCase() || "";
+  const fallbackOrder: AgendaToneClass[] = [
+    "formation",
+    "enrollment",
+    "competition",
+    "break",
+    "evaluation",
   ];
-  const hostTags = (host as string[] | undefined)?.slice(0, 3) || [];
-  const agendaPreview = agenda.slice(0, 3);
 
   return (
-    <>
-      <PageHead title={name as string} />
-
-      <section className={styles.hero}>
-        <Container>
-          <Row className="align-items-center g-4">
-            <Col lg={7}>
-              <ul className="list-unstyled d-flex flex-wrap gap-3 mb-3">
-                <li className={styles.heroTag}>{(activityType as string) || t('hackathon')}</li>
-                {hostTags.map(tag => (
-                  <li key={tag} className={styles.heroTag}>
-                    {tag}
-                  </li>
-                ))}
-              </ul>
+    AgendaTypeClassMap[normalized] ||
+    fallbackOrder[index % fallbackOrder.length]
+  );
+};
 
-              <h1 className={styles.title}>{name as string}</h1>
-              <p className={styles.description}>{summary as string}</p>
+const agendaTypeLabelOf = (
+  type: TableCellValue,
+  t: (key: I18nKey) => string,
+  fallback = "-",
+) => {
+  const normalized = type?.toString().toLowerCase() || "";
+  const i18nKey = AgendaTypeLabelMap[normalized];
 
-              <ul className="list-unstyled d-flex flex-wrap gap-3 mt-4 mb-0">
-                {heroStats.map(({ label, value }) => (
-                  <li key={label} className={styles.statChip}>
-                    {value} {label}
-                  </li>
-                ))}
-              </ul>
+  return i18nKey ? t(i18nKey) : type?.toString() || fallback;
+};
+
+const HackathonDetail: FC<HackathonDetailProps> = observer(
+  ({ activity, hackathon }) => {
+    const { t } = useContext(I18nContext);
+
+    const {
+        name,
+        summary,
+        location,
+        startTime,
+        endTime,
+        databaseSchema,
+        host,
+        image,
+        type: activityType,
+      } = activity,
+      { people, organizations, agenda, prizes, templates, projects } =
+        hackathon;
+    const forms = ((databaseSchema as Partial<BiTableSchema> | undefined)
+      ?.forms || {}) as Partial<Record<FormGroupKey, TableFormView[]>>;
+    const agendaItems = [...agenda].sort(
+      ({ startedAt: left }, { startedAt: right }) =>
+        new Date((left as string) || 0).getTime() -
+        new Date((right as string) || 0).getTime(),
+    );
+    const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
+    const eventRange = formatPeriod(startTime, endTime);
+    const locationText =
+      (location as TableCellLocation | undefined)?.full_address || "-";
+    const heroBadges = [
+      (activityType as string) || t("hackathon"),
+      ...hostTags,
+      formatMoment(startTime),
+      formatMoment(endTime),
+    ].filter(Boolean);
+    const heroStats = [
+      { label: t("participants"), value: people.length },
+      { label: t("projects"), value: projects.length },
+      { label: t("templates"), value: templates.length },
+      { label: t("prizes"), value: prizes.length },
+    ];
+    const agendaPreview = agendaItems.slice(0, 3);
+    const overviewPills = agendaItems.slice(0, 6);
+
+    const formGroups = FormButtonBar.flatMap<FormGroup>((key) => {
+      const list = (forms[key] || []).filter(isPublicForm);
+
+      return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+    });
+    const primaryForm =
+      formGroups.find(({ key }) => key === "Person") ||
+      formGroups.find(({ key }) => key === "Project") ||
+      formGroups[0];
+    const secondaryForm =
+      formGroups.find(
+        ({ key }) => key === "Project" && key !== primaryForm?.key,
+      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
+    const formPreview =
+      formGroups
+        .map(({ meta }) => t(meta.eyebrow))
+        .filter(Boolean)
+        .slice(0, 2)
+        .join(" · ") || t("hackathon_action_hub");
+
+    const highlightCards = [
+      {
+        icon: HighlightIcons[0],
+        title: t("participants"),
+        value: people.length,
+        description: t(FormSectionMeta.Person.description),
+      },
+      {
+        icon: HighlightIcons[1],
+        title: t("projects"),
+        value: projects.length,
+        description: t(FormSectionMeta.Project.description),
+      },
+      {
+        icon: HighlightIcons[2],
+        title: t("templates"),
+        value: templates.length,
+        description: previewText(
+          templates.map(({ name }) => name),
+          t("templates"),
+        ),
+      },
+      {
+        icon: HighlightIcons[3],
+        title: t("prizes"),
+        value: prizes.length,
+        description: previewText(
+          prizes.map(({ name }) => name),
+          t("hackathon_prizes"),
+        ),
+      },
+      {
+        icon: HighlightIcons[4],
+        title: t("organizations"),
+        value: organizations.length,
+        description: previewText(
+          organizations.map(({ name }) => name),
+          t("organizations"),
+        ),
+      },
+      {
+        icon: HighlightIcons[5],
+        title: t("agenda"),
+        value: agendaItems.length,
+        description: previewText(
+          agendaItems.map(({ name }) => name),
+          eventRange || t("agenda"),
+        ),
+      },
+    ];
+
+    return (
+      <>
+        <PageHead title={name as string} />
+
+        <section className={styles.hero}>
+          <Container>
+            <div className={styles.heroInner}>
+              <div className={styles.heroContent}>
+                <ul className={`list-unstyled ${styles.heroEyebrow}`}>
+                  {heroBadges.map((badge, index) => (
+                    <li
+                      key={`${badge}-${index}`}
+                      className={`${styles.heroBadge} ${styles[HeroBadgeTone[index % HeroBadgeTone.length]]}`}
+                    >
+                      {badge}
+                    </li>
+                  ))}
+                </ul>
+
+                <h1 className={styles.title}>
+                  <span className={styles.heroTitlePrimary}>
+                    {name as string}
+                  </span>
+                  <span className={styles.heroTitleSecondary}>
+                    {(activityType as string) || t("hackathon_detail")}
+                  </span>
+                </h1>
+
+                <p className={styles.description}>{summary as string}</p>
+
+                <nav
+                  className={styles.heroActions}
+                  aria-label={t("hackathon_action_hub")}
+                >
+                  {primaryForm ? (
+                    <a
+                      className={styles.actionButton}
+                      href={primaryForm.list[0].shared_url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {t(primaryForm.meta.title)}
+                    </a>
+                  ) : (
+                    <a className={styles.actionButton} href="#entry-hub">
+                      {t("hackathon_entry_flow")}
+                    </a>
+                  )}
+
+                  <a className={styles.actionButtonGhost} href="#schedule">
+                    {t("agenda")}
+                  </a>
+                </nav>
+
+                <ul className={`list-unstyled ${styles.heroStats}`}>
+                  {heroStats.map(({ label, value }) => (
+                    <li key={label} className={styles.statChip}>
+                      <strong>{value}</strong>
+                      <span>{label}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className={styles.heroVisual}>
+                <div className={styles.heroVisualCard}>
+                  <div className={styles.heroVisualHead}>
+                    <span className={styles.visualKicker}>
+                      {t("event_info")}
+                    </span>
+                    <span className={styles.visualChip}>
+                      {t("hackathon_detail")}
+                    </span>
+                  </div>
+
+                  <figure className={styles.heroImageFrame}>
+                    <div className={styles.mascotGlow} />
+
+                    {image ? (
+                      <LarkImage
+                        src={image}
+                        alt={name as string}
+                        className="w-100 h-100 object-fit-cover"
+                      />
+                    ) : (
+                      <div className={styles.heroImageFallback}>
+                        {(activityType as string) || t("hackathon")}
+                      </div>
+                    )}
+                  </figure>
+
+                  <div className={styles.heroVisualFoot}>
+                    <p className={styles.heroVisualTitle}>{locationText}</p>
+                    <p className={styles.heroVisualCopy}>
+                      {eventRange || (summary as string)}
+                    </p>
+                  </div>
+                </div>
 
-              <nav className="d-flex flex-wrap gap-3 mt-4">
                 {primaryForm && (
-                  <Button href={primaryForm.list[0].shared_url} target="_blank" rel="noreferrer">
-                    {t(primaryForm.meta.title)}
-                  </Button>
-                )}
-                {secondaryForm && (
-                  <Button
-                    href={secondaryForm.list[0].shared_url}
-                    target="_blank"
-                    rel="noreferrer"
-                    variant="light"
+                  <div
+                    className={`${styles.heroFloatingCard} ${styles.heroFloatingCardTop}`}
                   >
-                    {t(secondaryForm.meta.title)}
-                  </Button>
-                )}
-                {formGroups[0] && (
-                  <Button href="#entry-hub" variant="outline-light">
-                    {t('hackathon_view_all_entries')}
-                  </Button>
+                    <span className={styles.floatingLabel}>
+                      {t(primaryForm.meta.eyebrow)}
+                    </span>
+                    <strong>{t(primaryForm.meta.title)}</strong>
+                    <p>{t(primaryForm.meta.description)}</p>
+                  </div>
                 )}
-              </nav>
-
-              <Row className="mt-4 g-3" md={2}>
-                <Col>
-                  <Card className={styles.infoCard} body>
-                    <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
-                    <address className="text-white-50 mb-0 fst-normal">
-                      {(location as TableCellLocation)?.full_address}
-                    </address>
-                  </Card>
-                </Col>
-                <Col>
-                  <Card className={styles.infoCard} body>
-                    <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
-                    <p className="text-white-50 mb-0">
-                      <time dateTime={startTime as string}>{formatDate(startTime as string)}</time>{' '}
-                      - <time dateTime={endTime as string}>{formatDate(endTime as string)}</time>
+
+                {agendaPreview[0] && (
+                  <div
+                    className={`${styles.heroFloatingCard} ${styles.heroFloatingCardBottom}`}
+                  >
+                    <span className={styles.floatingLabel}>
+                      {t("hackathon_agenda_preview")}
+                    </span>
+                    <strong>{agendaPreview[0].name as string}</strong>
+                    <p>
+                      {formatPeriod(
+                        agendaPreview[0].startedAt,
+                        agendaPreview[0].endedAt,
+                      )}
                     </p>
-                  </Card>
-                </Col>
-              </Row>
-            </Col>
-
-            <Col lg={5}>
-              <Card className={styles.heroVisualCard}>
-                {image && (
-                  <div className={styles.heroImageWrap}>
-                    <LarkImage
-                      src={image}
-                      alt={name as string}
-                      className="w-100 h-100 object-fit-cover"
-                    />
                   </div>
                 )}
-                <Card.Body>
-                  {agendaPreview[0] && (
-                    <dl className="d-grid gap-3 mb-0">
-                      <div className={`${styles.heroVisualHead} ${styles.heroVisualItem}`}>
-                        <dt className={styles.heroVisualKicker}>{t('hackathon_agenda_preview')}</dt>
-                        <dd className="fw-semibold">{agendaPreview[0].name as string}</dd>
-                      </div>
+              </div>
+            </div>
+          </Container>
+        </section>
 
-                      {agendaPreview.map(({ name, startedAt, endedAt }) => (
-                        <div
-                          key={`${name as string}-${startedAt as string}`}
-                          className={styles.heroVisualItem}
-                        >
-                          <dt className="fw-semibold">{name as string}</dt>
-                          <dd>
-                            <time dateTime={startedAt as string}>
-                              {formatDate(startedAt as string)}
-                            </time>{' '}
-                            -{' '}
-                            <time dateTime={endedAt as string}>
-                              {formatDate(endedAt as string)}
-                            </time>
-                          </dd>
-                        </div>
-                      ))}
-                    </dl>
-                  )}
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-        </Container>
-      </section>
-
-      <Container className="my-5">
-        {formGroups[0] && (
-          <section id="entry-hub" className={styles.section}>
-            <hgroup className="mb-0">
-              <p className={styles.sectionEyebrow}>{t('hackathon_action_hub')}</p>
-              <h2 className={styles.sectionTitle}>{t('hackathon_entry_flow')}</h2>
-              <p className={styles.sectionLead}>{t('hackathon_entry_flow_description')}</p>
-            </hgroup>
-
-            <Row as="ol" className="list-unstyled mt-4 g-3" md={2} xl={4}>
-              {formGroups.map(({ key, list, meta }, index) => (
-                <Col as="li" key={key}>
-                  <Card className={styles.entryCard} body>
-                    <span className={styles.entryStep}>
-                      {t('hackathon_step')} {String(index + 1).padStart(2, '0')} · {t(meta.eyebrow)}
+        <section className={styles.section}>
+          <Container>
+            <header className={styles.sectionHeader}>
+              <h2 className={styles.sectionTitle}>{t("event_info")}</h2>
+              <p className={styles.sectionSubtitle}>{t("event_description")}</p>
+              <div className={styles.accentLine} />
+            </header>
+
+            <div className={styles.themePanel}>
+              <div className={styles.themeText}>
+                {(activityType as string) || t("hackathon")}
+              </div>
+              <p className={styles.themeSub}>{summary as string}</p>
+            </div>
+
+            <Row className="g-3 mt-1">
+              {highlightCards.map(({ icon, title, value, description }) => (
+                <Col key={title} md={6} xl={4}>
+                  <article className={styles.trackCard}>
+                    <span className={styles.trackIcon}>{icon}</span>
+                    <div className={styles.trackName}>{title}</div>
+                    <p className={styles.trackDesc}>{description}</p>
+                    <span className={styles.trackMetric}>
+                      {value} {title}
                     </span>
-                    <h3 className="h5 text-white mt-2">{t(meta.title)}</h3>
-                    <p className="text-white-50 mb-3">{t(meta.description)}</p>
-                    <nav className="d-grid gap-2">
-                      {list.map(({ name, shared_url }) => (
-                        <Button
-                          key={name}
-                          href={shared_url}
+                  </article>
+                </Col>
+              ))}
+            </Row>
+          </Container>
+        </section>
+
+        {formGroups[0] && (
+          <section
+            id="entry-hub"
+            className={`${styles.section} ${styles.registerSection}`}
+          >
+            <Container>
+              <div className={styles.registerWrap}>
+                <article className={styles.registerCard}>
+                  <div className={styles.registerCardInner}>
+                    <p className={styles.regEyebrow}>
+                      {t("hackathon_action_hub")}
+                    </p>
+                    <h2 className={styles.regTitle}>
+                      {primaryForm
+                        ? t(primaryForm.meta.title)
+                        : t("hackathon_entry_flow")}
+                    </h2>
+                    <p className={styles.regDesc}>
+                      {primaryForm
+                        ? t(primaryForm.meta.description)
+                        : t("hackathon_entry_flow_description")}
+                    </p>
+
+                    <nav
+                      className={styles.regActions}
+                      aria-label={t("hackathon_entry_flow")}
+                    >
+                      {primaryForm && (
+                        <a
+                          className={styles.actionButton}
+                          href={primaryForm.list[0].shared_url}
                           target="_blank"
                           rel="noreferrer"
-                          variant="light"
                         >
-                          {name}
-                        </Button>
-                      ))}
+                          {t(primaryForm.meta.title)}
+                        </a>
+                      )}
+
+                      {secondaryForm ? (
+                        <a
+                          className={styles.actionButtonGhost}
+                          href={secondaryForm.list[0].shared_url}
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {t(secondaryForm.meta.title)}
+                        </a>
+                      ) : (
+                        <a
+                          className={styles.actionButtonGhost}
+                          href="#schedule"
+                        >
+                          {t("agenda")}
+                        </a>
+                      )}
                     </nav>
-                  </Card>
-                </Col>
-              ))}
-            </Row>
+
+                    <ul className={`list-unstyled ${styles.regFacts}`}>
+                      <li>{eventRange || t("event_duration")}</li>
+                      <li>{locationText}</li>
+                      <li>{formPreview}</li>
+                    </ul>
+                  </div>
+                </article>
+
+                <div className={styles.entryHub}>
+                  <header className={styles.entryHubHead}>
+                    <p className={styles.entryEyebrow}>
+                      {t("hackathon_entry_flow")}
+                    </p>
+                    <h3 className={styles.entryTitle}>
+                      {t("hackathon_action_hub")}
+                    </h3>
+                    <p className={styles.entryCopy}>
+                      {t("hackathon_entry_flow_description")}
+                    </p>
+                  </header>
+
+                  <Row as="ol" className="list-unstyled g-3 mb-0">
+                    {formGroups.map(({ key, list, meta }, index) => (
+                      <Col as="li" key={key} md={6}>
+                        <article className={styles.entryCard}>
+                          <span className={styles.entryStep}>
+                            {t("hackathon_step")}{" "}
+                            {String(index + 1).padStart(2, "0")} ·{" "}
+                            {t(meta.eyebrow)}
+                          </span>
+                          <h4>{t(meta.title)}</h4>
+                          <p>{t(meta.description)}</p>
+
+                          <div className={styles.entryMetaRow}>
+                            <span className={styles.entryMeta}>
+                              {list.length}
+                            </span>
+                            <span className={styles.entryMeta}>
+                              {t(meta.eyebrow)}
+                            </span>
+                          </div>
+
+                          <nav
+                            className={styles.entryLinks}
+                            aria-label={t(meta.title)}
+                          >
+                            {list.map(({ name, shared_url }) => (
+                              <a
+                                key={`${name}-${shared_url}`}
+                                className={styles.entryLink}
+                                href={shared_url}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {name}
+                              </a>
+                            ))}
+                          </nav>
+                        </article>
+                      </Col>
+                    ))}
+                  </Row>
+                </div>
+              </div>
+            </Container>
           </section>
         )}
 
-        <section className={`${styles.section} ${styles.prizeSection}`}>
-          <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
-          <div className="mt-4">
-            <UserRankView
-              title={t('prizes')}
-              rank={prizes.map(({ name, image, price }, index) => ({
-                id: `prize-${index}`,
-                name: name as string,
-                avatar: fileURLOf(image),
-                score: price as number,
-              }))}
-            />
-          </div>
-        </section>
+        {agendaItems[0] && (
+          <section id="schedule" className={styles.section}>
+            <Container>
+              <header className={styles.sectionHeader}>
+                <h2 className={styles.sectionTitle}>{t("agenda")}</h2>
+                <p className={styles.sectionSubtitle}>{t("event_duration")}</p>
+                <div className={styles.accentLine} />
+              </header>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
-          <ol className="list-unstyled mt-4">
-            {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
-              <li
-                key={name as string}
-                className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || 'break']}`}
-              >
-                <h5 className="text-white mb-2">{name as string}</h5>
-                <p className="text-white-50 small mb-2">{summary as string}</p>
-                <div className="d-flex justify-content-between align-items-center">
-                  <Badge bg={text2color(type as string)} className="me-2">
-                    {t(type as I18nKey)}
-                  </Badge>
-                  <div className="text-white-50 small">
-                    {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
-                  </div>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </section>
+              <div className={styles.scheduleIntro}>
+                <p className={styles.scheduleKicker}>{eventRange}</p>
+                <h3 className={styles.scheduleLead}>{name as string}</h3>
+                <p className={styles.scheduleCopy}>{summary as string}</p>
+              </div>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
-          <nav className={styles.orgContainer}>
-            {organizations.map(({ name, link, logo }) => (
-              <a
-                key={name as string}
-                href={link as string}
-                target="_blank"
-                rel="noreferrer"
-                title={name as string}
-              >
-                <LarkImage src={logo} alt={name as string} className={styles.orgLogo} />
-              </a>
-            ))}
-          </nav>
-        </section>
+              <div className={styles.scheduleOverview}>
+                {overviewPills.map(({ id, name }) => (
+                  <div key={id} className={styles.schedulePill}>
+                    {name as string}
+                  </div>
+                ))}
+              </div>
 
-        <section className={`${styles.section} ${styles.templateSection}`}>
-          <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
-          <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
-            {templates.map(({ name, languages, tags, sourceLink, summary, previewLink }) => (
-              <Col key={name as string}>
-                <GitCard
-                  full_name={name as string}
-                  html_url={sourceLink as string}
-                  languages={languages as string[]}
-                  topics={tags as string[]}
-                  description={summary as string}
-                  homepage={previewLink as string}
-                />
-              </Col>
-            ))}
-          </Row>
-        </section>
+              <div className={styles.scheduleDays}>
+                {agendaItems.map(
+                  ({ id, name, type, summary, startedAt, endedAt }, index) => {
+                    const toneClass = agendaToneClassOf(type, index);
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
-
-          <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
-            {projects.map(({ id, name, score, summary, createdBy, members }) => (
-              <Col as="li" key={name as string}>
-                <Card className={styles.projectCard} body>
-                  <div className="d-flex justify-content-between align-items-start mb-3">
-                    <h6 className="text-white flex-grow-1">
-                      <Link
-                        className="stretched-link"
-                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                    return (
+                      <article
+                        key={id}
+                        className={`${styles.dayCard} ${styles[toneClass]}`}
                       >
-                        {name as string}
-                      </Link>
-                    </h6>
-                    <div className={styles.scoreCircle}>{score as number}</div>
-                  </div>
-                  <p className="text-white-50 small mb-3">{summary as string}</p>
-                  <div className="text-white-50 small mb-2">
-                    <strong>{t('created_by')}:</strong>{' '}
-                    <a href={`mailto:${(createdBy as TableCellUser)?.email}`}>
-                      {(createdBy as TableCellUser)?.name}
-                    </a>
+                        <div className={styles.dayCardHead}>
+                          <span className={styles.dayNo}>
+                            PHASE {String(index + 1).padStart(2, "0")}
+                          </span>
+                          <time
+                            className={styles.dayDate}
+                            dateTime={startedAt as string}
+                          >
+                            {formatPeriod(startedAt, endedAt)}
+                          </time>
+                        </div>
+
+                        <h3 className={styles.dayTitle}>{name as string}</h3>
+                        <p className={styles.daySub}>
+                          {(summary as string) || agendaTypeLabelOf(type, t)}
+                        </p>
+
+                        <dl className={styles.dayAgenda}>
+                          <div>
+                            <dt className={styles.timePill}>{t("type")}</dt>
+                            <dd className={styles.agendaCopy}>
+                              <strong>{agendaTypeLabelOf(type, t)}</strong>
+                              <span>
+                                {(summary as string) ||
+                                  eventRange ||
+                                  locationText}
+                              </span>
+                            </dd>
+                          </div>
+
+                          <div>
+                            <dt className={styles.timePill}>
+                              {t("start_time")}
+                            </dt>
+                            <dd className={styles.agendaCopy}>
+                              <strong>{formatMoment(startedAt)}</strong>
+                              <span>{t("event_duration")}</span>
+                            </dd>
+                          </div>
+
+                          <div>
+                            <dt className={styles.timePill}>{t("end_time")}</dt>
+                            <dd className={styles.agendaCopy}>
+                              <strong>{formatMoment(endedAt)}</strong>
+                              <span>
+                                {t("event_location")}: {locationText}
+                              </span>
+                            </dd>
+                          </div>
+                        </dl>
+                      </article>
+                    );
+                  },
+                )}
+              </div>
+            </Container>
+          </section>
+        )}
+
+        {(prizes[0] || organizations[0]) && (
+          <section className={styles.section}>
+            <Container>
+              {prizes[0] && (
+                <>
+                  <header className={styles.sectionHeader}>
+                    <h2 className={styles.sectionTitle}>{t("prizes")}</h2>
+                    <p className={styles.sectionSubtitle}>
+                      {t("hackathon_prizes")}
+                    </p>
+                    <div className={styles.accentLine} />
+                  </header>
+
+                  <div className={styles.awardsGrid}>
+                    {prizes.map(
+                      (
+                        {
+                          id,
+                          name,
+                          image,
+                          summary,
+                          level,
+                          sponsor,
+                          price,
+                          amount,
+                        },
+                        index,
+                      ) => (
+                        <article key={id} className={styles.badgeTile}>
+                          {image && (
+                            <div className={styles.badgeArtWrap}>
+                              <LarkImage
+                                src={image}
+                                alt={name as string}
+                                className={styles.badgeArt}
+                              />
+                            </div>
+                          )}
+
+                          <div className={styles.badgeTileBody}>
+                            <span className={styles.badgeTierLabel}>
+                              {(level as string) || `#${index + 1}`}
+                            </span>
+                            <h3 className={styles.badgeTileTitle}>
+                              {name as string}
+                            </h3>
+                            <p className={styles.badgeTileCopy}>
+                              {(summary as string) ||
+                                previewText(
+                                  [sponsor, price, amount],
+                                  t("prizes"),
+                                )}
+                            </p>
+
+                            <dl className={styles.prizeMeta}>
+                              {sponsor && (
+                                <div>
+                                  <dt>{t("sponsor")}</dt>
+                                  <dd>{sponsor as string}</dd>
+                                </div>
+                              )}
+                              {price && (
+                                <div>
+                                  <dt>{t("price")}</dt>
+                                  <dd>{price as string}</dd>
+                                </div>
+                              )}
+                              {amount && (
+                                <div>
+                                  <dt>{t("amount")}</dt>
+                                  <dd>{amount as string}</dd>
+                                </div>
+                              )}
+                            </dl>
+                          </div>
+                        </article>
+                      ),
+                    )}
                   </div>
-                  <div className="text-white-50 small">
-                    <strong>{t('members')}:</strong>{' '}
-                    {(members as string[] | undefined)?.join(', ') || '-'}
+                </>
+              )}
+
+              {organizations[0] && (
+                <div className={styles.supportCard}>
+                  <div className={styles.supportCopy}>
+                    <p className={styles.supportEyebrow}>
+                      {t("organizations")}
+                    </p>
+                    <h3 className={styles.supportTitle}>
+                      {previewText(
+                        organizations.map(({ name }) => name),
+                        t("organizations"),
+                      )}
+                    </h3>
+                    <p className={styles.supportDescription}>
+                      {summary as string}
+                    </p>
                   </div>
-                </Card>
-              </Col>
-            ))}
-          </Row>
-        </section>
 
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
-          <nav className={styles.participantCloud}>
-            {people.map(({ name, avatar, githubLink }) => (
-              <a
-                key={name as string}
-                className="text-center"
-                target="_blank"
-                rel="noreferrer"
-                href={githubLink as string}
-              >
-                <LarkImage
-                  className={styles.avatar}
-                  src={avatar}
-                  alt={name as string}
-                  title={name as string}
-                />
-              </a>
-            ))}
-          </nav>
-        </section>
-      </Container>
-    </>
-  );
-});
+                  <nav
+                    className={styles.partnerGrid}
+                    aria-label={t("organizations")}
+                  >
+                    {organizations.map(({ id, name, link, logo }) => {
+                      const imageNode = (
+                        <LarkImage
+                          src={logo}
+                          alt={name as string}
+                          className={styles.partnerLogo}
+                        />
+                      );
+
+                      return link ? (
+                        <a
+                          key={id}
+                          href={link as string}
+                          target="_blank"
+                          rel="noreferrer"
+                          title={name as string}
+                          className={styles.partnerLink}
+                        >
+                          {imageNode}
+                        </a>
+                      ) : (
+                        <div
+                          key={id}
+                          className={styles.partnerLink}
+                          title={name as string}
+                        >
+                          {imageNode}
+                        </div>
+                      );
+                    })}
+                  </nav>
+                </div>
+              )}
+            </Container>
+          </section>
+        )}
+
+        {(templates[0] || projects[0]) && (
+          <section className={styles.section}>
+            <Container>
+              {templates[0] && (
+                <>
+                  <header className={styles.sectionHeader}>
+                    <h2 className={styles.sectionTitle}>{t("templates")}</h2>
+                    <p className={styles.sectionSubtitle}>{t("source_code")}</p>
+                    <div className={styles.accentLine} />
+                  </header>
+
+                  <Row className="g-3">
+                    {templates.map(
+                      ({
+                        id,
+                        name,
+                        languages,
+                        tags,
+                        sourceLink,
+                        summary,
+                        previewLink,
+                      }) => (
+                        <Col key={id} md={6} xl={4}>
+                          <article className={styles.resourceCard}>
+                            <div className={styles.resourceHead}>
+                              <h3 className={styles.resourceTitle}>
+                                {name as string}
+                              </h3>
+                            </div>
+                            <p className={styles.resourceDescription}>
+                              {summary as string}
+                            </p>
+
+                            <ul className={`list-unstyled ${styles.topicList}`}>
+                              {(languages as string[]).map((language) => (
+                                <li key={language} className={styles.topicChip}>
+                                  {language}
+                                </li>
+                              ))}
+                              {(tags as string[]).map((tag) => (
+                                <li key={tag} className={styles.topicChipMuted}>
+                                  {tag}
+                                </li>
+                              ))}
+                            </ul>
+
+                            <nav
+                              className={styles.resourceLinks}
+                              aria-label={name as string}
+                            >
+                              {sourceLink && (
+                                <a
+                                  className={styles.entryLink}
+                                  href={sourceLink as string}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                >
+                                  {t("source_code")}
+                                </a>
+                              )}
+                              {previewLink && (
+                                <a
+                                  className={styles.entryLink}
+                                  href={previewLink as string}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                >
+                                  {t("preview")}
+                                </a>
+                              )}
+                            </nav>
+                          </article>
+                        </Col>
+                      ),
+                    )}
+                  </Row>
+                </>
+              )}
+
+              {projects[0] && (
+                <>
+                  <header
+                    className={`${styles.sectionHeader} ${styles.projectHeader}`}
+                  >
+                    <h2 className={styles.sectionTitle}>{t("projects")}</h2>
+                    <p className={styles.sectionSubtitle}>{t("products")}</p>
+                    <div className={styles.accentLine} />
+                  </header>
+
+                  <Row className="g-3">
+                    {projects.map(
+                      ({ id, name, score, summary, createdBy, members }) => {
+                        const creator = createdBy as TableCellUser | undefined;
+                        const scoreText =
+                          score === null || score === undefined || score === ""
+                            ? "—"
+                            : `${score}`;
+                        const memberNames =
+                          (members as string[] | undefined)?.join(", ") || "—";
+
+                        return (
+                          <Col key={id} md={6} xl={4}>
+                            <article className={styles.projectCard}>
+                              <div className={styles.projectHead}>
+                                <h3 className={styles.projectTitle}>
+                                  <Link
+                                    href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                                  >
+                                    {name as string}
+                                  </Link>
+                                </h3>
+                                <div className={styles.scoreCircle}>
+                                  {scoreText}
+                                </div>
+                              </div>
+
+                              <p className={styles.projectSummary}>
+                                {summary as string}
+                              </p>
+
+                              <dl className={styles.projectMeta}>
+                                <div>
+                                  <dt>{t("created_by")}</dt>
+                                  <dd>
+                                    {creator?.email ? (
+                                      <a href={`mailto:${creator.email}`}>
+                                        {creator.name}
+                                      </a>
+                                    ) : (
+                                      creator?.name || "—"
+                                    )}
+                                  </dd>
+                                </div>
+                                <div>
+                                  <dt>{t("members")}</dt>
+                                  <dd>{memberNames}</dd>
+                                </div>
+                              </dl>
+                            </article>
+                          </Col>
+                        );
+                      },
+                    )}
+                  </Row>
+                </>
+              )}
+            </Container>
+          </section>
+        )}
+
+        {people[0] && (
+          <section className={styles.section}>
+            <Container>
+              <header className={styles.sectionHeader}>
+                <h2 className={styles.sectionTitle}>{t("participants")}</h2>
+                <p className={styles.sectionSubtitle}>{t("github_account")}</p>
+                <div className={styles.accentLine} />
+              </header>
+
+              <div className={styles.participantCloud}>
+                {people.map(({ id, name, avatar, githubLink }) => {
+                  const content = (
+                    <>
+                      <LarkImage
+                        className={styles.avatar}
+                        src={avatar}
+                        alt={name as string}
+                        title={name as string}
+                      />
+                      <span className={styles.participantName}>
+                        {name as string}
+                      </span>
+                    </>
+                  );
+
+                  return githubLink ? (
+                    <a
+                      key={id}
+                      className={styles.participantCard}
+                      target="_blank"
+                      rel="noreferrer"
+                      href={githubLink as string}
+                    >
+                      {content}
+                    </a>
+                  ) : (
+                    <div key={id} className={styles.participantCard}>
+                      {content}
+                    </div>
+                  );
+                })}
+              </div>
+            </Container>
+          </section>
+        )}
+      </>
+    );
+  },
+);
 
 export default HackathonDetail;
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index cb62098..80aafed 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -1,382 +1,1138 @@
-// Tech-themed hackathon styling with blue-purple gradient and pink cards
+@bg: #050814;
+@bg-soft: #0b1328;
+@panel: rgba(8, 18, 39, 0.76);
+@panel-strong: rgba(6, 13, 30, 0.92);
+@border: rgba(120, 160, 255, 0.18);
+@copy: #eef5ff;
+@muted: rgba(220, 232, 255, 0.72);
+@cyan: #2ce8ff;
+@gold: #ffc94d;
+@green: #48f1a8;
+@rose: #ff78ba;
+@purple: #7b61ff;
+@shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
+@heading: "Orbitron", "Avenir Next", "Segoe UI", sans-serif;
+@body: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
 
 .hero {
   position: relative;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  padding: 4rem 0;
   overflow: hidden;
-  color: #fff;
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(44, 232, 255, 0.18),
+      transparent 32%
+    ),
+    radial-gradient(
+      circle at 85% 12%,
+      rgba(255, 120, 186, 0.15),
+      transparent 24%
+    ),
+    linear-gradient(180deg, @bg 0%, #091022 48%, #050814 100%);
+  padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
+  color: @copy;
 
-  &::before {
+  &::before,
+  &::after {
     position: absolute;
-    top: -50%;
-    left: -50%;
-    animation: grid-animation 20s linear infinite;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-    background-size: 50px 50px;
-    width: 200%;
-    height: 200%;
+    inset: 0;
     pointer-events: none;
-    content: '';
+    content: "";
   }
-}
 
-@keyframes grid-animation {
-  0% {
-    transform: translate(0, 0);
+  &::before {
+    background-image:
+      linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
+    background-size: 54px 54px;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
+    opacity: 0.45;
   }
-  100% {
-    transform: translate(50px, 50px);
+
+  &::after {
+    inset: auto 0 0;
+    height: 140px;
+    background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
   }
 }
 
-.title {
-  margin-bottom: 1rem;
-  font-weight: 700;
-  font-size: 3rem;
-  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+.heroInner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
+  gap: clamp(2rem, 4vw, 4rem);
+  align-items: center;
 }
 
-.description {
-  opacity: 0.9;
-  margin: 0 auto;
-  max-width: 800px;
-  font-size: 1.2rem;
+.heroContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1.35rem;
 }
 
-.heroTag {
-  display: inline-flex;
-  align-items: center;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 999px;
-  background: rgba(4, 4, 15, 0.28);
-  padding: 0.45rem 0.9rem;
-  color: #fff;
-  font-weight: 600;
-  font-size: 0.9rem;
+.heroEyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 0;
 }
 
-.statChip {
+.heroBadge {
   display: inline-flex;
   align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.12);
-  padding: 0.5rem 0.95rem;
-  color: #fff;
-  font-weight: 600;
-  font-size: 0.9rem;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.42rem 0.9rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.heroVisualCard {
-  box-shadow: 0 18px 50px rgba(10, 12, 30, 0.35);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 24px;
-  background: linear-gradient(135deg, rgba(10, 12, 30, 0.82), rgba(37, 44, 84, 0.62));
-  overflow: hidden;
+.heroBadgeCyan {
+  box-shadow: 0 0 18px rgba(44, 232, 255, 0.22);
+  border-color: rgba(44, 232, 255, 0.28);
+  color: @cyan;
+}
+
+.heroBadgeGold {
+  box-shadow: 0 0 18px rgba(255, 201, 77, 0.18);
+  border-color: rgba(255, 201, 77, 0.24);
+  color: @gold;
+}
+
+.heroBadgeGreen {
+  box-shadow: 0 0 18px rgba(72, 241, 168, 0.2);
+  border-color: rgba(72, 241, 168, 0.24);
+  color: @green;
+}
+
+.heroBadgeRose {
+  box-shadow: 0 0 18px rgba(255, 120, 186, 0.18);
+  border-color: rgba(255, 120, 186, 0.24);
+  color: @rose;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin: 0;
+  font-family: @heading;
+  font-size: clamp(2.6rem, 5vw, 4.45rem);
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+.heroTitlePrimary {
   color: #fff;
 }
 
-.heroImageWrap {
-  background: rgba(255, 255, 255, 0.05);
-  aspect-ratio: 16 / 10;
+.heroTitleSecondary {
+  background: linear-gradient(90deg, @cyan, @gold 78%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: clamp(1.05rem, 2vw, 1.6rem);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
-.heroVisualKicker {
-  opacity: 0.72;
-  font-size: 0.8rem;
+.description {
+  max-width: 62ch;
+  margin: 0;
+  color: @muted;
+  font-family: @body;
+  font-size: 1.05rem;
+  line-height: 1.8;
+}
+
+.heroActions,
+.regActions,
+.resourceLinks,
+.entryLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.actionButton,
+.actionButtonGhost,
+.entryLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease,
+    border-color 0.22s ease,
+    background 0.22s ease,
+    color 0.22s ease;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0.9rem 1.35rem;
+  font-family: @heading;
+  font-size: 0.82rem;
+  font-weight: 700;
   letter-spacing: 0.08em;
+  text-align: center;
+  text-decoration: none;
   text-transform: uppercase;
+
+  &:hover {
+    transform: translateY(-2px);
+    text-decoration: none;
+  }
 }
 
-.heroVisualItem {
+.actionButton {
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border-color: rgba(44, 232, 255, 0.3);
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+
+  &:hover {
+    box-shadow: 0 0 34px rgba(44, 232, 255, 0.28);
+    background: rgba(44, 232, 255, 0.2);
+    color: #fff;
+  }
+}
+
+.actionButtonGhost,
+.entryLink {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: @copy;
+
+  &:hover {
+    border-color: rgba(255, 201, 77, 0.24);
+    background: rgba(255, 201, 77, 0.1);
+    color: @gold;
+  }
+}
+
+.heroStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  margin: 0;
+}
+
+.statChip {
   display: flex;
   flex-direction: column;
-  gap: 0.3rem;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  gap: 0.1rem;
+  min-width: 108px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.06);
   padding: 0.85rem 1rem;
 
-  dt {
-    margin: 0;
+  strong {
+    font-family: @heading;
+    font-size: 1.25rem;
+    line-height: 1.1;
   }
 
-  dd {
-    opacity: 0.74;
-    margin: 0;
-    font-size: 0.88rem;
+  span {
+    color: @muted;
+    font-size: 0.82rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
   }
 }
 
-.heroVisualHead dd {
-  opacity: 1;
+.heroVisual {
+  position: relative;
+  min-height: 580px;
+}
+
+.heroVisualCard,
+.registerCard,
+.entryHub,
+.trackCard,
+.badgeTile,
+.resourceCard,
+.projectCard,
+.dayCard,
+.supportCard,
+.darkCard,
+.lightCard {
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  backdrop-filter: blur(18px);
+}
+
+.heroVisualCard {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  background: linear-gradient(
+    180deg,
+    rgba(11, 19, 40, 0.95),
+    rgba(8, 18, 39, 0.9)
+  );
+}
+
+.heroVisualHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 1.15rem 1.25rem 0;
+}
+
+.visualKicker,
+.visualChip,
+.floatingLabel,
+.regEyebrow,
+.entryEyebrow,
+.supportEyebrow,
+.entryStep,
+.dayNo,
+.sectionSubtitle {
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.visualKicker,
+.floatingLabel,
+.sectionSubtitle,
+.regEyebrow,
+.entryEyebrow,
+.supportEyebrow {
+  color: @muted;
+}
+
+.visualChip {
+  color: @gold;
+}
+
+.heroImageFrame {
+  position: relative;
+  overflow: hidden;
+  margin: 1rem 1.25rem 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.14)
+  );
+  min-height: 340px;
+
+  :global(img) {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.mascotGlow {
+  position: absolute;
+  inset: 12% 18%;
+  z-index: 1;
+  border-radius: 999px;
+  background: radial-gradient(
+    circle,
+    rgba(44, 232, 255, 0.35),
+    transparent 70%
+  );
+  filter: blur(28px);
+}
+
+.heroImageFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 340px;
+  color: @cyan;
+  font-family: @heading;
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.heroVisualFoot {
+  padding: 1.15rem 1.25rem 1.35rem;
+}
+
+.heroVisualTitle {
+  margin: 0 0 0.35rem;
+  color: #fff;
+  font-family: @heading;
   font-size: 1rem;
 }
 
-.infoCard {
-  backdrop-filter: blur(10px);
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+.heroVisualCopy {
+  margin: 0;
+  color: @muted;
+  line-height: 1.75;
+}
 
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
-    border-color: rgba(255, 255, 255, 0.5);
+.heroFloatingCard {
+  position: absolute;
+  z-index: 2;
+  max-width: 260px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 22px;
+  background: rgba(8, 18, 39, 0.88);
+  padding: 1rem 1.1rem;
+
+  strong {
+    display: block;
+    margin-top: 0.35rem;
+    color: #fff;
+    font-size: 1rem;
+    line-height: 1.4;
   }
+
+  p {
+    margin: 0.45rem 0 0;
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.6;
+  }
+}
+
+.heroFloatingCardTop {
+  top: 2.5rem;
+  left: -1.5rem;
+}
+
+.heroFloatingCardBottom {
+  right: -1.5rem;
+  bottom: 1.5rem;
 }
 
-.section {
+.section,
+.registerSection {
   position: relative;
-  padding: 3rem 0;
+  padding: clamp(4rem, 7vw, 6rem) 0;
+  background: linear-gradient(
+    180deg,
+    rgba(5, 8, 20, 0.98),
+    rgba(7, 12, 26, 0.98)
+  );
+  color: @copy;
+}
+
+.registerSection {
+  padding-top: clamp(3rem, 5vw, 4rem);
+}
+
+.sectionHeader {
+  text-align: center;
+  margin-bottom: clamp(2.3rem, 4vw, 3rem);
 }
 
 .sectionTitle {
   display: inline-block;
-  margin-bottom: 2rem;
-  border-bottom: 4px solid;
-  border-image: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) 1;
-  background: linear-gradient(90deg, #f093fb, #f5576c, #ffd140);
-  -webkit-background-clip: text;
-  padding-bottom: 0.5rem;
-  font-weight: 700;
-  font-size: 2rem;
-  -webkit-text-fill-color: transparent;
+  margin: 0;
+  background: linear-gradient(135deg, #fff 20%, @cyan 80%);
   background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-family: @heading;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-.sectionEyebrow {
-  margin-bottom: 0.5rem;
-  color: #7d8ff5;
+.accentLine {
+  width: 72px;
+  height: 2px;
+  margin: 1rem auto 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, @cyan, @purple);
+  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
+}
+
+.themePanel {
+  margin-bottom: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.12)
+  );
+  padding: 1.5rem 1.6rem;
+}
+
+.themeText {
+  margin-bottom: 0.4rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  font-weight: 900;
+}
+
+.themeSub {
+  margin: 0;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.trackCard {
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  height: 100%;
+  padding: 1.4rem;
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
+}
+
+.trackIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.06);
+  width: 54px;
+  height: 54px;
+  font-size: 1.35rem;
+}
+
+.trackName,
+.regTitle,
+.entryTitle,
+.scheduleLead,
+.badgeTileTitle,
+.resourceTitle,
+.projectTitle,
+.supportTitle {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.trackName {
+  font-size: 1.08rem;
+}
+
+.trackDesc,
+.regDesc,
+.entryCopy,
+.scheduleCopy,
+.badgeTileCopy,
+.resourceDescription,
+.projectSummary,
+.supportDescription {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.trackDesc {
+  min-height: 4.8rem;
+  margin: 0.75rem 0 0.95rem;
+}
+
+.trackMetric {
+  color: @cyan;
+  font-family: @heading;
+  font-size: 0.78rem;
   font-weight: 700;
-  font-size: 0.85rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
-.sectionLead {
-  margin: 0;
-  max-width: 760px;
-  color: rgba(33, 37, 41, 0.72);
-  font-size: 1rem;
-  line-height: 1.7;
+.registerWrap {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 1.5rem;
+  align-items: start;
 }
 
-.entryCard {
-  transition: all 0.3s ease;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  background: linear-gradient(135deg, #1d2f72, #5c2f91);
-  min-height: 100%;
-  color: #fff;
+.registerCard {
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.14)
+  );
+}
 
-  &:hover {
-    transform: translateY(-6px);
-    box-shadow: 0 16px 40px rgba(35, 48, 116, 0.25);
+.registerCardInner,
+.entryHub,
+.supportCard {
+  padding: 1.55rem;
+}
+
+.regTitle {
+  margin-top: 0.4rem;
+  font-size: clamp(1.55rem, 3vw, 2.1rem);
+}
+
+.regDesc {
+  margin: 0.9rem 0 1.2rem;
+}
+
+.regFacts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 1.3rem 0 0;
+
+  li {
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    padding: 0.48rem 0.85rem;
+    color: @copy;
+    font-size: 0.9rem;
   }
 }
 
+.entryHubHead {
+  margin-bottom: 1.25rem;
+}
+
+.entryTitle {
+  margin-top: 0.35rem;
+  font-size: 1.55rem;
+}
+
+.entryCard {
+  height: 100%;
+  padding: 1.3rem;
+}
+
 .entryStep {
-  opacity: 0.72;
-  font-size: 0.82rem;
+  color: @cyan;
+}
+
+.entryCard h4 {
+  margin: 0.55rem 0 0.45rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.02rem;
+}
+
+.entryCard p {
+  margin: 0;
+  color: @muted;
+  line-height: 1.7;
+}
+
+.entryMetaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1rem 0;
+}
+
+.entryMeta {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.35rem 0.7rem;
+  color: @gold;
+  font-family: @heading;
+  font-size: 0.72rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 
-// Vibrant cards - Multicolor gradient background
-.darkCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  padding: 1.5rem;
-  color: #fff;
+.scheduleIntro {
+  margin-bottom: 1.35rem;
+  text-align: center;
+}
 
-  &:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
-    background: linear-gradient(135deg, #7d8ff5, #8a5cb8);
-  }
+.scheduleKicker {
+  margin: 0 0 0.35rem;
+  color: @cyan;
+  font-family: @heading;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
-// Bright cards - Warm gradient background
-.lightCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fa709a, #fee140);
-  padding: 1.5rem;
-  color: #1f2937;
+.scheduleLead {
+  font-size: clamp(1.45rem, 3vw, 2.05rem);
+}
 
-  &:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 10px 30px rgba(250, 112, 154, 0.5);
-    background: linear-gradient(135deg, #ff6b9d, #ffa400);
-  }
+.scheduleCopy {
+  max-width: 72ch;
+  margin: 0.8rem auto 0;
 }
 
-// Agenda items with vibrant gradient backgrounds
-.agendaItem {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  border-left: 5px solid;
-  border-radius: 12px;
-  padding: 1.5rem;
+.scheduleOverview {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.schedulePill {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.58rem 0.9rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.74rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.scheduleDays {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.dayCard {
+  height: 100%;
+  padding: 1.35rem;
+}
+
+.formation {
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.1),
+    rgba(14, 43, 80, 0.86)
+  );
+}
+
+.enrollment {
+  background: linear-gradient(
+    135deg,
+    rgba(123, 97, 255, 0.12),
+    rgba(28, 20, 67, 0.86)
+  );
+}
+
+.competition {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 201, 77, 0.12),
+    rgba(60, 35, 8, 0.88)
+  );
+}
+
+.break {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 120, 186, 0.1),
+    rgba(72, 18, 48, 0.88)
+  );
+}
+
+.evaluation {
+  background: linear-gradient(
+    135deg,
+    rgba(72, 241, 168, 0.12),
+    rgba(14, 50, 39, 0.88)
+  );
+}
+
+.dayCardHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: baseline;
+}
+
+.dayNo {
+  color: @muted;
+}
+
+.dayDate {
+  color: @copy;
+  font-size: 0.85rem;
+}
+
+.dayTitle {
+  margin: 0.9rem 0 0.45rem;
   color: #fff;
+  font-family: @heading;
+  font-size: 1.08rem;
+}
 
-  &:hover {
-    transform: translateX(8px) scale(1.02);
-  }
+.daySub {
+  margin: 0 0 1rem;
+  color: @muted;
+  line-height: 1.7;
+}
 
-  &.formation {
-    box-shadow: 0 4px 15px rgba(0, 201, 255, 0.3);
-    border-left-color: #00c9ff;
-    background: linear-gradient(135deg, #00c9ff, #92fe9d);
-  }
+.dayAgenda,
+.prizeMeta,
+.projectMeta {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
 
-  &.enrollment {
-    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
-    border-left-color: #f5576c;
-    background: linear-gradient(135deg, #f5576c, #f093fb);
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.8rem;
+    align-items: start;
   }
 
-  &.competition {
-    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
-    border-left-color: #4facfe;
-    background: linear-gradient(135deg, #4facfe, #00f2fe);
+  dt,
+  dd {
+    margin: 0;
   }
+}
 
-  &.break {
-    box-shadow: 0 4px 15px rgba(255, 209, 64, 0.3);
-    border-left-color: #ffd140;
-    background: linear-gradient(135deg, #ffd140, #ff6b6b);
+.timePill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  min-height: 30px;
+  padding: 0.4rem 0.75rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.agendaCopy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.14rem;
+
+  strong {
+    color: #fff;
+    line-height: 1.4;
   }
 
-  &.evaluation {
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-    border-left-color: #667eea;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+  span {
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.55;
   }
 }
 
-// Prize section using UserRankView
-.prizeSection {
-  margin-bottom: 2rem;
+.awardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.badgeTile {
+  overflow: hidden;
+}
+
+.badgeArtWrap {
+  padding: 1.1rem 1.1rem 0;
+}
+
+.badgeArt {
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.04);
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.badgeTileBody {
+  padding: 1.15rem 1.2rem 1.3rem;
 }
 
-// Organization horizontal layout
-.orgContainer {
+.badgeTierLabel {
+  color: @gold;
+  font-family: @heading;
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.badgeTileTitle {
+  font-size: 1.05rem;
+}
+
+.badgeTileCopy {
+  margin: 0.7rem 0 1rem;
+}
+
+.prizeMeta dt,
+.projectMeta dt {
+  color: @muted;
+  font-family: @heading;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.prizeMeta dd,
+.projectMeta dd {
+  color: #fff;
+  line-height: 1.5;
+}
+
+.supportCard {
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
+  gap: 1.25rem;
+  margin-top: 1.4rem;
+}
+
+.supportTitle {
+  margin-top: 0.35rem;
+  font-size: 1.45rem;
+}
+
+.partnerGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.partnerLink {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
   align-items: center;
-  gap: 2rem;
-  padding: 2rem 0;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  min-height: 104px;
+  padding: 1rem;
 }
 
-.orgLogo {
-  filter: grayscale(0.3);
-  transition: all 0.3s ease;
-  border-radius: 12px;
-  width: 100px;
-  height: 100px;
+.partnerLogo {
+  max-width: 100%;
+  max-height: 58px;
   object-fit: contain;
+}
 
-  &:hover {
-    transform: scale(1.1);
-    filter: grayscale(0);
-  }
+.resourceCard,
+.projectCard {
+  height: 100%;
+  padding: 1.25rem;
 }
 
-// Template section using GitCard
-.templateSection {
-  margin-bottom: 2rem;
+.resourceHead,
+.projectHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
 }
 
-// Project cards with vibrant gradient
-.projectCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1.5rem;
-  border: 2px solid transparent;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  padding: 1.5rem;
-  color: #1f2937;
+.resourceTitle,
+.projectTitle {
+  font-size: 1.02rem;
+}
 
-  &:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 12px 35px rgba(250, 112, 154, 0.4);
-    background: linear-gradient(135deg, #ff6b9d 0%, #ffa400 100%);
-  }
+.resourceTitle,
+.projectTitle a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.scoreCircle {
+.projectTitle a:hover {
+  color: @cyan;
+  text-decoration: none;
+}
+
+.resourceDescription,
+.projectSummary {
+  margin: 0.8rem 0 1rem;
+}
+
+.topicList {
   display: flex;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  margin: 0 0 1rem;
+}
+
+.topicChip,
+.topicChipMuted,
+.skillBadge {
+  display: inline-flex;
   align-items: center;
-  box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);
+  border-radius: 999px;
+  padding: 0.34rem 0.72rem;
+  font-size: 0.76rem;
+}
+
+.topicChip,
+.skillBadge {
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+}
+
+.topicChipMuted {
+  background: rgba(255, 255, 255, 0.08);
+  color: @copy;
+}
+
+.projectHeader {
+  margin-top: 2.75rem;
+}
+
+.scoreCircle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border: 1px solid rgba(44, 232, 255, 0.2);
   border-radius: 50%;
-  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
-  width: 60px;
-  height: 60px;
+  background: rgba(44, 232, 255, 0.1);
+  width: 62px;
+  height: 62px;
+  color: @cyan;
+  font-family: @heading;
+  font-size: 1.05rem;
+  font-weight: 800;
+}
+
+.participantCloud {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.participantCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 1.1rem 0.9rem;
   color: #fff;
-  font-weight: 700;
-  font-size: 1.2rem;
+  text-align: center;
+  text-decoration: none;
+}
+
+.participantCard:hover {
+  color: @cyan;
+  text-decoration: none;
 }
 
-// Circular avatars only for participants
 .avatar {
-  transition: all 0.3s ease;
-  cursor: pointer;
-  box-shadow: 0 0 20px rgba(250, 112, 154, 0.5);
-  border: 4px solid transparent;
+  border: 2px solid rgba(44, 232, 255, 0.2);
   border-radius: 50%;
-  background:
-    linear-gradient(white, white) padding-box,
-    linear-gradient(135deg, #f093fb, #f5576c) border-box;
-  width: 80px;
-  height: 80px;
+  width: 84px;
+  height: 84px;
+  object-fit: cover;
+}
 
-  &:hover {
-    transform: scale(1.15);
-    box-shadow: 0 0 30px rgba(250, 112, 154, 0.7);
-  }
+.participantName {
+  font-size: 0.92rem;
+  line-height: 1.4;
 }
 
-.skillBadge {
-  display: inline-block;
-  margin: 0.25rem;
-  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
-  border-radius: 20px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0.35rem 0.85rem;
-  color: #fff;
-  font-weight: 600;
-  font-size: 0.85rem;
+.darkCard,
+.lightCard {
+  padding: 1.3rem;
+}
+
+.lightCard {
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .techGradient {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  background: linear-gradient(90deg, @cyan, @gold 78%);
   background-clip: text;
-  font-weight: 700;
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
-.glowText {
-  text-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
+@media (max-width: 1199px) {
+  .heroInner,
+  .registerWrap,
+  .supportCard {
+    grid-template-columns: 1fr;
+  }
+
+  .heroVisual {
+    min-height: 0;
+  }
+
+  .heroFloatingCardTop {
+    left: 1rem;
+  }
+
+  .heroFloatingCardBottom {
+    right: 1rem;
+  }
 }
 
-.participantCloud {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 2rem 0;
+@media (max-width: 991px) {
+  .scheduleDays {
+    grid-template-columns: 1fr;
+  }
+
+  .title {
+    font-size: clamp(2.2rem, 9vw, 3.45rem);
+  }
+}
+
+@media (max-width: 767px) {
+  .hero {
+    padding-top: 4rem;
+  }
+
+  .heroFloatingCard {
+    position: static;
+    max-width: none;
+    margin-top: 1rem;
+  }
+
+  .heroVisual {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .heroImageFrame,
+  .heroImageFallback {
+    min-height: 260px;
+  }
+
+  .heroStats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sectionTitle {
+    font-size: 1.65rem;
+    letter-spacing: 0.08em;
+  }
+
+  .heroBadge,
+  .schedulePill,
+  .regFacts li,
+  .topicChip,
+  .topicChipMuted,
+  .skillBadge {
+    font-size: 0.72rem;
+  }
+
+  .participantCloud {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .scoreCircle {
+    width: 54px;
+    height: 54px;
+    font-size: 0.92rem;
+  }
 }

From 2a5b181b1d67baca07f7abd192c515f1feffcd54 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 22:39:13 +0800
Subject: [PATCH 07/14] Normalize hackathon quotes

---
 pages/hackathon/[id].tsx | 1599 +++++++++++++++++---------------------
 1 file changed, 721 insertions(+), 878 deletions(-)

diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index b98efff..2808365 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -4,17 +4,17 @@ import {
   TableCellUser,
   TableCellValue,
   TableFormView,
-} from "mobx-lark";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { cache, compose, errorLogger } from "next-ssr-middleware";
-import { FC, useContext } from "react";
-import { Col, Container, Row } from "react-bootstrap";
-import { formatDate } from "web-utility";
-
-import { LarkImage } from "../../components/LarkImage";
-import { PageHead } from "../../components/Layout/PageHead";
-import { Activity, ActivityModel } from "../../models/Activity";
+} from 'mobx-lark';
+import { observer } from 'mobx-react';
+import Link from 'next/link';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
+import { FC, useContext } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+import { formatDate } from 'web-utility';
+
+import { LarkImage } from '../../components/LarkImage';
+import { PageHead } from '../../components/Layout/PageHead';
+import { Activity, ActivityModel } from '../../models/Activity';
 import {
   Agenda,
   AgendaModel,
@@ -28,17 +28,17 @@ import {
   ProjectModel,
   Template,
   TemplateModel,
-} from "../../models/Hackathon";
-import { I18nContext, I18nKey } from "../../models/Translation";
-import styles from "../../styles/Hackathon.module.less";
+} from '../../models/Hackathon';
+import { I18nContext, I18nKey } from '../../models/Translation';
+import styles from '../../styles/Hackathon.module.less';
 
 const RequiredTableKeys = [
-  "Person",
-  "Organization",
-  "Agenda",
-  "Prize",
-  "Template",
-  "Project",
+  'Person',
+  'Organization',
+  'Agenda',
+  'Prize',
+  'Template',
+  'Project',
 ] as const;
 
 type RequiredTableKey = (typeof RequiredTableKeys)[number];
@@ -48,27 +48,21 @@ export const getServerSideProps = compose<{ id: string }>(
   errorLogger,
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
-    const schema = activity.databaseSchema as
-      | Partial<BiTableSchema>
-      | undefined;
-    const tableIdMap = schema?.tableIdMap as
-      | Partial<Record<RequiredTableKey, string>>
-      | undefined;
+    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
+    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
 
     if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
 
-    for (const key of RequiredTableKeys)
-      if (!tableIdMap[key]) return { notFound: true, props: {} };
+    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
 
-    const [people, organizations, agenda, prizes, templates, projects] =
-      await Promise.all([
-        new PersonModel(schema.appId, tableIdMap.Person).getAll(),
-        new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
-        new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
-        new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
-        new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
-        new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
-      ]);
+    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
+      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
+      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
+    ]);
 
     return {
       props: {
@@ -98,23 +92,18 @@ interface HackathonDetailProps {
   };
 }
 
-const FormButtonBar = ["Person", "Project", "Product", "Evaluation"] as const;
+const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
 const HeroBadgeTone = [
-  "heroBadgeCyan",
-  "heroBadgeGold",
-  "heroBadgeGreen",
-  "heroBadgeRose",
+  'heroBadgeCyan',
+  'heroBadgeGold',
+  'heroBadgeGreen',
+  'heroBadgeRose',
 ] as const;
-const HighlightIcons = ["👥", "🚀", "🛠", "🏆", "🤝", "📅"] as const;
+const HighlightIcons = ['👥', '🚀', '🛠', '🏆', '🤝', '📅'] as const;
 
 type FormGroupKey = (typeof FormButtonBar)[number];
-type FormGroupMeta = Record<"title" | "description" | "eyebrow", I18nKey>;
-type AgendaToneClass =
-  | "formation"
-  | "enrollment"
-  | "competition"
-  | "break"
-  | "evaluation";
+type FormGroupMeta = Record<'title' | 'description' | 'eyebrow', I18nKey>;
+type AgendaToneClass = 'formation' | 'enrollment' | 'competition' | 'break' | 'evaluation';
 
 interface FormGroup {
   key: FormGroupKey;
@@ -124,923 +113,777 @@ interface FormGroup {
 
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
-    eyebrow: "participants",
-    title: "hackathon_participant_registration",
-    description: "hackathon_participant_registration_description",
+    eyebrow: 'participants',
+    title: 'hackathon_participant_registration',
+    description: 'hackathon_participant_registration_description',
   },
   Project: {
-    eyebrow: "hackathon_team_lead",
-    title: "hackathon_project_registration",
-    description: "hackathon_project_registration_description",
+    eyebrow: 'hackathon_team_lead',
+    title: 'hackathon_project_registration',
+    description: 'hackathon_project_registration_description',
   },
   Product: {
-    eyebrow: "hackathon_submission",
-    title: "product_submission",
-    description: "hackathon_product_submission_description",
+    eyebrow: 'hackathon_submission',
+    title: 'product_submission',
+    description: 'hackathon_product_submission_description',
   },
   Evaluation: {
-    eyebrow: "hackathon_review",
-    title: "hackathon_evaluation_entry",
-    description: "hackathon_evaluation_entry_description",
+    eyebrow: 'hackathon_review',
+    title: 'hackathon_evaluation_entry',
+    description: 'hackathon_evaluation_entry_description',
   },
 };
 
 const AgendaTypeClassMap: Partial<Record<string, AgendaToneClass>> = {
-  workshop: "formation",
-  formation: "formation",
-  presentation: "enrollment",
-  enrollment: "enrollment",
-  coding: "competition",
-  competition: "competition",
-  break: "break",
-  ceremony: "evaluation",
-  evaluation: "evaluation",
+  workshop: 'formation',
+  formation: 'formation',
+  presentation: 'enrollment',
+  enrollment: 'enrollment',
+  coding: 'competition',
+  competition: 'competition',
+  break: 'break',
+  ceremony: 'evaluation',
+  evaluation: 'evaluation',
 };
 
 const AgendaTypeLabelMap: Partial<Record<string, I18nKey>> = {
-  workshop: "workshop",
-  presentation: "presentation",
-  coding: "coding",
-  break: "break",
-  ceremony: "ceremony",
+  workshop: 'workshop',
+  presentation: 'presentation',
+  coding: 'coding',
+  break: 'break',
+  ceremony: 'ceremony',
 };
 
 const isPublicForm = ({ shared_limit }: TableFormView) =>
-  ["anyone_editable"].includes(shared_limit as string);
+  ['anyone_editable'].includes(shared_limit as string);
 
-const formatMoment = (value?: TableCellValue) =>
-  value ? formatDate(value as string) : "";
+const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
 
 const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
-  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(" - ");
+  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
 
 const previewText = (items: TableCellValue[], fallback: string) =>
   items
-    .map((item) => item?.toString())
+    .map(item => item?.toString())
     .filter(Boolean)
     .slice(0, 2)
-    .join(" · ") || fallback;
+    .join(' · ') || fallback;
 
 const agendaToneClassOf = (type: TableCellValue, index: number) => {
-  const normalized = type?.toString().toLowerCase() || "";
+  const normalized = type?.toString().toLowerCase() || '';
   const fallbackOrder: AgendaToneClass[] = [
-    "formation",
-    "enrollment",
-    "competition",
-    "break",
-    "evaluation",
+    'formation',
+    'enrollment',
+    'competition',
+    'break',
+    'evaluation',
   ];
 
-  return (
-    AgendaTypeClassMap[normalized] ||
-    fallbackOrder[index % fallbackOrder.length]
-  );
+  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
 };
 
-const agendaTypeLabelOf = (
-  type: TableCellValue,
-  t: (key: I18nKey) => string,
-  fallback = "-",
-) => {
-  const normalized = type?.toString().toLowerCase() || "";
+const agendaTypeLabelOf = (type: TableCellValue, t: (key: I18nKey) => string, fallback = '-') => {
+  const normalized = type?.toString().toLowerCase() || '';
   const i18nKey = AgendaTypeLabelMap[normalized];
 
   return i18nKey ? t(i18nKey) : type?.toString() || fallback;
 };
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(
-  ({ activity, hackathon }) => {
-    const { t } = useContext(I18nContext);
-
-    const {
-        name,
-        summary,
-        location,
-        startTime,
-        endTime,
-        databaseSchema,
-        host,
-        image,
-        type: activityType,
-      } = activity,
-      { people, organizations, agenda, prizes, templates, projects } =
-        hackathon;
-    const forms = ((databaseSchema as Partial<BiTableSchema> | undefined)
-      ?.forms || {}) as Partial<Record<FormGroupKey, TableFormView[]>>;
-    const agendaItems = [...agenda].sort(
-      ({ startedAt: left }, { startedAt: right }) =>
-        new Date((left as string) || 0).getTime() -
-        new Date((right as string) || 0).getTime(),
-    );
-    const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
-    const eventRange = formatPeriod(startTime, endTime);
-    const locationText =
-      (location as TableCellLocation | undefined)?.full_address || "-";
-    const heroBadges = [
-      (activityType as string) || t("hackathon"),
-      ...hostTags,
-      formatMoment(startTime),
-      formatMoment(endTime),
-    ].filter(Boolean);
-    const heroStats = [
-      { label: t("participants"), value: people.length },
-      { label: t("projects"), value: projects.length },
-      { label: t("templates"), value: templates.length },
-      { label: t("prizes"), value: prizes.length },
-    ];
-    const agendaPreview = agendaItems.slice(0, 3);
-    const overviewPills = agendaItems.slice(0, 6);
-
-    const formGroups = FormButtonBar.flatMap<FormGroup>((key) => {
-      const list = (forms[key] || []).filter(isPublicForm);
-
-      return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
-    });
-    const primaryForm =
-      formGroups.find(({ key }) => key === "Person") ||
-      formGroups.find(({ key }) => key === "Project") ||
-      formGroups[0];
-    const secondaryForm =
-      formGroups.find(
-        ({ key }) => key === "Project" && key !== primaryForm?.key,
-      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
-    const formPreview =
-      formGroups
-        .map(({ meta }) => t(meta.eyebrow))
-        .filter(Boolean)
-        .slice(0, 2)
-        .join(" · ") || t("hackathon_action_hub");
-
-    const highlightCards = [
-      {
-        icon: HighlightIcons[0],
-        title: t("participants"),
-        value: people.length,
-        description: t(FormSectionMeta.Person.description),
-      },
-      {
-        icon: HighlightIcons[1],
-        title: t("projects"),
-        value: projects.length,
-        description: t(FormSectionMeta.Project.description),
-      },
-      {
-        icon: HighlightIcons[2],
-        title: t("templates"),
-        value: templates.length,
-        description: previewText(
-          templates.map(({ name }) => name),
-          t("templates"),
-        ),
-      },
-      {
-        icon: HighlightIcons[3],
-        title: t("prizes"),
-        value: prizes.length,
-        description: previewText(
-          prizes.map(({ name }) => name),
-          t("hackathon_prizes"),
-        ),
-      },
-      {
-        icon: HighlightIcons[4],
-        title: t("organizations"),
-        value: organizations.length,
-        description: previewText(
-          organizations.map(({ name }) => name),
-          t("organizations"),
-        ),
-      },
-      {
-        icon: HighlightIcons[5],
-        title: t("agenda"),
-        value: agendaItems.length,
-        description: previewText(
-          agendaItems.map(({ name }) => name),
-          eventRange || t("agenda"),
-        ),
-      },
-    ];
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  const { t } = useContext(I18nContext);
+
+  const {
+      name,
+      summary,
+      location,
+      startTime,
+      endTime,
+      databaseSchema,
+      host,
+      image,
+      type: activityType,
+    } = activity,
+    { people, organizations, agenda, prizes, templates, projects } = hackathon;
+  const forms = ((databaseSchema as Partial<BiTableSchema> | undefined)?.forms || {}) as Partial<
+    Record<FormGroupKey, TableFormView[]>
+  >;
+  const agendaItems = [...agenda].sort(
+    ({ startedAt: left }, { startedAt: right }) =>
+      new Date((left as string) || 0).getTime() - new Date((right as string) || 0).getTime(),
+  );
+  const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
+  const eventRange = formatPeriod(startTime, endTime);
+  const locationText = (location as TableCellLocation | undefined)?.full_address || '-';
+  const heroBadges = [
+    (activityType as string) || t('hackathon'),
+    ...hostTags,
+    formatMoment(startTime),
+    formatMoment(endTime),
+  ].filter(Boolean);
+  const heroStats = [
+    { label: t('participants'), value: people.length },
+    { label: t('projects'), value: projects.length },
+    { label: t('templates'), value: templates.length },
+    { label: t('prizes'), value: prizes.length },
+  ];
+  const agendaPreview = agendaItems.slice(0, 3);
+  const overviewPills = agendaItems.slice(0, 6);
+
+  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
+    const list = (forms[key] || []).filter(isPublicForm);
+
+    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+  });
+  const primaryForm =
+    formGroups.find(({ key }) => key === 'Person') ||
+    formGroups.find(({ key }) => key === 'Project') ||
+    formGroups[0];
+  const secondaryForm =
+    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
+    formGroups.find(({ key }) => key !== primaryForm?.key);
+  const formPreview =
+    formGroups
+      .map(({ meta }) => t(meta.eyebrow))
+      .filter(Boolean)
+      .slice(0, 2)
+      .join(' · ') || t('hackathon_action_hub');
+
+  const highlightCards = [
+    {
+      icon: HighlightIcons[0],
+      title: t('participants'),
+      value: people.length,
+      description: t(FormSectionMeta.Person.description),
+    },
+    {
+      icon: HighlightIcons[1],
+      title: t('projects'),
+      value: projects.length,
+      description: t(FormSectionMeta.Project.description),
+    },
+    {
+      icon: HighlightIcons[2],
+      title: t('templates'),
+      value: templates.length,
+      description: previewText(
+        templates.map(({ name }) => name),
+        t('templates'),
+      ),
+    },
+    {
+      icon: HighlightIcons[3],
+      title: t('prizes'),
+      value: prizes.length,
+      description: previewText(
+        prizes.map(({ name }) => name),
+        t('hackathon_prizes'),
+      ),
+    },
+    {
+      icon: HighlightIcons[4],
+      title: t('organizations'),
+      value: organizations.length,
+      description: previewText(
+        organizations.map(({ name }) => name),
+        t('organizations'),
+      ),
+    },
+    {
+      icon: HighlightIcons[5],
+      title: t('agenda'),
+      value: agendaItems.length,
+      description: previewText(
+        agendaItems.map(({ name }) => name),
+        eventRange || t('agenda'),
+      ),
+    },
+  ];
 
-    return (
-      <>
-        <PageHead title={name as string} />
+  return (
+    <>
+      <PageHead title={name as string} />
+
+      <section className={styles.hero}>
+        <Container>
+          <div className={styles.heroInner}>
+            <div className={styles.heroContent}>
+              <ul className={`list-unstyled ${styles.heroEyebrow}`}>
+                {heroBadges.map((badge, index) => (
+                  <li
+                    key={`${badge}-${index}`}
+                    className={`${styles.heroBadge} ${styles[HeroBadgeTone[index % HeroBadgeTone.length]]}`}
+                  >
+                    {badge}
+                  </li>
+                ))}
+              </ul>
+
+              <h1 className={styles.title}>
+                <span className={styles.heroTitlePrimary}>{name as string}</span>
+                <span className={styles.heroTitleSecondary}>
+                  {(activityType as string) || t('hackathon_detail')}
+                </span>
+              </h1>
+
+              <p className={styles.description}>{summary as string}</p>
+
+              <nav className={styles.heroActions} aria-label={t('hackathon_action_hub')}>
+                {primaryForm ? (
+                  <a
+                    className={styles.actionButton}
+                    href={primaryForm.list[0].shared_url}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {t(primaryForm.meta.title)}
+                  </a>
+                ) : (
+                  <a className={styles.actionButton} href="#entry-hub">
+                    {t('hackathon_entry_flow')}
+                  </a>
+                )}
 
-        <section className={styles.hero}>
-          <Container>
-            <div className={styles.heroInner}>
-              <div className={styles.heroContent}>
-                <ul className={`list-unstyled ${styles.heroEyebrow}`}>
-                  {heroBadges.map((badge, index) => (
-                    <li
-                      key={`${badge}-${index}`}
-                      className={`${styles.heroBadge} ${styles[HeroBadgeTone[index % HeroBadgeTone.length]]}`}
-                    >
-                      {badge}
-                    </li>
-                  ))}
-                </ul>
+                <a className={styles.actionButtonGhost} href="#schedule">
+                  {t('agenda')}
+                </a>
+              </nav>
+
+              <ul className={`list-unstyled ${styles.heroStats}`}>
+                {heroStats.map(({ label, value }) => (
+                  <li key={label} className={styles.statChip}>
+                    <strong>{value}</strong>
+                    <span>{label}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
 
-                <h1 className={styles.title}>
-                  <span className={styles.heroTitlePrimary}>
-                    {name as string}
-                  </span>
-                  <span className={styles.heroTitleSecondary}>
-                    {(activityType as string) || t("hackathon_detail")}
-                  </span>
-                </h1>
-
-                <p className={styles.description}>{summary as string}</p>
-
-                <nav
-                  className={styles.heroActions}
-                  aria-label={t("hackathon_action_hub")}
-                >
-                  {primaryForm ? (
-                    <a
-                      className={styles.actionButton}
-                      href={primaryForm.list[0].shared_url}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {t(primaryForm.meta.title)}
-                    </a>
+            <div className={styles.heroVisual}>
+              <div className={styles.heroVisualCard}>
+                <div className={styles.heroVisualHead}>
+                  <span className={styles.visualKicker}>{t('event_info')}</span>
+                  <span className={styles.visualChip}>{t('hackathon_detail')}</span>
+                </div>
+
+                <figure className={styles.heroImageFrame}>
+                  <div className={styles.mascotGlow} />
+
+                  {image ? (
+                    <LarkImage
+                      src={image}
+                      alt={name as string}
+                      className="w-100 h-100 object-fit-cover"
+                    />
                   ) : (
-                    <a className={styles.actionButton} href="#entry-hub">
-                      {t("hackathon_entry_flow")}
-                    </a>
+                    <div className={styles.heroImageFallback}>
+                      {(activityType as string) || t('hackathon')}
+                    </div>
                   )}
+                </figure>
 
-                  <a className={styles.actionButtonGhost} href="#schedule">
-                    {t("agenda")}
-                  </a>
-                </nav>
-
-                <ul className={`list-unstyled ${styles.heroStats}`}>
-                  {heroStats.map(({ label, value }) => (
-                    <li key={label} className={styles.statChip}>
-                      <strong>{value}</strong>
-                      <span>{label}</span>
-                    </li>
-                  ))}
-                </ul>
+                <div className={styles.heroVisualFoot}>
+                  <p className={styles.heroVisualTitle}>{locationText}</p>
+                  <p className={styles.heroVisualCopy}>{eventRange || (summary as string)}</p>
+                </div>
               </div>
 
-              <div className={styles.heroVisual}>
-                <div className={styles.heroVisualCard}>
-                  <div className={styles.heroVisualHead}>
-                    <span className={styles.visualKicker}>
-                      {t("event_info")}
-                    </span>
-                    <span className={styles.visualChip}>
-                      {t("hackathon_detail")}
-                    </span>
-                  </div>
+              {primaryForm && (
+                <div className={`${styles.heroFloatingCard} ${styles.heroFloatingCardTop}`}>
+                  <span className={styles.floatingLabel}>{t(primaryForm.meta.eyebrow)}</span>
+                  <strong>{t(primaryForm.meta.title)}</strong>
+                  <p>{t(primaryForm.meta.description)}</p>
+                </div>
+              )}
 
-                  <figure className={styles.heroImageFrame}>
-                    <div className={styles.mascotGlow} />
+              {agendaPreview[0] && (
+                <div className={`${styles.heroFloatingCard} ${styles.heroFloatingCardBottom}`}>
+                  <span className={styles.floatingLabel}>{t('hackathon_agenda_preview')}</span>
+                  <strong>{agendaPreview[0].name as string}</strong>
+                  <p>{formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt)}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      <section className={styles.section}>
+        <Container>
+          <header className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>{t('event_info')}</h2>
+            <p className={styles.sectionSubtitle}>{t('event_description')}</p>
+            <div className={styles.accentLine} />
+          </header>
+
+          <div className={styles.themePanel}>
+            <div className={styles.themeText}>{(activityType as string) || t('hackathon')}</div>
+            <p className={styles.themeSub}>{summary as string}</p>
+          </div>
+
+          <Row className="g-3 mt-1">
+            {highlightCards.map(({ icon, title, value, description }) => (
+              <Col key={title} md={6} xl={4}>
+                <article className={styles.trackCard}>
+                  <span className={styles.trackIcon}>{icon}</span>
+                  <div className={styles.trackName}>{title}</div>
+                  <p className={styles.trackDesc}>{description}</p>
+                  <span className={styles.trackMetric}>
+                    {value} {title}
+                  </span>
+                </article>
+              </Col>
+            ))}
+          </Row>
+        </Container>
+      </section>
+
+      {formGroups[0] && (
+        <section id="entry-hub" className={`${styles.section} ${styles.registerSection}`}>
+          <Container>
+            <div className={styles.registerWrap}>
+              <article className={styles.registerCard}>
+                <div className={styles.registerCardInner}>
+                  <p className={styles.regEyebrow}>{t('hackathon_action_hub')}</p>
+                  <h2 className={styles.regTitle}>
+                    {primaryForm ? t(primaryForm.meta.title) : t('hackathon_entry_flow')}
+                  </h2>
+                  <p className={styles.regDesc}>
+                    {primaryForm
+                      ? t(primaryForm.meta.description)
+                      : t('hackathon_entry_flow_description')}
+                  </p>
+
+                  <nav className={styles.regActions} aria-label={t('hackathon_entry_flow')}>
+                    {primaryForm && (
+                      <a
+                        className={styles.actionButton}
+                        href={primaryForm.list[0].shared_url}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {t(primaryForm.meta.title)}
+                      </a>
+                    )}
 
-                    {image ? (
-                      <LarkImage
-                        src={image}
-                        alt={name as string}
-                        className="w-100 h-100 object-fit-cover"
-                      />
+                    {secondaryForm ? (
+                      <a
+                        className={styles.actionButtonGhost}
+                        href={secondaryForm.list[0].shared_url}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {t(secondaryForm.meta.title)}
+                      </a>
                     ) : (
-                      <div className={styles.heroImageFallback}>
-                        {(activityType as string) || t("hackathon")}
-                      </div>
+                      <a className={styles.actionButtonGhost} href="#schedule">
+                        {t('agenda')}
+                      </a>
                     )}
-                  </figure>
+                  </nav>
 
-                  <div className={styles.heroVisualFoot}>
-                    <p className={styles.heroVisualTitle}>{locationText}</p>
-                    <p className={styles.heroVisualCopy}>
-                      {eventRange || (summary as string)}
-                    </p>
-                  </div>
+                  <ul className={`list-unstyled ${styles.regFacts}`}>
+                    <li>{eventRange || t('event_duration')}</li>
+                    <li>{locationText}</li>
+                    <li>{formPreview}</li>
+                  </ul>
                 </div>
+              </article>
+
+              <div className={styles.entryHub}>
+                <header className={styles.entryHubHead}>
+                  <p className={styles.entryEyebrow}>{t('hackathon_entry_flow')}</p>
+                  <h3 className={styles.entryTitle}>{t('hackathon_action_hub')}</h3>
+                  <p className={styles.entryCopy}>{t('hackathon_entry_flow_description')}</p>
+                </header>
+
+                <Row as="ol" className="list-unstyled g-3 mb-0">
+                  {formGroups.map(({ key, list, meta }, index) => (
+                    <Col as="li" key={key} md={6}>
+                      <article className={styles.entryCard}>
+                        <span className={styles.entryStep}>
+                          {t('hackathon_step')} {String(index + 1).padStart(2, '0')} ·{' '}
+                          {t(meta.eyebrow)}
+                        </span>
+                        <h4>{t(meta.title)}</h4>
+                        <p>{t(meta.description)}</p>
+
+                        <div className={styles.entryMetaRow}>
+                          <span className={styles.entryMeta}>{list.length}</span>
+                          <span className={styles.entryMeta}>{t(meta.eyebrow)}</span>
+                        </div>
 
-                {primaryForm && (
-                  <div
-                    className={`${styles.heroFloatingCard} ${styles.heroFloatingCardTop}`}
-                  >
-                    <span className={styles.floatingLabel}>
-                      {t(primaryForm.meta.eyebrow)}
-                    </span>
-                    <strong>{t(primaryForm.meta.title)}</strong>
-                    <p>{t(primaryForm.meta.description)}</p>
-                  </div>
-                )}
-
-                {agendaPreview[0] && (
-                  <div
-                    className={`${styles.heroFloatingCard} ${styles.heroFloatingCardBottom}`}
-                  >
-                    <span className={styles.floatingLabel}>
-                      {t("hackathon_agenda_preview")}
-                    </span>
-                    <strong>{agendaPreview[0].name as string}</strong>
-                    <p>
-                      {formatPeriod(
-                        agendaPreview[0].startedAt,
-                        agendaPreview[0].endedAt,
-                      )}
-                    </p>
-                  </div>
-                )}
+                        <nav className={styles.entryLinks} aria-label={t(meta.title)}>
+                          {list.map(({ name, shared_url }) => (
+                            <a
+                              key={`${name}-${shared_url}`}
+                              className={styles.entryLink}
+                              href={shared_url}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              {name}
+                            </a>
+                          ))}
+                        </nav>
+                      </article>
+                    </Col>
+                  ))}
+                </Row>
               </div>
             </div>
           </Container>
         </section>
+      )}
 
-        <section className={styles.section}>
+      {agendaItems[0] && (
+        <section id="schedule" className={styles.section}>
           <Container>
             <header className={styles.sectionHeader}>
-              <h2 className={styles.sectionTitle}>{t("event_info")}</h2>
-              <p className={styles.sectionSubtitle}>{t("event_description")}</p>
+              <h2 className={styles.sectionTitle}>{t('agenda')}</h2>
+              <p className={styles.sectionSubtitle}>{t('event_duration')}</p>
               <div className={styles.accentLine} />
             </header>
 
-            <div className={styles.themePanel}>
-              <div className={styles.themeText}>
-                {(activityType as string) || t("hackathon")}
-              </div>
-              <p className={styles.themeSub}>{summary as string}</p>
+            <div className={styles.scheduleIntro}>
+              <p className={styles.scheduleKicker}>{eventRange}</p>
+              <h3 className={styles.scheduleLead}>{name as string}</h3>
+              <p className={styles.scheduleCopy}>{summary as string}</p>
             </div>
 
-            <Row className="g-3 mt-1">
-              {highlightCards.map(({ icon, title, value, description }) => (
-                <Col key={title} md={6} xl={4}>
-                  <article className={styles.trackCard}>
-                    <span className={styles.trackIcon}>{icon}</span>
-                    <div className={styles.trackName}>{title}</div>
-                    <p className={styles.trackDesc}>{description}</p>
-                    <span className={styles.trackMetric}>
-                      {value} {title}
-                    </span>
-                  </article>
-                </Col>
+            <div className={styles.scheduleOverview}>
+              {overviewPills.map(({ id, name }) => (
+                <div key={id} className={styles.schedulePill}>
+                  {name as string}
+                </div>
               ))}
-            </Row>
-          </Container>
-        </section>
+            </div>
 
-        {formGroups[0] && (
-          <section
-            id="entry-hub"
-            className={`${styles.section} ${styles.registerSection}`}
-          >
-            <Container>
-              <div className={styles.registerWrap}>
-                <article className={styles.registerCard}>
-                  <div className={styles.registerCardInner}>
-                    <p className={styles.regEyebrow}>
-                      {t("hackathon_action_hub")}
-                    </p>
-                    <h2 className={styles.regTitle}>
-                      {primaryForm
-                        ? t(primaryForm.meta.title)
-                        : t("hackathon_entry_flow")}
-                    </h2>
-                    <p className={styles.regDesc}>
-                      {primaryForm
-                        ? t(primaryForm.meta.description)
-                        : t("hackathon_entry_flow_description")}
-                    </p>
+            <div className={styles.scheduleDays}>
+              {agendaItems.map(({ id, name, type, summary, startedAt, endedAt }, index) => {
+                const toneClass = agendaToneClassOf(type, index);
 
-                    <nav
-                      className={styles.regActions}
-                      aria-label={t("hackathon_entry_flow")}
-                    >
-                      {primaryForm && (
-                        <a
-                          className={styles.actionButton}
-                          href={primaryForm.list[0].shared_url}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          {t(primaryForm.meta.title)}
-                        </a>
-                      )}
-
-                      {secondaryForm ? (
-                        <a
-                          className={styles.actionButtonGhost}
-                          href={secondaryForm.list[0].shared_url}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          {t(secondaryForm.meta.title)}
-                        </a>
-                      ) : (
-                        <a
-                          className={styles.actionButtonGhost}
-                          href="#schedule"
-                        >
-                          {t("agenda")}
-                        </a>
-                      )}
-                    </nav>
-
-                    <ul className={`list-unstyled ${styles.regFacts}`}>
-                      <li>{eventRange || t("event_duration")}</li>
-                      <li>{locationText}</li>
-                      <li>{formPreview}</li>
-                    </ul>
-                  </div>
-                </article>
+                return (
+                  <article key={id} className={`${styles.dayCard} ${styles[toneClass]}`}>
+                    <div className={styles.dayCardHead}>
+                      <span className={styles.dayNo}>
+                        PHASE {String(index + 1).padStart(2, '0')}
+                      </span>
+                      <time className={styles.dayDate} dateTime={startedAt as string}>
+                        {formatPeriod(startedAt, endedAt)}
+                      </time>
+                    </div>
 
-                <div className={styles.entryHub}>
-                  <header className={styles.entryHubHead}>
-                    <p className={styles.entryEyebrow}>
-                      {t("hackathon_entry_flow")}
-                    </p>
-                    <h3 className={styles.entryTitle}>
-                      {t("hackathon_action_hub")}
-                    </h3>
-                    <p className={styles.entryCopy}>
-                      {t("hackathon_entry_flow_description")}
+                    <h3 className={styles.dayTitle}>{name as string}</h3>
+                    <p className={styles.daySub}>
+                      {(summary as string) || agendaTypeLabelOf(type, t)}
                     </p>
-                  </header>
-
-                  <Row as="ol" className="list-unstyled g-3 mb-0">
-                    {formGroups.map(({ key, list, meta }, index) => (
-                      <Col as="li" key={key} md={6}>
-                        <article className={styles.entryCard}>
-                          <span className={styles.entryStep}>
-                            {t("hackathon_step")}{" "}
-                            {String(index + 1).padStart(2, "0")} ·{" "}
-                            {t(meta.eyebrow)}
+
+                    <dl className={styles.dayAgenda}>
+                      <div>
+                        <dt className={styles.timePill}>{t('type')}</dt>
+                        <dd className={styles.agendaCopy}>
+                          <strong>{agendaTypeLabelOf(type, t)}</strong>
+                          <span>{(summary as string) || eventRange || locationText}</span>
+                        </dd>
+                      </div>
+
+                      <div>
+                        <dt className={styles.timePill}>{t('start_time')}</dt>
+                        <dd className={styles.agendaCopy}>
+                          <strong>{formatMoment(startedAt)}</strong>
+                          <span>{t('event_duration')}</span>
+                        </dd>
+                      </div>
+
+                      <div>
+                        <dt className={styles.timePill}>{t('end_time')}</dt>
+                        <dd className={styles.agendaCopy}>
+                          <strong>{formatMoment(endedAt)}</strong>
+                          <span>
+                            {t('event_location')}: {locationText}
                           </span>
-                          <h4>{t(meta.title)}</h4>
-                          <p>{t(meta.description)}</p>
-
-                          <div className={styles.entryMetaRow}>
-                            <span className={styles.entryMeta}>
-                              {list.length}
-                            </span>
-                            <span className={styles.entryMeta}>
-                              {t(meta.eyebrow)}
-                            </span>
+                        </dd>
+                      </div>
+                    </dl>
+                  </article>
+                );
+              })}
+            </div>
+          </Container>
+        </section>
+      )}
+
+      {(prizes[0] || organizations[0]) && (
+        <section className={styles.section}>
+          <Container>
+            {prizes[0] && (
+              <>
+                <header className={styles.sectionHeader}>
+                  <h2 className={styles.sectionTitle}>{t('prizes')}</h2>
+                  <p className={styles.sectionSubtitle}>{t('hackathon_prizes')}</p>
+                  <div className={styles.accentLine} />
+                </header>
+
+                <div className={styles.awardsGrid}>
+                  {prizes.map(
+                    ({ id, name, image, summary, level, sponsor, price, amount }, index) => (
+                      <article key={id} className={styles.badgeTile}>
+                        {image && (
+                          <div className={styles.badgeArtWrap}>
+                            <LarkImage
+                              src={image}
+                              alt={name as string}
+                              className={styles.badgeArt}
+                            />
                           </div>
+                        )}
+
+                        <div className={styles.badgeTileBody}>
+                          <span className={styles.badgeTierLabel}>
+                            {(level as string) || `#${index + 1}`}
+                          </span>
+                          <h3 className={styles.badgeTileTitle}>{name as string}</h3>
+                          <p className={styles.badgeTileCopy}>
+                            {(summary as string) ||
+                              previewText([sponsor, price, amount], t('prizes'))}
+                          </p>
+
+                          <dl className={styles.prizeMeta}>
+                            {sponsor && (
+                              <div>
+                                <dt>{t('sponsor')}</dt>
+                                <dd>{sponsor as string}</dd>
+                              </div>
+                            )}
+                            {price && (
+                              <div>
+                                <dt>{t('price')}</dt>
+                                <dd>{price as string}</dd>
+                              </div>
+                            )}
+                            {amount && (
+                              <div>
+                                <dt>{t('amount')}</dt>
+                                <dd>{amount as string}</dd>
+                              </div>
+                            )}
+                          </dl>
+                        </div>
+                      </article>
+                    ),
+                  )}
+                </div>
+              </>
+            )}
+
+            {organizations[0] && (
+              <div className={styles.supportCard}>
+                <div className={styles.supportCopy}>
+                  <p className={styles.supportEyebrow}>{t('organizations')}</p>
+                  <h3 className={styles.supportTitle}>
+                    {previewText(
+                      organizations.map(({ name }) => name),
+                      t('organizations'),
+                    )}
+                  </h3>
+                  <p className={styles.supportDescription}>{summary as string}</p>
+                </div>
 
-                          <nav
-                            className={styles.entryLinks}
-                            aria-label={t(meta.title)}
-                          >
-                            {list.map(({ name, shared_url }) => (
+                <nav className={styles.partnerGrid} aria-label={t('organizations')}>
+                  {organizations.map(({ id, name, link, logo }) => {
+                    const imageNode = (
+                      <LarkImage src={logo} alt={name as string} className={styles.partnerLogo} />
+                    );
+
+                    return link ? (
+                      <a
+                        key={id}
+                        href={link as string}
+                        target="_blank"
+                        rel="noreferrer"
+                        title={name as string}
+                        className={styles.partnerLink}
+                      >
+                        {imageNode}
+                      </a>
+                    ) : (
+                      <div key={id} className={styles.partnerLink} title={name as string}>
+                        {imageNode}
+                      </div>
+                    );
+                  })}
+                </nav>
+              </div>
+            )}
+          </Container>
+        </section>
+      )}
+
+      {(templates[0] || projects[0]) && (
+        <section className={styles.section}>
+          <Container>
+            {templates[0] && (
+              <>
+                <header className={styles.sectionHeader}>
+                  <h2 className={styles.sectionTitle}>{t('templates')}</h2>
+                  <p className={styles.sectionSubtitle}>{t('source_code')}</p>
+                  <div className={styles.accentLine} />
+                </header>
+
+                <Row className="g-3">
+                  {templates.map(
+                    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => (
+                      <Col key={id} md={6} xl={4}>
+                        <article className={styles.resourceCard}>
+                          <div className={styles.resourceHead}>
+                            <h3 className={styles.resourceTitle}>{name as string}</h3>
+                          </div>
+                          <p className={styles.resourceDescription}>{summary as string}</p>
+
+                          <ul className={`list-unstyled ${styles.topicList}`}>
+                            {(languages as string[]).map(language => (
+                              <li key={language} className={styles.topicChip}>
+                                {language}
+                              </li>
+                            ))}
+                            {(tags as string[]).map(tag => (
+                              <li key={tag} className={styles.topicChipMuted}>
+                                {tag}
+                              </li>
+                            ))}
+                          </ul>
+
+                          <nav className={styles.resourceLinks} aria-label={name as string}>
+                            {sourceLink && (
                               <a
-                                key={`${name}-${shared_url}`}
                                 className={styles.entryLink}
-                                href={shared_url}
+                                href={sourceLink as string}
                                 target="_blank"
                                 rel="noreferrer"
                               >
-                                {name}
+                                {t('source_code')}
                               </a>
-                            ))}
+                            )}
+                            {previewLink && (
+                              <a
+                                className={styles.entryLink}
+                                href={previewLink as string}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {t('preview')}
+                              </a>
+                            )}
                           </nav>
                         </article>
                       </Col>
-                    ))}
-                  </Row>
-                </div>
-              </div>
-            </Container>
-          </section>
-        )}
-
-        {agendaItems[0] && (
-          <section id="schedule" className={styles.section}>
-            <Container>
-              <header className={styles.sectionHeader}>
-                <h2 className={styles.sectionTitle}>{t("agenda")}</h2>
-                <p className={styles.sectionSubtitle}>{t("event_duration")}</p>
-                <div className={styles.accentLine} />
-              </header>
-
-              <div className={styles.scheduleIntro}>
-                <p className={styles.scheduleKicker}>{eventRange}</p>
-                <h3 className={styles.scheduleLead}>{name as string}</h3>
-                <p className={styles.scheduleCopy}>{summary as string}</p>
-              </div>
-
-              <div className={styles.scheduleOverview}>
-                {overviewPills.map(({ id, name }) => (
-                  <div key={id} className={styles.schedulePill}>
-                    {name as string}
-                  </div>
-                ))}
-              </div>
-
-              <div className={styles.scheduleDays}>
-                {agendaItems.map(
-                  ({ id, name, type, summary, startedAt, endedAt }, index) => {
-                    const toneClass = agendaToneClassOf(type, index);
+                    ),
+                  )}
+                </Row>
+              </>
+            )}
+
+            {projects[0] && (
+              <>
+                <header className={`${styles.sectionHeader} ${styles.projectHeader}`}>
+                  <h2 className={styles.sectionTitle}>{t('projects')}</h2>
+                  <p className={styles.sectionSubtitle}>{t('products')}</p>
+                  <div className={styles.accentLine} />
+                </header>
+
+                <Row className="g-3">
+                  {projects.map(({ id, name, score, summary, createdBy, members }) => {
+                    const creator = createdBy as TableCellUser | undefined;
+                    const scoreText =
+                      score === null || score === undefined || score === '' ? '—' : `${score}`;
+                    const memberNames = (members as string[] | undefined)?.join(', ') || '—';
 
                     return (
-                      <article
-                        key={id}
-                        className={`${styles.dayCard} ${styles[toneClass]}`}
-                      >
-                        <div className={styles.dayCardHead}>
-                          <span className={styles.dayNo}>
-                            PHASE {String(index + 1).padStart(2, "0")}
-                          </span>
-                          <time
-                            className={styles.dayDate}
-                            dateTime={startedAt as string}
-                          >
-                            {formatPeriod(startedAt, endedAt)}
-                          </time>
-                        </div>
-
-                        <h3 className={styles.dayTitle}>{name as string}</h3>
-                        <p className={styles.daySub}>
-                          {(summary as string) || agendaTypeLabelOf(type, t)}
-                        </p>
-
-                        <dl className={styles.dayAgenda}>
-                          <div>
-                            <dt className={styles.timePill}>{t("type")}</dt>
-                            <dd className={styles.agendaCopy}>
-                              <strong>{agendaTypeLabelOf(type, t)}</strong>
-                              <span>
-                                {(summary as string) ||
-                                  eventRange ||
-                                  locationText}
-                              </span>
-                            </dd>
+                      <Col key={id} md={6} xl={4}>
+                        <article className={styles.projectCard}>
+                          <div className={styles.projectHead}>
+                            <h3 className={styles.projectTitle}>
+                              <Link href={`${ActivityModel.getLink(activity)}/team/${id}`}>
+                                {name as string}
+                              </Link>
+                            </h3>
+                            <div className={styles.scoreCircle}>{scoreText}</div>
                           </div>
 
-                          <div>
-                            <dt className={styles.timePill}>
-                              {t("start_time")}
-                            </dt>
-                            <dd className={styles.agendaCopy}>
-                              <strong>{formatMoment(startedAt)}</strong>
-                              <span>{t("event_duration")}</span>
-                            </dd>
-                          </div>
+                          <p className={styles.projectSummary}>{summary as string}</p>
 
-                          <div>
-                            <dt className={styles.timePill}>{t("end_time")}</dt>
-                            <dd className={styles.agendaCopy}>
-                              <strong>{formatMoment(endedAt)}</strong>
-                              <span>
-                                {t("event_location")}: {locationText}
-                              </span>
-                            </dd>
-                          </div>
-                        </dl>
-                      </article>
-                    );
-                  },
-                )}
-              </div>
-            </Container>
-          </section>
-        )}
-
-        {(prizes[0] || organizations[0]) && (
-          <section className={styles.section}>
-            <Container>
-              {prizes[0] && (
-                <>
-                  <header className={styles.sectionHeader}>
-                    <h2 className={styles.sectionTitle}>{t("prizes")}</h2>
-                    <p className={styles.sectionSubtitle}>
-                      {t("hackathon_prizes")}
-                    </p>
-                    <div className={styles.accentLine} />
-                  </header>
-
-                  <div className={styles.awardsGrid}>
-                    {prizes.map(
-                      (
-                        {
-                          id,
-                          name,
-                          image,
-                          summary,
-                          level,
-                          sponsor,
-                          price,
-                          amount,
-                        },
-                        index,
-                      ) => (
-                        <article key={id} className={styles.badgeTile}>
-                          {image && (
-                            <div className={styles.badgeArtWrap}>
-                              <LarkImage
-                                src={image}
-                                alt={name as string}
-                                className={styles.badgeArt}
-                              />
-                            </div>
-                          )}
-
-                          <div className={styles.badgeTileBody}>
-                            <span className={styles.badgeTierLabel}>
-                              {(level as string) || `#${index + 1}`}
-                            </span>
-                            <h3 className={styles.badgeTileTitle}>
-                              {name as string}
-                            </h3>
-                            <p className={styles.badgeTileCopy}>
-                              {(summary as string) ||
-                                previewText(
-                                  [sponsor, price, amount],
-                                  t("prizes"),
+                          <dl className={styles.projectMeta}>
+                            <div>
+                              <dt>{t('created_by')}</dt>
+                              <dd>
+                                {creator?.email ? (
+                                  <a href={`mailto:${creator.email}`}>{creator.name}</a>
+                                ) : (
+                                  creator?.name || '—'
                                 )}
-                            </p>
-
-                            <dl className={styles.prizeMeta}>
-                              {sponsor && (
-                                <div>
-                                  <dt>{t("sponsor")}</dt>
-                                  <dd>{sponsor as string}</dd>
-                                </div>
-                              )}
-                              {price && (
-                                <div>
-                                  <dt>{t("price")}</dt>
-                                  <dd>{price as string}</dd>
-                                </div>
-                              )}
-                              {amount && (
-                                <div>
-                                  <dt>{t("amount")}</dt>
-                                  <dd>{amount as string}</dd>
-                                </div>
-                              )}
-                            </dl>
-                          </div>
+                              </dd>
+                            </div>
+                            <div>
+                              <dt>{t('members')}</dt>
+                              <dd>{memberNames}</dd>
+                            </div>
+                          </dl>
                         </article>
-                      ),
-                    )}
-                  </div>
-                </>
-              )}
-
-              {organizations[0] && (
-                <div className={styles.supportCard}>
-                  <div className={styles.supportCopy}>
-                    <p className={styles.supportEyebrow}>
-                      {t("organizations")}
-                    </p>
-                    <h3 className={styles.supportTitle}>
-                      {previewText(
-                        organizations.map(({ name }) => name),
-                        t("organizations"),
-                      )}
-                    </h3>
-                    <p className={styles.supportDescription}>
-                      {summary as string}
-                    </p>
-                  </div>
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </>
+            )}
+          </Container>
+        </section>
+      )}
 
-                  <nav
-                    className={styles.partnerGrid}
-                    aria-label={t("organizations")}
-                  >
-                    {organizations.map(({ id, name, link, logo }) => {
-                      const imageNode = (
-                        <LarkImage
-                          src={logo}
-                          alt={name as string}
-                          className={styles.partnerLogo}
-                        />
-                      );
-
-                      return link ? (
-                        <a
-                          key={id}
-                          href={link as string}
-                          target="_blank"
-                          rel="noreferrer"
-                          title={name as string}
-                          className={styles.partnerLink}
-                        >
-                          {imageNode}
-                        </a>
-                      ) : (
-                        <div
-                          key={id}
-                          className={styles.partnerLink}
-                          title={name as string}
-                        >
-                          {imageNode}
-                        </div>
-                      );
-                    })}
-                  </nav>
-                </div>
-              )}
-            </Container>
-          </section>
-        )}
-
-        {(templates[0] || projects[0]) && (
-          <section className={styles.section}>
-            <Container>
-              {templates[0] && (
-                <>
-                  <header className={styles.sectionHeader}>
-                    <h2 className={styles.sectionTitle}>{t("templates")}</h2>
-                    <p className={styles.sectionSubtitle}>{t("source_code")}</p>
-                    <div className={styles.accentLine} />
-                  </header>
-
-                  <Row className="g-3">
-                    {templates.map(
-                      ({
-                        id,
-                        name,
-                        languages,
-                        tags,
-                        sourceLink,
-                        summary,
-                        previewLink,
-                      }) => (
-                        <Col key={id} md={6} xl={4}>
-                          <article className={styles.resourceCard}>
-                            <div className={styles.resourceHead}>
-                              <h3 className={styles.resourceTitle}>
-                                {name as string}
-                              </h3>
-                            </div>
-                            <p className={styles.resourceDescription}>
-                              {summary as string}
-                            </p>
-
-                            <ul className={`list-unstyled ${styles.topicList}`}>
-                              {(languages as string[]).map((language) => (
-                                <li key={language} className={styles.topicChip}>
-                                  {language}
-                                </li>
-                              ))}
-                              {(tags as string[]).map((tag) => (
-                                <li key={tag} className={styles.topicChipMuted}>
-                                  {tag}
-                                </li>
-                              ))}
-                            </ul>
-
-                            <nav
-                              className={styles.resourceLinks}
-                              aria-label={name as string}
-                            >
-                              {sourceLink && (
-                                <a
-                                  className={styles.entryLink}
-                                  href={sourceLink as string}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  {t("source_code")}
-                                </a>
-                              )}
-                              {previewLink && (
-                                <a
-                                  className={styles.entryLink}
-                                  href={previewLink as string}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  {t("preview")}
-                                </a>
-                              )}
-                            </nav>
-                          </article>
-                        </Col>
-                      ),
-                    )}
-                  </Row>
-                </>
-              )}
+      {people[0] && (
+        <section className={styles.section}>
+          <Container>
+            <header className={styles.sectionHeader}>
+              <h2 className={styles.sectionTitle}>{t('participants')}</h2>
+              <p className={styles.sectionSubtitle}>{t('github_account')}</p>
+              <div className={styles.accentLine} />
+            </header>
 
-              {projects[0] && (
-                <>
-                  <header
-                    className={`${styles.sectionHeader} ${styles.projectHeader}`}
+            <div className={styles.participantCloud}>
+              {people.map(({ id, name, avatar, githubLink }) => {
+                const content = (
+                  <>
+                    <LarkImage
+                      className={styles.avatar}
+                      src={avatar}
+                      alt={name as string}
+                      title={name as string}
+                    />
+                    <span className={styles.participantName}>{name as string}</span>
+                  </>
+                );
+
+                return githubLink ? (
+                  <a
+                    key={id}
+                    className={styles.participantCard}
+                    target="_blank"
+                    rel="noreferrer"
+                    href={githubLink as string}
                   >
-                    <h2 className={styles.sectionTitle}>{t("projects")}</h2>
-                    <p className={styles.sectionSubtitle}>{t("products")}</p>
-                    <div className={styles.accentLine} />
-                  </header>
-
-                  <Row className="g-3">
-                    {projects.map(
-                      ({ id, name, score, summary, createdBy, members }) => {
-                        const creator = createdBy as TableCellUser | undefined;
-                        const scoreText =
-                          score === null || score === undefined || score === ""
-                            ? "—"
-                            : `${score}`;
-                        const memberNames =
-                          (members as string[] | undefined)?.join(", ") || "—";
-
-                        return (
-                          <Col key={id} md={6} xl={4}>
-                            <article className={styles.projectCard}>
-                              <div className={styles.projectHead}>
-                                <h3 className={styles.projectTitle}>
-                                  <Link
-                                    href={`${ActivityModel.getLink(activity)}/team/${id}`}
-                                  >
-                                    {name as string}
-                                  </Link>
-                                </h3>
-                                <div className={styles.scoreCircle}>
-                                  {scoreText}
-                                </div>
-                              </div>
-
-                              <p className={styles.projectSummary}>
-                                {summary as string}
-                              </p>
-
-                              <dl className={styles.projectMeta}>
-                                <div>
-                                  <dt>{t("created_by")}</dt>
-                                  <dd>
-                                    {creator?.email ? (
-                                      <a href={`mailto:${creator.email}`}>
-                                        {creator.name}
-                                      </a>
-                                    ) : (
-                                      creator?.name || "—"
-                                    )}
-                                  </dd>
-                                </div>
-                                <div>
-                                  <dt>{t("members")}</dt>
-                                  <dd>{memberNames}</dd>
-                                </div>
-                              </dl>
-                            </article>
-                          </Col>
-                        );
-                      },
-                    )}
-                  </Row>
-                </>
-              )}
-            </Container>
-          </section>
-        )}
-
-        {people[0] && (
-          <section className={styles.section}>
-            <Container>
-              <header className={styles.sectionHeader}>
-                <h2 className={styles.sectionTitle}>{t("participants")}</h2>
-                <p className={styles.sectionSubtitle}>{t("github_account")}</p>
-                <div className={styles.accentLine} />
-              </header>
-
-              <div className={styles.participantCloud}>
-                {people.map(({ id, name, avatar, githubLink }) => {
-                  const content = (
-                    <>
-                      <LarkImage
-                        className={styles.avatar}
-                        src={avatar}
-                        alt={name as string}
-                        title={name as string}
-                      />
-                      <span className={styles.participantName}>
-                        {name as string}
-                      </span>
-                    </>
-                  );
-
-                  return githubLink ? (
-                    <a
-                      key={id}
-                      className={styles.participantCard}
-                      target="_blank"
-                      rel="noreferrer"
-                      href={githubLink as string}
-                    >
-                      {content}
-                    </a>
-                  ) : (
-                    <div key={id} className={styles.participantCard}>
-                      {content}
-                    </div>
-                  );
-                })}
-              </div>
-            </Container>
-          </section>
-        )}
-      </>
-    );
-  },
-);
+                    {content}
+                  </a>
+                ) : (
+                  <div key={id} className={styles.participantCard}>
+                    {content}
+                  </div>
+                );
+              })}
+            </div>
+          </Container>
+        </section>
+      )}
+    </>
+  );
+});
 
 export default HackathonDetail;

From d6c1dba1183d4d2a19795116fdb7ca953e447dfb Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 22:55:49 +0800
Subject: [PATCH 08/14] Refactor hackathon detail sections

---
 .../Hackathon/HackathonActionHub.module.less  | 140 +++
 .../Activity/Hackathon/HackathonActionHub.tsx | 116 +++
 .../Hackathon/HackathonAwards.module.less     | 154 +++
 .../Activity/Hackathon/HackathonAwards.tsx    | 122 +++
 .../Hackathon/HackathonHero.module.less       | 361 +++++++
 .../Activity/Hackathon/HackathonHero.tsx      | 162 +++
 .../Hackathon/HackathonOverview.module.less   |  95 ++
 .../Activity/Hackathon/HackathonOverview.tsx  |  61 ++
 .../HackathonParticipants.module.less         |  65 ++
 .../Hackathon/HackathonParticipants.tsx       |  58 ++
 .../Hackathon/HackathonResources.module.less  | 162 +++
 .../Activity/Hackathon/HackathonResources.tsx | 155 +++
 .../Hackathon/HackathonSchedule.module.less   | 183 ++++
 .../Activity/Hackathon/HackathonSchedule.tsx  | 109 +++
 components/Activity/Hackathon/theme.less      | 143 +++
 pages/hackathon/[id].tsx                      | 925 ++++++------------
 translation/en-US.ts                          |   1 +
 translation/zh-CN.ts                          |   7 +-
 translation/zh-TW.ts                          |   7 +-
 19 files changed, 2378 insertions(+), 648 deletions(-)
 create mode 100644 components/Activity/Hackathon/HackathonActionHub.module.less
 create mode 100644 components/Activity/Hackathon/HackathonActionHub.tsx
 create mode 100644 components/Activity/Hackathon/HackathonAwards.module.less
 create mode 100644 components/Activity/Hackathon/HackathonAwards.tsx
 create mode 100644 components/Activity/Hackathon/HackathonHero.module.less
 create mode 100644 components/Activity/Hackathon/HackathonHero.tsx
 create mode 100644 components/Activity/Hackathon/HackathonOverview.module.less
 create mode 100644 components/Activity/Hackathon/HackathonOverview.tsx
 create mode 100644 components/Activity/Hackathon/HackathonParticipants.module.less
 create mode 100644 components/Activity/Hackathon/HackathonParticipants.tsx
 create mode 100644 components/Activity/Hackathon/HackathonResources.module.less
 create mode 100644 components/Activity/Hackathon/HackathonResources.tsx
 create mode 100644 components/Activity/Hackathon/HackathonSchedule.module.less
 create mode 100644 components/Activity/Hackathon/HackathonSchedule.tsx
 create mode 100644 components/Activity/Hackathon/theme.less

diff --git a/components/Activity/Hackathon/HackathonActionHub.module.less b/components/Activity/Hackathon/HackathonActionHub.module.less
new file mode 100644
index 0000000..9bb37d3
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonActionHub.module.less
@@ -0,0 +1,140 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+  padding-top: clamp(3rem, 5vw, 4rem);
+}
+
+.registerWrap {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 1.5rem;
+  align-items: start;
+}
+
+.registerCard {
+  .panel-card();
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
+}
+
+.registerCardInner,
+.entryHub {
+  padding: 1.55rem;
+}
+
+.regEyebrow,
+.entryEyebrow,
+.entryStep {
+  .eyebrow();
+}
+
+.regTitle,
+.entryTitle {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-size: clamp(1.55rem, 3vw, 2.1rem);
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.regTitle {
+  margin-top: 0.4rem;
+}
+
+.regDesc,
+.entryCard p {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.regDesc {
+  margin: 0.9rem 0 1.2rem;
+}
+
+.regActions,
+.entryLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.actionButton {
+  .button-primary();
+}
+
+.actionButtonGhost,
+.entryLink {
+  .button-ghost();
+}
+
+.regFacts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 1.3rem 0 0;
+
+  li {
+    .chip();
+    padding: 0.48rem 0.85rem;
+    color: @copy;
+    font-size: 0.9rem;
+  }
+}
+
+.entryHub {
+  .panel-card();
+}
+
+.entryHubHead {
+  margin-bottom: 1.25rem;
+}
+
+.entryTitle {
+  margin-top: 0.35rem;
+  font-size: 1.55rem;
+}
+
+.entryCard {
+  .panel-card();
+  height: 100%;
+  padding: 1.3rem;
+}
+
+.entryStep {
+  color: @cyan;
+}
+
+.entryCard h4 {
+  margin: 0.55rem 0 0.45rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.02rem;
+}
+
+.entryCard p {
+  margin: 0;
+}
+
+.entryMetaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1rem 0;
+}
+
+.entryMeta {
+  .chip();
+  padding: 0.35rem 0.7rem;
+  color: @gold;
+  font-family: @heading;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 1199px) {
+  .registerWrap {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonActionHub.tsx b/components/Activity/Hackathon/HackathonActionHub.tsx
new file mode 100644
index 0000000..6daab6d
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonActionHub.tsx
@@ -0,0 +1,116 @@
+import { FC } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import { HackathonHeroAction } from './HackathonHero';
+import styles from './HackathonActionHub.module.less';
+
+export interface HackathonActionHubEntry {
+  count: number;
+  description: string;
+  eyebrow: string;
+  links: HackathonHeroAction[];
+  title: string;
+}
+
+export interface HackathonActionHubProps {
+  entries: HackathonActionHubEntry[];
+  facts: string[];
+  primaryAction?: HackathonHeroAction;
+  primaryDescription: string;
+  primaryTitle: string;
+  secondaryAction: HackathonHeroAction;
+  subtitle: string;
+  title: string;
+}
+
+const ActionHubLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
+  action,
+  variant,
+}) => (
+  <a
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    href={action.href}
+    {...(action.external && { target: '_blank', rel: 'noreferrer' })}
+  >
+    {action.label}
+  </a>
+);
+
+const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ entry, step }) => (
+  <article className={styles.entryCard}>
+    <span className={styles.entryStep}>
+      {step} · {entry.eyebrow}
+    </span>
+    <h4>{entry.title}</h4>
+    <p>{entry.description}</p>
+
+    <div className={styles.entryMetaRow}>
+      <span className={styles.entryMeta}>{entry.count}</span>
+      <span className={styles.entryMeta}>{entry.eyebrow}</span>
+    </div>
+
+    <nav className={styles.entryLinks} aria-label={entry.title}>
+      {entry.links.map(link => (
+        <a
+          key={`${link.label}-${link.href}`}
+          className={styles.entryLink}
+          href={link.href}
+          {...(link.external && { target: '_blank', rel: 'noreferrer' })}
+        >
+          {link.label}
+        </a>
+      ))}
+    </nav>
+  </article>
+);
+
+export const HackathonActionHub: FC<HackathonActionHubProps> = ({
+  entries,
+  facts,
+  primaryAction,
+  primaryDescription,
+  primaryTitle,
+  secondaryAction,
+  subtitle,
+  title,
+}) => (
+  <section id="entry-hub" className={styles.section}>
+    <Container>
+      <div className={styles.registerWrap}>
+        <article className={styles.registerCard}>
+          <div className={styles.registerCardInner}>
+            <p className={styles.regEyebrow}>{title}</p>
+            <h2 className={styles.regTitle}>{primaryTitle}</h2>
+            <p className={styles.regDesc}>{primaryDescription}</p>
+
+            <nav className={styles.regActions} aria-label={title}>
+              {primaryAction && <ActionHubLink action={primaryAction} variant="primary" />}
+              <ActionHubLink action={secondaryAction} variant="ghost" />
+            </nav>
+
+            <ul className={`list-unstyled ${styles.regFacts}`}>
+              {facts.map(fact => (
+                <li key={fact}>{fact}</li>
+              ))}
+            </ul>
+          </div>
+        </article>
+
+        <div className={styles.entryHub}>
+          <header className={styles.entryHubHead}>
+            <p className={styles.entryEyebrow}>{subtitle}</p>
+            <h3 className={styles.entryTitle}>{title}</h3>
+          </header>
+
+          <Row as="ol" className="list-unstyled g-3 mb-0">
+            {entries.map((entry, index) => (
+              <Col as="li" key={entry.title} md={6}>
+                <ActionEntryCard entry={entry} step={String(index + 1).padStart(2, '0')} />
+              </Col>
+            ))}
+          </Row>
+        </div>
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonAwards.module.less b/components/Activity/Hackathon/HackathonAwards.module.less
new file mode 100644
index 0000000..1518b10
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonAwards.module.less
@@ -0,0 +1,154 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+}
+
+.sectionHeader {
+  .section-header();
+}
+
+.sectionTitle {
+  .section-title();
+}
+
+.sectionSubtitle,
+.supportEyebrow {
+  .section-subtitle();
+}
+
+.accentLine {
+  .accent-line();
+}
+
+.awardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.badgeTile {
+  .panel-card();
+  overflow: hidden;
+}
+
+.badgeArtWrap {
+  padding: 1.1rem 1.1rem 0;
+}
+
+.badgeArt {
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.04);
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.badgeTileBody {
+  padding: 1.15rem 1.2rem 1.3rem;
+}
+
+.badgeTierLabel {
+  color: @gold;
+  font-family: @heading;
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.badgeTileTitle,
+.supportTitle {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-weight: 800;
+}
+
+.badgeTileTitle {
+  font-size: 1.05rem;
+}
+
+.badgeTileCopy,
+.supportDescription {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.badgeTileCopy {
+  margin: 0.7rem 0 1rem;
+}
+
+.prizeMeta {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.8rem;
+    align-items: start;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dt {
+    color: @muted;
+    font-family: @heading;
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  dd {
+    color: #fff;
+    line-height: 1.5;
+  }
+}
+
+.supportCard {
+  .panel-card();
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
+  gap: 1.25rem;
+  margin-top: 1.4rem;
+  padding: 1.55rem;
+}
+
+.supportTitle {
+  margin-top: 0.35rem;
+  font-size: 1.45rem;
+}
+
+.partnerGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.partnerLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  min-height: 104px;
+  padding: 1rem;
+}
+
+.partnerLogo {
+  max-width: 100%;
+  max-height: 58px;
+  object-fit: contain;
+}
+
+@media (max-width: 1199px) {
+  .supportCard {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonAwards.tsx b/components/Activity/Hackathon/HackathonAwards.tsx
new file mode 100644
index 0000000..53d9a88
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonAwards.tsx
@@ -0,0 +1,122 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import styles from './HackathonAwards.module.less';
+
+export interface HackathonAwardsMeta {
+  label: string;
+  value: string;
+}
+
+export interface HackathonPrizeItem {
+  description: string;
+  id: string;
+  image?: TableCellValue;
+  meta: HackathonAwardsMeta[];
+  tier: string;
+  title: string;
+}
+
+export interface HackathonOrganizationItem {
+  href?: string;
+  id: string;
+  logo?: TableCellValue;
+  name: string;
+}
+
+export interface HackathonAwardsProps {
+  organizations: HackathonOrganizationItem[];
+  prizes: HackathonPrizeItem[];
+  subtitle: string;
+  supportDescription: string;
+  supportEyebrow: string;
+  supportTitle: string;
+  title: string;
+}
+
+const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, title }) => (
+  <article className={styles.badgeTile}>
+    {image && (
+      <div className={styles.badgeArtWrap}>
+        <LarkImage src={image} alt={title} className={styles.badgeArt} />
+      </div>
+    )}
+
+    <div className={styles.badgeTileBody}>
+      <span className={styles.badgeTierLabel}>{tier}</span>
+      <h3 className={styles.badgeTileTitle}>{title}</h3>
+      <p className={styles.badgeTileCopy}>{description}</p>
+
+      <dl className={styles.prizeMeta}>
+        {meta.map(({ label, value }) => (
+          <div key={`${label}-${value}`}>
+            <dt>{label}</dt>
+            <dd>{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  </article>
+);
+
+const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) => {
+  const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
+
+  return href ? (
+    <a href={href} target="_blank" rel="noreferrer" title={name} className={styles.partnerLink}>
+      {imageNode}
+    </a>
+  ) : (
+    <div className={styles.partnerLink} title={name}>
+      {imageNode}
+    </div>
+  );
+};
+
+export const HackathonAwards: FC<HackathonAwardsProps> = ({
+  organizations,
+  prizes,
+  subtitle,
+  supportDescription,
+  supportEyebrow,
+  supportTitle,
+  title,
+}) => (
+  <section className={styles.section}>
+    <Container>
+      {prizes[0] && (
+        <>
+          <header className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>{title}</h2>
+            <p className={styles.sectionSubtitle}>{subtitle}</p>
+            <div className={styles.accentLine} />
+          </header>
+
+          <div className={styles.awardsGrid}>
+            {prizes.map(prize => (
+              <PrizeCard key={prize.id} {...prize} />
+            ))}
+          </div>
+        </>
+      )}
+
+      {organizations[0] && (
+        <div className={styles.supportCard}>
+          <div className={styles.supportCopy}>
+            <p className={styles.supportEyebrow}>{supportEyebrow}</p>
+            <h3 className={styles.supportTitle}>{supportTitle}</h3>
+            <p className={styles.supportDescription}>{supportDescription}</p>
+          </div>
+
+          <nav className={styles.partnerGrid} aria-label={supportEyebrow}>
+            {organizations.map(organization => (
+              <OrganizationLogo key={organization.id} {...organization} />
+            ))}
+          </nav>
+        </div>
+      )}
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonHero.module.less b/components/Activity/Hackathon/HackathonHero.module.less
new file mode 100644
index 0000000..7d8137b
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonHero.module.less
@@ -0,0 +1,361 @@
+@import './theme.less';
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),
+    radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),
+    linear-gradient(180deg, @bg 0%, #091022 48%, #050814 100%);
+  padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
+  color: @copy;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+  }
+
+  &::before {
+    background-image:
+      linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
+    background-size: 54px 54px;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
+    opacity: 0.45;
+  }
+
+  &::after {
+    inset: auto 0 0;
+    height: 140px;
+    background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
+  }
+}
+
+.heroInner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
+  gap: clamp(2rem, 4vw, 4rem);
+  align-items: center;
+}
+
+.heroContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1.35rem;
+}
+
+.heroEyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.heroBadge {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.42rem 0.9rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.heroBadgeCyan {
+  box-shadow: 0 0 18px rgba(44, 232, 255, 0.22);
+  border-color: rgba(44, 232, 255, 0.28);
+  color: @cyan;
+}
+
+.heroBadgeGold {
+  box-shadow: 0 0 18px rgba(255, 201, 77, 0.18);
+  border-color: rgba(255, 201, 77, 0.24);
+  color: @gold;
+}
+
+.heroBadgeGreen {
+  box-shadow: 0 0 18px rgba(72, 241, 168, 0.2);
+  border-color: rgba(72, 241, 168, 0.24);
+  color: @green;
+}
+
+.heroBadgeRose {
+  box-shadow: 0 0 18px rgba(255, 120, 186, 0.18);
+  border-color: rgba(255, 120, 186, 0.24);
+  color: @rose;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin: 0;
+  font-family: @heading;
+  font-size: clamp(2.6rem, 5vw, 4.45rem);
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+.heroTitlePrimary {
+  color: #fff;
+}
+
+.heroTitleSecondary {
+  background: linear-gradient(90deg, @cyan, @gold 78%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: clamp(1.05rem, 2vw, 1.6rem);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.description {
+  max-width: 62ch;
+  margin: 0;
+  color: @muted;
+  font-family: @body;
+  font-size: 1.05rem;
+  line-height: 1.8;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.actionButton {
+  .button-primary();
+}
+
+.actionButtonGhost {
+  .button-ghost();
+}
+
+.heroStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  margin: 0;
+}
+
+.statChip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  min-width: 108px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.85rem 1rem;
+
+  strong {
+    font-family: @heading;
+    font-size: 1.25rem;
+    line-height: 1.1;
+  }
+
+  span {
+    color: @muted;
+    font-size: 0.82rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+}
+
+.heroVisual {
+  position: relative;
+  min-height: 580px;
+}
+
+.heroVisualCard {
+  .panel-card();
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(11, 19, 40, 0.95), rgba(8, 18, 39, 0.9));
+}
+
+.heroVisualHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 1.15rem 1.25rem 0;
+}
+
+.visualKicker,
+.visualChip,
+.floatingLabel {
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.visualKicker,
+.floatingLabel {
+  color: @muted;
+}
+
+.visualChip {
+  color: @gold;
+}
+
+.heroImageFrame {
+  position: relative;
+  overflow: hidden;
+  margin: 1rem 1.25rem 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
+  min-height: 340px;
+
+  :global(img) {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.mascotGlow {
+  position: absolute;
+  inset: 12% 18%;
+  z-index: 1;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(44, 232, 255, 0.35), transparent 70%);
+  filter: blur(28px);
+}
+
+.heroImageFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 340px;
+  color: @cyan;
+  font-family: @heading;
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.heroVisualFoot {
+  padding: 1.15rem 1.25rem 1.35rem;
+}
+
+.heroVisualTitle {
+  margin: 0 0 0.35rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1rem;
+}
+
+.heroVisualCopy,
+.heroVisualDescription {
+  margin: 0;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.heroFloatingCard {
+  position: absolute;
+  z-index: 2;
+  max-width: 260px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 22px;
+  background: rgba(8, 18, 39, 0.88);
+  padding: 1rem 1.1rem;
+
+  strong {
+    display: block;
+    margin-top: 0.35rem;
+    color: #fff;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 0.45rem 0 0;
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.6;
+  }
+}
+
+.heroFloatingCardTop {
+  top: 2.5rem;
+  left: -1.5rem;
+}
+
+.heroFloatingCardBottom {
+  right: -1.5rem;
+  bottom: 1.5rem;
+}
+
+@media (max-width: 1199px) {
+  .heroInner {
+    grid-template-columns: 1fr;
+  }
+
+  .heroVisual {
+    min-height: 0;
+  }
+
+  .heroFloatingCardTop {
+    left: 1rem;
+  }
+
+  .heroFloatingCardBottom {
+    right: 1rem;
+  }
+}
+
+@media (max-width: 991px) {
+  .title {
+    font-size: clamp(2.2rem, 9vw, 3.45rem);
+  }
+}
+
+@media (max-width: 767px) {
+  .hero {
+    padding-top: 4rem;
+  }
+
+  .heroFloatingCard {
+    position: static;
+    max-width: none;
+    margin-top: 1rem;
+  }
+
+  .heroVisual {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .heroImageFrame {
+    min-height: 260px;
+  }
+
+  .heroStats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .heroBadge {
+    font-size: 0.72rem;
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonHero.tsx b/components/Activity/Hackathon/HackathonHero.tsx
new file mode 100644
index 0000000..2641f08
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonHero.tsx
@@ -0,0 +1,162 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import styles from './HackathonHero.module.less';
+
+export interface HackathonHeroAction {
+  external?: boolean;
+  href: string;
+  label: string;
+}
+
+export interface HackathonHeroCard {
+  description: string;
+  eyebrow: string;
+  title: string;
+}
+
+export interface HackathonHeroStat {
+  label: string;
+  value: number;
+}
+
+export interface HackathonHeroProps {
+  badges: string[];
+  bottomCard?: HackathonHeroCard;
+  description: string;
+  image?: TableCellValue;
+  imageFallback: string;
+  locationText: string;
+  name: string;
+  primaryAction: HackathonHeroAction;
+  secondaryAction: HackathonHeroAction;
+  stats: HackathonHeroStat[];
+  subtitle: string;
+  topCard?: HackathonHeroCard;
+  visualChip: string;
+  visualCopy: string;
+  visualKicker: string;
+  visualTitle: string;
+}
+
+const BadgeToneClass = [
+  styles.heroBadgeCyan,
+  styles.heroBadgeGold,
+  styles.heroBadgeGreen,
+  styles.heroBadgeRose,
+];
+
+const HeroLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
+  action,
+  variant,
+}) => (
+  <a
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    href={action.href}
+    {...(action.external && { target: '_blank', rel: 'noreferrer' })}
+  >
+    {action.label}
+  </a>
+);
+
+const FloatingCard: FC<{ card: HackathonHeroCard; position: 'bottom' | 'top' }> = ({
+  card,
+  position,
+}) => (
+  <div
+    className={`${styles.heroFloatingCard} ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
+  >
+    <span className={styles.floatingLabel}>{card.eyebrow}</span>
+    <strong>{card.title}</strong>
+    <p>{card.description}</p>
+  </div>
+);
+
+export const HackathonHero: FC<HackathonHeroProps> = ({
+  badges,
+  bottomCard,
+  description,
+  image,
+  imageFallback,
+  locationText,
+  name,
+  primaryAction,
+  secondaryAction,
+  stats,
+  subtitle,
+  topCard,
+  visualChip,
+  visualCopy,
+  visualKicker,
+  visualTitle,
+}) => (
+  <section className={styles.hero}>
+    <Container>
+      <div className={styles.heroInner}>
+        <div className={styles.heroContent}>
+          <ul className={`list-unstyled ${styles.heroEyebrow}`}>
+            {badges.map((badge, index) => (
+              <li
+                key={`${badge}-${index}`}
+                className={`${styles.heroBadge} ${BadgeToneClass[index % BadgeToneClass.length]}`}
+              >
+                {badge}
+              </li>
+            ))}
+          </ul>
+
+          <h1 className={styles.title}>
+            <span className={styles.heroTitlePrimary}>{name}</span>
+            <span className={styles.heroTitleSecondary}>{subtitle}</span>
+          </h1>
+
+          <p className={styles.description}>{description}</p>
+
+          <nav className={styles.heroActions} aria-label={subtitle}>
+            <HeroLink action={primaryAction} variant="primary" />
+            <HeroLink action={secondaryAction} variant="ghost" />
+          </nav>
+
+          <ul className={`list-unstyled ${styles.heroStats}`}>
+            {stats.map(({ label, value }) => (
+              <li key={label} className={styles.statChip}>
+                <strong>{value}</strong>
+                <span>{label}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className={styles.heroVisual}>
+          <div className={styles.heroVisualCard}>
+            <div className={styles.heroVisualHead}>
+              <span className={styles.visualKicker}>{visualKicker}</span>
+              <span className={styles.visualChip}>{visualChip}</span>
+            </div>
+
+            <figure className={styles.heroImageFrame}>
+              <div className={styles.mascotGlow} />
+
+              {image ? (
+                <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
+              ) : (
+                <div className={styles.heroImageFallback}>{imageFallback}</div>
+              )}
+            </figure>
+
+            <div className={styles.heroVisualFoot}>
+              <p className={styles.heroVisualTitle}>{locationText}</p>
+              <p className={styles.heroVisualCopy}>{visualTitle}</p>
+              <p className={styles.heroVisualDescription}>{visualCopy}</p>
+            </div>
+          </div>
+
+          {topCard && <FloatingCard card={topCard} position="top" />}
+          {bottomCard && <FloatingCard card={bottomCard} position="bottom" />}
+        </div>
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonOverview.module.less b/components/Activity/Hackathon/HackathonOverview.module.less
new file mode 100644
index 0000000..b992344
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonOverview.module.less
@@ -0,0 +1,95 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+}
+
+.sectionHeader {
+  .section-header();
+}
+
+.sectionTitle {
+  .section-title();
+}
+
+.sectionSubtitle {
+  .section-subtitle();
+}
+
+.accentLine {
+  .accent-line();
+}
+
+.themePanel {
+  margin-bottom: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.12));
+  padding: 1.5rem 1.6rem;
+}
+
+.themeText {
+  margin-bottom: 0.4rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  font-weight: 900;
+}
+
+.themeSub {
+  margin: 0;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.trackCard {
+  .panel-card();
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  height: 100%;
+  padding: 1.4rem;
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
+}
+
+.trackIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.06);
+  width: 54px;
+  height: 54px;
+  font-size: 1.35rem;
+}
+
+.trackName {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.08rem;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.trackDesc {
+  min-height: 4.8rem;
+  margin: 0.75rem 0 0.95rem;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.trackMetric {
+  color: @cyan;
+  font-family: @heading;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
diff --git a/components/Activity/Hackathon/HackathonOverview.tsx b/components/Activity/Hackathon/HackathonOverview.tsx
new file mode 100644
index 0000000..6ad8120
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonOverview.tsx
@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import styles from './HackathonOverview.module.less';
+
+export interface HackathonOverviewCard {
+  description: string;
+  icon: string;
+  title: string;
+  value: number;
+}
+
+export interface HackathonOverviewProps {
+  cards: HackathonOverviewCard[];
+  subtitle: string;
+  themeSub: string;
+  themeText: string;
+  title: string;
+}
+
+const OverviewCard: FC<HackathonOverviewCard> = ({ description, icon, title, value }) => (
+  <article className={styles.trackCard}>
+    <span className={styles.trackIcon}>{icon}</span>
+    <div className={styles.trackName}>{title}</div>
+    <p className={styles.trackDesc}>{description}</p>
+    <span className={styles.trackMetric}>
+      {value} {title}
+    </span>
+  </article>
+);
+
+export const HackathonOverview: FC<HackathonOverviewProps> = ({
+  cards,
+  subtitle,
+  themeSub,
+  themeText,
+  title,
+}) => (
+  <section className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={styles.themePanel}>
+        <div className={styles.themeText}>{themeText}</div>
+        <p className={styles.themeSub}>{themeSub}</p>
+      </div>
+
+      <Row className="g-3 mt-1">
+        {cards.map(card => (
+          <Col key={card.title} md={6} xl={4}>
+            <OverviewCard {...card} />
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonParticipants.module.less b/components/Activity/Hackathon/HackathonParticipants.module.less
new file mode 100644
index 0000000..1ad3e3c
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonParticipants.module.less
@@ -0,0 +1,65 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+}
+
+.sectionHeader {
+  .section-header();
+}
+
+.sectionTitle {
+  .section-title();
+}
+
+.sectionSubtitle {
+  .section-subtitle();
+}
+
+.accentLine {
+  .accent-line();
+}
+
+.participantCloud {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+}
+
+.participantCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 1.1rem 0.9rem;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+}
+
+.participantCard:hover {
+  color: @cyan;
+  text-decoration: none;
+}
+
+.avatar {
+  border: 2px solid rgba(44, 232, 255, 0.2);
+  border-radius: 50%;
+  width: 84px;
+  height: 84px;
+  object-fit: cover;
+}
+
+.participantName {
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+@media (max-width: 767px) {
+  .participantCloud {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonParticipants.tsx b/components/Activity/Hackathon/HackathonParticipants.tsx
new file mode 100644
index 0000000..590ae05
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonParticipants.tsx
@@ -0,0 +1,58 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import styles from './HackathonParticipants.module.less';
+
+export interface HackathonParticipantItem {
+  avatar?: TableCellValue;
+  githubLink?: string;
+  id: string;
+  name: string;
+}
+
+export interface HackathonParticipantsProps {
+  participants: HackathonParticipantItem[];
+  subtitle: string;
+  title: string;
+}
+
+const ParticipantCard: FC<HackathonParticipantItem> = ({ avatar, githubLink, name }) => {
+  const content = (
+    <>
+      <LarkImage className={styles.avatar} src={avatar} alt={name} title={name} />
+      <span className={styles.participantName}>{name}</span>
+    </>
+  );
+
+  return githubLink ? (
+    <a className={styles.participantCard} href={githubLink} target="_blank" rel="noreferrer">
+      {content}
+    </a>
+  ) : (
+    <div className={styles.participantCard}>{content}</div>
+  );
+};
+
+export const HackathonParticipants: FC<HackathonParticipantsProps> = ({
+  participants,
+  subtitle,
+  title,
+}) => (
+  <section className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={styles.participantCloud}>
+        {participants.map(participant => (
+          <ParticipantCard key={participant.id} {...participant} />
+        ))}
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonResources.module.less b/components/Activity/Hackathon/HackathonResources.module.less
new file mode 100644
index 0000000..5157282
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonResources.module.less
@@ -0,0 +1,162 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+}
+
+.sectionHeader {
+  .section-header();
+}
+
+.sectionTitle {
+  .section-title();
+}
+
+.sectionSubtitle {
+  .section-subtitle();
+}
+
+.accentLine {
+  .accent-line();
+}
+
+.projectHeader {
+  margin-top: 2.75rem;
+}
+
+.resourceCard,
+.projectCard {
+  .panel-card();
+  height: 100%;
+  padding: 1.25rem;
+}
+
+.resourceHead,
+.projectHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
+}
+
+.resourceTitle,
+.projectTitle {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.02rem;
+  font-weight: 800;
+}
+
+.projectTitle a {
+  color: #fff;
+  text-decoration: none;
+
+  &:hover {
+    color: @cyan;
+    text-decoration: none;
+  }
+}
+
+.resourceDescription,
+.projectSummary {
+  margin: 0.8rem 0 1rem;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.topicList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  margin: 0 0 1rem;
+}
+
+.topicChip,
+.topicChipMuted {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.34rem 0.72rem;
+  font-size: 0.76rem;
+}
+
+.topicChip {
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+}
+
+.topicChipMuted {
+  background: rgba(255, 255, 255, 0.08);
+  color: @copy;
+}
+
+.resourceLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.entryLink {
+  .button-ghost();
+}
+
+.scoreCircle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border: 1px solid rgba(44, 232, 255, 0.2);
+  border-radius: 50%;
+  background: rgba(44, 232, 255, 0.1);
+  width: 62px;
+  height: 62px;
+  color: @cyan;
+  font-family: @heading;
+  font-size: 1.05rem;
+  font-weight: 800;
+}
+
+.projectMeta {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.8rem;
+    align-items: start;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dt {
+    color: @muted;
+    font-family: @heading;
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  dd {
+    color: #fff;
+    line-height: 1.5;
+  }
+}
+
+@media (max-width: 767px) {
+  .topicChip,
+  .topicChipMuted {
+    font-size: 0.72rem;
+  }
+
+  .scoreCircle {
+    width: 54px;
+    height: 54px;
+    font-size: 0.92rem;
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonResources.tsx b/components/Activity/Hackathon/HackathonResources.tsx
new file mode 100644
index 0000000..dd6fa17
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonResources.tsx
@@ -0,0 +1,155 @@
+import { FC } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import styles from './HackathonResources.module.less';
+
+export interface HackathonTemplateItem {
+  description: string;
+  id: string;
+  languages: string[];
+  previewLabel: string;
+  previewUrl?: string;
+  sourceLabel: string;
+  sourceUrl?: string;
+  tags: string[];
+  title: string;
+}
+
+export interface HackathonProjectMeta {
+  label: string;
+  value: string;
+  valueHref?: string;
+}
+
+export interface HackathonProjectItem {
+  description: string;
+  id: string;
+  link: string;
+  meta: HackathonProjectMeta[];
+  score: string;
+  title: string;
+}
+
+export interface HackathonResourcesProps {
+  projectItems: HackathonProjectItem[];
+  projectSubtitle: string;
+  projectTitle: string;
+  templateItems: HackathonTemplateItem[];
+  templateSubtitle: string;
+  templateTitle: string;
+}
+
+const TemplateCard: FC<HackathonTemplateItem> = ({
+  description,
+  languages,
+  previewLabel,
+  previewUrl,
+  sourceLabel,
+  sourceUrl,
+  tags,
+  title,
+}) => (
+  <article className={styles.resourceCard}>
+    <div className={styles.resourceHead}>
+      <h3 className={styles.resourceTitle}>{title}</h3>
+    </div>
+    <p className={styles.resourceDescription}>{description}</p>
+
+    <ul className={`list-unstyled ${styles.topicList}`}>
+      {languages.map(language => (
+        <li key={language} className={styles.topicChip}>
+          {language}
+        </li>
+      ))}
+      {tags.map(tag => (
+        <li key={tag} className={styles.topicChipMuted}>
+          {tag}
+        </li>
+      ))}
+    </ul>
+
+    <nav className={styles.resourceLinks} aria-label={title}>
+      {sourceUrl && (
+        <a className={styles.entryLink} href={sourceUrl} target="_blank" rel="noreferrer">
+          {sourceLabel}
+        </a>
+      )}
+      {previewUrl && (
+        <a className={styles.entryLink} href={previewUrl} target="_blank" rel="noreferrer">
+          {previewLabel}
+        </a>
+      )}
+    </nav>
+  </article>
+);
+
+const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score, title }) => (
+  <article className={styles.projectCard}>
+    <div className={styles.projectHead}>
+      <h3 className={styles.projectTitle}>
+        <a href={link}>{title}</a>
+      </h3>
+      <div className={styles.scoreCircle}>{score}</div>
+    </div>
+
+    <p className={styles.projectSummary}>{description}</p>
+
+    <dl className={styles.projectMeta}>
+      {meta.map(({ label, value, valueHref }) => (
+        <div key={`${label}-${value}`}>
+          <dt>{label}</dt>
+          <dd>{valueHref ? <a href={valueHref}>{value}</a> : value}</dd>
+        </div>
+      ))}
+    </dl>
+  </article>
+);
+
+export const HackathonResources: FC<HackathonResourcesProps> = ({
+  projectItems,
+  projectSubtitle,
+  projectTitle,
+  templateItems,
+  templateSubtitle,
+  templateTitle,
+}) => (
+  <section className={styles.section}>
+    <Container>
+      {templateItems[0] && (
+        <>
+          <header className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>{templateTitle}</h2>
+            <p className={styles.sectionSubtitle}>{templateSubtitle}</p>
+            <div className={styles.accentLine} />
+          </header>
+
+          <Row className="g-3">
+            {templateItems.map(template => (
+              <Col key={template.id} md={6} xl={4}>
+                <TemplateCard {...template} />
+              </Col>
+            ))}
+          </Row>
+        </>
+      )}
+
+      {projectItems[0] && (
+        <>
+          <header className={`${styles.sectionHeader} ${styles.projectHeader}`}>
+            <h2 className={styles.sectionTitle}>{projectTitle}</h2>
+            <p className={styles.sectionSubtitle}>{projectSubtitle}</p>
+            <div className={styles.accentLine} />
+          </header>
+
+          <Row className="g-3">
+            {projectItems.map(project => (
+              <Col key={project.id} md={6} xl={4}>
+                <ProjectCard {...project} />
+              </Col>
+            ))}
+          </Row>
+        </>
+      )}
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/HackathonSchedule.module.less b/components/Activity/Hackathon/HackathonSchedule.module.less
new file mode 100644
index 0000000..7c6955b
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonSchedule.module.less
@@ -0,0 +1,183 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+}
+
+.sectionHeader {
+  .section-header();
+}
+
+.sectionTitle {
+  .section-title();
+}
+
+.sectionSubtitle {
+  .section-subtitle();
+}
+
+.accentLine {
+  .accent-line();
+}
+
+.scheduleIntro {
+  margin-bottom: 1.35rem;
+  text-align: center;
+}
+
+.scheduleKicker {
+  margin: 0 0 0.35rem;
+  color: @cyan;
+  font-family: @heading;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.scheduleLead {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-size: clamp(1.45rem, 3vw, 2.05rem);
+  font-weight: 800;
+}
+
+.scheduleOverview {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.schedulePill {
+  .chip();
+  padding: 0.58rem 0.9rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.74rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.scheduleDays {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.dayCard {
+  .panel-card();
+  height: 100%;
+  padding: 1.35rem;
+}
+
+.formation {
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
+}
+
+.enrollment {
+  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
+}
+
+.competition {
+  background: linear-gradient(135deg, rgba(255, 201, 77, 0.12), rgba(60, 35, 8, 0.88));
+}
+
+.break {
+  background: linear-gradient(135deg, rgba(255, 120, 186, 0.1), rgba(72, 18, 48, 0.88));
+}
+
+.evaluation {
+  background: linear-gradient(135deg, rgba(72, 241, 168, 0.12), rgba(14, 50, 39, 0.88));
+}
+
+.dayCardHead {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: baseline;
+}
+
+.dayNo {
+  .section-subtitle();
+}
+
+.dayDate {
+  color: @copy;
+  font-size: 0.85rem;
+}
+
+.dayTitle {
+  margin: 0.9rem 0 0.45rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.08rem;
+}
+
+.daySub {
+  margin: 0 0 1rem;
+  color: @muted;
+  line-height: 1.7;
+}
+
+.dayAgenda {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.8rem;
+    align-items: start;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+}
+
+.timePill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  min-height: 30px;
+  padding: 0.4rem 0.75rem;
+  color: @copy;
+  font-family: @heading;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.agendaCopy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.14rem;
+
+  strong {
+    color: #fff;
+    line-height: 1.4;
+  }
+
+  span {
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.55;
+  }
+}
+
+@media (max-width: 991px) {
+  .scheduleDays {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 767px) {
+  .schedulePill {
+    font-size: 0.72rem;
+  }
+}
diff --git a/components/Activity/Hackathon/HackathonSchedule.tsx b/components/Activity/Hackathon/HackathonSchedule.tsx
new file mode 100644
index 0000000..e067f22
--- /dev/null
+++ b/components/Activity/Hackathon/HackathonSchedule.tsx
@@ -0,0 +1,109 @@
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import styles from './HackathonSchedule.module.less';
+
+export type HackathonScheduleTone =
+  | 'break'
+  | 'competition'
+  | 'enrollment'
+  | 'evaluation'
+  | 'formation';
+
+export interface HackathonScheduleFact {
+  label: string;
+  meta: string;
+  value: string;
+}
+
+export interface HackathonScheduleItem {
+  dateText: string;
+  description: string;
+  facts: HackathonScheduleFact[];
+  id: string;
+  phase: string;
+  title: string;
+  tone: HackathonScheduleTone;
+}
+
+export interface HackathonScheduleProps {
+  items: HackathonScheduleItem[];
+  kicker: string;
+  lead: string;
+  overviewPills: string[];
+  subtitle: string;
+  title: string;
+}
+
+const ScheduleCard: FC<HackathonScheduleItem & { phaseLabel: string }> = ({
+  dateText,
+  description,
+  facts,
+  phase,
+  phaseLabel,
+  title,
+  tone,
+}) => (
+  <article className={`${styles.dayCard} ${styles[tone]}`}>
+    <div className={styles.dayCardHead}>
+      <span className={styles.dayNo}>
+        {phaseLabel} {phase}
+      </span>
+      <time className={styles.dayDate}>{dateText}</time>
+    </div>
+
+    <h3 className={styles.dayTitle}>{title}</h3>
+    <p className={styles.daySub}>{description}</p>
+
+    <dl className={styles.dayAgenda}>
+      {facts.map(({ label, meta, value }) => (
+        <div key={`${label}-${value}`}>
+          <dt className={styles.timePill}>{label}</dt>
+          <dd className={styles.agendaCopy}>
+            <strong>{value}</strong>
+            <span>{meta}</span>
+          </dd>
+        </div>
+      ))}
+    </dl>
+  </article>
+);
+
+export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string }> = ({
+  items,
+  kicker,
+  lead,
+  overviewPills,
+  phaseLabel,
+  subtitle,
+  title,
+}) => (
+  <section id="schedule" className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={styles.scheduleIntro}>
+        <p className={styles.scheduleKicker}>{kicker}</p>
+        <h3 className={styles.scheduleLead}>{lead}</h3>
+      </div>
+
+      <div className={styles.scheduleOverview}>
+        {overviewPills.map(pill => (
+          <div key={pill} className={styles.schedulePill}>
+            {pill}
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.scheduleDays}>
+        {items.map(item => (
+          <ScheduleCard key={item.id} {...item} phaseLabel={phaseLabel} />
+        ))}
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/theme.less b/components/Activity/Hackathon/theme.less
new file mode 100644
index 0000000..88f5c54
--- /dev/null
+++ b/components/Activity/Hackathon/theme.less
@@ -0,0 +1,143 @@
+@bg: #050814;
+@panel: rgba(8, 18, 39, 0.76);
+@panel-strong: rgba(6, 13, 30, 0.92);
+@border: rgba(120, 160, 255, 0.18);
+@copy: #eef5ff;
+@muted: rgba(220, 232, 255, 0.72);
+@cyan: #2ce8ff;
+@gold: #ffc94d;
+@green: #48f1a8;
+@rose: #ff78ba;
+@purple: #7b61ff;
+@shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
+@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
+@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
+
+.panel-card() {
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  backdrop-filter: blur(18px);
+}
+
+.section-shell() {
+  position: relative;
+  padding: clamp(4rem, 7vw, 6rem) 0;
+  background: linear-gradient(180deg, rgba(5, 8, 20, 0.98), rgba(7, 12, 26, 0.98));
+  color: @copy;
+}
+
+.section-header() {
+  text-align: center;
+  margin-bottom: clamp(2.3rem, 4vw, 3rem);
+}
+
+.section-title() {
+  display: inline-block;
+  margin: 0;
+  background: linear-gradient(135deg, #fff 20%, @cyan 80%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-family: @heading;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.section-subtitle() {
+  color: @muted;
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.accent-line() {
+  width: 72px;
+  height: 2px;
+  margin: 1rem auto 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, @cyan, @purple);
+  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
+}
+
+.button-base() {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease,
+    border-color 0.22s ease,
+    background 0.22s ease,
+    color 0.22s ease;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0.9rem 1.35rem;
+  font-family: @heading;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    transform: translateY(-2px);
+    text-decoration: none;
+  }
+}
+
+.button-primary() {
+  .button-base();
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border-color: rgba(44, 232, 255, 0.3);
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+
+  &:hover {
+    box-shadow: 0 0 34px rgba(44, 232, 255, 0.28);
+    background: rgba(44, 232, 255, 0.2);
+    color: #fff;
+  }
+}
+
+.button-ghost() {
+  .button-base();
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: @copy;
+
+  &:hover {
+    border-color: rgba(255, 201, 77, 0.24);
+    background: rgba(255, 201, 77, 0.1);
+    color: @gold;
+  }
+}
+
+.eyebrow() {
+  color: @muted;
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.chip() {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+@media (max-width: 767px) {
+  .section-title() {
+    font-size: 1.65rem;
+    letter-spacing: 0.08em;
+  }
+}
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 2808365..976385e 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -6,13 +6,20 @@ import {
   TableFormView,
 } from 'mobx-lark';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
-import { Col, Container, Row } from 'react-bootstrap';
 import { formatDate } from 'web-utility';
 
-import { LarkImage } from '../../components/LarkImage';
+import { HackathonActionHub } from '../../components/Activity/Hackathon/HackathonActionHub';
+import { HackathonAwards } from '../../components/Activity/Hackathon/HackathonAwards';
+import { HackathonHero } from '../../components/Activity/Hackathon/HackathonHero';
+import { HackathonOverview } from '../../components/Activity/Hackathon/HackathonOverview';
+import { HackathonParticipants } from '../../components/Activity/Hackathon/HackathonParticipants';
+import { HackathonResources } from '../../components/Activity/Hackathon/HackathonResources';
+import {
+  HackathonSchedule,
+  HackathonScheduleTone,
+} from '../../components/Activity/Hackathon/HackathonSchedule';
 import { PageHead } from '../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../models/Activity';
 import {
@@ -30,7 +37,6 @@ import {
   TemplateModel,
 } from '../../models/Hackathon';
 import { I18nContext, I18nKey } from '../../models/Translation';
-import styles from '../../styles/Hackathon.module.less';
 
 const RequiredTableKeys = [
   'Person',
@@ -42,75 +48,36 @@ const RequiredTableKeys = [
 ] as const;
 
 type RequiredTableKey = (typeof RequiredTableKeys)[number];
-
-export const getServerSideProps = compose<{ id: string }>(
-  cache(),
-  errorLogger,
-  async ({ params }) => {
-    const activity = await new ActivityModel().getOne(params!.id);
-    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
-    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
-
-    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
-
-    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
-
-    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
-      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
-      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
-      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
-      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
-      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
-      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
-    ]);
-
-    return {
-      props: {
-        activity,
-        hackathon: {
-          people,
-          organizations,
-          agenda,
-          prizes,
-          templates,
-          projects,
-        },
-      },
-    };
-  },
-);
+type FormGroupKey = 'Evaluation' | 'Person' | 'Product' | 'Project';
 
 interface HackathonDetailProps {
   activity: Activity;
   hackathon: {
-    people: Person[];
-    organizations: Organization[];
     agenda: Agenda[];
+    organizations: Organization[];
+    people: Person[];
     prizes: Prize[];
-    templates: Template[];
     projects: Project[];
+    templates: Template[];
   };
 }
 
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
-const HeroBadgeTone = [
-  'heroBadgeCyan',
-  'heroBadgeGold',
-  'heroBadgeGreen',
-  'heroBadgeRose',
-] as const;
-const HighlightIcons = ['👥', '🚀', '🛠', '🏆', '🤝', '📅'] as const;
-
-type FormGroupKey = (typeof FormButtonBar)[number];
-type FormGroupMeta = Record<'title' | 'description' | 'eyebrow', I18nKey>;
-type AgendaToneClass = 'formation' | 'enrollment' | 'competition' | 'break' | 'evaluation';
+interface FormGroupMeta {
+  description: I18nKey;
+  eyebrow: I18nKey;
+  title: I18nKey;
+}
 
-interface FormGroup {
+interface FormGroupView {
+  description: string;
+  eyebrow: string;
   key: FormGroupKey;
-  list: TableFormView[];
-  meta: FormGroupMeta;
+  links: { external: true; href: string; label: string }[];
+  title: string;
 }
 
+const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
+
 const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   Person: {
     eyebrow: 'participants',
@@ -134,7 +101,7 @@ const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
   },
 };
 
-const AgendaTypeClassMap: Partial<Record<string, AgendaToneClass>> = {
+const AgendaTypeClassMap: Partial<Record<string, HackathonScheduleTone>> = {
   workshop: 'formation',
   formation: 'formation',
   presentation: 'enrollment',
@@ -171,7 +138,7 @@ const previewText = (items: TableCellValue[], fallback: string) =>
 
 const agendaToneClassOf = (type: TableCellValue, index: number) => {
   const normalized = type?.toString().toLowerCase() || '';
-  const fallbackOrder: AgendaToneClass[] = [
+  const fallbackOrder: HackathonScheduleTone[] = [
     'formation',
     'enrollment',
     'competition',
@@ -189,6 +156,36 @@ const agendaTypeLabelOf = (type: TableCellValue, t: (key: I18nKey) => string, fa
   return i18nKey ? t(i18nKey) : type?.toString() || fallback;
 };
 
+export const getServerSideProps = compose<{ id: string }>(
+  cache(),
+  errorLogger,
+  async ({ params }) => {
+    const activity = await new ActivityModel().getOne(params!.id);
+    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
+    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
+
+    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
+
+    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
+
+    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
+      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
+      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
+    ]);
+
+    return {
+      props: {
+        activity,
+        hackathon: { people, organizations, agenda, prizes, templates, projects },
+      },
+    };
+  },
+);
+
 const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
   const { t } = useContext(I18nContext);
 
@@ -207,6 +204,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
   const forms = ((databaseSchema as Partial<BiTableSchema> | undefined)?.forms || {}) as Partial<
     Record<FormGroupKey, TableFormView[]>
   >;
+  const summaryText = (summary as string) || '';
   const agendaItems = [...agenda].sort(
     ({ startedAt: left }, { startedAt: right }) =>
       new Date((left as string) || 0).getTime() - new Date((right as string) || 0).getTime(),
@@ -219,7 +217,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     ...hostTags,
     formatMoment(startTime),
     formatMoment(endTime),
-  ].filter(Boolean);
+  ].filter((value): value is string => Boolean(value));
   const heroStats = [
     { label: t('participants'), value: people.length },
     { label: t('projects'), value: projects.length },
@@ -227,12 +225,25 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     { label: t('prizes'), value: prizes.length },
   ];
   const agendaPreview = agendaItems.slice(0, 3);
-  const overviewPills = agendaItems.slice(0, 6);
 
-  const formGroups = FormButtonBar.flatMap<FormGroup>(key => {
+  const formGroups = FormButtonBar.flatMap<FormGroupView>(key => {
     const list = (forms[key] || []).filter(isPublicForm);
 
-    return list[0] ? [{ key, list, meta: FormSectionMeta[key] }] : [];
+    return list[0]
+      ? [
+          {
+            key,
+            eyebrow: t(FormSectionMeta[key].eyebrow),
+            title: t(FormSectionMeta[key].title),
+            description: t(FormSectionMeta[key].description),
+            links: list.map(({ name, shared_url }) => ({
+              label: name as string,
+              href: shared_url,
+              external: true as const,
+            })),
+          },
+        ]
+      : [];
   });
   const primaryForm =
     formGroups.find(({ key }) => key === 'Person') ||
@@ -243,26 +254,26 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     formGroups.find(({ key }) => key !== primaryForm?.key);
   const formPreview =
     formGroups
-      .map(({ meta }) => t(meta.eyebrow))
+      .map(({ eyebrow }) => eyebrow)
       .filter(Boolean)
       .slice(0, 2)
       .join(' · ') || t('hackathon_action_hub');
 
   const highlightCards = [
     {
-      icon: HighlightIcons[0],
+      icon: '👥',
       title: t('participants'),
       value: people.length,
       description: t(FormSectionMeta.Person.description),
     },
     {
-      icon: HighlightIcons[1],
+      icon: '🚀',
       title: t('projects'),
       value: projects.length,
       description: t(FormSectionMeta.Project.description),
     },
     {
-      icon: HighlightIcons[2],
+      icon: '🛠',
       title: t('templates'),
       value: templates.length,
       description: previewText(
@@ -271,7 +282,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       ),
     },
     {
-      icon: HighlightIcons[3],
+      icon: '🏆',
       title: t('prizes'),
       value: prizes.length,
       description: previewText(
@@ -280,7 +291,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       ),
     },
     {
-      icon: HighlightIcons[4],
+      icon: '🤝',
       title: t('organizations'),
       value: organizations.length,
       description: previewText(
@@ -289,7 +300,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       ),
     },
     {
-      icon: HighlightIcons[5],
+      icon: '📅',
       title: t('agenda'),
       value: agendaItems.length,
       description: previewText(
@@ -299,588 +310,222 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
     },
   ];
 
+  const scheduleItems = agendaItems.map(
+    ({ id, name, type, summary, startedAt, endedAt }, index) => {
+      const typeLabel = agendaTypeLabelOf(type, t);
+      const description = (summary as string) || typeLabel;
+
+      return {
+        id: id as string,
+        phase: String(index + 1).padStart(2, '0'),
+        dateText: formatPeriod(startedAt, endedAt),
+        title: name as string,
+        description,
+        tone: agendaToneClassOf(type, index),
+        facts: [
+          { label: t('type'), value: typeLabel, meta: description || eventRange || locationText },
+          { label: t('start_time'), value: formatMoment(startedAt), meta: t('event_duration') },
+          {
+            label: t('end_time'),
+            value: formatMoment(endedAt),
+            meta: `${t('event_location')}: ${locationText}`,
+          },
+        ],
+      };
+    },
+  );
+
+  const prizeItems = prizes.map(
+    ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
+      id: id as string,
+      title: name as string,
+      tier: (level as string) || `#${index + 1}`,
+      description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
+      image,
+      meta: [
+        sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
+        price ? { label: t('price'), value: price as string } : null,
+        amount ? { label: t('amount'), value: amount as string } : null,
+      ].filter(Boolean) as { label: string; value: string }[],
+    }),
+  );
+
+  const organizationItems = organizations.map(({ id, name, link, logo }) => ({
+    id: id as string,
+    name: name as string,
+    href: link as string | undefined,
+    logo,
+  }));
+
+  const templateItems = templates.map(
+    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
+      id: id as string,
+      title: name as string,
+      description: (summary as string) || '',
+      languages: ((languages as string[] | undefined) || []).filter(Boolean),
+      tags: ((tags as string[] | undefined) || []).filter(Boolean),
+      sourceUrl: sourceLink as string | undefined,
+      sourceLabel: t('source_code'),
+      previewUrl: previewLink as string | undefined,
+      previewLabel: t('preview'),
+    }),
+  );
+
+  const projectItems = projects.map(({ id, name, score, summary, createdBy, members }) => {
+    const creator = createdBy as TableCellUser | undefined;
+    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
+
+    return {
+      id: id as string,
+      title: name as string,
+      link: `${ActivityModel.getLink(activity)}/team/${id}`,
+      score: scoreText,
+      description: (summary as string) || '',
+      meta: [
+        creator
+          ? {
+              label: t('created_by'),
+              value: creator.name || '—',
+              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
+            }
+          : { label: t('created_by'), value: '—' },
+        {
+          label: t('members'),
+          value: (members as string[] | undefined)?.join(', ') || '—',
+        },
+      ],
+    };
+  });
+
+  const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
+    id: id as string,
+    name: name as string,
+    avatar,
+    githubLink: githubLink as string | undefined,
+  }));
+
   return (
     <>
       <PageHead title={name as string} />
 
-      <section className={styles.hero}>
-        <Container>
-          <div className={styles.heroInner}>
-            <div className={styles.heroContent}>
-              <ul className={`list-unstyled ${styles.heroEyebrow}`}>
-                {heroBadges.map((badge, index) => (
-                  <li
-                    key={`${badge}-${index}`}
-                    className={`${styles.heroBadge} ${styles[HeroBadgeTone[index % HeroBadgeTone.length]]}`}
-                  >
-                    {badge}
-                  </li>
-                ))}
-              </ul>
-
-              <h1 className={styles.title}>
-                <span className={styles.heroTitlePrimary}>{name as string}</span>
-                <span className={styles.heroTitleSecondary}>
-                  {(activityType as string) || t('hackathon_detail')}
-                </span>
-              </h1>
-
-              <p className={styles.description}>{summary as string}</p>
-
-              <nav className={styles.heroActions} aria-label={t('hackathon_action_hub')}>
-                {primaryForm ? (
-                  <a
-                    className={styles.actionButton}
-                    href={primaryForm.list[0].shared_url}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {t(primaryForm.meta.title)}
-                  </a>
-                ) : (
-                  <a className={styles.actionButton} href="#entry-hub">
-                    {t('hackathon_entry_flow')}
-                  </a>
-                )}
-
-                <a className={styles.actionButtonGhost} href="#schedule">
-                  {t('agenda')}
-                </a>
-              </nav>
-
-              <ul className={`list-unstyled ${styles.heroStats}`}>
-                {heroStats.map(({ label, value }) => (
-                  <li key={label} className={styles.statChip}>
-                    <strong>{value}</strong>
-                    <span>{label}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className={styles.heroVisual}>
-              <div className={styles.heroVisualCard}>
-                <div className={styles.heroVisualHead}>
-                  <span className={styles.visualKicker}>{t('event_info')}</span>
-                  <span className={styles.visualChip}>{t('hackathon_detail')}</span>
-                </div>
-
-                <figure className={styles.heroImageFrame}>
-                  <div className={styles.mascotGlow} />
-
-                  {image ? (
-                    <LarkImage
-                      src={image}
-                      alt={name as string}
-                      className="w-100 h-100 object-fit-cover"
-                    />
-                  ) : (
-                    <div className={styles.heroImageFallback}>
-                      {(activityType as string) || t('hackathon')}
-                    </div>
-                  )}
-                </figure>
-
-                <div className={styles.heroVisualFoot}>
-                  <p className={styles.heroVisualTitle}>{locationText}</p>
-                  <p className={styles.heroVisualCopy}>{eventRange || (summary as string)}</p>
-                </div>
-              </div>
-
-              {primaryForm && (
-                <div className={`${styles.heroFloatingCard} ${styles.heroFloatingCardTop}`}>
-                  <span className={styles.floatingLabel}>{t(primaryForm.meta.eyebrow)}</span>
-                  <strong>{t(primaryForm.meta.title)}</strong>
-                  <p>{t(primaryForm.meta.description)}</p>
-                </div>
-              )}
-
-              {agendaPreview[0] && (
-                <div className={`${styles.heroFloatingCard} ${styles.heroFloatingCardBottom}`}>
-                  <span className={styles.floatingLabel}>{t('hackathon_agenda_preview')}</span>
-                  <strong>{agendaPreview[0].name as string}</strong>
-                  <p>{formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt)}</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </Container>
-      </section>
-
-      <section className={styles.section}>
-        <Container>
-          <header className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>{t('event_info')}</h2>
-            <p className={styles.sectionSubtitle}>{t('event_description')}</p>
-            <div className={styles.accentLine} />
-          </header>
-
-          <div className={styles.themePanel}>
-            <div className={styles.themeText}>{(activityType as string) || t('hackathon')}</div>
-            <p className={styles.themeSub}>{summary as string}</p>
-          </div>
-
-          <Row className="g-3 mt-1">
-            {highlightCards.map(({ icon, title, value, description }) => (
-              <Col key={title} md={6} xl={4}>
-                <article className={styles.trackCard}>
-                  <span className={styles.trackIcon}>{icon}</span>
-                  <div className={styles.trackName}>{title}</div>
-                  <p className={styles.trackDesc}>{description}</p>
-                  <span className={styles.trackMetric}>
-                    {value} {title}
-                  </span>
-                </article>
-              </Col>
-            ))}
-          </Row>
-        </Container>
-      </section>
+      <HackathonHero
+        badges={heroBadges}
+        bottomCard={
+          agendaPreview[0]
+            ? {
+                eyebrow: t('hackathon_agenda_preview'),
+                title: agendaPreview[0].name as string,
+                description: formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt),
+              }
+            : undefined
+        }
+        description={summaryText}
+        image={image}
+        imageFallback={(activityType as string) || t('hackathon')}
+        locationText={locationText}
+        name={name as string}
+        primaryAction={
+          primaryForm
+            ? { label: primaryForm.title, href: primaryForm.links[0].href, external: true }
+            : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
+        }
+        secondaryAction={{ label: t('agenda'), href: '#schedule' }}
+        stats={heroStats}
+        subtitle={(activityType as string) || t('hackathon_detail')}
+        topCard={
+          primaryForm
+            ? {
+                eyebrow: primaryForm.eyebrow,
+                title: primaryForm.title,
+                description: primaryForm.description,
+              }
+            : undefined
+        }
+        visualChip={t('hackathon_detail')}
+        visualCopy={summaryText}
+        visualKicker={t('event_info')}
+        visualTitle={eventRange || summaryText}
+      />
+
+      <HackathonOverview
+        cards={highlightCards}
+        subtitle={t('event_description')}
+        themeSub={summaryText}
+        themeText={(activityType as string) || t('hackathon')}
+        title={t('event_info')}
+      />
 
       {formGroups[0] && (
-        <section id="entry-hub" className={`${styles.section} ${styles.registerSection}`}>
-          <Container>
-            <div className={styles.registerWrap}>
-              <article className={styles.registerCard}>
-                <div className={styles.registerCardInner}>
-                  <p className={styles.regEyebrow}>{t('hackathon_action_hub')}</p>
-                  <h2 className={styles.regTitle}>
-                    {primaryForm ? t(primaryForm.meta.title) : t('hackathon_entry_flow')}
-                  </h2>
-                  <p className={styles.regDesc}>
-                    {primaryForm
-                      ? t(primaryForm.meta.description)
-                      : t('hackathon_entry_flow_description')}
-                  </p>
-
-                  <nav className={styles.regActions} aria-label={t('hackathon_entry_flow')}>
-                    {primaryForm && (
-                      <a
-                        className={styles.actionButton}
-                        href={primaryForm.list[0].shared_url}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {t(primaryForm.meta.title)}
-                      </a>
-                    )}
-
-                    {secondaryForm ? (
-                      <a
-                        className={styles.actionButtonGhost}
-                        href={secondaryForm.list[0].shared_url}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {t(secondaryForm.meta.title)}
-                      </a>
-                    ) : (
-                      <a className={styles.actionButtonGhost} href="#schedule">
-                        {t('agenda')}
-                      </a>
-                    )}
-                  </nav>
-
-                  <ul className={`list-unstyled ${styles.regFacts}`}>
-                    <li>{eventRange || t('event_duration')}</li>
-                    <li>{locationText}</li>
-                    <li>{formPreview}</li>
-                  </ul>
-                </div>
-              </article>
-
-              <div className={styles.entryHub}>
-                <header className={styles.entryHubHead}>
-                  <p className={styles.entryEyebrow}>{t('hackathon_entry_flow')}</p>
-                  <h3 className={styles.entryTitle}>{t('hackathon_action_hub')}</h3>
-                  <p className={styles.entryCopy}>{t('hackathon_entry_flow_description')}</p>
-                </header>
-
-                <Row as="ol" className="list-unstyled g-3 mb-0">
-                  {formGroups.map(({ key, list, meta }, index) => (
-                    <Col as="li" key={key} md={6}>
-                      <article className={styles.entryCard}>
-                        <span className={styles.entryStep}>
-                          {t('hackathon_step')} {String(index + 1).padStart(2, '0')} ·{' '}
-                          {t(meta.eyebrow)}
-                        </span>
-                        <h4>{t(meta.title)}</h4>
-                        <p>{t(meta.description)}</p>
-
-                        <div className={styles.entryMetaRow}>
-                          <span className={styles.entryMeta}>{list.length}</span>
-                          <span className={styles.entryMeta}>{t(meta.eyebrow)}</span>
-                        </div>
-
-                        <nav className={styles.entryLinks} aria-label={t(meta.title)}>
-                          {list.map(({ name, shared_url }) => (
-                            <a
-                              key={`${name}-${shared_url}`}
-                              className={styles.entryLink}
-                              href={shared_url}
-                              target="_blank"
-                              rel="noreferrer"
-                            >
-                              {name}
-                            </a>
-                          ))}
-                        </nav>
-                      </article>
-                    </Col>
-                  ))}
-                </Row>
-              </div>
-            </div>
-          </Container>
-        </section>
+        <HackathonActionHub
+          entries={formGroups.map(({ description, eyebrow, links, title }) => ({
+            title,
+            description,
+            eyebrow,
+            links,
+            count: links.length,
+          }))}
+          facts={[eventRange || t('event_duration'), locationText, formPreview]}
+          primaryAction={
+            primaryForm
+              ? { label: primaryForm.title, href: primaryForm.links[0].href, external: true }
+              : undefined
+          }
+          primaryDescription={primaryForm?.description || t('hackathon_entry_flow_description')}
+          primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
+          secondaryAction={
+            secondaryForm
+              ? { label: secondaryForm.title, href: secondaryForm.links[0].href, external: true }
+              : { label: t('agenda'), href: '#schedule' }
+          }
+          subtitle={t('hackathon_entry_flow')}
+          title={t('hackathon_action_hub')}
+        />
       )}
 
-      {agendaItems[0] && (
-        <section id="schedule" className={styles.section}>
-          <Container>
-            <header className={styles.sectionHeader}>
-              <h2 className={styles.sectionTitle}>{t('agenda')}</h2>
-              <p className={styles.sectionSubtitle}>{t('event_duration')}</p>
-              <div className={styles.accentLine} />
-            </header>
-
-            <div className={styles.scheduleIntro}>
-              <p className={styles.scheduleKicker}>{eventRange}</p>
-              <h3 className={styles.scheduleLead}>{name as string}</h3>
-              <p className={styles.scheduleCopy}>{summary as string}</p>
-            </div>
-
-            <div className={styles.scheduleOverview}>
-              {overviewPills.map(({ id, name }) => (
-                <div key={id} className={styles.schedulePill}>
-                  {name as string}
-                </div>
-              ))}
-            </div>
-
-            <div className={styles.scheduleDays}>
-              {agendaItems.map(({ id, name, type, summary, startedAt, endedAt }, index) => {
-                const toneClass = agendaToneClassOf(type, index);
-
-                return (
-                  <article key={id} className={`${styles.dayCard} ${styles[toneClass]}`}>
-                    <div className={styles.dayCardHead}>
-                      <span className={styles.dayNo}>
-                        PHASE {String(index + 1).padStart(2, '0')}
-                      </span>
-                      <time className={styles.dayDate} dateTime={startedAt as string}>
-                        {formatPeriod(startedAt, endedAt)}
-                      </time>
-                    </div>
-
-                    <h3 className={styles.dayTitle}>{name as string}</h3>
-                    <p className={styles.daySub}>
-                      {(summary as string) || agendaTypeLabelOf(type, t)}
-                    </p>
-
-                    <dl className={styles.dayAgenda}>
-                      <div>
-                        <dt className={styles.timePill}>{t('type')}</dt>
-                        <dd className={styles.agendaCopy}>
-                          <strong>{agendaTypeLabelOf(type, t)}</strong>
-                          <span>{(summary as string) || eventRange || locationText}</span>
-                        </dd>
-                      </div>
-
-                      <div>
-                        <dt className={styles.timePill}>{t('start_time')}</dt>
-                        <dd className={styles.agendaCopy}>
-                          <strong>{formatMoment(startedAt)}</strong>
-                          <span>{t('event_duration')}</span>
-                        </dd>
-                      </div>
-
-                      <div>
-                        <dt className={styles.timePill}>{t('end_time')}</dt>
-                        <dd className={styles.agendaCopy}>
-                          <strong>{formatMoment(endedAt)}</strong>
-                          <span>
-                            {t('event_location')}: {locationText}
-                          </span>
-                        </dd>
-                      </div>
-                    </dl>
-                  </article>
-                );
-              })}
-            </div>
-          </Container>
-        </section>
+      {scheduleItems[0] && (
+        <HackathonSchedule
+          items={scheduleItems}
+          kicker={eventRange}
+          lead={name as string}
+          overviewPills={agendaItems.slice(0, 6).map(({ name }) => name as string)}
+          phaseLabel={t('hackathon_phase')}
+          subtitle={t('event_duration')}
+          title={t('agenda')}
+        />
       )}
 
-      {(prizes[0] || organizations[0]) && (
-        <section className={styles.section}>
-          <Container>
-            {prizes[0] && (
-              <>
-                <header className={styles.sectionHeader}>
-                  <h2 className={styles.sectionTitle}>{t('prizes')}</h2>
-                  <p className={styles.sectionSubtitle}>{t('hackathon_prizes')}</p>
-                  <div className={styles.accentLine} />
-                </header>
-
-                <div className={styles.awardsGrid}>
-                  {prizes.map(
-                    ({ id, name, image, summary, level, sponsor, price, amount }, index) => (
-                      <article key={id} className={styles.badgeTile}>
-                        {image && (
-                          <div className={styles.badgeArtWrap}>
-                            <LarkImage
-                              src={image}
-                              alt={name as string}
-                              className={styles.badgeArt}
-                            />
-                          </div>
-                        )}
-
-                        <div className={styles.badgeTileBody}>
-                          <span className={styles.badgeTierLabel}>
-                            {(level as string) || `#${index + 1}`}
-                          </span>
-                          <h3 className={styles.badgeTileTitle}>{name as string}</h3>
-                          <p className={styles.badgeTileCopy}>
-                            {(summary as string) ||
-                              previewText([sponsor, price, amount], t('prizes'))}
-                          </p>
-
-                          <dl className={styles.prizeMeta}>
-                            {sponsor && (
-                              <div>
-                                <dt>{t('sponsor')}</dt>
-                                <dd>{sponsor as string}</dd>
-                              </div>
-                            )}
-                            {price && (
-                              <div>
-                                <dt>{t('price')}</dt>
-                                <dd>{price as string}</dd>
-                              </div>
-                            )}
-                            {amount && (
-                              <div>
-                                <dt>{t('amount')}</dt>
-                                <dd>{amount as string}</dd>
-                              </div>
-                            )}
-                          </dl>
-                        </div>
-                      </article>
-                    ),
-                  )}
-                </div>
-              </>
-            )}
-
-            {organizations[0] && (
-              <div className={styles.supportCard}>
-                <div className={styles.supportCopy}>
-                  <p className={styles.supportEyebrow}>{t('organizations')}</p>
-                  <h3 className={styles.supportTitle}>
-                    {previewText(
-                      organizations.map(({ name }) => name),
-                      t('organizations'),
-                    )}
-                  </h3>
-                  <p className={styles.supportDescription}>{summary as string}</p>
-                </div>
-
-                <nav className={styles.partnerGrid} aria-label={t('organizations')}>
-                  {organizations.map(({ id, name, link, logo }) => {
-                    const imageNode = (
-                      <LarkImage src={logo} alt={name as string} className={styles.partnerLogo} />
-                    );
-
-                    return link ? (
-                      <a
-                        key={id}
-                        href={link as string}
-                        target="_blank"
-                        rel="noreferrer"
-                        title={name as string}
-                        className={styles.partnerLink}
-                      >
-                        {imageNode}
-                      </a>
-                    ) : (
-                      <div key={id} className={styles.partnerLink} title={name as string}>
-                        {imageNode}
-                      </div>
-                    );
-                  })}
-                </nav>
-              </div>
-            )}
-          </Container>
-        </section>
+      {(prizeItems[0] || organizationItems[0]) && (
+        <HackathonAwards
+          organizations={organizationItems}
+          prizes={prizeItems}
+          subtitle={t('hackathon_prizes')}
+          supportDescription={summaryText}
+          supportEyebrow={t('organizations')}
+          supportTitle={previewText(
+            organizations.map(({ name }) => name),
+            t('organizations'),
+          )}
+          title={t('prizes')}
+        />
       )}
 
-      {(templates[0] || projects[0]) && (
-        <section className={styles.section}>
-          <Container>
-            {templates[0] && (
-              <>
-                <header className={styles.sectionHeader}>
-                  <h2 className={styles.sectionTitle}>{t('templates')}</h2>
-                  <p className={styles.sectionSubtitle}>{t('source_code')}</p>
-                  <div className={styles.accentLine} />
-                </header>
-
-                <Row className="g-3">
-                  {templates.map(
-                    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => (
-                      <Col key={id} md={6} xl={4}>
-                        <article className={styles.resourceCard}>
-                          <div className={styles.resourceHead}>
-                            <h3 className={styles.resourceTitle}>{name as string}</h3>
-                          </div>
-                          <p className={styles.resourceDescription}>{summary as string}</p>
-
-                          <ul className={`list-unstyled ${styles.topicList}`}>
-                            {(languages as string[]).map(language => (
-                              <li key={language} className={styles.topicChip}>
-                                {language}
-                              </li>
-                            ))}
-                            {(tags as string[]).map(tag => (
-                              <li key={tag} className={styles.topicChipMuted}>
-                                {tag}
-                              </li>
-                            ))}
-                          </ul>
-
-                          <nav className={styles.resourceLinks} aria-label={name as string}>
-                            {sourceLink && (
-                              <a
-                                className={styles.entryLink}
-                                href={sourceLink as string}
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {t('source_code')}
-                              </a>
-                            )}
-                            {previewLink && (
-                              <a
-                                className={styles.entryLink}
-                                href={previewLink as string}
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {t('preview')}
-                              </a>
-                            )}
-                          </nav>
-                        </article>
-                      </Col>
-                    ),
-                  )}
-                </Row>
-              </>
-            )}
-
-            {projects[0] && (
-              <>
-                <header className={`${styles.sectionHeader} ${styles.projectHeader}`}>
-                  <h2 className={styles.sectionTitle}>{t('projects')}</h2>
-                  <p className={styles.sectionSubtitle}>{t('products')}</p>
-                  <div className={styles.accentLine} />
-                </header>
-
-                <Row className="g-3">
-                  {projects.map(({ id, name, score, summary, createdBy, members }) => {
-                    const creator = createdBy as TableCellUser | undefined;
-                    const scoreText =
-                      score === null || score === undefined || score === '' ? '—' : `${score}`;
-                    const memberNames = (members as string[] | undefined)?.join(', ') || '—';
-
-                    return (
-                      <Col key={id} md={6} xl={4}>
-                        <article className={styles.projectCard}>
-                          <div className={styles.projectHead}>
-                            <h3 className={styles.projectTitle}>
-                              <Link href={`${ActivityModel.getLink(activity)}/team/${id}`}>
-                                {name as string}
-                              </Link>
-                            </h3>
-                            <div className={styles.scoreCircle}>{scoreText}</div>
-                          </div>
-
-                          <p className={styles.projectSummary}>{summary as string}</p>
-
-                          <dl className={styles.projectMeta}>
-                            <div>
-                              <dt>{t('created_by')}</dt>
-                              <dd>
-                                {creator?.email ? (
-                                  <a href={`mailto:${creator.email}`}>{creator.name}</a>
-                                ) : (
-                                  creator?.name || '—'
-                                )}
-                              </dd>
-                            </div>
-                            <div>
-                              <dt>{t('members')}</dt>
-                              <dd>{memberNames}</dd>
-                            </div>
-                          </dl>
-                        </article>
-                      </Col>
-                    );
-                  })}
-                </Row>
-              </>
-            )}
-          </Container>
-        </section>
+      {(templateItems[0] || projectItems[0]) && (
+        <HackathonResources
+          projectItems={projectItems}
+          projectSubtitle={t('products')}
+          projectTitle={t('projects')}
+          templateItems={templateItems}
+          templateSubtitle={t('source_code')}
+          templateTitle={t('templates')}
+        />
       )}
 
-      {people[0] && (
-        <section className={styles.section}>
-          <Container>
-            <header className={styles.sectionHeader}>
-              <h2 className={styles.sectionTitle}>{t('participants')}</h2>
-              <p className={styles.sectionSubtitle}>{t('github_account')}</p>
-              <div className={styles.accentLine} />
-            </header>
-
-            <div className={styles.participantCloud}>
-              {people.map(({ id, name, avatar, githubLink }) => {
-                const content = (
-                  <>
-                    <LarkImage
-                      className={styles.avatar}
-                      src={avatar}
-                      alt={name as string}
-                      title={name as string}
-                    />
-                    <span className={styles.participantName}>{name as string}</span>
-                  </>
-                );
-
-                return githubLink ? (
-                  <a
-                    key={id}
-                    className={styles.participantCard}
-                    target="_blank"
-                    rel="noreferrer"
-                    href={githubLink as string}
-                  >
-                    {content}
-                  </a>
-                ) : (
-                  <div key={id} className={styles.participantCard}>
-                    {content}
-                  </div>
-                );
-              })}
-            </div>
-          </Container>
-        </section>
+      {participantItems[0] && (
+        <HackathonParticipants
+          participants={participantItems}
+          subtitle={t('github_account')}
+          title={t('participants')}
+        />
       )}
     </>
   );
diff --git a/translation/en-US.ts b/translation/en-US.ts
index f69d9cf..ce03d98 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -238,6 +238,7 @@ export default {
   hackathon_entry_flow_description:
     'Entries are generated from the current activity schema so different events can reuse the same page structure.',
   hackathon_step: 'Step',
+  hackathon_phase: 'Phase',
   participants: 'Participants',
   organizations: 'Organizations',
   prizes: 'Prizes',
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 3df6b91..764681b 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -221,12 +221,10 @@ export default {
   hackathon_project_registration_description:
     '登记项目名称、成员、赛道和一句话介绍，完成队伍锁定。',
   hackathon_submission: '提交',
-  hackathon_product_submission_description:
-    '比赛截止前统一提交最终作品、演示链接和补充说明。',
+  hackathon_product_submission_description: '比赛截止前统一提交最终作品、演示链接和补充说明。',
   hackathon_review: '评审',
   hackathon_evaluation_entry: '评审入口',
-  hackathon_evaluation_entry_description:
-    '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
+  hackathon_evaluation_entry_description: '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
   hackathon_view_all_entries: '查看全部入口',
   hackathon_agenda_preview: '议程预览',
   hackathon_action_hub: '入口中心 · 表单',
@@ -234,6 +232,7 @@ export default {
   hackathon_entry_flow_description:
     '入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。',
   hackathon_step: '步骤',
+  hackathon_phase: '阶段',
   participants: '参与者',
   organizations: '组织方',
   prizes: '奖项',
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index cdc305d..716098f 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -221,12 +221,10 @@ export default {
   hackathon_project_registration_description:
     '登記項目名稱、成員、賽道和一句話介紹，完成隊伍鎖定。',
   hackathon_submission: '提交',
-  hackathon_product_submission_description:
-    '比賽截止前統一提交最終作品、演示連結和補充說明。',
+  hackathon_product_submission_description: '比賽截止前統一提交最終作品、演示連結和補充說明。',
   hackathon_review: '評審',
   hackathon_evaluation_entry: '評審入口',
-  hackathon_evaluation_entry_description:
-    '評委或導師在評審階段使用，用於評分、複核與結果整理。',
+  hackathon_evaluation_entry_description: '評委或導師在評審階段使用，用於評分、複核與結果整理。',
   hackathon_view_all_entries: '查看全部入口',
   hackathon_agenda_preview: '議程預覽',
   hackathon_action_hub: '入口中心 · 表單',
@@ -234,6 +232,7 @@ export default {
   hackathon_entry_flow_description:
     '入口會根據活動當前配置自動生成。不同活動可以共用同一套頁面結構，而不是為每次活動單開專頁。',
   hackathon_step: '步驟',
+  hackathon_phase: '階段',
   participants: '參與者',
   organizations: '組織方',
   prizes: '獎項',

From 6ffeb32aa0f34267e149e5ca36345599a87cd8d6 Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:28:17 +0800
Subject: [PATCH 09/14] Address remaining review threads

---
 .../Hackathon/HackathonActionHub.module.less  |  18 +-
 .../Activity/Hackathon/HackathonActionHub.tsx |  44 +-
 .../Hackathon/HackathonAwards.module.less     |  29 +-
 .../Activity/Hackathon/HackathonAwards.tsx    |  37 +-
 .../Activity/Hackathon/HackathonHero.tsx      |  32 +-
 .../Hackathon/HackathonOverview.module.less   |  28 +-
 .../HackathonParticipants.module.less         |  32 +-
 .../Hackathon/HackathonResources.module.less  |  53 +-
 .../Activity/Hackathon/HackathonResources.tsx |  48 +-
 .../Hackathon/HackathonSchedule.module.less   |  72 +-
 .../Activity/Hackathon/HackathonSchedule.tsx  |  33 +-
 components/Activity/Hackathon/theme.less      |  32 +-
 pages/api/Lark/document/copy/[...slug].ts     |  13 +-
 pages/hackathon/[id].tsx                      | 770 ++++++++++--------
 14 files changed, 663 insertions(+), 578 deletions(-)

diff --git a/components/Activity/Hackathon/HackathonActionHub.module.less b/components/Activity/Hackathon/HackathonActionHub.module.less
index 9bb37d3..575da0a 100644
--- a/components/Activity/Hackathon/HackathonActionHub.module.less
+++ b/components/Activity/Hackathon/HackathonActionHub.module.less
@@ -1,4 +1,4 @@
-@import './theme.less';
+@import "./theme.less";
 
 .section {
   .section-shell();
@@ -10,11 +10,19 @@
   grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
   gap: 1.5rem;
   align-items: start;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .registerCard {
   .panel-card();
-  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.14)
+  );
 }
 
 .registerCardInner,
@@ -132,9 +140,3 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
-
-@media (max-width: 1199px) {
-  .registerWrap {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/components/Activity/Hackathon/HackathonActionHub.tsx b/components/Activity/Hackathon/HackathonActionHub.tsx
index 6daab6d..9294766 100644
--- a/components/Activity/Hackathon/HackathonActionHub.tsx
+++ b/components/Activity/Hackathon/HackathonActionHub.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, type PropsWithChildren } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
 import { HackathonHeroAction } from './HackathonHero';
@@ -18,17 +18,18 @@ export interface HackathonActionHubProps {
   primaryAction?: HackathonHeroAction;
   primaryDescription: string;
   primaryTitle: string;
-  secondaryAction: HackathonHeroAction;
   subtitle: string;
   title: string;
 }
 
-const ActionHubLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
-  action,
-  variant,
-}) => (
+export const HackathonActionHubLink: FC<{
+  action: HackathonHeroAction;
+  variant: 'ghost' | 'primary';
+}> = ({ action, variant }) => (
   <a
-    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    className={
+      variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
+    }
     href={action.href}
     {...(action.external && { target: '_blank', rel: 'noreferrer' })}
   >
@@ -36,7 +37,10 @@ const ActionHubLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'prima
   </a>
 );
 
-const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ entry, step }) => (
+const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
+  entry,
+  step,
+}) => (
   <article className={styles.entryCard}>
     <span className={styles.entryStep}>
       {step} · {entry.eyebrow}
@@ -50,7 +54,7 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
     </div>
 
     <nav className={styles.entryLinks} aria-label={entry.title}>
-      {entry.links.map(link => (
+      {entry.links.map((link) => (
         <a
           key={`${link.label}-${link.href}`}
           className={styles.entryLink}
@@ -64,13 +68,15 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
   </article>
 );
 
-export const HackathonActionHub: FC<HackathonActionHubProps> = ({
+export const HackathonActionHub: FC<
+  PropsWithChildren<HackathonActionHubProps>
+> = ({
+  children,
   entries,
   facts,
   primaryAction,
   primaryDescription,
   primaryTitle,
-  secondaryAction,
   subtitle,
   title,
 }) => (
@@ -84,12 +90,17 @@ export const HackathonActionHub: FC<HackathonActionHubProps> = ({
             <p className={styles.regDesc}>{primaryDescription}</p>
 
             <nav className={styles.regActions} aria-label={title}>
-              {primaryAction && <ActionHubLink action={primaryAction} variant="primary" />}
-              <ActionHubLink action={secondaryAction} variant="ghost" />
+              {primaryAction && (
+                <HackathonActionHubLink
+                  action={primaryAction}
+                  variant="primary"
+                />
+              )}
+              {children}
             </nav>
 
             <ul className={`list-unstyled ${styles.regFacts}`}>
-              {facts.map(fact => (
+              {facts.map((fact) => (
                 <li key={fact}>{fact}</li>
               ))}
             </ul>
@@ -105,7 +116,10 @@ export const HackathonActionHub: FC<HackathonActionHubProps> = ({
           <Row as="ol" className="list-unstyled g-3 mb-0">
             {entries.map((entry, index) => (
               <Col as="li" key={entry.title} md={6}>
-                <ActionEntryCard entry={entry} step={String(index + 1).padStart(2, '0')} />
+                <ActionEntryCard
+                  entry={entry}
+                  step={String(index + 1).padStart(2, '0')}
+                />
               </Col>
             ))}
           </Row>
diff --git a/components/Activity/Hackathon/HackathonAwards.module.less b/components/Activity/Hackathon/HackathonAwards.module.less
index 1518b10..01348b2 100644
--- a/components/Activity/Hackathon/HackathonAwards.module.less
+++ b/components/Activity/Hackathon/HackathonAwards.module.less
@@ -1,26 +1,11 @@
-@import './theme.less';
+@import "./theme.less";
 
-.section {
-  .section-shell();
-}
-
-.sectionHeader {
-  .section-header();
-}
+.section-frame();
 
-.sectionTitle {
-  .section-title();
-}
-
-.sectionSubtitle,
 .supportEyebrow {
   .section-subtitle();
 }
 
-.accentLine {
-  .accent-line();
-}
-
 .awardsGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -116,6 +101,10 @@
   gap: 1.25rem;
   margin-top: 1.4rem;
   padding: 1.55rem;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .supportTitle {
@@ -146,9 +135,3 @@
   max-height: 58px;
   object-fit: contain;
 }
-
-@media (max-width: 1199px) {
-  .supportCard {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/components/Activity/Hackathon/HackathonAwards.tsx b/components/Activity/Hackathon/HackathonAwards.tsx
index 53d9a88..2c767c8 100644
--- a/components/Activity/Hackathon/HackathonAwards.tsx
+++ b/components/Activity/Hackathon/HackathonAwards.tsx
@@ -5,10 +5,9 @@ import { Container } from 'react-bootstrap';
 import { LarkImage } from '../../LarkImage';
 import styles from './HackathonAwards.module.less';
 
-export interface HackathonAwardsMeta {
-  label: string;
-  value: string;
-}
+export type HackathonAwardsMeta<Value = string> = Record<'label', string> & {
+  value: Value;
+};
 
 export interface HackathonPrizeItem {
   description: string;
@@ -36,7 +35,13 @@ export interface HackathonAwardsProps {
   title: string;
 }
 
-const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, title }) => (
+const PrizeCard: FC<HackathonPrizeItem> = ({
+  description,
+  image,
+  meta,
+  tier,
+  title,
+}) => (
   <article className={styles.badgeTile}>
     {image && (
       <div className={styles.badgeArtWrap}>
@@ -61,11 +66,23 @@ const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, tit
   </article>
 );
 
-const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) => {
-  const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
+const OrganizationLogo: FC<HackathonOrganizationItem> = ({
+  href,
+  logo,
+  name,
+}) => {
+  const imageNode = (
+    <LarkImage src={logo} alt={name} className={styles.partnerLogo} />
+  );
 
   return href ? (
-    <a href={href} target="_blank" rel="noreferrer" title={name} className={styles.partnerLink}>
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      title={name}
+      className={styles.partnerLink}
+    >
       {imageNode}
     </a>
   ) : (
@@ -95,7 +112,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
           </header>
 
           <div className={styles.awardsGrid}>
-            {prizes.map(prize => (
+            {prizes.map((prize) => (
               <PrizeCard key={prize.id} {...prize} />
             ))}
           </div>
@@ -111,7 +128,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
           </div>
 
           <nav className={styles.partnerGrid} aria-label={supportEyebrow}>
-            {organizations.map(organization => (
+            {organizations.map((organization) => (
               <OrganizationLogo key={organization.id} {...organization} />
             ))}
           </nav>
diff --git a/components/Activity/Hackathon/HackathonHero.tsx b/components/Activity/Hackathon/HackathonHero.tsx
index 2641f08..917003c 100644
--- a/components/Activity/Hackathon/HackathonHero.tsx
+++ b/components/Activity/Hackathon/HackathonHero.tsx
@@ -3,6 +3,7 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
+import type { HackathonAwardsMeta } from './HackathonAwards';
 import styles from './HackathonHero.module.less';
 
 export interface HackathonHeroAction {
@@ -17,10 +18,7 @@ export interface HackathonHeroCard {
   title: string;
 }
 
-export interface HackathonHeroStat {
-  label: string;
-  value: number;
-}
+export type HackathonHeroStat = HackathonAwardsMeta<number>;
 
 export interface HackathonHeroProps {
   badges: string[];
@@ -48,12 +46,14 @@ const BadgeToneClass = [
   styles.heroBadgeRose,
 ];
 
-const HeroLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
-  action,
-  variant,
-}) => (
+const HeroLink: FC<{
+  action: HackathonHeroAction;
+  variant: 'ghost' | 'primary';
+}> = ({ action, variant }) => (
   <a
-    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    className={
+      variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
+    }
     href={action.href}
     {...(action.external && { target: '_blank', rel: 'noreferrer' })}
   >
@@ -61,10 +61,10 @@ const HeroLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }
   </a>
 );
 
-const FloatingCard: FC<{ card: HackathonHeroCard; position: 'bottom' | 'top' }> = ({
-  card,
-  position,
-}) => (
+const FloatingCard: FC<{
+  card: HackathonHeroCard;
+  position: 'bottom' | 'top';
+}> = ({ card, position }) => (
   <div
     className={`${styles.heroFloatingCard} ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
   >
@@ -140,7 +140,11 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
               <div className={styles.mascotGlow} />
 
               {image ? (
-                <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
+                <LarkImage
+                  src={image}
+                  alt={name}
+                  className="w-100 h-100 object-fit-cover"
+                />
               ) : (
                 <div className={styles.heroImageFallback}>{imageFallback}</div>
               )}
diff --git a/components/Activity/Hackathon/HackathonOverview.module.less b/components/Activity/Hackathon/HackathonOverview.module.less
index b992344..6b4329b 100644
--- a/components/Activity/Hackathon/HackathonOverview.module.less
+++ b/components/Activity/Hackathon/HackathonOverview.module.less
@@ -1,30 +1,16 @@
-@import './theme.less';
+@import "./theme.less";
 
-.section {
-  .section-shell();
-}
-
-.sectionHeader {
-  .section-header();
-}
-
-.sectionTitle {
-  .section-title();
-}
-
-.sectionSubtitle {
-  .section-subtitle();
-}
-
-.accentLine {
-  .accent-line();
-}
+.section-frame();
 
 .themePanel {
   margin-bottom: 1.5rem;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 28px;
-  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.12));
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.12)
+  );
   padding: 1.5rem 1.6rem;
 }
 
diff --git a/components/Activity/Hackathon/HackathonParticipants.module.less b/components/Activity/Hackathon/HackathonParticipants.module.less
index 1ad3e3c..19e5d71 100644
--- a/components/Activity/Hackathon/HackathonParticipants.module.less
+++ b/components/Activity/Hackathon/HackathonParticipants.module.less
@@ -1,29 +1,15 @@
-@import './theme.less';
+@import "./theme.less";
 
-.section {
-  .section-shell();
-}
-
-.sectionHeader {
-  .section-header();
-}
-
-.sectionTitle {
-  .section-title();
-}
-
-.sectionSubtitle {
-  .section-subtitle();
-}
-
-.accentLine {
-  .accent-line();
-}
+.section-frame();
 
 .participantCloud {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 1rem;
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .participantCard {
@@ -57,9 +43,3 @@
   font-size: 0.92rem;
   line-height: 1.4;
 }
-
-@media (max-width: 767px) {
-  .participantCloud {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
diff --git a/components/Activity/Hackathon/HackathonResources.module.less b/components/Activity/Hackathon/HackathonResources.module.less
index 5157282..2977440 100644
--- a/components/Activity/Hackathon/HackathonResources.module.less
+++ b/components/Activity/Hackathon/HackathonResources.module.less
@@ -1,24 +1,6 @@
-@import './theme.less';
+@import "./theme.less";
 
-.section {
-  .section-shell();
-}
-
-.sectionHeader {
-  .section-header();
-}
-
-.sectionTitle {
-  .section-title();
-}
-
-.sectionSubtitle {
-  .section-subtitle();
-}
-
-.accentLine {
-  .accent-line();
-}
+.section-frame();
 
 .projectHeader {
   margin-top: 2.75rem;
@@ -32,13 +14,19 @@
 }
 
 .resourceHead,
-.projectHead {
+.projectTop {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: start;
 }
 
+.projectHead {
+  display: grid;
+  gap: 0.8rem;
+  margin: 0;
+}
+
 .resourceTitle,
 .projectTitle {
   margin: 0;
@@ -79,6 +67,10 @@
   border-radius: 999px;
   padding: 0.34rem 0.72rem;
   font-size: 0.76rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.72rem;
+  }
 }
 
 .topicChip {
@@ -115,6 +107,12 @@
   font-family: @heading;
   font-size: 1.05rem;
   font-weight: 800;
+
+  @media (max-width: 767px) {
+    width: 54px;
+    height: 54px;
+    font-size: 0.92rem;
+  }
 }
 
 .projectMeta {
@@ -147,16 +145,3 @@
     line-height: 1.5;
   }
 }
-
-@media (max-width: 767px) {
-  .topicChip,
-  .topicChipMuted {
-    font-size: 0.72rem;
-  }
-
-  .scoreCircle {
-    width: 54px;
-    height: 54px;
-    font-size: 0.92rem;
-  }
-}
diff --git a/components/Activity/Hackathon/HackathonResources.tsx b/components/Activity/Hackathon/HackathonResources.tsx
index dd6fa17..e701708 100644
--- a/components/Activity/Hackathon/HackathonResources.tsx
+++ b/components/Activity/Hackathon/HackathonResources.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
+import type { HackathonAwardsMeta } from './HackathonAwards';
 import styles from './HackathonResources.module.less';
 
 export interface HackathonTemplateItem {
@@ -15,9 +16,7 @@ export interface HackathonTemplateItem {
   title: string;
 }
 
-export interface HackathonProjectMeta {
-  label: string;
-  value: string;
+export interface HackathonProjectMeta extends HackathonAwardsMeta {
   valueHref?: string;
 }
 
@@ -56,12 +55,12 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
     <p className={styles.resourceDescription}>{description}</p>
 
     <ul className={`list-unstyled ${styles.topicList}`}>
-      {languages.map(language => (
+      {languages.map((language) => (
         <li key={language} className={styles.topicChip}>
           {language}
         </li>
       ))}
-      {tags.map(tag => (
+      {tags.map((tag) => (
         <li key={tag} className={styles.topicChipMuted}>
           {tag}
         </li>
@@ -70,12 +69,22 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
 
     <nav className={styles.resourceLinks} aria-label={title}>
       {sourceUrl && (
-        <a className={styles.entryLink} href={sourceUrl} target="_blank" rel="noreferrer">
+        <a
+          className={styles.entryLink}
+          href={sourceUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
           {sourceLabel}
         </a>
       )}
       {previewUrl && (
-        <a className={styles.entryLink} href={previewUrl} target="_blank" rel="noreferrer">
+        <a
+          className={styles.entryLink}
+          href={previewUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
           {previewLabel}
         </a>
       )}
@@ -83,17 +92,24 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
   </article>
 );
 
-const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score, title }) => (
+const ProjectCard: FC<HackathonProjectItem> = ({
+  description,
+  link,
+  meta,
+  score,
+  title,
+}) => (
   <article className={styles.projectCard}>
-    <div className={styles.projectHead}>
-      <h3 className={styles.projectTitle}>
-        <a href={link}>{title}</a>
-      </h3>
+    <div className={styles.projectTop}>
+      <hgroup className={styles.projectHead}>
+        <h3 className={styles.projectTitle}>
+          <a href={link}>{title}</a>
+        </h3>
+        {description && <p className={styles.projectSummary}>{description}</p>}
+      </hgroup>
       <div className={styles.scoreCircle}>{score}</div>
     </div>
 
-    <p className={styles.projectSummary}>{description}</p>
-
     <dl className={styles.projectMeta}>
       {meta.map(({ label, value, valueHref }) => (
         <div key={`${label}-${value}`}>
@@ -124,7 +140,7 @@ export const HackathonResources: FC<HackathonResourcesProps> = ({
           </header>
 
           <Row className="g-3">
-            {templateItems.map(template => (
+            {templateItems.map((template) => (
               <Col key={template.id} md={6} xl={4}>
                 <TemplateCard {...template} />
               </Col>
@@ -142,7 +158,7 @@ export const HackathonResources: FC<HackathonResourcesProps> = ({
           </header>
 
           <Row className="g-3">
-            {projectItems.map(project => (
+            {projectItems.map((project) => (
               <Col key={project.id} md={6} xl={4}>
                 <ProjectCard {...project} />
               </Col>
diff --git a/components/Activity/Hackathon/HackathonSchedule.module.less b/components/Activity/Hackathon/HackathonSchedule.module.less
index 7c6955b..a9478a7 100644
--- a/components/Activity/Hackathon/HackathonSchedule.module.less
+++ b/components/Activity/Hackathon/HackathonSchedule.module.less
@@ -1,24 +1,6 @@
-@import './theme.less';
+@import "./theme.less";
 
-.section {
-  .section-shell();
-}
-
-.sectionHeader {
-  .section-header();
-}
-
-.sectionTitle {
-  .section-title();
-}
-
-.sectionSubtitle {
-  .section-subtitle();
-}
-
-.accentLine {
-  .accent-line();
-}
+.section-frame();
 
 .scheduleIntro {
   margin-bottom: 1.35rem;
@@ -58,12 +40,20 @@
   font-size: 0.74rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
+
+  @media (max-width: 767px) {
+    font-size: 0.72rem;
+  }
 }
 
 .scheduleDays {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .dayCard {
@@ -73,23 +63,43 @@
 }
 
 .formation {
-  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.1),
+    rgba(14, 43, 80, 0.86)
+  );
 }
 
 .enrollment {
-  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
+  background: linear-gradient(
+    135deg,
+    rgba(123, 97, 255, 0.12),
+    rgba(28, 20, 67, 0.86)
+  );
 }
 
 .competition {
-  background: linear-gradient(135deg, rgba(255, 201, 77, 0.12), rgba(60, 35, 8, 0.88));
+  background: linear-gradient(
+    135deg,
+    rgba(255, 201, 77, 0.12),
+    rgba(60, 35, 8, 0.88)
+  );
 }
 
 .break {
-  background: linear-gradient(135deg, rgba(255, 120, 186, 0.1), rgba(72, 18, 48, 0.88));
+  background: linear-gradient(
+    135deg,
+    rgba(255, 120, 186, 0.1),
+    rgba(72, 18, 48, 0.88)
+  );
 }
 
 .evaluation {
-  background: linear-gradient(135deg, rgba(72, 241, 168, 0.12), rgba(14, 50, 39, 0.88));
+  background: linear-gradient(
+    135deg,
+    rgba(72, 241, 168, 0.12),
+    rgba(14, 50, 39, 0.88)
+  );
 }
 
 .dayCardHead {
@@ -169,15 +179,3 @@
     line-height: 1.55;
   }
 }
-
-@media (max-width: 991px) {
-  .scheduleDays {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 767px) {
-  .schedulePill {
-    font-size: 0.72rem;
-  }
-}
diff --git a/components/Activity/Hackathon/HackathonSchedule.tsx b/components/Activity/Hackathon/HackathonSchedule.tsx
index e067f22..a830ca3 100644
--- a/components/Activity/Hackathon/HackathonSchedule.tsx
+++ b/components/Activity/Hackathon/HackathonSchedule.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
+import type { HackathonAwardsMeta } from './HackathonAwards';
 import styles from './HackathonSchedule.module.less';
 
 export type HackathonScheduleTone =
@@ -10,10 +11,8 @@ export type HackathonScheduleTone =
   | 'evaluation'
   | 'formation';
 
-export interface HackathonScheduleFact {
-  label: string;
+export interface HackathonScheduleFact extends HackathonAwardsMeta {
   meta: string;
-  value: string;
 }
 
 export interface HackathonScheduleItem {
@@ -69,15 +68,9 @@ const ScheduleCard: FC<HackathonScheduleItem & { phaseLabel: string }> = ({
   </article>
 );
 
-export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string }> = ({
-  items,
-  kicker,
-  lead,
-  overviewPills,
-  phaseLabel,
-  subtitle,
-  title,
-}) => (
+export const HackathonSchedule: FC<
+  HackathonScheduleProps & { phaseLabel: string }
+> = ({ items, kicker, lead, overviewPills, phaseLabel, subtitle, title }) => (
   <section id="schedule" className={styles.section}>
     <Container>
       <header className={styles.sectionHeader}>
@@ -86,21 +79,21 @@ export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string
         <div className={styles.accentLine} />
       </header>
 
-      <div className={styles.scheduleIntro}>
+      <hgroup className={styles.scheduleIntro}>
         <p className={styles.scheduleKicker}>{kicker}</p>
         <h3 className={styles.scheduleLead}>{lead}</h3>
-      </div>
+      </hgroup>
 
-      <div className={styles.scheduleOverview}>
-        {overviewPills.map(pill => (
-          <div key={pill} className={styles.schedulePill}>
+      <ul className={`list-unstyled ${styles.scheduleOverview}`}>
+        {overviewPills.map((pill) => (
+          <li key={pill} className={styles.schedulePill}>
             {pill}
-          </div>
+          </li>
         ))}
-      </div>
+      </ul>
 
       <div className={styles.scheduleDays}>
-        {items.map(item => (
+        {items.map((item) => (
           <ScheduleCard key={item.id} {...item} phaseLabel={phaseLabel} />
         ))}
       </div>
diff --git a/components/Activity/Hackathon/theme.less b/components/Activity/Hackathon/theme.less
index 88f5c54..68b0bce 100644
--- a/components/Activity/Hackathon/theme.less
+++ b/components/Activity/Hackathon/theme.less
@@ -10,8 +10,8 @@
 @rose: #ff78ba;
 @purple: #7b61ff;
 @shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
-@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
-@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
+@heading: "Orbitron", "Avenir Next", "Segoe UI", sans-serif;
+@body: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
 
 .panel-card() {
   box-shadow: @shadow;
@@ -24,10 +24,36 @@
 .section-shell() {
   position: relative;
   padding: clamp(4rem, 7vw, 6rem) 0;
-  background: linear-gradient(180deg, rgba(5, 8, 20, 0.98), rgba(7, 12, 26, 0.98));
+  background: linear-gradient(
+    180deg,
+    rgba(5, 8, 20, 0.98),
+    rgba(7, 12, 26, 0.98)
+  );
   color: @copy;
 }
 
+.section-frame() {
+  .section {
+    .section-shell();
+  }
+
+  .sectionHeader {
+    .section-header();
+  }
+
+  .sectionTitle {
+    .section-title();
+  }
+
+  .sectionSubtitle {
+    .section-subtitle();
+  }
+
+  .accentLine {
+    .accent-line();
+  }
+}
+
 .section-header() {
   text-align: center;
   margin-bottom: clamp(2.3rem, 4vw, 3rem);
diff --git a/pages/api/Lark/document/copy/[...slug].ts b/pages/api/Lark/document/copy/[...slug].ts
index 8c2de97..df95ab3 100644
--- a/pages/api/Lark/document/copy/[...slug].ts
+++ b/pages/api/Lark/document/copy/[...slug].ts
@@ -11,14 +11,21 @@ const router = createKoaRouter(import.meta.url);
 
 router.post('/:type/:id', safeAPI, verifyJWT, async (context: Context) => {
   const { type, id } = context.params,
-    { name, parentToken, ownerType, ownerId } = Reflect.get(context.request, 'body');
+    { name, parentToken, ownerType, ownerId } = Reflect.get(
+      context.request,
+      'body',
+    );
 
   const copiedFile =
     type === 'wiki'
       ? await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken)
-      : await lark.copyFile(`${type as LarkDocumentPathType}/${id}`, name, parentToken);
+      : await lark.copyFile(
+          `${type as LarkDocumentPathType}/${id}`,
+          name,
+          parentToken,
+        );
 
-  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.node_token;
+  const newId = copiedFile.token;
 
   if (ownerType && ownerId)
     try {
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 976385e..75e97de 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -10,8 +10,12 @@ import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { formatDate } from 'web-utility';
 
-import { HackathonActionHub } from '../../components/Activity/Hackathon/HackathonActionHub';
+import {
+  HackathonActionHub,
+  HackathonActionHubLink,
+} from '../../components/Activity/Hackathon/HackathonActionHub';
 import { HackathonAwards } from '../../components/Activity/Hackathon/HackathonAwards';
+import type { HackathonAwardsMeta } from '../../components/Activity/Hackathon/HackathonAwards';
 import { HackathonHero } from '../../components/Activity/Hackathon/HackathonHero';
 import { HackathonOverview } from '../../components/Activity/Hackathon/HackathonOverview';
 import { HackathonParticipants } from '../../components/Activity/Hackathon/HackathonParticipants';
@@ -124,14 +128,15 @@ const AgendaTypeLabelMap: Partial<Record<string, I18nKey>> = {
 const isPublicForm = ({ shared_limit }: TableFormView) =>
   ['anyone_editable'].includes(shared_limit as string);
 
-const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
+const formatMoment = (value?: TableCellValue) =>
+  value ? formatDate(value as string) : '';
 
 const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
   [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
 
 const previewText = (items: TableCellValue[], fallback: string) =>
   items
-    .map(item => item?.toString())
+    .map((item) => item?.toString())
     .filter(Boolean)
     .slice(0, 2)
     .join(' · ') || fallback;
@@ -146,10 +151,17 @@ const agendaToneClassOf = (type: TableCellValue, index: number) => {
     'evaluation',
   ];
 
-  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
+  return (
+    AgendaTypeClassMap[normalized] ||
+    fallbackOrder[index % fallbackOrder.length]
+  );
 };
 
-const agendaTypeLabelOf = (type: TableCellValue, t: (key: I18nKey) => string, fallback = '-') => {
+const agendaTypeLabelOf = (
+  type: TableCellValue,
+  t: (key: I18nKey) => string,
+  fallback = '-',
+) => {
   const normalized = type?.toString().toLowerCase() || '';
   const i18nKey = AgendaTypeLabelMap[normalized];
 
@@ -161,374 +173,436 @@ export const getServerSideProps = compose<{ id: string }>(
   errorLogger,
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
-    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
-    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
+    const { appId, tableIdMap } = (activity.databaseSchema ||
+      {}) as BiTableSchema;
 
-    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
+    if (!appId || !tableIdMap) return { notFound: true, props: {} };
 
-    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
+    for (const key of RequiredTableKeys)
+      if (!tableIdMap[key]) return { notFound: true, props: {} };
 
-    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
-      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
-      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
-      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
-      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
-      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
-      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
-    ]);
+    const [people, organizations, agenda, prizes, templates, projects] =
+      await Promise.all([
+        new PersonModel(appId, tableIdMap.Person).getAll(),
+        new OrganizationModel(appId, tableIdMap.Organization).getAll(),
+        new AgendaModel(appId, tableIdMap.Agenda).getAll(),
+        new PrizeModel(appId, tableIdMap.Prize).getAll(),
+        new TemplateModel(appId, tableIdMap.Template).getAll(),
+        new ProjectModel(appId, tableIdMap.Project).getAll(),
+      ]);
 
     return {
       props: {
         activity,
-        hackathon: { people, organizations, agenda, prizes, templates, projects },
+        hackathon: {
+          people,
+          organizations,
+          agenda,
+          prizes,
+          templates,
+          projects,
+        },
       },
     };
   },
 );
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  const { t } = useContext(I18nContext);
-
-  const {
-      name,
-      summary,
-      location,
-      startTime,
-      endTime,
-      databaseSchema,
-      host,
-      image,
-      type: activityType,
-    } = activity,
-    { people, organizations, agenda, prizes, templates, projects } = hackathon;
-  const forms = ((databaseSchema as Partial<BiTableSchema> | undefined)?.forms || {}) as Partial<
-    Record<FormGroupKey, TableFormView[]>
-  >;
-  const summaryText = (summary as string) || '';
-  const agendaItems = [...agenda].sort(
-    ({ startedAt: left }, { startedAt: right }) =>
-      new Date((left as string) || 0).getTime() - new Date((right as string) || 0).getTime(),
-  );
-  const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
-  const eventRange = formatPeriod(startTime, endTime);
-  const locationText = (location as TableCellLocation | undefined)?.full_address || '-';
-  const heroBadges = [
-    (activityType as string) || t('hackathon'),
-    ...hostTags,
-    formatMoment(startTime),
-    formatMoment(endTime),
-  ].filter((value): value is string => Boolean(value));
-  const heroStats = [
-    { label: t('participants'), value: people.length },
-    { label: t('projects'), value: projects.length },
-    { label: t('templates'), value: templates.length },
-    { label: t('prizes'), value: prizes.length },
-  ];
-  const agendaPreview = agendaItems.slice(0, 3);
-
-  const formGroups = FormButtonBar.flatMap<FormGroupView>(key => {
-    const list = (forms[key] || []).filter(isPublicForm);
-
-    return list[0]
-      ? [
-          {
-            key,
-            eyebrow: t(FormSectionMeta[key].eyebrow),
-            title: t(FormSectionMeta[key].title),
-            description: t(FormSectionMeta[key].description),
-            links: list.map(({ name, shared_url }) => ({
-              label: name as string,
-              href: shared_url,
-              external: true as const,
-            })),
-          },
-        ]
-      : [];
-  });
-  const primaryForm =
-    formGroups.find(({ key }) => key === 'Person') ||
-    formGroups.find(({ key }) => key === 'Project') ||
-    formGroups[0];
-  const secondaryForm =
-    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
-    formGroups.find(({ key }) => key !== primaryForm?.key);
-  const formPreview =
-    formGroups
-      .map(({ eyebrow }) => eyebrow)
-      .filter(Boolean)
-      .slice(0, 2)
-      .join(' · ') || t('hackathon_action_hub');
-
-  const highlightCards = [
-    {
-      icon: '👥',
-      title: t('participants'),
-      value: people.length,
-      description: t(FormSectionMeta.Person.description),
-    },
-    {
-      icon: '🚀',
-      title: t('projects'),
-      value: projects.length,
-      description: t(FormSectionMeta.Project.description),
-    },
-    {
-      icon: '🛠',
-      title: t('templates'),
-      value: templates.length,
-      description: previewText(
-        templates.map(({ name }) => name),
-        t('templates'),
-      ),
-    },
-    {
-      icon: '🏆',
-      title: t('prizes'),
-      value: prizes.length,
-      description: previewText(
-        prizes.map(({ name }) => name),
-        t('hackathon_prizes'),
-      ),
-    },
-    {
-      icon: '🤝',
-      title: t('organizations'),
-      value: organizations.length,
-      description: previewText(
-        organizations.map(({ name }) => name),
-        t('organizations'),
-      ),
-    },
-    {
-      icon: '📅',
-      title: t('agenda'),
-      value: agendaItems.length,
-      description: previewText(
-        agendaItems.map(({ name }) => name),
-        eventRange || t('agenda'),
-      ),
-    },
-  ];
-
-  const scheduleItems = agendaItems.map(
-    ({ id, name, type, summary, startedAt, endedAt }, index) => {
-      const typeLabel = agendaTypeLabelOf(type, t);
-      const description = (summary as string) || typeLabel;
+const HackathonDetail: FC<HackathonDetailProps> = observer(
+  ({ activity, hackathon }) => {
+    const { t } = useContext(I18nContext);
+
+    const {
+        name,
+        summary,
+        location,
+        startTime,
+        endTime,
+        databaseSchema,
+        host,
+        image,
+        type: activityType,
+      } = activity,
+      { people, organizations, agenda, prizes, templates, projects } =
+        hackathon;
+    const { forms } = (databaseSchema || {}) as BiTableSchema;
+    const formMap = (forms || {}) as Partial<
+      Record<FormGroupKey, TableFormView[]>
+    >;
+    const summaryText = (summary as string) || '';
+    const agendaItems = [...agenda].sort(
+      ({ startedAt: left }, { startedAt: right }) =>
+        new Date((left as string) || 0).getTime() -
+        new Date((right as string) || 0).getTime(),
+    );
+    const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
+    const eventRange = formatPeriod(startTime, endTime);
+    const locationText =
+      (location as TableCellLocation | undefined)?.full_address || '-';
+    const heroBadges = [
+      (activityType as string) || t('hackathon'),
+      ...hostTags,
+      formatMoment(startTime),
+      formatMoment(endTime),
+    ].filter((value): value is string => Boolean(value));
+    const heroStats = [
+      { label: t('participants'), value: people.length },
+      { label: t('projects'), value: projects.length },
+      { label: t('templates'), value: templates.length },
+      { label: t('prizes'), value: prizes.length },
+    ];
+    const agendaPreview = agendaItems.slice(0, 3);
+
+    const formGroups = FormButtonBar.flatMap<FormGroupView>((key) => {
+      const list = (formMap[key] || []).filter(isPublicForm);
+
+      return list[0]
+        ? [
+            {
+              key,
+              eyebrow: t(FormSectionMeta[key].eyebrow),
+              title: t(FormSectionMeta[key].title),
+              description: t(FormSectionMeta[key].description),
+              links: list.map(({ name, shared_url }) => ({
+                label: name as string,
+                href: shared_url,
+                external: true as const,
+              })),
+            },
+          ]
+        : [];
+    });
+    const primaryForm =
+      formGroups.find(({ key }) => key === 'Person') ||
+      formGroups.find(({ key }) => key === 'Project') ||
+      formGroups[0];
+    const secondaryForm =
+      formGroups.find(
+        ({ key }) => key === 'Project' && key !== primaryForm?.key,
+      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
+    const formPreview =
+      formGroups
+        .map(({ eyebrow }) => eyebrow)
+        .filter(Boolean)
+        .slice(0, 2)
+        .join(' · ') || t('hackathon_action_hub');
+
+    const highlightCards = [
+      {
+        icon: '👥',
+        title: t('participants'),
+        value: people.length,
+        description: t(FormSectionMeta.Person.description),
+      },
+      {
+        icon: '🚀',
+        title: t('projects'),
+        value: projects.length,
+        description: t(FormSectionMeta.Project.description),
+      },
+      {
+        icon: '🛠',
+        title: t('templates'),
+        value: templates.length,
+        description: previewText(
+          templates.map(({ name }) => name),
+          t('templates'),
+        ),
+      },
+      {
+        icon: '🏆',
+        title: t('prizes'),
+        value: prizes.length,
+        description: previewText(
+          prizes.map(({ name }) => name),
+          t('hackathon_prizes'),
+        ),
+      },
+      {
+        icon: '🤝',
+        title: t('organizations'),
+        value: organizations.length,
+        description: previewText(
+          organizations.map(({ name }) => name),
+          t('organizations'),
+        ),
+      },
+      {
+        icon: '📅',
+        title: t('agenda'),
+        value: agendaItems.length,
+        description: previewText(
+          agendaItems.map(({ name }) => name),
+          eventRange || t('agenda'),
+        ),
+      },
+    ];
+
+    const scheduleItems = agendaItems.map(
+      ({ id, name, type, summary, startedAt, endedAt }, index) => {
+        const typeLabel = agendaTypeLabelOf(type, t);
+        const description = (summary as string) || typeLabel;
+
+        return {
+          id: id as string,
+          phase: String(index + 1).padStart(2, '0'),
+          dateText: formatPeriod(startedAt, endedAt),
+          title: name as string,
+          description,
+          tone: agendaToneClassOf(type, index),
+          facts: [
+            {
+              label: t('type'),
+              value: typeLabel,
+              meta: description || eventRange || locationText,
+            },
+            {
+              label: t('start_time'),
+              value: formatMoment(startedAt),
+              meta: t('event_duration'),
+            },
+            {
+              label: t('end_time'),
+              value: formatMoment(endedAt),
+              meta: `${t('event_location')}: ${locationText}`,
+            },
+          ],
+        };
+      },
+    );
 
-      return {
+    const prizeItems = prizes.map(
+      ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
         id: id as string,
-        phase: String(index + 1).padStart(2, '0'),
-        dateText: formatPeriod(startedAt, endedAt),
         title: name as string,
-        description,
-        tone: agendaToneClassOf(type, index),
-        facts: [
-          { label: t('type'), value: typeLabel, meta: description || eventRange || locationText },
-          { label: t('start_time'), value: formatMoment(startedAt), meta: t('event_duration') },
-          {
-            label: t('end_time'),
-            value: formatMoment(endedAt),
-            meta: `${t('event_location')}: ${locationText}`,
-          },
-        ],
-      };
-    },
-  );
-
-  const prizeItems = prizes.map(
-    ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
+        tier: (level as string) || `#${index + 1}`,
+        description:
+          (summary as string) ||
+          previewText([sponsor, price, amount], t('prizes')),
+        image,
+        meta: [
+          sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
+          price ? { label: t('price'), value: price as string } : null,
+          amount ? { label: t('amount'), value: amount as string } : null,
+        ].filter(Boolean) as HackathonAwardsMeta[],
+      }),
+    );
+
+    const organizationItems = organizations.map(({ id, name, link, logo }) => ({
       id: id as string,
-      title: name as string,
-      tier: (level as string) || `#${index + 1}`,
-      description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
-      image,
-      meta: [
-        sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
-        price ? { label: t('price'), value: price as string } : null,
-        amount ? { label: t('amount'), value: amount as string } : null,
-      ].filter(Boolean) as { label: string; value: string }[],
-    }),
-  );
+      name: name as string,
+      href: link as string | undefined,
+      logo,
+    }));
 
-  const organizationItems = organizations.map(({ id, name, link, logo }) => ({
-    id: id as string,
-    name: name as string,
-    href: link as string | undefined,
-    logo,
-  }));
+    const templateItems = templates.map(
+      ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
+        id: id as string,
+        title: name as string,
+        description: (summary as string) || '',
+        languages: ((languages as string[] | undefined) || []).filter(Boolean),
+        tags: ((tags as string[] | undefined) || []).filter(Boolean),
+        sourceUrl: sourceLink as string | undefined,
+        sourceLabel: t('source_code'),
+        previewUrl: previewLink as string | undefined,
+        previewLabel: t('preview'),
+      }),
+    );
+
+    const projectItems = projects.map(
+      ({ id, name, score, summary, createdBy, members }) => {
+        const creator = createdBy as TableCellUser | undefined;
+        const scoreText =
+          score === null || score === undefined || score === ''
+            ? '—'
+            : `${score}`;
+
+        return {
+          id: id as string,
+          title: name as string,
+          link: `${ActivityModel.getLink(activity)}/team/${id}`,
+          score: scoreText,
+          description: (summary as string) || '',
+          meta: [
+            creator
+              ? {
+                  label: t('created_by'),
+                  value: creator.name || '—',
+                  valueHref: creator.email
+                    ? `mailto:${creator.email}`
+                    : undefined,
+                }
+              : { label: t('created_by'), value: '—' },
+            {
+              label: t('members'),
+              value: (members as string[] | undefined)?.join(', ') || '—',
+            },
+          ],
+        };
+      },
+    );
 
-  const templateItems = templates.map(
-    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
+    const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
       id: id as string,
-      title: name as string,
-      description: (summary as string) || '',
-      languages: ((languages as string[] | undefined) || []).filter(Boolean),
-      tags: ((tags as string[] | undefined) || []).filter(Boolean),
-      sourceUrl: sourceLink as string | undefined,
-      sourceLabel: t('source_code'),
-      previewUrl: previewLink as string | undefined,
-      previewLabel: t('preview'),
-    }),
-  );
-
-  const projectItems = projects.map(({ id, name, score, summary, createdBy, members }) => {
-    const creator = createdBy as TableCellUser | undefined;
-    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
-
-    return {
-      id: id as string,
-      title: name as string,
-      link: `${ActivityModel.getLink(activity)}/team/${id}`,
-      score: scoreText,
-      description: (summary as string) || '',
-      meta: [
-        creator
-          ? {
-              label: t('created_by'),
-              value: creator.name || '—',
-              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
-            }
-          : { label: t('created_by'), value: '—' },
-        {
-          label: t('members'),
-          value: (members as string[] | undefined)?.join(', ') || '—',
-        },
-      ],
-    };
-  });
-
-  const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
-    id: id as string,
-    name: name as string,
-    avatar,
-    githubLink: githubLink as string | undefined,
-  }));
-
-  return (
-    <>
-      <PageHead title={name as string} />
-
-      <HackathonHero
-        badges={heroBadges}
-        bottomCard={
-          agendaPreview[0]
-            ? {
-                eyebrow: t('hackathon_agenda_preview'),
-                title: agendaPreview[0].name as string,
-                description: formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt),
-              }
-            : undefined
-        }
-        description={summaryText}
-        image={image}
-        imageFallback={(activityType as string) || t('hackathon')}
-        locationText={locationText}
-        name={name as string}
-        primaryAction={
-          primaryForm
-            ? { label: primaryForm.title, href: primaryForm.links[0].href, external: true }
-            : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
-        }
-        secondaryAction={{ label: t('agenda'), href: '#schedule' }}
-        stats={heroStats}
-        subtitle={(activityType as string) || t('hackathon_detail')}
-        topCard={
-          primaryForm
-            ? {
-                eyebrow: primaryForm.eyebrow,
-                title: primaryForm.title,
-                description: primaryForm.description,
-              }
-            : undefined
-        }
-        visualChip={t('hackathon_detail')}
-        visualCopy={summaryText}
-        visualKicker={t('event_info')}
-        visualTitle={eventRange || summaryText}
-      />
-
-      <HackathonOverview
-        cards={highlightCards}
-        subtitle={t('event_description')}
-        themeSub={summaryText}
-        themeText={(activityType as string) || t('hackathon')}
-        title={t('event_info')}
-      />
-
-      {formGroups[0] && (
-        <HackathonActionHub
-          entries={formGroups.map(({ description, eyebrow, links, title }) => ({
-            title,
-            description,
-            eyebrow,
-            links,
-            count: links.length,
-          }))}
-          facts={[eventRange || t('event_duration'), locationText, formPreview]}
+      name: name as string,
+      avatar,
+      githubLink: githubLink as string | undefined,
+    }));
+
+    return (
+      <>
+        <PageHead title={name as string} />
+
+        <HackathonHero
+          badges={heroBadges}
+          bottomCard={
+            agendaPreview[0]
+              ? {
+                  eyebrow: t('hackathon_agenda_preview'),
+                  title: agendaPreview[0].name as string,
+                  description: formatPeriod(
+                    agendaPreview[0].startedAt,
+                    agendaPreview[0].endedAt,
+                  ),
+                }
+              : undefined
+          }
+          description={summaryText}
+          image={image}
+          imageFallback={(activityType as string) || t('hackathon')}
+          locationText={locationText}
+          name={name as string}
           primaryAction={
             primaryForm
-              ? { label: primaryForm.title, href: primaryForm.links[0].href, external: true }
-              : undefined
+              ? {
+                  label: primaryForm.title,
+                  href: primaryForm.links[0].href,
+                  external: true,
+                }
+              : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
           }
-          primaryDescription={primaryForm?.description || t('hackathon_entry_flow_description')}
-          primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
-          secondaryAction={
-            secondaryForm
-              ? { label: secondaryForm.title, href: secondaryForm.links[0].href, external: true }
-              : { label: t('agenda'), href: '#schedule' }
+          secondaryAction={{ label: t('agenda'), href: '#schedule' }}
+          stats={heroStats}
+          subtitle={(activityType as string) || t('hackathon_detail')}
+          topCard={
+            primaryForm
+              ? {
+                  eyebrow: primaryForm.eyebrow,
+                  title: primaryForm.title,
+                  description: primaryForm.description,
+                }
+              : undefined
           }
-          subtitle={t('hackathon_entry_flow')}
-          title={t('hackathon_action_hub')}
-        />
-      )}
-
-      {scheduleItems[0] && (
-        <HackathonSchedule
-          items={scheduleItems}
-          kicker={eventRange}
-          lead={name as string}
-          overviewPills={agendaItems.slice(0, 6).map(({ name }) => name as string)}
-          phaseLabel={t('hackathon_phase')}
-          subtitle={t('event_duration')}
-          title={t('agenda')}
+          visualChip={t('hackathon_detail')}
+          visualCopy={summaryText}
+          visualKicker={t('event_info')}
+          visualTitle={eventRange || summaryText}
         />
-      )}
-
-      {(prizeItems[0] || organizationItems[0]) && (
-        <HackathonAwards
-          organizations={organizationItems}
-          prizes={prizeItems}
-          subtitle={t('hackathon_prizes')}
-          supportDescription={summaryText}
-          supportEyebrow={t('organizations')}
-          supportTitle={previewText(
-            organizations.map(({ name }) => name),
-            t('organizations'),
-          )}
-          title={t('prizes')}
-        />
-      )}
-
-      {(templateItems[0] || projectItems[0]) && (
-        <HackathonResources
-          projectItems={projectItems}
-          projectSubtitle={t('products')}
-          projectTitle={t('projects')}
-          templateItems={templateItems}
-          templateSubtitle={t('source_code')}
-          templateTitle={t('templates')}
-        />
-      )}
 
-      {participantItems[0] && (
-        <HackathonParticipants
-          participants={participantItems}
-          subtitle={t('github_account')}
-          title={t('participants')}
+        <HackathonOverview
+          cards={highlightCards}
+          subtitle={t('event_description')}
+          themeSub={summaryText}
+          themeText={(activityType as string) || t('hackathon')}
+          title={t('event_info')}
         />
-      )}
-    </>
-  );
-});
+
+        {formGroups[0] && (
+          <HackathonActionHub
+            entries={formGroups.map(
+              ({ description, eyebrow, links, title }) => ({
+                title,
+                description,
+                eyebrow,
+                links,
+                count: links.length,
+              }),
+            )}
+            facts={[
+              eventRange || t('event_duration'),
+              locationText,
+              formPreview,
+            ]}
+            primaryAction={
+              primaryForm
+                ? {
+                    label: primaryForm.title,
+                    href: primaryForm.links[0].href,
+                    external: true,
+                  }
+                : undefined
+            }
+            primaryDescription={
+              primaryForm?.description || t('hackathon_entry_flow_description')
+            }
+            primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
+            subtitle={t('hackathon_entry_flow')}
+            title={t('hackathon_action_hub')}
+          >
+            <HackathonActionHubLink
+              action={
+                secondaryForm
+                  ? {
+                      label: secondaryForm.title,
+                      href: secondaryForm.links[0].href,
+                      external: true,
+                    }
+                  : { label: t('agenda'), href: '#schedule' }
+              }
+              variant="ghost"
+            />
+          </HackathonActionHub>
+        )}
+
+        {scheduleItems[0] && (
+          <HackathonSchedule
+            items={scheduleItems}
+            kicker={eventRange}
+            lead={name as string}
+            overviewPills={agendaItems
+              .slice(0, 6)
+              .map(({ name }) => name as string)}
+            phaseLabel={t('hackathon_phase')}
+            subtitle={t('event_duration')}
+            title={t('agenda')}
+          />
+        )}
+
+        {(prizeItems[0] || organizationItems[0]) && (
+          <HackathonAwards
+            organizations={organizationItems}
+            prizes={prizeItems}
+            subtitle={t('hackathon_prizes')}
+            supportDescription={summaryText}
+            supportEyebrow={t('organizations')}
+            supportTitle={previewText(
+              organizations.map(({ name }) => name),
+              t('organizations'),
+            )}
+            title={t('prizes')}
+          />
+        )}
+
+        {(templateItems[0] || projectItems[0]) && (
+          <HackathonResources
+            projectItems={projectItems}
+            projectSubtitle={t('products')}
+            projectTitle={t('projects')}
+            templateItems={templateItems}
+            templateSubtitle={t('source_code')}
+            templateTitle={t('templates')}
+          />
+        )}
+
+        {participantItems[0] && (
+          <HackathonParticipants
+            participants={participantItems}
+            subtitle={t('github_account')}
+            title={t('participants')}
+          />
+        )}
+      </>
+    );
+  },
+);
 
 export default HackathonDetail;

From 77bbdfbe1aff8fbb9826fcd78cde97982ac6210f Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:30:20 +0800
Subject: [PATCH 10/14] Normalize LESS quotes

---
 components/Activity/Hackathon/HackathonActionHub.module.less  | 2 +-
 components/Activity/Hackathon/HackathonAwards.module.less     | 2 +-
 components/Activity/Hackathon/HackathonOverview.module.less   | 2 +-
 .../Activity/Hackathon/HackathonParticipants.module.less      | 2 +-
 components/Activity/Hackathon/HackathonResources.module.less  | 2 +-
 components/Activity/Hackathon/HackathonSchedule.module.less   | 2 +-
 components/Activity/Hackathon/theme.less                      | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/Activity/Hackathon/HackathonActionHub.module.less b/components/Activity/Hackathon/HackathonActionHub.module.less
index 575da0a..e238059 100644
--- a/components/Activity/Hackathon/HackathonActionHub.module.less
+++ b/components/Activity/Hackathon/HackathonActionHub.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section {
   .section-shell();
diff --git a/components/Activity/Hackathon/HackathonAwards.module.less b/components/Activity/Hackathon/HackathonAwards.module.less
index 01348b2..bd36fd5 100644
--- a/components/Activity/Hackathon/HackathonAwards.module.less
+++ b/components/Activity/Hackathon/HackathonAwards.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section-frame();
 
diff --git a/components/Activity/Hackathon/HackathonOverview.module.less b/components/Activity/Hackathon/HackathonOverview.module.less
index 6b4329b..296f504 100644
--- a/components/Activity/Hackathon/HackathonOverview.module.less
+++ b/components/Activity/Hackathon/HackathonOverview.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section-frame();
 
diff --git a/components/Activity/Hackathon/HackathonParticipants.module.less b/components/Activity/Hackathon/HackathonParticipants.module.less
index 19e5d71..e8b4338 100644
--- a/components/Activity/Hackathon/HackathonParticipants.module.less
+++ b/components/Activity/Hackathon/HackathonParticipants.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section-frame();
 
diff --git a/components/Activity/Hackathon/HackathonResources.module.less b/components/Activity/Hackathon/HackathonResources.module.less
index 2977440..848a8a6 100644
--- a/components/Activity/Hackathon/HackathonResources.module.less
+++ b/components/Activity/Hackathon/HackathonResources.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section-frame();
 
diff --git a/components/Activity/Hackathon/HackathonSchedule.module.less b/components/Activity/Hackathon/HackathonSchedule.module.less
index a9478a7..a4d3f5c 100644
--- a/components/Activity/Hackathon/HackathonSchedule.module.less
+++ b/components/Activity/Hackathon/HackathonSchedule.module.less
@@ -1,4 +1,4 @@
-@import "./theme.less";
+@import './theme.less';
 
 .section-frame();
 
diff --git a/components/Activity/Hackathon/theme.less b/components/Activity/Hackathon/theme.less
index 68b0bce..e2eece2 100644
--- a/components/Activity/Hackathon/theme.less
+++ b/components/Activity/Hackathon/theme.less
@@ -10,8 +10,8 @@
 @rose: #ff78ba;
 @purple: #7b61ff;
 @shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
-@heading: "Orbitron", "Avenir Next", "Segoe UI", sans-serif;
-@body: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
+@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
+@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
 
 .panel-card() {
   box-shadow: @shadow;

From 0211cca2f36b3d3f6451d9fc063a311561bb2a2e Mon Sep 17 00:00:00 2001
From: Ellery Li <elleryli@users.noreply.github.com>
Date: Mon, 30 Mar 2026 23:42:44 +0800
Subject: [PATCH 11/14] Apply latest PR review feedback

---
 .../Activity/Hackathon/HackathonActionHub.tsx |  2 +-
 .../Activity/Hackathon/HackathonAwards.tsx    |  5 +--
 pages/api/Lark/document/copy/[...slug].ts     | 13 ++-----
 pages/hackathon/[id].tsx                      | 35 +++++++------------
 4 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/components/Activity/Hackathon/HackathonActionHub.tsx b/components/Activity/Hackathon/HackathonActionHub.tsx
index 9294766..54b55b3 100644
--- a/components/Activity/Hackathon/HackathonActionHub.tsx
+++ b/components/Activity/Hackathon/HackathonActionHub.tsx
@@ -1,4 +1,4 @@
-import { FC, type PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
 import { HackathonHeroAction } from './HackathonHero';
diff --git a/components/Activity/Hackathon/HackathonAwards.tsx b/components/Activity/Hackathon/HackathonAwards.tsx
index 2c767c8..6b66eb3 100644
--- a/components/Activity/Hackathon/HackathonAwards.tsx
+++ b/components/Activity/Hackathon/HackathonAwards.tsx
@@ -5,9 +5,10 @@ import { Container } from 'react-bootstrap';
 import { LarkImage } from '../../LarkImage';
 import styles from './HackathonAwards.module.less';
 
-export type HackathonAwardsMeta<Value = string> = Record<'label', string> & {
+export interface HackathonAwardsMeta<Value = string> {
+  label: string;
   value: Value;
-};
+}
 
 export interface HackathonPrizeItem {
   description: string;
diff --git a/pages/api/Lark/document/copy/[...slug].ts b/pages/api/Lark/document/copy/[...slug].ts
index df95ab3..8c2de97 100644
--- a/pages/api/Lark/document/copy/[...slug].ts
+++ b/pages/api/Lark/document/copy/[...slug].ts
@@ -11,21 +11,14 @@ const router = createKoaRouter(import.meta.url);
 
 router.post('/:type/:id', safeAPI, verifyJWT, async (context: Context) => {
   const { type, id } = context.params,
-    { name, parentToken, ownerType, ownerId } = Reflect.get(
-      context.request,
-      'body',
-    );
+    { name, parentToken, ownerType, ownerId } = Reflect.get(context.request, 'body');
 
   const copiedFile =
     type === 'wiki'
       ? await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken)
-      : await lark.copyFile(
-          `${type as LarkDocumentPathType}/${id}`,
-          name,
-          parentToken,
-        );
+      : await lark.copyFile(`${type as LarkDocumentPathType}/${id}`, name, parentToken);
 
-  const newId = copiedFile.token;
+  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.node_token;
 
   if (ownerType && ownerId)
     try {
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 75e97de..a5febb5 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -173,35 +173,26 @@ export const getServerSideProps = compose<{ id: string }>(
   errorLogger,
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
-    const { appId, tableIdMap } = (activity.databaseSchema ||
-      {}) as BiTableSchema;
+    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
+    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
 
-    if (!appId || !tableIdMap) return { notFound: true, props: {} };
+    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
 
-    for (const key of RequiredTableKeys)
-      if (!tableIdMap[key]) return { notFound: true, props: {} };
+    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
 
-    const [people, organizations, agenda, prizes, templates, projects] =
-      await Promise.all([
-        new PersonModel(appId, tableIdMap.Person).getAll(),
-        new OrganizationModel(appId, tableIdMap.Organization).getAll(),
-        new AgendaModel(appId, tableIdMap.Agenda).getAll(),
-        new PrizeModel(appId, tableIdMap.Prize).getAll(),
-        new TemplateModel(appId, tableIdMap.Template).getAll(),
-        new ProjectModel(appId, tableIdMap.Project).getAll(),
-      ]);
+    const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
+      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
+      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
+    ]);
 
     return {
       props: {
         activity,
-        hackathon: {
-          people,
-          organizations,
-          agenda,
-          prizes,
-          templates,
-          projects,
-        },
+        hackathon: { people, organizations, agenda, prizes, templates, projects },
       },
     };
   },

From 8ef8dd2b9decd05d43474f09d9a85050569fa779 Mon Sep 17 00:00:00 2001
From: TechQuery <shiy2008@gmail.com>
Date: Tue, 31 Mar 2026 00:18:19 +0800
Subject: [PATCH 12/14] [optimize] simplify CodeX codes [fix] some CodeX bugs

---
 ...nHub.module.less => ActionHub.module.less} |  27 +-
 .../{HackathonActionHub.tsx => ActionHub.tsx} |  33 +-
 ...nAwards.module.less => Awards.module.less} |  21 +-
 .../{HackathonAwards.tsx => Awards.tsx}       |  32 +-
 ...athonHero.module.less => Hero.module.less} |  69 +-
 .../Hackathon/{HackathonHero.tsx => Hero.tsx} |  14 +-
 ...rview.module.less => Overview.module.less} |  27 +-
 .../{HackathonOverview.tsx => Overview.tsx}   |   2 +-
 ...s.module.less => Participants.module.less} |   2 -
 ...athonParticipants.tsx => Participants.tsx} |   2 +-
 ...rces.module.less => Resources.module.less} |  22 +-
 .../{HackathonResources.tsx => Resources.tsx} |  34 +-
 ...edule.module.less => Schedule.module.less} |  55 +-
 .../{HackathonSchedule.tsx => Schedule.tsx}   |  20 +-
 models/Hackathon.ts                           |  25 +-
 pages/hackathon/[id].tsx                      | 777 +++++++++---------
 16 files changed, 516 insertions(+), 646 deletions(-)
 rename components/Activity/Hackathon/{HackathonActionHub.module.less => ActionHub.module.less} (86%)
 rename components/Activity/Hackathon/{HackathonActionHub.tsx => ActionHub.tsx} (79%)
 rename components/Activity/Hackathon/{HackathonAwards.module.less => Awards.module.less} (96%)
 rename components/Activity/Hackathon/{HackathonAwards.tsx => Awards.tsx} (83%)
 rename components/Activity/Hackathon/{HackathonHero.module.less => Hero.module.less} (94%)
 rename components/Activity/Hackathon/{HackathonHero.tsx => Hero.tsx} (92%)
 rename components/Activity/Hackathon/{HackathonOverview.module.less => Overview.module.less} (89%)
 rename components/Activity/Hackathon/{HackathonOverview.tsx => Overview.tsx} (96%)
 rename components/Activity/Hackathon/{HackathonParticipants.module.less => Participants.module.less} (97%)
 rename components/Activity/Hackathon/{HackathonParticipants.tsx => Participants.tsx} (96%)
 rename components/Activity/Hackathon/{HackathonResources.module.less => Resources.module.less} (97%)
 rename components/Activity/Hackathon/{HackathonResources.tsx => Resources.tsx} (84%)
 rename components/Activity/Hackathon/{HackathonSchedule.module.less => Schedule.module.less} (77%)
 rename components/Activity/Hackathon/{HackathonSchedule.tsx => Schedule.tsx} (87%)

diff --git a/components/Activity/Hackathon/HackathonActionHub.module.less b/components/Activity/Hackathon/ActionHub.module.less
similarity index 86%
rename from components/Activity/Hackathon/HackathonActionHub.module.less
rename to components/Activity/Hackathon/ActionHub.module.less
index e238059..cfd022f 100644
--- a/components/Activity/Hackathon/HackathonActionHub.module.less
+++ b/components/Activity/Hackathon/ActionHub.module.less
@@ -1,15 +1,14 @@
 @import './theme.less';
 
 .section {
-  .section-shell();
   padding-top: clamp(3rem, 5vw, 4rem);
 }
 
 .registerWrap {
   display: grid;
   grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
-  gap: 1.5rem;
   align-items: start;
+  gap: 1.5rem;
 
   @media (max-width: 1199px) {
     grid-template-columns: 1fr;
@@ -17,12 +16,7 @@
 }
 
 .registerCard {
-  .panel-card();
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.08),
-    rgba(123, 97, 255, 0.14)
-  );
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
 }
 
 .registerCardInner,
@@ -33,17 +27,16 @@
 .regEyebrow,
 .entryEyebrow,
 .entryStep {
-  .eyebrow();
 }
 
 .regTitle,
 .entryTitle {
   margin: 0;
   color: #fff;
-  font-family: @heading;
-  font-size: clamp(1.55rem, 3vw, 2.1rem);
   font-weight: 800;
+  font-size: clamp(1.55rem, 3vw, 2.1rem);
   line-height: 1.3;
+  font-family: @heading;
 }
 
 .regTitle {
@@ -68,12 +61,10 @@
 }
 
 .actionButton {
-  .button-primary();
 }
 
 .actionButtonGhost,
 .entryLink {
-  .button-ghost();
 }
 
 .regFacts {
@@ -83,7 +74,6 @@
   margin: 1.3rem 0 0;
 
   li {
-    .chip();
     padding: 0.48rem 0.85rem;
     color: @copy;
     font-size: 0.9rem;
@@ -91,7 +81,6 @@
 }
 
 .entryHub {
-  .panel-card();
 }
 
 .entryHubHead {
@@ -104,9 +93,8 @@
 }
 
 .entryCard {
-  .panel-card();
-  height: 100%;
   padding: 1.3rem;
+  height: 100%;
 }
 
 .entryStep {
@@ -116,8 +104,8 @@
 .entryCard h4 {
   margin: 0.55rem 0 0.45rem;
   color: #fff;
-  font-family: @heading;
   font-size: 1.02rem;
+  font-family: @heading;
 }
 
 .entryCard p {
@@ -132,11 +120,10 @@
 }
 
 .entryMeta {
-  .chip();
   padding: 0.35rem 0.7rem;
   color: @gold;
-  font-family: @heading;
   font-size: 0.72rem;
+  font-family: @heading;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
diff --git a/components/Activity/Hackathon/HackathonActionHub.tsx b/components/Activity/Hackathon/ActionHub.tsx
similarity index 79%
rename from components/Activity/Hackathon/HackathonActionHub.tsx
rename to components/Activity/Hackathon/ActionHub.tsx
index 54b55b3..ab44cad 100644
--- a/components/Activity/Hackathon/HackathonActionHub.tsx
+++ b/components/Activity/Hackathon/ActionHub.tsx
@@ -1,8 +1,8 @@
 import type { FC, PropsWithChildren } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
-import { HackathonHeroAction } from './HackathonHero';
-import styles from './HackathonActionHub.module.less';
+import { HackathonHeroAction } from './Hero';
+import styles from './ActionHub.module.less';
 
 export interface HackathonActionHubEntry {
   count: number;
@@ -27,9 +27,7 @@ export const HackathonActionHubLink: FC<{
   variant: 'ghost' | 'primary';
 }> = ({ action, variant }) => (
   <a
-    className={
-      variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
-    }
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
     href={action.href}
     {...(action.external && { target: '_blank', rel: 'noreferrer' })}
   >
@@ -37,10 +35,7 @@ export const HackathonActionHubLink: FC<{
   </a>
 );
 
-const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
-  entry,
-  step,
-}) => (
+const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ entry, step }) => (
   <article className={styles.entryCard}>
     <span className={styles.entryStep}>
       {step} · {entry.eyebrow}
@@ -54,7 +49,7 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
     </div>
 
     <nav className={styles.entryLinks} aria-label={entry.title}>
-      {entry.links.map((link) => (
+      {entry.links.map(link => (
         <a
           key={`${link.label}-${link.href}`}
           className={styles.entryLink}
@@ -68,9 +63,7 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
   </article>
 );
 
-export const HackathonActionHub: FC<
-  PropsWithChildren<HackathonActionHubProps>
-> = ({
+export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>> = ({
   children,
   entries,
   facts,
@@ -90,17 +83,12 @@ export const HackathonActionHub: FC<
             <p className={styles.regDesc}>{primaryDescription}</p>
 
             <nav className={styles.regActions} aria-label={title}>
-              {primaryAction && (
-                <HackathonActionHubLink
-                  action={primaryAction}
-                  variant="primary"
-                />
-              )}
+              {primaryAction && <HackathonActionHubLink action={primaryAction} variant="primary" />}
               {children}
             </nav>
 
             <ul className={`list-unstyled ${styles.regFacts}`}>
-              {facts.map((fact) => (
+              {facts.map(fact => (
                 <li key={fact}>{fact}</li>
               ))}
             </ul>
@@ -116,10 +104,7 @@ export const HackathonActionHub: FC<
           <Row as="ol" className="list-unstyled g-3 mb-0">
             {entries.map((entry, index) => (
               <Col as="li" key={entry.title} md={6}>
-                <ActionEntryCard
-                  entry={entry}
-                  step={String(index + 1).padStart(2, '0')}
-                />
+                <ActionEntryCard entry={entry} step={String(index + 1).padStart(2, '0')} />
               </Col>
             ))}
           </Row>
diff --git a/components/Activity/Hackathon/HackathonAwards.module.less b/components/Activity/Hackathon/Awards.module.less
similarity index 96%
rename from components/Activity/Hackathon/HackathonAwards.module.less
rename to components/Activity/Hackathon/Awards.module.less
index bd36fd5..078334d 100644
--- a/components/Activity/Hackathon/HackathonAwards.module.less
+++ b/components/Activity/Hackathon/Awards.module.less
@@ -1,9 +1,6 @@
 @import './theme.less';
 
-.section-frame();
-
 .supportEyebrow {
-  .section-subtitle();
 }
 
 .awardsGrid {
@@ -13,7 +10,6 @@
 }
 
 .badgeTile {
-  .panel-card();
   overflow: hidden;
 }
 
@@ -24,8 +20,8 @@
 .badgeArt {
   border-radius: 22px;
   background: rgba(255, 255, 255, 0.04);
-  width: 100%;
   aspect-ratio: 1;
+  width: 100%;
   object-fit: cover;
 }
 
@@ -35,8 +31,8 @@
 
 .badgeTierLabel {
   color: @gold;
-  font-family: @heading;
   font-size: 0.74rem;
+  font-family: @heading;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
@@ -45,8 +41,8 @@
 .supportTitle {
   margin: 0;
   color: #fff;
-  font-family: @heading;
   font-weight: 800;
+  font-family: @heading;
 }
 
 .badgeTileTitle {
@@ -71,8 +67,8 @@
   div {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.8rem;
     align-items: start;
+    gap: 0.8rem;
   }
 
   dt,
@@ -82,8 +78,8 @@
 
   dt {
     color: @muted;
-    font-family: @heading;
     font-size: 0.72rem;
+    font-family: @heading;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
@@ -95,7 +91,6 @@
 }
 
 .supportCard {
-  .panel-card();
   display: grid;
   grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
   gap: 1.25rem;
@@ -115,19 +110,19 @@
 .partnerGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
-  gap: 0.8rem;
   align-items: center;
+  gap: 0.8rem;
 }
 
 .partnerLink {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.04);
-  min-height: 104px;
   padding: 1rem;
+  min-height: 104px;
 }
 
 .partnerLogo {
diff --git a/components/Activity/Hackathon/HackathonAwards.tsx b/components/Activity/Hackathon/Awards.tsx
similarity index 83%
rename from components/Activity/Hackathon/HackathonAwards.tsx
rename to components/Activity/Hackathon/Awards.tsx
index 6b66eb3..1f751e4 100644
--- a/components/Activity/Hackathon/HackathonAwards.tsx
+++ b/components/Activity/Hackathon/Awards.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
-import styles from './HackathonAwards.module.less';
+import styles from './Awards.module.less';
 
 export interface HackathonAwardsMeta<Value = string> {
   label: string;
@@ -36,13 +36,7 @@ export interface HackathonAwardsProps {
   title: string;
 }
 
-const PrizeCard: FC<HackathonPrizeItem> = ({
-  description,
-  image,
-  meta,
-  tier,
-  title,
-}) => (
+const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, title }) => (
   <article className={styles.badgeTile}>
     {image && (
       <div className={styles.badgeArtWrap}>
@@ -67,23 +61,11 @@ const PrizeCard: FC<HackathonPrizeItem> = ({
   </article>
 );
 
-const OrganizationLogo: FC<HackathonOrganizationItem> = ({
-  href,
-  logo,
-  name,
-}) => {
-  const imageNode = (
-    <LarkImage src={logo} alt={name} className={styles.partnerLogo} />
-  );
+const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) => {
+  const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
 
   return href ? (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      title={name}
-      className={styles.partnerLink}
-    >
+    <a href={href} target="_blank" rel="noreferrer" title={name} className={styles.partnerLink}>
       {imageNode}
     </a>
   ) : (
@@ -113,7 +95,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
           </header>
 
           <div className={styles.awardsGrid}>
-            {prizes.map((prize) => (
+            {prizes.map(prize => (
               <PrizeCard key={prize.id} {...prize} />
             ))}
           </div>
@@ -129,7 +111,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
           </div>
 
           <nav className={styles.partnerGrid} aria-label={supportEyebrow}>
-            {organizations.map((organization) => (
+            {organizations.map(organization => (
               <OrganizationLogo key={organization.id} {...organization} />
             ))}
           </nav>
diff --git a/components/Activity/Hackathon/HackathonHero.module.less b/components/Activity/Hackathon/Hero.module.less
similarity index 94%
rename from components/Activity/Hackathon/HackathonHero.module.less
rename to components/Activity/Hackathon/Hero.module.less
index 7d8137b..50beac6 100644
--- a/components/Activity/Hackathon/HackathonHero.module.less
+++ b/components/Activity/Hackathon/Hero.module.less
@@ -2,12 +2,8 @@
 
 .hero {
   position: relative;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),
-    radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),
-    linear-gradient(180deg, @bg 0%, #091022 48%, #050814 100%);
   padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
+  overflow: hidden;
   color: @copy;
 
   &::before,
@@ -19,28 +15,28 @@
   }
 
   &::before {
+    opacity: 0.45;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
     background-image:
       linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
       linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
     background-size: 54px 54px;
-    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
-    opacity: 0.45;
   }
 
   &::after {
     inset: auto 0 0;
-    height: 140px;
     background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
+    height: 140px;
   }
 }
 
 .heroInner {
-  position: relative;
-  z-index: 1;
   display: grid;
+  position: relative;
   grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
-  gap: clamp(2rem, 4vw, 4rem);
   align-items: center;
+  gap: clamp(2rem, 4vw, 4rem);
+  z-index: 1;
 }
 
 .heroContent {
@@ -64,9 +60,9 @@
   background: rgba(255, 255, 255, 0.06);
   padding: 0.42rem 0.9rem;
   color: @copy;
-  font-family: @heading;
-  font-size: 0.78rem;
   font-weight: 700;
+  font-size: 0.78rem;
+  font-family: @heading;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
@@ -100,11 +96,11 @@
   flex-direction: column;
   gap: 0.2rem;
   margin: 0;
-  font-family: @heading;
-  font-size: clamp(2.6rem, 5vw, 4.45rem);
   font-weight: 900;
-  letter-spacing: 0.02em;
+  font-size: clamp(2.6rem, 5vw, 4.45rem);
   line-height: 1;
+  font-family: @heading;
+  letter-spacing: 0.02em;
 }
 
 .heroTitlePrimary {
@@ -122,12 +118,12 @@
 }
 
 .description {
-  max-width: 62ch;
   margin: 0;
+  max-width: 62ch;
   color: @muted;
-  font-family: @body;
   font-size: 1.05rem;
   line-height: 1.8;
+  font-family: @body;
 }
 
 .heroActions {
@@ -136,14 +132,6 @@
   gap: 0.9rem;
 }
 
-.actionButton {
-  .button-primary();
-}
-
-.actionButtonGhost {
-  .button-ghost();
-}
-
 .heroStats {
   display: flex;
   flex-wrap: wrap;
@@ -155,16 +143,16 @@
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
-  min-width: 108px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.06);
   padding: 0.85rem 1rem;
+  min-width: 108px;
 
   strong {
-    font-family: @heading;
     font-size: 1.25rem;
     line-height: 1.1;
+    font-family: @heading;
   }
 
   span {
@@ -181,11 +169,10 @@
 }
 
 .heroVisualCard {
-  .panel-card();
   position: relative;
   z-index: 1;
-  overflow: hidden;
   background: linear-gradient(180deg, rgba(11, 19, 40, 0.95), rgba(8, 18, 39, 0.9));
+  overflow: hidden;
 }
 
 .heroVisualHead {
@@ -198,9 +185,9 @@
 .visualKicker,
 .visualChip,
 .floatingLabel {
-  font-family: @heading;
-  font-size: 0.75rem;
   font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }
@@ -216,12 +203,12 @@
 
 .heroImageFrame {
   position: relative;
-  overflow: hidden;
   margin: 1rem 1.25rem 0;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px;
   background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
   min-height: 340px;
+  overflow: hidden;
 
   :global(img) {
     position: relative;
@@ -231,22 +218,22 @@
 
 .mascotGlow {
   position: absolute;
-  inset: 12% 18%;
   z-index: 1;
+  filter: blur(28px);
+  inset: 12% 18%;
   border-radius: 999px;
   background: radial-gradient(circle, rgba(44, 232, 255, 0.35), transparent 70%);
-  filter: blur(28px);
 }
 
 .heroImageFallback {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   min-height: 340px;
   color: @cyan;
-  font-family: @heading;
-  font-size: clamp(1.25rem, 3vw, 2rem);
   font-weight: 900;
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-family: @heading;
   letter-spacing: 0.12em;
   text-align: center;
   text-transform: uppercase;
@@ -259,8 +246,8 @@
 .heroVisualTitle {
   margin: 0 0 0.35rem;
   color: #fff;
-  font-family: @heading;
   font-size: 1rem;
+  font-family: @heading;
 }
 
 .heroVisualCopy,
@@ -273,12 +260,12 @@
 .heroFloatingCard {
   position: absolute;
   z-index: 2;
-  max-width: 260px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 22px;
   background: rgba(8, 18, 39, 0.88);
   padding: 1rem 1.1rem;
+  max-width: 260px;
 
   strong {
     display: block;
@@ -337,8 +324,8 @@
 
   .heroFloatingCard {
     position: static;
-    max-width: none;
     margin-top: 1rem;
+    max-width: none;
   }
 
   .heroVisual {
diff --git a/components/Activity/Hackathon/HackathonHero.tsx b/components/Activity/Hackathon/Hero.tsx
similarity index 92%
rename from components/Activity/Hackathon/HackathonHero.tsx
rename to components/Activity/Hackathon/Hero.tsx
index 917003c..6c62738 100644
--- a/components/Activity/Hackathon/HackathonHero.tsx
+++ b/components/Activity/Hackathon/Hero.tsx
@@ -3,8 +3,8 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
-import type { HackathonAwardsMeta } from './HackathonAwards';
-import styles from './HackathonHero.module.less';
+import type { HackathonAwardsMeta } from './Awards';
+import styles from './Hero.module.less';
 
 export interface HackathonHeroAction {
   external?: boolean;
@@ -51,9 +51,7 @@ const HeroLink: FC<{
   variant: 'ghost' | 'primary';
 }> = ({ action, variant }) => (
   <a
-    className={
-      variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
-    }
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
     href={action.href}
     {...(action.external && { target: '_blank', rel: 'noreferrer' })}
   >
@@ -140,11 +138,7 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
               <div className={styles.mascotGlow} />
 
               {image ? (
-                <LarkImage
-                  src={image}
-                  alt={name}
-                  className="w-100 h-100 object-fit-cover"
-                />
+                <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
               ) : (
                 <div className={styles.heroImageFallback}>{imageFallback}</div>
               )}
diff --git a/components/Activity/Hackathon/HackathonOverview.module.less b/components/Activity/Hackathon/Overview.module.less
similarity index 89%
rename from components/Activity/Hackathon/HackathonOverview.module.less
rename to components/Activity/Hackathon/Overview.module.less
index 296f504..c2a4a7e 100644
--- a/components/Activity/Hackathon/HackathonOverview.module.less
+++ b/components/Activity/Hackathon/Overview.module.less
@@ -1,25 +1,19 @@
 @import './theme.less';
 
-.section-frame();
-
 .themePanel {
   margin-bottom: 1.5rem;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 28px;
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.08),
-    rgba(123, 97, 255, 0.12)
-  );
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.12));
   padding: 1.5rem 1.6rem;
 }
 
 .themeText {
   margin-bottom: 0.4rem;
   color: #fff;
-  font-family: @heading;
-  font-size: clamp(1.35rem, 2.6vw, 2rem);
   font-weight: 900;
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  font-family: @heading;
 }
 
 .themeSub {
@@ -29,12 +23,11 @@
 }
 
 .trackCard {
-  .panel-card();
   transition:
     transform 0.22s ease,
     border-color 0.22s ease;
-  height: 100%;
   padding: 1.4rem;
+  height: 100%;
 
   &:hover {
     transform: translateY(-4px);
@@ -44,8 +37,8 @@
 
 .trackIcon {
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   margin-bottom: 1rem;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-radius: 18px;
@@ -58,24 +51,24 @@
 .trackName {
   margin: 0;
   color: #fff;
-  font-family: @heading;
-  font-size: 1.08rem;
   font-weight: 800;
+  font-size: 1.08rem;
   line-height: 1.3;
+  font-family: @heading;
 }
 
 .trackDesc {
-  min-height: 4.8rem;
   margin: 0.75rem 0 0.95rem;
+  min-height: 4.8rem;
   color: @muted;
   line-height: 1.75;
 }
 
 .trackMetric {
   color: @cyan;
-  font-family: @heading;
-  font-size: 0.78rem;
   font-weight: 700;
+  font-size: 0.78rem;
+  font-family: @heading;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
diff --git a/components/Activity/Hackathon/HackathonOverview.tsx b/components/Activity/Hackathon/Overview.tsx
similarity index 96%
rename from components/Activity/Hackathon/HackathonOverview.tsx
rename to components/Activity/Hackathon/Overview.tsx
index 6ad8120..a60d1f6 100644
--- a/components/Activity/Hackathon/HackathonOverview.tsx
+++ b/components/Activity/Hackathon/Overview.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
-import styles from './HackathonOverview.module.less';
+import styles from './Overview.module.less';
 
 export interface HackathonOverviewCard {
   description: string;
diff --git a/components/Activity/Hackathon/HackathonParticipants.module.less b/components/Activity/Hackathon/Participants.module.less
similarity index 97%
rename from components/Activity/Hackathon/HackathonParticipants.module.less
rename to components/Activity/Hackathon/Participants.module.less
index e8b4338..56c1ff3 100644
--- a/components/Activity/Hackathon/HackathonParticipants.module.less
+++ b/components/Activity/Hackathon/Participants.module.less
@@ -1,7 +1,5 @@
 @import './theme.less';
 
-.section-frame();
-
 .participantCloud {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
diff --git a/components/Activity/Hackathon/HackathonParticipants.tsx b/components/Activity/Hackathon/Participants.tsx
similarity index 96%
rename from components/Activity/Hackathon/HackathonParticipants.tsx
rename to components/Activity/Hackathon/Participants.tsx
index 590ae05..b1b1ee8 100644
--- a/components/Activity/Hackathon/HackathonParticipants.tsx
+++ b/components/Activity/Hackathon/Participants.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
-import styles from './HackathonParticipants.module.less';
+import styles from './Participants.module.less';
 
 export interface HackathonParticipantItem {
   avatar?: TableCellValue;
diff --git a/components/Activity/Hackathon/HackathonResources.module.less b/components/Activity/Hackathon/Resources.module.less
similarity index 97%
rename from components/Activity/Hackathon/HackathonResources.module.less
rename to components/Activity/Hackathon/Resources.module.less
index 848a8a6..77f7a3a 100644
--- a/components/Activity/Hackathon/HackathonResources.module.less
+++ b/components/Activity/Hackathon/Resources.module.less
@@ -1,24 +1,21 @@
 @import './theme.less';
 
-.section-frame();
-
 .projectHeader {
   margin-top: 2.75rem;
 }
 
 .resourceCard,
 .projectCard {
-  .panel-card();
-  height: 100%;
   padding: 1.25rem;
+  height: 100%;
 }
 
 .resourceHead,
 .projectTop {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
   align-items: start;
+  gap: 1rem;
 }
 
 .projectHead {
@@ -31,9 +28,9 @@
 .projectTitle {
   margin: 0;
   color: #fff;
-  font-family: @heading;
-  font-size: 1.02rem;
   font-weight: 800;
+  font-size: 1.02rem;
+  font-family: @heading;
 }
 
 .projectTitle a {
@@ -90,13 +87,12 @@
 }
 
 .entryLink {
-  .button-ghost();
 }
 
 .scoreCircle {
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
   border: 1px solid rgba(44, 232, 255, 0.2);
   border-radius: 50%;
@@ -104,9 +100,9 @@
   width: 62px;
   height: 62px;
   color: @cyan;
-  font-family: @heading;
-  font-size: 1.05rem;
   font-weight: 800;
+  font-size: 1.05rem;
+  font-family: @heading;
 
   @media (max-width: 767px) {
     width: 54px;
@@ -123,8 +119,8 @@
   div {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.8rem;
     align-items: start;
+    gap: 0.8rem;
   }
 
   dt,
@@ -134,8 +130,8 @@
 
   dt {
     color: @muted;
-    font-family: @heading;
     font-size: 0.72rem;
+    font-family: @heading;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
diff --git a/components/Activity/Hackathon/HackathonResources.tsx b/components/Activity/Hackathon/Resources.tsx
similarity index 84%
rename from components/Activity/Hackathon/HackathonResources.tsx
rename to components/Activity/Hackathon/Resources.tsx
index e701708..0c7870d 100644
--- a/components/Activity/Hackathon/HackathonResources.tsx
+++ b/components/Activity/Hackathon/Resources.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
-import type { HackathonAwardsMeta } from './HackathonAwards';
-import styles from './HackathonResources.module.less';
+import type { HackathonAwardsMeta } from './Awards';
+import styles from './Resources.module.less';
 
 export interface HackathonTemplateItem {
   description: string;
@@ -55,12 +55,12 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
     <p className={styles.resourceDescription}>{description}</p>
 
     <ul className={`list-unstyled ${styles.topicList}`}>
-      {languages.map((language) => (
+      {languages.map(language => (
         <li key={language} className={styles.topicChip}>
           {language}
         </li>
       ))}
-      {tags.map((tag) => (
+      {tags.map(tag => (
         <li key={tag} className={styles.topicChipMuted}>
           {tag}
         </li>
@@ -69,22 +69,12 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
 
     <nav className={styles.resourceLinks} aria-label={title}>
       {sourceUrl && (
-        <a
-          className={styles.entryLink}
-          href={sourceUrl}
-          target="_blank"
-          rel="noreferrer"
-        >
+        <a className={styles.entryLink} href={sourceUrl} target="_blank" rel="noreferrer">
           {sourceLabel}
         </a>
       )}
       {previewUrl && (
-        <a
-          className={styles.entryLink}
-          href={previewUrl}
-          target="_blank"
-          rel="noreferrer"
-        >
+        <a className={styles.entryLink} href={previewUrl} target="_blank" rel="noreferrer">
           {previewLabel}
         </a>
       )}
@@ -92,13 +82,7 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
   </article>
 );
 
-const ProjectCard: FC<HackathonProjectItem> = ({
-  description,
-  link,
-  meta,
-  score,
-  title,
-}) => (
+const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score, title }) => (
   <article className={styles.projectCard}>
     <div className={styles.projectTop}>
       <hgroup className={styles.projectHead}>
@@ -140,7 +124,7 @@ export const HackathonResources: FC<HackathonResourcesProps> = ({
           </header>
 
           <Row className="g-3">
-            {templateItems.map((template) => (
+            {templateItems.map(template => (
               <Col key={template.id} md={6} xl={4}>
                 <TemplateCard {...template} />
               </Col>
@@ -158,7 +142,7 @@ export const HackathonResources: FC<HackathonResourcesProps> = ({
           </header>
 
           <Row className="g-3">
-            {projectItems.map((project) => (
+            {projectItems.map(project => (
               <Col key={project.id} md={6} xl={4}>
                 <ProjectCard {...project} />
               </Col>
diff --git a/components/Activity/Hackathon/HackathonSchedule.module.less b/components/Activity/Hackathon/Schedule.module.less
similarity index 77%
rename from components/Activity/Hackathon/HackathonSchedule.module.less
rename to components/Activity/Hackathon/Schedule.module.less
index a4d3f5c..56a50a8 100644
--- a/components/Activity/Hackathon/HackathonSchedule.module.less
+++ b/components/Activity/Hackathon/Schedule.module.less
@@ -1,7 +1,5 @@
 @import './theme.less';
 
-.section-frame();
-
 .scheduleIntro {
   margin-bottom: 1.35rem;
   text-align: center;
@@ -10,8 +8,8 @@
 .scheduleKicker {
   margin: 0 0 0.35rem;
   color: @cyan;
-  font-family: @heading;
   font-size: 0.8rem;
+  font-family: @heading;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
@@ -19,9 +17,9 @@
 .scheduleLead {
   margin: 0;
   color: #fff;
-  font-family: @heading;
-  font-size: clamp(1.45rem, 3vw, 2.05rem);
   font-weight: 800;
+  font-size: clamp(1.45rem, 3vw, 2.05rem);
+  font-family: @heading;
 }
 
 .scheduleOverview {
@@ -33,11 +31,10 @@
 }
 
 .schedulePill {
-  .chip();
   padding: 0.58rem 0.9rem;
   color: @copy;
-  font-family: @heading;
   font-size: 0.74rem;
+  font-family: @heading;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 
@@ -57,60 +54,38 @@
 }
 
 .dayCard {
-  .panel-card();
-  height: 100%;
   padding: 1.35rem;
+  height: 100%;
 }
 
 .formation {
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.1),
-    rgba(14, 43, 80, 0.86)
-  );
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
 }
 
 .enrollment {
-  background: linear-gradient(
-    135deg,
-    rgba(123, 97, 255, 0.12),
-    rgba(28, 20, 67, 0.86)
-  );
+  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
 }
 
 .competition {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 201, 77, 0.12),
-    rgba(60, 35, 8, 0.88)
-  );
+  background: linear-gradient(135deg, rgba(255, 201, 77, 0.12), rgba(60, 35, 8, 0.88));
 }
 
 .break {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 120, 186, 0.1),
-    rgba(72, 18, 48, 0.88)
-  );
+  background: linear-gradient(135deg, rgba(255, 120, 186, 0.1), rgba(72, 18, 48, 0.88));
 }
 
 .evaluation {
-  background: linear-gradient(
-    135deg,
-    rgba(72, 241, 168, 0.12),
-    rgba(14, 50, 39, 0.88)
-  );
+  background: linear-gradient(135deg, rgba(72, 241, 168, 0.12), rgba(14, 50, 39, 0.88));
 }
 
 .dayCardHead {
   display: flex;
   justify-content: space-between;
-  gap: 0.75rem;
   align-items: baseline;
+  gap: 0.75rem;
 }
 
 .dayNo {
-  .section-subtitle();
 }
 
 .dayDate {
@@ -121,8 +96,8 @@
 .dayTitle {
   margin: 0.9rem 0 0.45rem;
   color: #fff;
-  font-family: @heading;
   font-size: 1.08rem;
+  font-family: @heading;
 }
 
 .daySub {
@@ -139,8 +114,8 @@
   div {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: 0.8rem;
     align-items: start;
+    gap: 0.8rem;
   }
 
   dt,
@@ -154,11 +129,11 @@
   align-items: center;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
-  min-height: 30px;
   padding: 0.4rem 0.75rem;
+  min-height: 30px;
   color: @copy;
-  font-family: @heading;
   font-size: 0.72rem;
+  font-family: @heading;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
diff --git a/components/Activity/Hackathon/HackathonSchedule.tsx b/components/Activity/Hackathon/Schedule.tsx
similarity index 87%
rename from components/Activity/Hackathon/HackathonSchedule.tsx
rename to components/Activity/Hackathon/Schedule.tsx
index a830ca3..5760ec7 100644
--- a/components/Activity/Hackathon/HackathonSchedule.tsx
+++ b/components/Activity/Hackathon/Schedule.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
-import type { HackathonAwardsMeta } from './HackathonAwards';
-import styles from './HackathonSchedule.module.less';
+import type { HackathonAwardsMeta } from './Awards';
+import styles from './Schedule.module.less';
 
 export type HackathonScheduleTone =
   | 'break'
@@ -68,9 +68,15 @@ const ScheduleCard: FC<HackathonScheduleItem & { phaseLabel: string }> = ({
   </article>
 );
 
-export const HackathonSchedule: FC<
-  HackathonScheduleProps & { phaseLabel: string }
-> = ({ items, kicker, lead, overviewPills, phaseLabel, subtitle, title }) => (
+export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string }> = ({
+  items,
+  kicker,
+  lead,
+  overviewPills,
+  phaseLabel,
+  subtitle,
+  title,
+}) => (
   <section id="schedule" className={styles.section}>
     <Container>
       <header className={styles.sectionHeader}>
@@ -85,7 +91,7 @@ export const HackathonSchedule: FC<
       </hgroup>
 
       <ul className={`list-unstyled ${styles.scheduleOverview}`}>
-        {overviewPills.map((pill) => (
+        {overviewPills.map(pill => (
           <li key={pill} className={styles.schedulePill}>
             {pill}
           </li>
@@ -93,7 +99,7 @@ export const HackathonSchedule: FC<
       </ul>
 
       <div className={styles.scheduleDays}>
-        {items.map((item) => (
+        {items.map(item => (
           <ScheduleCard key={item.id} {...item} phaseLabel={phaseLabel} />
         ))}
       </div>
diff --git a/models/Hackathon.ts b/models/Hackathon.ts
index a7afb37..d01f94a 100644
--- a/models/Hackathon.ts
+++ b/models/Hackathon.ts
@@ -4,6 +4,7 @@ import {
   BiDataQueryOptions,
   BiDataTable,
   normalizeText,
+  normalizeTextArray,
   TableCellRelation,
   TableCellText,
   TableCellUser,
@@ -50,11 +51,15 @@ export class PersonModel extends BiDataTable<Person>() {
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
 
-  extractFields({ fields: { githubLink, ...fields }, ...meta }: TableRecord<Person>) {
+  extractFields({
+    fields: { githubLink, organizations, ...fields },
+    ...meta
+  }: TableRecord<Person>) {
     return {
       ...meta,
       ...fields,
       githubLink: normalizeText(githubLink as TableCellText),
+      organizations: normalizeTextArray(organizations as TableCellRelation[]),
     };
   }
 }
@@ -67,11 +72,16 @@ export class OrganizationModel extends BiDataTable<Organization>() {
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
 
-  extractFields({ fields: { link, ...fields }, ...meta }: TableRecord<Organization>) {
+  extractFields({
+    fields: { link, members, prizes, ...fields },
+    ...meta
+  }: TableRecord<Organization>) {
     return {
       ...meta,
       ...fields,
       link: normalizeText(link as TableCellText),
+      members: normalizeTextArray(members as TableCellRelation[]),
+      prizes: normalizeTextArray(prizes as TableCellRelation[]),
     };
   }
 }
@@ -93,6 +103,15 @@ export class PrizeModel extends BiDataTable<Prize>() {
   client = larkClient;
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { summary, sponsor, ...fields }, ...meta }: TableRecord<Prize>) {
+    return {
+      ...meta,
+      ...fields,
+      summary: (summary as TableCellText[])!.map(normalizeText),
+      sponsor: normalizeText(sponsor as TableCellText),
+    };
+  }
 }
 
 export type Template = LarkBase &
@@ -160,7 +179,7 @@ export class MemberModel extends BiDataTable<Member>() {
       person: (person as TableCellUser[])?.[0],
       summary: (summary as TableCellText[])!.map(normalizeText),
       skills: skills?.toString().split(/\s*,\s*/) || [],
-      githubAccount: normalizeText(githubAccount as TableCellText),
+      githubAccount: (githubAccount as TableCellText[])!.map(normalizeText),
     };
   }
 }
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index a5febb5..642a0ad 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -13,17 +13,17 @@ import { formatDate } from 'web-utility';
 import {
   HackathonActionHub,
   HackathonActionHubLink,
-} from '../../components/Activity/Hackathon/HackathonActionHub';
-import { HackathonAwards } from '../../components/Activity/Hackathon/HackathonAwards';
-import type { HackathonAwardsMeta } from '../../components/Activity/Hackathon/HackathonAwards';
-import { HackathonHero } from '../../components/Activity/Hackathon/HackathonHero';
-import { HackathonOverview } from '../../components/Activity/Hackathon/HackathonOverview';
-import { HackathonParticipants } from '../../components/Activity/Hackathon/HackathonParticipants';
-import { HackathonResources } from '../../components/Activity/Hackathon/HackathonResources';
+} from '../../components/Activity/Hackathon/ActionHub';
+import { HackathonAwards } from '../../components/Activity/Hackathon/Awards';
+import type { HackathonAwardsMeta } from '../../components/Activity/Hackathon/Awards';
+import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
+import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';
+import { HackathonParticipants } from '../../components/Activity/Hackathon/Participants';
+import { HackathonResources } from '../../components/Activity/Hackathon/Resources';
 import {
   HackathonSchedule,
   HackathonScheduleTone,
-} from '../../components/Activity/Hackathon/HackathonSchedule';
+} from '../../components/Activity/Hackathon/Schedule';
 import { PageHead } from '../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../models/Activity';
 import {
@@ -128,15 +128,14 @@ const AgendaTypeLabelMap: Partial<Record<string, I18nKey>> = {
 const isPublicForm = ({ shared_limit }: TableFormView) =>
   ['anyone_editable'].includes(shared_limit as string);
 
-const formatMoment = (value?: TableCellValue) =>
-  value ? formatDate(value as string) : '';
+const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
 
 const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
   [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
 
 const previewText = (items: TableCellValue[], fallback: string) =>
   items
-    .map((item) => item?.toString())
+    .map(item => item?.toString())
     .filter(Boolean)
     .slice(0, 2)
     .join(' · ') || fallback;
@@ -151,17 +150,10 @@ const agendaToneClassOf = (type: TableCellValue, index: number) => {
     'evaluation',
   ];
 
-  return (
-    AgendaTypeClassMap[normalized] ||
-    fallbackOrder[index % fallbackOrder.length]
-  );
+  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
 };
 
-const agendaTypeLabelOf = (
-  type: TableCellValue,
-  t: (key: I18nKey) => string,
-  fallback = '-',
-) => {
+const agendaTypeLabelOf = (type: TableCellValue, t: (key: I18nKey) => string, fallback = '-') => {
   const normalized = type?.toString().toLowerCase() || '';
   const i18nKey = AgendaTypeLabelMap[normalized];
 
@@ -173,20 +165,20 @@ export const getServerSideProps = compose<{ id: string }>(
   errorLogger,
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
-    const schema = activity.databaseSchema as Partial<BiTableSchema> | undefined;
-    const tableIdMap = schema?.tableIdMap as Partial<Record<RequiredTableKey, string>> | undefined;
 
-    if (!schema?.appId || !tableIdMap) return { notFound: true, props: {} };
+    const { appId, tableIdMap } = (activity.databaseSchema || {}) as BiTableSchema;
+
+    if (!appId || !tableIdMap) return { notFound: true, props: {} };
 
     for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
 
     const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
-      new PersonModel(schema.appId, tableIdMap.Person).getAll(),
-      new OrganizationModel(schema.appId, tableIdMap.Organization).getAll(),
-      new AgendaModel(schema.appId, tableIdMap.Agenda).getAll(),
-      new PrizeModel(schema.appId, tableIdMap.Prize).getAll(),
-      new TemplateModel(schema.appId, tableIdMap.Template).getAll(),
-      new ProjectModel(schema.appId, tableIdMap.Project).getAll(),
+      new PersonModel(appId, tableIdMap.Person).getAll(),
+      new OrganizationModel(appId, tableIdMap.Organization).getAll(),
+      new AgendaModel(appId, tableIdMap.Agenda).getAll(),
+      new PrizeModel(appId, tableIdMap.Prize).getAll(),
+      new TemplateModel(appId, tableIdMap.Template).getAll(),
+      new ProjectModel(appId, tableIdMap.Project).getAll(),
     ]);
 
     return {
@@ -198,270 +190,303 @@ export const getServerSideProps = compose<{ id: string }>(
   },
 );
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(
-  ({ activity, hackathon }) => {
-    const { t } = useContext(I18nContext);
-
-    const {
-        name,
-        summary,
-        location,
-        startTime,
-        endTime,
-        databaseSchema,
-        host,
-        image,
-        type: activityType,
-      } = activity,
-      { people, organizations, agenda, prizes, templates, projects } =
-        hackathon;
-    const { forms } = (databaseSchema || {}) as BiTableSchema;
-    const formMap = (forms || {}) as Partial<
-      Record<FormGroupKey, TableFormView[]>
-    >;
-    const summaryText = (summary as string) || '';
-    const agendaItems = [...agenda].sort(
-      ({ startedAt: left }, { startedAt: right }) =>
-        new Date((left as string) || 0).getTime() -
-        new Date((right as string) || 0).getTime(),
-    );
-    const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
-    const eventRange = formatPeriod(startTime, endTime);
-    const locationText =
-      (location as TableCellLocation | undefined)?.full_address || '-';
-    const heroBadges = [
-      (activityType as string) || t('hackathon'),
-      ...hostTags,
-      formatMoment(startTime),
-      formatMoment(endTime),
-    ].filter((value): value is string => Boolean(value));
-    const heroStats = [
-      { label: t('participants'), value: people.length },
-      { label: t('projects'), value: projects.length },
-      { label: t('templates'), value: templates.length },
-      { label: t('prizes'), value: prizes.length },
-    ];
-    const agendaPreview = agendaItems.slice(0, 3);
-
-    const formGroups = FormButtonBar.flatMap<FormGroupView>((key) => {
-      const list = (formMap[key] || []).filter(isPublicForm);
-
-      return list[0]
-        ? [
-            {
-              key,
-              eyebrow: t(FormSectionMeta[key].eyebrow),
-              title: t(FormSectionMeta[key].title),
-              description: t(FormSectionMeta[key].description),
-              links: list.map(({ name, shared_url }) => ({
-                label: name as string,
-                href: shared_url,
-                external: true as const,
-              })),
-            },
-          ]
-        : [];
-    });
-    const primaryForm =
-      formGroups.find(({ key }) => key === 'Person') ||
-      formGroups.find(({ key }) => key === 'Project') ||
-      formGroups[0];
-    const secondaryForm =
-      formGroups.find(
-        ({ key }) => key === 'Project' && key !== primaryForm?.key,
-      ) || formGroups.find(({ key }) => key !== primaryForm?.key);
-    const formPreview =
-      formGroups
-        .map(({ eyebrow }) => eyebrow)
-        .filter(Boolean)
-        .slice(0, 2)
-        .join(' · ') || t('hackathon_action_hub');
-
-    const highlightCards = [
-      {
-        icon: '👥',
-        title: t('participants'),
-        value: people.length,
-        description: t(FormSectionMeta.Person.description),
-      },
-      {
-        icon: '🚀',
-        title: t('projects'),
-        value: projects.length,
-        description: t(FormSectionMeta.Project.description),
-      },
-      {
-        icon: '🛠',
-        title: t('templates'),
-        value: templates.length,
-        description: previewText(
-          templates.map(({ name }) => name),
-          t('templates'),
-        ),
-      },
-      {
-        icon: '🏆',
-        title: t('prizes'),
-        value: prizes.length,
-        description: previewText(
-          prizes.map(({ name }) => name),
-          t('hackathon_prizes'),
-        ),
-      },
-      {
-        icon: '🤝',
-        title: t('organizations'),
-        value: organizations.length,
-        description: previewText(
-          organizations.map(({ name }) => name),
-          t('organizations'),
-        ),
-      },
-      {
-        icon: '📅',
-        title: t('agenda'),
-        value: agendaItems.length,
-        description: previewText(
-          agendaItems.map(({ name }) => name),
-          eventRange || t('agenda'),
-        ),
-      },
-    ];
-
-    const scheduleItems = agendaItems.map(
-      ({ id, name, type, summary, startedAt, endedAt }, index) => {
-        const typeLabel = agendaTypeLabelOf(type, t);
-        const description = (summary as string) || typeLabel;
-
-        return {
-          id: id as string,
-          phase: String(index + 1).padStart(2, '0'),
-          dateText: formatPeriod(startedAt, endedAt),
-          title: name as string,
-          description,
-          tone: agendaToneClassOf(type, index),
-          facts: [
-            {
-              label: t('type'),
-              value: typeLabel,
-              meta: description || eventRange || locationText,
-            },
-            {
-              label: t('start_time'),
-              value: formatMoment(startedAt),
-              meta: t('event_duration'),
-            },
-            {
-              label: t('end_time'),
-              value: formatMoment(endedAt),
-              meta: `${t('event_location')}: ${locationText}`,
-            },
-          ],
-        };
-      },
-    );
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  const { t } = useContext(I18nContext);
+
+  const {
+      name,
+      summary,
+      location,
+      startTime,
+      endTime,
+      databaseSchema,
+      host,
+      image,
+      type: activityType,
+    } = activity,
+    { people, organizations, agenda, prizes, templates, projects } = hackathon;
+  const { forms } = (databaseSchema || {}) as BiTableSchema;
+  const formMap = (forms || {}) as Partial<Record<FormGroupKey, TableFormView[]>>;
+  const summaryText = (summary as string) || '';
+  const agendaItems = [...agenda].sort(
+    ({ startedAt: left }, { startedAt: right }) =>
+      new Date((left as string) || 0).getTime() - new Date((right as string) || 0).getTime(),
+  );
+  const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
+  const eventRange = formatPeriod(startTime, endTime);
+  const locationText = (location as TableCellLocation | undefined)?.full_address || '-';
+  const heroBadges = [
+    (activityType as string) || t('hackathon'),
+    ...hostTags,
+    formatMoment(startTime),
+    formatMoment(endTime),
+  ].filter((value): value is string => Boolean(value));
+  const heroStats = [
+    { label: t('participants'), value: people.length },
+    { label: t('projects'), value: projects.length },
+    { label: t('templates'), value: templates.length },
+    { label: t('prizes'), value: prizes.length },
+  ];
+  const agendaPreview = agendaItems.slice(0, 3);
+
+  const formGroups = FormButtonBar.flatMap<FormGroupView>(key => {
+    const list = (formMap[key] || []).filter(isPublicForm);
+
+    return list[0]
+      ? [
+          {
+            key,
+            eyebrow: t(FormSectionMeta[key].eyebrow),
+            title: t(FormSectionMeta[key].title),
+            description: t(FormSectionMeta[key].description),
+            links: list.map(({ name, shared_url }) => ({
+              label: name as string,
+              href: shared_url,
+              external: true as const,
+            })),
+          },
+        ]
+      : [];
+  });
+  const primaryForm =
+    formGroups.find(({ key }) => key === 'Person') ||
+    formGroups.find(({ key }) => key === 'Project') ||
+    formGroups[0];
+  const secondaryForm =
+    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
+    formGroups.find(({ key }) => key !== primaryForm?.key);
+  const formPreview =
+    formGroups
+      .map(({ eyebrow }) => eyebrow)
+      .filter(Boolean)
+      .slice(0, 2)
+      .join(' · ') || t('hackathon_action_hub');
+
+  const highlightCards = [
+    {
+      icon: '👥',
+      title: t('participants'),
+      value: people.length,
+      description: t(FormSectionMeta.Person.description),
+    },
+    {
+      icon: '🚀',
+      title: t('projects'),
+      value: projects.length,
+      description: t(FormSectionMeta.Project.description),
+    },
+    {
+      icon: '🛠',
+      title: t('templates'),
+      value: templates.length,
+      description: previewText(
+        templates.map(({ name }) => name),
+        t('templates'),
+      ),
+    },
+    {
+      icon: '🏆',
+      title: t('prizes'),
+      value: prizes.length,
+      description: previewText(
+        prizes.map(({ name }) => name),
+        t('hackathon_prizes'),
+      ),
+    },
+    {
+      icon: '🤝',
+      title: t('organizations'),
+      value: organizations.length,
+      description: previewText(
+        organizations.map(({ name }) => name),
+        t('organizations'),
+      ),
+    },
+    {
+      icon: '📅',
+      title: t('agenda'),
+      value: agendaItems.length,
+      description: previewText(
+        agendaItems.map(({ name }) => name),
+        eventRange || t('agenda'),
+      ),
+    },
+  ];
+
+  const scheduleItems = agendaItems.map(
+    ({ id, name, type, summary, startedAt, endedAt }, index) => {
+      const typeLabel = agendaTypeLabelOf(type, t);
+      const description = (summary as string) || typeLabel;
 
-    const prizeItems = prizes.map(
-      ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
+      return {
         id: id as string,
+        phase: String(index + 1).padStart(2, '0'),
+        dateText: formatPeriod(startedAt, endedAt),
         title: name as string,
-        tier: (level as string) || `#${index + 1}`,
-        description:
-          (summary as string) ||
-          previewText([sponsor, price, amount], t('prizes')),
-        image,
-        meta: [
-          sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
-          price ? { label: t('price'), value: price as string } : null,
-          amount ? { label: t('amount'), value: amount as string } : null,
-        ].filter(Boolean) as HackathonAwardsMeta[],
-      }),
-    );
-
-    const organizationItems = organizations.map(({ id, name, link, logo }) => ({
+        description,
+        tone: agendaToneClassOf(type, index),
+        facts: [
+          {
+            label: t('type'),
+            value: typeLabel,
+            meta: description || eventRange || locationText,
+          },
+          {
+            label: t('start_time'),
+            value: formatMoment(startedAt),
+            meta: t('event_duration'),
+          },
+          {
+            label: t('end_time'),
+            value: formatMoment(endedAt),
+            meta: `${t('event_location')}: ${locationText}`,
+          },
+        ],
+      };
+    },
+  );
+
+  const prizeItems = prizes.map(
+    ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
       id: id as string,
-      name: name as string,
-      href: link as string | undefined,
-      logo,
-    }));
+      title: name as string,
+      tier: (level as string) || `#${index + 1}`,
+      description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
+      image,
+      meta: [
+        sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
+        price ? { label: t('price'), value: price as string } : null,
+        amount ? { label: t('amount'), value: amount as string } : null,
+      ].filter(Boolean) as HackathonAwardsMeta[],
+    }),
+  );
 
-    const templateItems = templates.map(
-      ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
-        id: id as string,
-        title: name as string,
-        description: (summary as string) || '',
-        languages: ((languages as string[] | undefined) || []).filter(Boolean),
-        tags: ((tags as string[] | undefined) || []).filter(Boolean),
-        sourceUrl: sourceLink as string | undefined,
-        sourceLabel: t('source_code'),
-        previewUrl: previewLink as string | undefined,
-        previewLabel: t('preview'),
-      }),
-    );
-
-    const projectItems = projects.map(
-      ({ id, name, score, summary, createdBy, members }) => {
-        const creator = createdBy as TableCellUser | undefined;
-        const scoreText =
-          score === null || score === undefined || score === ''
-            ? '—'
-            : `${score}`;
-
-        return {
-          id: id as string,
-          title: name as string,
-          link: `${ActivityModel.getLink(activity)}/team/${id}`,
-          score: scoreText,
-          description: (summary as string) || '',
-          meta: [
-            creator
-              ? {
-                  label: t('created_by'),
-                  value: creator.name || '—',
-                  valueHref: creator.email
-                    ? `mailto:${creator.email}`
-                    : undefined,
-                }
-              : { label: t('created_by'), value: '—' },
-            {
-              label: t('members'),
-              value: (members as string[] | undefined)?.join(', ') || '—',
-            },
-          ],
-        };
-      },
-    );
+  const organizationItems = organizations.map(({ id, name, link, logo }) => ({
+    id: id as string,
+    name: name as string,
+    href: link as string | undefined,
+    logo,
+  }));
 
-    const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
+  const templateItems = templates.map(
+    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
       id: id as string,
-      name: name as string,
-      avatar,
-      githubLink: githubLink as string | undefined,
-    }));
-
-    return (
-      <>
-        <PageHead title={name as string} />
-
-        <HackathonHero
-          badges={heroBadges}
-          bottomCard={
-            agendaPreview[0]
-              ? {
-                  eyebrow: t('hackathon_agenda_preview'),
-                  title: agendaPreview[0].name as string,
-                  description: formatPeriod(
-                    agendaPreview[0].startedAt,
-                    agendaPreview[0].endedAt,
-                  ),
-                }
-              : undefined
-          }
-          description={summaryText}
-          image={image}
-          imageFallback={(activityType as string) || t('hackathon')}
-          locationText={locationText}
-          name={name as string}
+      title: name as string,
+      description: (summary as string) || '',
+      languages: ((languages as string[] | undefined) || []).filter(Boolean),
+      tags: ((tags as string[] | undefined) || []).filter(Boolean),
+      sourceUrl: sourceLink as string | undefined,
+      sourceLabel: t('source_code'),
+      previewUrl: previewLink as string | undefined,
+      previewLabel: t('preview'),
+    }),
+  );
+
+  const projectItems = projects.map(({ id, name, score, summary, createdBy, members }) => {
+    const creator = createdBy as TableCellUser | undefined;
+    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
+
+    return {
+      id: id as string,
+      title: name as string,
+      link: `${ActivityModel.getLink(activity)}/team/${id}`,
+      score: scoreText,
+      description: (summary as string) || '',
+      meta: [
+        creator
+          ? {
+              label: t('created_by'),
+              value: creator.name || '—',
+              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
+            }
+          : { label: t('created_by'), value: '—' },
+        {
+          label: t('members'),
+          value: (members as string[] | undefined)?.join(', ') || '—',
+        },
+      ],
+    };
+  });
+
+  const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
+    id: id as string,
+    name: name as string,
+    avatar,
+    githubLink: githubLink as string | undefined,
+  }));
+
+  return (
+    <div
+      style={{
+        background:
+          'radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),' +
+          'radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),' +
+          'linear-gradient(180deg, #0b1328 0%, #091022 48%, #050814 100%)',
+      }}
+    >
+      <PageHead title={name as string} />
+
+      <HackathonHero
+        badges={heroBadges}
+        bottomCard={
+          agendaPreview[0]
+            ? {
+                eyebrow: t('hackathon_agenda_preview'),
+                title: agendaPreview[0].name as string,
+                description: formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt),
+              }
+            : undefined
+        }
+        description={summaryText}
+        image={image}
+        imageFallback={(activityType as string) || t('hackathon')}
+        locationText={locationText}
+        name={name as string}
+        primaryAction={
+          primaryForm
+            ? {
+                label: primaryForm.title,
+                href: primaryForm.links[0].href,
+                external: true,
+              }
+            : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
+        }
+        secondaryAction={{ label: t('agenda'), href: '#schedule' }}
+        stats={heroStats}
+        subtitle={(activityType as string) || t('hackathon_detail')}
+        topCard={
+          primaryForm
+            ? {
+                eyebrow: primaryForm.eyebrow,
+                title: primaryForm.title,
+                description: primaryForm.description,
+              }
+            : undefined
+        }
+        visualChip={t('hackathon_detail')}
+        visualCopy={summaryText}
+        visualKicker={t('event_info')}
+        visualTitle={eventRange || summaryText}
+      />
+
+      <HackathonOverview
+        cards={highlightCards}
+        subtitle={t('event_description')}
+        themeSub={summaryText}
+        themeText={(activityType as string) || t('hackathon')}
+        title={t('event_info')}
+      />
+
+      {formGroups[0] && (
+        <HackathonActionHub
+          entries={formGroups.map(({ description, eyebrow, links, title }) => ({
+            title,
+            description,
+            eyebrow,
+            links,
+            count: links.length,
+          }))}
+          facts={[eventRange || t('event_duration'), locationText, formPreview]}
           primaryAction={
             primaryForm
               ? {
@@ -469,131 +494,75 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(
                   href: primaryForm.links[0].href,
                   external: true,
                 }
-              : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
-          }
-          secondaryAction={{ label: t('agenda'), href: '#schedule' }}
-          stats={heroStats}
-          subtitle={(activityType as string) || t('hackathon_detail')}
-          topCard={
-            primaryForm
-              ? {
-                  eyebrow: primaryForm.eyebrow,
-                  title: primaryForm.title,
-                  description: primaryForm.description,
-                }
               : undefined
           }
-          visualChip={t('hackathon_detail')}
-          visualCopy={summaryText}
-          visualKicker={t('event_info')}
-          visualTitle={eventRange || summaryText}
-        />
-
-        <HackathonOverview
-          cards={highlightCards}
-          subtitle={t('event_description')}
-          themeSub={summaryText}
-          themeText={(activityType as string) || t('hackathon')}
-          title={t('event_info')}
-        />
-
-        {formGroups[0] && (
-          <HackathonActionHub
-            entries={formGroups.map(
-              ({ description, eyebrow, links, title }) => ({
-                title,
-                description,
-                eyebrow,
-                links,
-                count: links.length,
-              }),
-            )}
-            facts={[
-              eventRange || t('event_duration'),
-              locationText,
-              formPreview,
-            ]}
-            primaryAction={
-              primaryForm
+          primaryDescription={primaryForm?.description || t('hackathon_entry_flow_description')}
+          primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
+          subtitle={t('hackathon_entry_flow')}
+          title={t('hackathon_action_hub')}
+        >
+          <HackathonActionHubLink
+            action={
+              secondaryForm
                 ? {
-                    label: primaryForm.title,
-                    href: primaryForm.links[0].href,
+                    label: secondaryForm.title,
+                    href: secondaryForm.links[0].href,
                     external: true,
                   }
-                : undefined
+                : { label: t('agenda'), href: '#schedule' }
             }
-            primaryDescription={
-              primaryForm?.description || t('hackathon_entry_flow_description')
-            }
-            primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
-            subtitle={t('hackathon_entry_flow')}
-            title={t('hackathon_action_hub')}
-          >
-            <HackathonActionHubLink
-              action={
-                secondaryForm
-                  ? {
-                      label: secondaryForm.title,
-                      href: secondaryForm.links[0].href,
-                      external: true,
-                    }
-                  : { label: t('agenda'), href: '#schedule' }
-              }
-              variant="ghost"
-            />
-          </HackathonActionHub>
-        )}
-
-        {scheduleItems[0] && (
-          <HackathonSchedule
-            items={scheduleItems}
-            kicker={eventRange}
-            lead={name as string}
-            overviewPills={agendaItems
-              .slice(0, 6)
-              .map(({ name }) => name as string)}
-            phaseLabel={t('hackathon_phase')}
-            subtitle={t('event_duration')}
-            title={t('agenda')}
+            variant="ghost"
           />
-        )}
-
-        {(prizeItems[0] || organizationItems[0]) && (
-          <HackathonAwards
-            organizations={organizationItems}
-            prizes={prizeItems}
-            subtitle={t('hackathon_prizes')}
-            supportDescription={summaryText}
-            supportEyebrow={t('organizations')}
-            supportTitle={previewText(
-              organizations.map(({ name }) => name),
-              t('organizations'),
-            )}
-            title={t('prizes')}
-          />
-        )}
-
-        {(templateItems[0] || projectItems[0]) && (
-          <HackathonResources
-            projectItems={projectItems}
-            projectSubtitle={t('products')}
-            projectTitle={t('projects')}
-            templateItems={templateItems}
-            templateSubtitle={t('source_code')}
-            templateTitle={t('templates')}
-          />
-        )}
+        </HackathonActionHub>
+      )}
+
+      {scheduleItems[0] && (
+        <HackathonSchedule
+          items={scheduleItems}
+          kicker={eventRange}
+          lead={name as string}
+          overviewPills={agendaItems.slice(0, 6).map(({ name }) => name as string)}
+          phaseLabel={t('hackathon_phase')}
+          subtitle={t('event_duration')}
+          title={t('agenda')}
+        />
+      )}
+
+      {(prizeItems[0] || organizationItems[0]) && (
+        <HackathonAwards
+          organizations={organizationItems}
+          prizes={prizeItems}
+          subtitle={t('hackathon_prizes')}
+          supportDescription={summaryText}
+          supportEyebrow={t('organizations')}
+          supportTitle={previewText(
+            organizations.map(({ name }) => name),
+            t('organizations'),
+          )}
+          title={t('prizes')}
+        />
+      )}
+
+      {(templateItems[0] || projectItems[0]) && (
+        <HackathonResources
+          projectItems={projectItems}
+          projectSubtitle={t('products')}
+          projectTitle={t('projects')}
+          templateItems={templateItems}
+          templateSubtitle={t('source_code')}
+          templateTitle={t('templates')}
+        />
+      )}
 
-        {participantItems[0] && (
-          <HackathonParticipants
-            participants={participantItems}
-            subtitle={t('github_account')}
-            title={t('participants')}
-          />
-        )}
-      </>
-    );
-  },
-);
+      {participantItems[0] && (
+        <HackathonParticipants
+          participants={participantItems}
+          subtitle={t('github_account')}
+          title={t('participants')}
+        />
+      )}
+    </div>
+  );
+});
 
 export default HackathonDetail;

From e0ed89e9a2da397c0349588c463dca3fa8326520 Mon Sep 17 00:00:00 2001
From: TechQuery <shiy2008@gmail.com>
Date: Tue, 31 Mar 2026 05:07:43 +0800
Subject: [PATCH 13/14] [refactor] fix many layouts & styles of CodeX codes

---
 .../Activity/Hackathon/ActionHub.module.less  |  98 ++-
 components/Activity/Hackathon/ActionHub.tsx   |  30 +-
 .../Activity/Hackathon/Awards.module.less     | 109 +++-
 components/Activity/Hackathon/Awards.tsx      |  60 +-
 components/Activity/Hackathon/FAQ.module.less |  74 +++
 components/Activity/Hackathon/FAQ.tsx         |  33 +
 .../Activity/Hackathon/Hero.module.less       | 271 ++++++---
 components/Activity/Hackathon/Hero.tsx        | 280 ++++++---
 .../Activity/Hackathon/Overview.module.less   |  52 +-
 components/Activity/Hackathon/Overview.tsx    |  37 +-
 .../Hackathon/Participants.module.less        |  26 +-
 .../Activity/Hackathon/Participants.tsx       |  74 ++-
 .../Activity/Hackathon/Resources.module.less  |  69 ++-
 components/Activity/Hackathon/Resources.tsx   | 174 ++++--
 .../Activity/Hackathon/Schedule.module.less   | 206 ++++++-
 components/Activity/Hackathon/Schedule.tsx    |  84 ++-
 components/Activity/Hackathon/constant.ts     | 362 +++++++++++
 components/Activity/Hackathon/utility.ts      | 107 ++++
 pages/_app.tsx                                |  29 +-
 pages/hackathon/[id].tsx                      | 563 ++++++++----------
 translation/en-US.ts                          | 108 +++-
 translation/zh-CN.ts                          |  90 ++-
 translation/zh-TW.ts                          |  90 ++-
 23 files changed, 2188 insertions(+), 838 deletions(-)
 create mode 100644 components/Activity/Hackathon/FAQ.module.less
 create mode 100644 components/Activity/Hackathon/FAQ.tsx
 create mode 100644 components/Activity/Hackathon/constant.ts
 create mode 100644 components/Activity/Hackathon/utility.ts

diff --git a/components/Activity/Hackathon/ActionHub.module.less b/components/Activity/Hackathon/ActionHub.module.less
index cfd022f..270acd4 100644
--- a/components/Activity/Hackathon/ActionHub.module.less
+++ b/components/Activity/Hackathon/ActionHub.module.less
@@ -16,6 +16,7 @@
 }
 
 .registerCard {
+  ;
   background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
 }
 
@@ -25,8 +26,23 @@
 }
 
 .regEyebrow,
-.entryEyebrow,
+.entryEyebrow {
+  margin: 0;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
 .entryStep {
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
 .regTitle,
@@ -40,7 +56,7 @@
 }
 
 .regTitle {
-  margin-top: 0.4rem;
+  margin-top: 0;
 }
 
 .regDesc,
@@ -50,51 +66,83 @@
 }
 
 .regDesc {
-  margin: 0.9rem 0 1.2rem;
+  margin: 0;
 }
 
 .regActions,
 .entryLinks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.9rem;
+  min-width: 0;
 }
 
 .actionButton {
+  ;
+}
+
+.actionButtonGhost {
+  ;
+  border-color: rgba(255, 255, 255, 0.18);
+  color: @muted;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.36);
+    color: @cyan;
+  }
 }
 
-.actionButtonGhost,
 .entryLink {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 8px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.42rem 0.85rem;
+  color: @cyan;
+  font-size: 0.8rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.12);
+    color: @cyan;
+    text-decoration: none;
+  }
 }
 
 .regFacts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin: 1.3rem 0 0;
+  margin: 0;
 
   li {
-    padding: 0.48rem 0.85rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.44rem 0.9rem;
     color: @copy;
-    font-size: 0.9rem;
+    font-size: 0.82rem;
   }
 }
 
-.entryHub {
-}
-
 .entryHubHead {
-  margin-bottom: 1.25rem;
+  margin-bottom: 0;
 }
 
 .entryTitle {
-  margin-top: 0.35rem;
+  margin-top: 0;
   font-size: 1.55rem;
 }
 
 .entryCard {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
   padding: 1.3rem;
   height: 100%;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
 }
 
 .entryStep {
@@ -102,7 +150,7 @@
 }
 
 .entryCard h4 {
-  margin: 0.55rem 0 0.45rem;
+  margin: 0;
   color: #fff;
   font-size: 1.02rem;
   font-family: @heading;
@@ -113,17 +161,17 @@
 }
 
 .entryMetaRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  margin: 1rem 0;
+  margin: 0;
 }
 
 .entryMeta {
-  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  background: rgba(255, 201, 77, 0.12);
+  padding: 0.28rem 0.7rem;
   color: @gold;
+  font-weight: 700;
   font-size: 0.72rem;
   font-family: @heading;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
 }
diff --git a/components/Activity/Hackathon/ActionHub.tsx b/components/Activity/Hackathon/ActionHub.tsx
index ab44cad..b471a8b 100644
--- a/components/Activity/Hackathon/ActionHub.tsx
+++ b/components/Activity/Hackathon/ActionHub.tsx
@@ -40,19 +40,21 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
     <span className={styles.entryStep}>
       {step} · {entry.eyebrow}
     </span>
-    <h4>{entry.title}</h4>
+    <h4 className="mt-2 mb-2">{entry.title}</h4>
     <p>{entry.description}</p>
 
-    <div className={styles.entryMetaRow}>
-      <span className={styles.entryMeta}>{entry.count}</span>
-      <span className={styles.entryMeta}>{entry.eyebrow}</span>
+    <div className={`${styles.entryMetaRow} d-flex flex-wrap gap-2 my-3`}>
+      <span className={`${styles.entryMeta} d-inline-flex align-items-center`}>{entry.count}</span>
+      <span className={`${styles.entryMeta} d-inline-flex align-items-center`}>
+        {entry.eyebrow}
+      </span>
     </div>
 
-    <nav className={styles.entryLinks} aria-label={entry.title}>
+    <nav className={`${styles.entryLinks} d-flex flex-wrap gap-3`} aria-label={entry.title}>
       {entry.links.map(link => (
         <a
           key={`${link.label}-${link.href}`}
-          className={styles.entryLink}
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
           href={link.href}
           {...(link.external && { target: '_blank', rel: 'noreferrer' })}
         >
@@ -78,16 +80,16 @@ export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>>
       <div className={styles.registerWrap}>
         <article className={styles.registerCard}>
           <div className={styles.registerCardInner}>
-            <p className={styles.regEyebrow}>{title}</p>
-            <h2 className={styles.regTitle}>{primaryTitle}</h2>
-            <p className={styles.regDesc}>{primaryDescription}</p>
+            <p className={`${styles.regEyebrow} mb-1`}>{title}</p>
+            <h2 className={`${styles.regTitle} mt-2`}>{primaryTitle}</h2>
+            <p className={`${styles.regDesc} mt-3 mb-4`}>{primaryDescription}</p>
 
-            <nav className={styles.regActions} aria-label={title}>
+            <nav className={`${styles.regActions} d-flex flex-wrap gap-3`} aria-label={title}>
               {primaryAction && <HackathonActionHubLink action={primaryAction} variant="primary" />}
               {children}
             </nav>
 
-            <ul className={`list-unstyled ${styles.regFacts}`}>
+            <ul className={`list-unstyled ${styles.regFacts} d-flex flex-wrap gap-2 mt-4`}>
               {facts.map(fact => (
                 <li key={fact}>{fact}</li>
               ))}
@@ -96,9 +98,9 @@ export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>>
         </article>
 
         <div className={styles.entryHub}>
-          <header className={styles.entryHubHead}>
-            <p className={styles.entryEyebrow}>{subtitle}</p>
-            <h3 className={styles.entryTitle}>{title}</h3>
+          <header className={`${styles.entryHubHead} mb-4`}>
+            <p className={`${styles.entryEyebrow} mb-1`}>{subtitle}</p>
+            <h3 className={`${styles.entryTitle} mt-2`}>{title}</h3>
           </header>
 
           <Row as="ol" className="list-unstyled g-3 mb-0">
diff --git a/components/Activity/Hackathon/Awards.module.less b/components/Activity/Hackathon/Awards.module.less
index 078334d..1451dc4 100644
--- a/components/Activity/Hackathon/Awards.module.less
+++ b/components/Activity/Hackathon/Awards.module.less
@@ -1,6 +1,19 @@
 @import './theme.less';
 
+;
+
 .supportEyebrow {
+  margin: 0 0 0.4rem;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.supportCopy {
+  min-width: 0;
 }
 
 .awardsGrid {
@@ -9,8 +22,75 @@
   gap: 1rem;
 }
 
+.judgingCard {
+  margin-top: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at top right, rgba(255, 201, 77, 0.08), transparent 30%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
+    rgba(8, 18, 39, 0.82);
+  padding: 1.4rem;
+}
+
+.judgingTitle {
+  margin: 0;
+  color: #fff;
+  font-size: 1rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.criteriaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.criterion {
+  grid-template-columns: auto 1fr;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 0.9rem;
+}
+
+.criterionWeight {
+  color: @cyan;
+  font-size: 1.15rem;
+  font-family: @heading;
+}
+
+.criterionTitle {
+  display: block;
+  color: #fff;
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.criterionDescription {
+  margin: 0;
+  color: @muted;
+  font-size: 0.87rem;
+  line-height: 1.6;
+}
+
 .badgeTile {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
   overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 201, 77, 0.32);
+  }
 }
 
 .badgeArtWrap {
@@ -91,10 +171,11 @@
 }
 
 .supportCard {
+  ;
   display: grid;
   grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
   gap: 1.25rem;
-  margin-top: 1.4rem;
+  margin-top: 0;
   padding: 1.55rem;
 
   @media (max-width: 1199px) {
@@ -103,7 +184,7 @@
 }
 
 .supportTitle {
-  margin-top: 0.35rem;
+  margin-top: 0;
   font-size: 1.45rem;
 }
 
@@ -114,10 +195,28 @@
   gap: 0.8rem;
 }
 
+.supportLink {
+  justify-self: start;
+  margin-top: 0;
+  border: 1px solid rgba(44, 232, 255, 0.3);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.08);
+  padding: 0.65rem 1rem;
+  color: #fff;
+  font-size: 0.82rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.52);
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
 .partnerLink {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.04);
diff --git a/components/Activity/Hackathon/Awards.tsx b/components/Activity/Hackathon/Awards.tsx
index 1f751e4..c8b2ef5 100644
--- a/components/Activity/Hackathon/Awards.tsx
+++ b/components/Activity/Hackathon/Awards.tsx
@@ -3,6 +3,7 @@ import { FC } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
+import type { HackathonHeroAction } from './Hero';
 import styles from './Awards.module.less';
 
 export interface HackathonAwardsMeta<Value = string> {
@@ -26,10 +27,14 @@ export interface HackathonOrganizationItem {
   name: string;
 }
 
+export type HackathonJudgingCriterion = Record<'id' | 'title' | 'weight' | 'description', string>;
+
 export interface HackathonAwardsProps {
+  criteria?: HackathonJudgingCriterion[];
   organizations: HackathonOrganizationItem[];
   prizes: HackathonPrizeItem[];
   subtitle: string;
+  supportAction?: HackathonHeroAction;
   supportDescription: string;
   supportEyebrow: string;
   supportTitle: string;
@@ -65,26 +70,37 @@ const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) =
   const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
 
   return href ? (
-    <a href={href} target="_blank" rel="noreferrer" title={name} className={styles.partnerLink}>
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      title={name}
+      className={`${styles.partnerLink} d-flex justify-content-center align-items-center`}
+    >
       {imageNode}
     </a>
   ) : (
-    <div className={styles.partnerLink} title={name}>
+    <div
+      className={`${styles.partnerLink} d-flex justify-content-center align-items-center`}
+      title={name}
+    >
       {imageNode}
     </div>
   );
 };
 
 export const HackathonAwards: FC<HackathonAwardsProps> = ({
+  criteria,
   organizations,
   prizes,
   subtitle,
+  supportAction,
   supportDescription,
   supportEyebrow,
   supportTitle,
   title,
 }) => (
-  <section className={styles.section}>
+  <section id="awards" className={styles.section}>
     <Container>
       {prizes[0] && (
         <>
@@ -94,19 +110,37 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
             <div className={styles.accentLine} />
           </header>
 
-          <div className={styles.awardsGrid}>
+          <div className={`${styles.awardsGrid} gap-3`}>
             {prizes.map(prize => (
               <PrizeCard key={prize.id} {...prize} />
             ))}
           </div>
+
+          {criteria?.[0] && (
+            <article className={`${styles.judgingCard} mt-4`}>
+              <h3 className={`${styles.judgingTitle} mb-3`}>{subtitle}</h3>
+
+              <ul className={`list-unstyled ${styles.criteriaGrid}`}>
+                {criteria.map(({ description, id, title, weight }) => (
+                  <li key={id} className={`${styles.criterion} d-grid align-items-start gap-3`}>
+                    <span className={styles.criterionWeight}>{weight}</span>
+                    <div>
+                      <strong className={styles.criterionTitle}>{title}</strong>
+                      <p className={`${styles.criterionDescription} mt-2 mb-0`}>{description}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          )}
         </>
       )}
 
       {organizations[0] && (
-        <div className={styles.supportCard}>
-          <div className={styles.supportCopy}>
-            <p className={styles.supportEyebrow}>{supportEyebrow}</p>
-            <h3 className={styles.supportTitle}>{supportTitle}</h3>
+        <div className={`${styles.supportCard} mt-4`}>
+          <div className={`${styles.supportCopy} d-flex flex-column justify-content-center`}>
+            <p className={`${styles.supportEyebrow} mb-1`}>{supportEyebrow}</p>
+            <h3 className={`${styles.supportTitle} mt-2`}>{supportTitle}</h3>
             <p className={styles.supportDescription}>{supportDescription}</p>
           </div>
 
@@ -115,6 +149,16 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
               <OrganizationLogo key={organization.id} {...organization} />
             ))}
           </nav>
+
+          {supportAction && (
+            <a
+              className={`${styles.supportLink} d-inline-flex align-items-center mt-2`}
+              href={supportAction.href}
+              {...(supportAction.external && { target: '_blank', rel: 'noreferrer' })}
+            >
+              {supportAction.label}
+            </a>
+          )}
         </div>
       )}
     </Container>
diff --git a/components/Activity/Hackathon/FAQ.module.less b/components/Activity/Hackathon/FAQ.module.less
new file mode 100644
index 0000000..3afdf74
--- /dev/null
+++ b/components/Activity/Hackathon/FAQ.module.less
@@ -0,0 +1,74 @@
+@import './theme.less';
+
+;
+
+.faqGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.faqItem {
+  transition:
+    border-color 0.24s ease,
+    transform 0.24s ease,
+    box-shadow 0.24s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at top right, rgba(44, 232, 255, 0.08), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
+    rgba(8, 18, 39, 0.8);
+  padding: 1.35rem 1.5rem;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
+    border-color: rgba(44, 232, 255, 0.24);
+  }
+
+  &[open] {
+    border-color: rgba(44, 232, 255, 0.28);
+  }
+}
+
+.faqQuestion {
+  position: relative;
+  cursor: pointer;
+  padding-right: 2rem;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.6;
+  list-style: none;
+
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transition: transform 0.24s ease;
+    content: '+';
+    color: @cyan;
+    font-weight: 300;
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+}
+
+.faqItem[open] .faqQuestion::after {
+  transform: rotate(45deg);
+}
+
+.faqAnswer {
+  margin: 0;
+  color: @muted;
+  font-size: 0.95rem;
+  line-height: 1.8;
+}
diff --git a/components/Activity/Hackathon/FAQ.tsx b/components/Activity/Hackathon/FAQ.tsx
new file mode 100644
index 0000000..8f9676d
--- /dev/null
+++ b/components/Activity/Hackathon/FAQ.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import styles from './FAQ.module.less';
+
+export type HackathonFAQItem = Record<'id' | 'question' | 'answer', string>;
+
+export interface HackathonFAQProps {
+  items: HackathonFAQItem[];
+  subtitle: string;
+  title: string;
+}
+
+export const HackathonFAQ: FC<HackathonFAQProps> = ({ items, subtitle, title }) => (
+  <section id="faq" className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={`${styles.faqGrid} d-grid gap-3`}>
+        {items.map(({ answer, id, question }) => (
+          <details key={id} className={styles.faqItem}>
+            <summary className={styles.faqQuestion}>{question}</summary>
+            <p className={`${styles.faqAnswer} mt-3 mb-0`}>{answer}</p>
+          </details>
+        ))}
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/Hero.module.less b/components/Activity/Hackathon/Hero.module.less
index 50beac6..c04735b 100644
--- a/components/Activity/Hackathon/Hero.module.less
+++ b/components/Activity/Hackathon/Hero.module.less
@@ -2,8 +2,11 @@
 
 .hero {
   position: relative;
-  padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
+  padding: 7.75rem 0 clamp(3.5rem, 6vw, 5rem);
+  min-height: clamp(720px, 92vh, 900px);
   overflow: hidden;
+
+  scroll-margin-top: 5rem;
   color: @copy;
 
   &::before,
@@ -30,31 +33,68 @@
   }
 }
 
+.siteHeader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+  backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid rgba(44, 232, 255, 0.12);
+  background: rgba(4, 4, 15, 0.78);
+}
+
+.headerContainer {
+  min-width: 0;
+}
+
+.logoText {
+  color: #fff;
+  font-weight: 900;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.headerNav {
+  min-width: 0;
+}
+
+.headerNavLink {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.95rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
 .heroInner {
   display: grid;
   position: relative;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
-  align-items: center;
+  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 440px);
+  align-items: start;
   gap: clamp(2rem, 4vw, 4rem);
   z-index: 1;
 }
 
 .heroContent {
-  display: flex;
-  flex-direction: column;
-  gap: 1.35rem;
-}
-
-.heroEyebrow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin: 0;
+  gap: 1.5rem;
+  max-width: 680px;
 }
 
 .heroBadge {
-  display: inline-flex;
-  align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
@@ -92,93 +132,150 @@
 }
 
 .title {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  margin: 0;
-  font-weight: 900;
-  font-size: clamp(2.6rem, 5vw, 4.45rem);
-  line-height: 1;
+  gap: 0.35rem;
+  line-height: 1.02;
   font-family: @heading;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.03em;
 }
 
 .heroTitlePrimary {
+  display: block;
   color: #fff;
+  font-weight: 900;
+  font-size: clamp(3rem, 6vw, 5.25rem);
+}
+
+.heroTitleAccent {
+  display: block;
+  background: linear-gradient(135deg, @gold 0%, #ff9a1a 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: 900;
+  font-size: clamp(2.65rem, 5.5vw, 4.75rem);
 }
 
 .heroTitleSecondary {
+  display: block;
   background: linear-gradient(90deg, @cyan, @gold 78%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
-  font-size: clamp(1.05rem, 2vw, 1.6rem);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-size: clamp(1rem, 1.7vw, 1.45rem);
+  letter-spacing: 0.32em;
+  text-transform: none;
 }
 
 .description {
   margin: 0;
   max-width: 62ch;
   color: @muted;
-  font-size: 1.05rem;
+  font-size: 1.08rem;
   line-height: 1.8;
   font-family: @body;
+
+  strong {
+    color: #fff;
+  }
 }
 
-.heroActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.9rem;
+.countdownWrap {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 520px;
 }
 
-.heroStats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.85rem;
-  margin: 0;
+.countdownLabel {
+  color: @muted;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
-.statChip {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 0.85rem 1rem;
-  min-width: 108px;
+.countdownGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.countdownCell {
+  gap: 0.7rem;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+    0 0 26px rgba(44, 232, 255, 0.08);
+  border: 1px solid rgba(44, 232, 255, 0.26);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
+  min-height: 120px;
 
   strong {
-    font-size: 1.25rem;
-    line-height: 1.1;
+    color: #fff;
+    font-size: clamp(2.3rem, 4vw, 3.8rem);
+    line-height: 1;
     font-family: @heading;
+    letter-spacing: 0.08em;
   }
 
   span {
-    color: @muted;
+    color: rgba(255, 255, 255, 0.72);
     font-size: 0.82rem;
-    letter-spacing: 0.04em;
+    font-family: @heading;
+    letter-spacing: 0.2em;
     text-transform: uppercase;
   }
 }
 
+.actionButton {
+  box-shadow: 0 0 28px rgba(44, 232, 255, 0.14);
+  border-color: rgba(44, 232, 255, 0.48);
+  background: rgba(44, 232, 255, 0.08);
+  color: #fff;
+
+  &:hover {
+    box-shadow: 0 0 36px rgba(44, 232, 255, 0.22);
+    border-color: rgba(44, 232, 255, 0.72);
+    color: #fff;
+  }
+}
+
+.actionButtonGhost {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.82);
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.28);
+    color: #fff;
+  }
+}
+
+.statChip {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 0.45rem 0.75rem;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.82rem;
+  letter-spacing: 0.3px;
+}
+
 .heroVisual {
   position: relative;
-  min-height: 580px;
+  min-height: 640px;
 }
 
 .heroVisualCard {
   position: relative;
   z-index: 1;
-  background: linear-gradient(180deg, rgba(11, 19, 40, 0.95), rgba(8, 18, 39, 0.9));
+  backdrop-filter: blur(18px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
   overflow: hidden;
 }
 
 .heroVisualHead {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.8rem;
   padding: 1.15rem 1.25rem 0;
 }
 
@@ -205,9 +302,9 @@
   position: relative;
   margin: 1rem 1.25rem 0;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 24px;
+  border-radius: 28px;
   background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
-  min-height: 340px;
+  min-height: 420px;
   overflow: hidden;
 
   :global(img) {
@@ -226,10 +323,7 @@
 }
 
 .heroImageFallback {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 340px;
+  min-height: 420px;
   color: @cyan;
   font-weight: 900;
   font-size: clamp(1.25rem, 3vw, 2rem);
@@ -246,23 +340,30 @@
 .heroVisualTitle {
   margin: 0 0 0.35rem;
   color: #fff;
-  font-size: 1rem;
+  font-size: 1.05rem;
   font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .heroVisualCopy,
 .heroVisualDescription {
-  margin: 0;
   color: @muted;
   line-height: 1.75;
 }
 
+.heroVisualCopy {
+  color: #fff;
+  font-size: 0.95rem;
+}
+
 .heroFloatingCard {
   position: absolute;
-  z-index: 2;
+  transform: rotate(-2.5deg);
+  z-index: 3;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
   border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 22px;
+  border-radius: 24px;
   background: rgba(8, 18, 39, 0.88);
   padding: 1rem 1.1rem;
   max-width: 260px;
@@ -284,13 +385,14 @@
 }
 
 .heroFloatingCardTop {
-  top: 2.5rem;
-  left: -1.5rem;
+  top: 0.75rem;
+  right: -1rem;
 }
 
 .heroFloatingCardBottom {
-  right: -1.5rem;
-  bottom: 1.5rem;
+  bottom: 1.2rem;
+  left: -1rem;
+  transform: rotate(2deg);
 }
 
 @media (max-width: 1199px) {
@@ -303,11 +405,11 @@
   }
 
   .heroFloatingCardTop {
-    left: 1rem;
+    right: 1rem;
   }
 
   .heroFloatingCardBottom {
-    right: 1rem;
+    left: 1rem;
   }
 }
 
@@ -319,30 +421,37 @@
 
 @media (max-width: 767px) {
   .hero {
-    padding-top: 4rem;
+    padding-top: 6rem;
+    min-height: 0;
+  }
+
+  .heroContent {
+    gap: 1.25rem;
   }
 
   .heroFloatingCard {
     position: static;
-    margin-top: 1rem;
+    transform: none;
     max-width: none;
   }
 
-  .heroVisual {
-    display: flex;
-    flex-direction: column;
-  }
-
   .heroImageFrame {
     min-height: 260px;
   }
 
-  .heroStats {
-    display: grid;
+  .heroBadge {
+    font-size: 0.72rem;
+  }
+
+  .countdownGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .heroBadge {
-    font-size: 0.72rem;
+  .countdownCell {
+    min-height: 96px;
+
+    strong {
+      font-size: 2rem;
+    }
   }
 }
diff --git a/components/Activity/Hackathon/Hero.tsx b/components/Activity/Hackathon/Hero.tsx
index 6c62738..855aee7 100644
--- a/components/Activity/Hackathon/Hero.tsx
+++ b/components/Activity/Hackathon/Hero.tsx
@@ -1,42 +1,38 @@
 import { TableCellValue } from 'mobx-lark';
-import { FC } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
-import type { HackathonAwardsMeta } from './Awards';
 import styles from './Hero.module.less';
 
-export interface HackathonHeroAction {
-  external?: boolean;
-  href: string;
-  label: string;
-}
+export type HackathonHeroNavItem = Record<'label' | 'href', string>;
 
-export interface HackathonHeroCard {
-  description: string;
-  eyebrow: string;
-  title: string;
+export interface HackathonHeroAction extends HackathonHeroNavItem {
+  external?: boolean;
 }
 
-export type HackathonHeroStat = HackathonAwardsMeta<number>;
+export type HackathonHeroCard = Record<'title' | 'description' | 'eyebrow', string>;
 
-export interface HackathonHeroProps {
+export interface HackathonHeroProps extends Record<
+  | `visual${'Kicker' | 'Title' | 'Copy' | 'Chip'}`
+  | 'name'
+  | 'subtitle'
+  | 'description'
+  | 'locationText'
+  | 'imageFallback',
+  string
+> {
   badges: string[];
   bottomCard?: HackathonHeroCard;
-  description: string;
+  chips?: string[];
+  countdownLabel?: string;
+  countdownUnitLabels: string[];
+  countdownTo?: string;
   image?: TableCellValue;
-  imageFallback: string;
-  locationText: string;
-  name: string;
+  navigation: HackathonHeroNavItem[];
   primaryAction: HackathonHeroAction;
   secondaryAction: HackathonHeroAction;
-  stats: HackathonHeroStat[];
-  subtitle: string;
   topCard?: HackathonHeroCard;
-  visualChip: string;
-  visualCopy: string;
-  visualKicker: string;
-  visualTitle: string;
 }
 
 const BadgeToneClass = [
@@ -59,12 +55,18 @@ const HeroLink: FC<{
   </a>
 );
 
+const NavLink: FC<{ item: HackathonHeroNavItem }> = ({ item }) => (
+  <a className={`${styles.headerNavLink} d-none d-lg-inline`} href={item.href}>
+    {item.label}
+  </a>
+);
+
 const FloatingCard: FC<{
   card: HackathonHeroCard;
   position: 'bottom' | 'top';
 }> = ({ card, position }) => (
   <div
-    className={`${styles.heroFloatingCard} ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
+    className={`${styles.heroFloatingCard} mt-3 mt-md-0 ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
   >
     <span className={styles.floatingLabel}>{card.eyebrow}</span>
     <strong>{card.title}</strong>
@@ -72,89 +74,195 @@ const FloatingCard: FC<{
   </div>
 );
 
+const useCountdown = (countdownTo?: string) => {
+  const target = useMemo(() => {
+    const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
+
+    return Number.isFinite(value) ? value : NaN;
+  }, [countdownTo]);
+  const [now, setNow] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!Number.isFinite(target)) return;
+
+    setNow(Date.now());
+
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+
+    return () => window.clearInterval(timer);
+  }, [target]);
+
+  return useMemo(() => {
+    if (!Number.isFinite(target) || now === null) return ['--', '--', '--', '--'];
+
+    const rest = Math.max(0, target - now);
+    const totalSeconds = Math.floor(rest / 1000);
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
+  }, [now, target]);
+};
+
+const splitHeroTitle = (name: string, subtitle: string) => {
+  const segments = name.split(/\s+/).filter(Boolean);
+
+  if (segments.length < 3)
+    return {
+      primary: name,
+      secondary: subtitle,
+    };
+
+  return {
+    primary: segments.slice(0, Math.max(1, segments.length - 2)).join(' '),
+    secondary: segments.slice(-2).join(' '),
+  };
+};
+
 export const HackathonHero: FC<HackathonHeroProps> = ({
   badges,
   bottomCard,
+  chips,
+  countdownLabel,
+  countdownUnitLabels,
+  countdownTo,
   description,
   image,
   imageFallback,
   locationText,
   name,
+  navigation,
   primaryAction,
   secondaryAction,
-  stats,
   subtitle,
   topCard,
   visualChip,
   visualCopy,
   visualKicker,
   visualTitle,
-}) => (
-  <section className={styles.hero}>
-    <Container>
-      <div className={styles.heroInner}>
-        <div className={styles.heroContent}>
-          <ul className={`list-unstyled ${styles.heroEyebrow}`}>
-            {badges.map((badge, index) => (
-              <li
-                key={`${badge}-${index}`}
-                className={`${styles.heroBadge} ${BadgeToneClass[index % BadgeToneClass.length]}`}
+}) => {
+  const countdown = useCountdown(countdownTo);
+  const title = splitHeroTitle(name, subtitle);
+
+  return (
+    <section id="top" className={styles.hero}>
+      <header className={styles.siteHeader}>
+        <Container>
+          <div
+            className={`${styles.headerContainer} d-flex flex-wrap flex-md-nowrap justify-content-between align-items-center gap-3 py-3`}
+          >
+            <a className={`${styles.logoText} text-nowrap`} href="#top">
+              {name}
+            </a>
+
+            <nav
+              className={`${styles.headerNav} d-flex justify-content-between justify-content-md-start align-items-center gap-3`}
+              aria-label={subtitle}
+            >
+              {navigation.map(item => (
+                <NavLink key={`${item.label}-${item.href}`} item={item} />
+              ))}
+              <HeroLink action={primaryAction} variant="primary" />
+            </nav>
+          </div>
+        </Container>
+      </header>
+
+      <Container>
+        <div className={styles.heroInner}>
+          <div className={`${styles.heroContent} d-flex flex-column pt-3 pt-xl-4`}>
+            <ul className={`list-unstyled ${styles.heroEyebrow} d-flex flex-wrap gap-3 m-0`}>
+              {badges.map((badge, index) => (
+                <li
+                  key={`${badge}-${index}`}
+                  className={`${styles.heroBadge} d-inline-flex align-items-center ${BadgeToneClass[index % BadgeToneClass.length]}`}
+                >
+                  {badge}
+                </li>
+              ))}
+            </ul>
+
+            <h1 className={`${styles.title} d-flex flex-column mb-0`}>
+              <span className={styles.heroTitlePrimary}>{title.primary}</span>
+              <span className={styles.heroTitleAccent}>{title.secondary}</span>
+              <span className={styles.heroTitleSecondary}>{subtitle}</span>
+            </h1>
+
+            <p className={styles.description}>{description}</p>
+
+            {countdownTo && (
+              <div className={styles.countdownWrap}>
+                {countdownLabel && (
+                  <p className={`${styles.countdownLabel} m-0`}>{countdownLabel}</p>
+                )}
+
+                <ol className={`list-unstyled ${styles.countdownGrid} m-0`}>
+                  {countdown.map((value, index) => (
+                    <li
+                      key={`${index}-${countdownUnitLabels[index]}`}
+                      className={`${styles.countdownCell} d-flex flex-column justify-content-center align-items-center`}
+                    >
+                      <strong>{value}</strong>
+                      <span>{countdownUnitLabels[index]}</span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            )}
+
+            <nav className="d-flex flex-wrap gap-2 gap-md-3" aria-label={subtitle}>
+              <HeroLink action={primaryAction} variant="primary" />
+              <HeroLink action={secondaryAction} variant="ghost" />
+            </nav>
+
+            {chips?.[0] && (
+              <ul
+                className={`list-unstyled ${styles.heroStats} d-flex flex-wrap gap-2 gap-md-3 m-0`}
               >
-                {badge}
-              </li>
-            ))}
-          </ul>
-
-          <h1 className={styles.title}>
-            <span className={styles.heroTitlePrimary}>{name}</span>
-            <span className={styles.heroTitleSecondary}>{subtitle}</span>
-          </h1>
-
-          <p className={styles.description}>{description}</p>
-
-          <nav className={styles.heroActions} aria-label={subtitle}>
-            <HeroLink action={primaryAction} variant="primary" />
-            <HeroLink action={secondaryAction} variant="ghost" />
-          </nav>
-
-          <ul className={`list-unstyled ${styles.heroStats}`}>
-            {stats.map(({ label, value }) => (
-              <li key={label} className={styles.statChip}>
-                <strong>{value}</strong>
-                <span>{label}</span>
-              </li>
-            ))}
-          </ul>
-        </div>
+                {chips.map(chip => (
+                  <li key={chip} className={`${styles.statChip} d-inline-flex align-items-center`}>
+                    {chip}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
 
-        <div className={styles.heroVisual}>
-          <div className={styles.heroVisualCard}>
-            <div className={styles.heroVisualHead}>
-              <span className={styles.visualKicker}>{visualKicker}</span>
-              <span className={styles.visualChip}>{visualChip}</span>
-            </div>
+          <div className={`${styles.heroVisual} pt-3 pt-xl-4 d-flex d-md-block flex-column`}>
+            <div className={styles.heroVisualCard}>
+              <div className={`${styles.heroVisualHead} d-flex justify-content-between gap-3`}>
+                <span className={styles.visualKicker}>{visualKicker}</span>
+                <span className={styles.visualChip}>{visualChip}</span>
+              </div>
 
-            <figure className={styles.heroImageFrame}>
-              <div className={styles.mascotGlow} />
+              <figure className={styles.heroImageFrame}>
+                <div className={styles.mascotGlow} />
 
-              {image ? (
-                <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
-              ) : (
-                <div className={styles.heroImageFallback}>{imageFallback}</div>
-              )}
-            </figure>
+                {image ? (
+                  <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
+                ) : (
+                  <div
+                    className={`${styles.heroImageFallback} d-flex justify-content-center align-items-center`}
+                  >
+                    {imageFallback}
+                  </div>
+                )}
+              </figure>
 
-            <div className={styles.heroVisualFoot}>
-              <p className={styles.heroVisualTitle}>{locationText}</p>
-              <p className={styles.heroVisualCopy}>{visualTitle}</p>
-              <p className={styles.heroVisualDescription}>{visualCopy}</p>
+              <div className={styles.heroVisualFoot}>
+                <p className={styles.heroVisualTitle}>{locationText}</p>
+                <p className={`${styles.heroVisualCopy} m-0`}>{visualTitle}</p>
+                <p className={`${styles.heroVisualDescription} m-0`}>{visualCopy}</p>
+              </div>
             </div>
-          </div>
 
-          {topCard && <FloatingCard card={topCard} position="top" />}
-          {bottomCard && <FloatingCard card={bottomCard} position="bottom" />}
+            {topCard && <FloatingCard card={topCard} position="top" />}
+            {bottomCard && <FloatingCard card={bottomCard} position="bottom" />}
+          </div>
         </div>
-      </div>
-    </Container>
-  </section>
-);
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Overview.module.less b/components/Activity/Hackathon/Overview.module.less
index c2a4a7e..4f9922a 100644
--- a/components/Activity/Hackathon/Overview.module.less
+++ b/components/Activity/Hackathon/Overview.module.less
@@ -1,15 +1,27 @@
 @import './theme.less';
 
+;
+
 .themePanel {
-  margin-bottom: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  position: relative;
+  border: 1px solid rgba(255, 201, 77, 0.16);
   border-radius: 28px;
-  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.12));
+  background: linear-gradient(135deg, rgba(255, 201, 77, 0.08), rgba(123, 97, 255, 0.12));
   padding: 1.5rem 1.6rem;
+
+  &::before {
+    position: absolute;
+    top: -1.9rem;
+    left: 1rem;
+    content: '"';
+    color: rgba(255, 201, 77, 0.18);
+    font-size: 6rem;
+    line-height: 1;
+    font-family: serif;
+  }
 }
 
 .themeText {
-  margin-bottom: 0.4rem;
   color: #fff;
   font-weight: 900;
   font-size: clamp(1.35rem, 2.6vw, 2rem);
@@ -23,11 +35,24 @@
 }
 
 .trackCard {
+  position: relative;
   transition:
     transform 0.22s ease,
     border-color 0.22s ease;
   padding: 1.4rem;
   height: 100%;
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    opacity: 0.75;
+    background: linear-gradient(90deg, @cyan, @purple);
+    height: 2px;
+    content: '';
+  }
 
   &:hover {
     transform: translateY(-4px);
@@ -36,10 +61,6 @@
 }
 
 .trackIcon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1rem;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.06);
@@ -52,23 +73,14 @@
   margin: 0;
   color: #fff;
   font-weight: 800;
-  font-size: 1.08rem;
+  font-size: 1rem;
   line-height: 1.3;
   font-family: @heading;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .trackDesc {
-  margin: 0.75rem 0 0.95rem;
-  min-height: 4.8rem;
   color: @muted;
   line-height: 1.75;
 }
-
-.trackMetric {
-  color: @cyan;
-  font-weight: 700;
-  font-size: 0.78rem;
-  font-family: @heading;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
diff --git a/components/Activity/Hackathon/Overview.tsx b/components/Activity/Hackathon/Overview.tsx
index a60d1f6..7a54ff2 100644
--- a/components/Activity/Hackathon/Overview.tsx
+++ b/components/Activity/Hackathon/Overview.tsx
@@ -3,29 +3,24 @@ import { Col, Container, Row } from 'react-bootstrap';
 
 import styles from './Overview.module.less';
 
-export interface HackathonOverviewCard {
-  description: string;
-  icon: string;
-  title: string;
-  value: number;
-}
+export type HackathonOverviewCard = Record<'title' | 'description' | 'icon', string>;
 
-export interface HackathonOverviewProps {
+export type HackathonOverviewProps = Record<
+  'title' | 'subtitle' | 'themeText' | 'themeSub',
+  string
+> & {
   cards: HackathonOverviewCard[];
-  subtitle: string;
-  themeSub: string;
-  themeText: string;
-  title: string;
-}
+};
 
-const OverviewCard: FC<HackathonOverviewCard> = ({ description, icon, title, value }) => (
+const OverviewCard: FC<HackathonOverviewCard> = ({ description, icon, title }) => (
   <article className={styles.trackCard}>
-    <span className={styles.trackIcon}>{icon}</span>
-    <div className={styles.trackName}>{title}</div>
-    <p className={styles.trackDesc}>{description}</p>
-    <span className={styles.trackMetric}>
-      {value} {title}
+    <span
+      className={`${styles.trackIcon} d-inline-flex justify-content-center align-items-center mb-3`}
+    >
+      {icon}
     </span>
+    <div className={styles.trackName}>{title}</div>
+    <p className={`${styles.trackDesc} mt-3 mb-0`}>{description}</p>
   </article>
 );
 
@@ -36,7 +31,7 @@ export const HackathonOverview: FC<HackathonOverviewProps> = ({
   themeText,
   title,
 }) => (
-  <section className={styles.section}>
+  <section id="tracks" className={styles.section}>
     <Container>
       <header className={styles.sectionHeader}>
         <h2 className={styles.sectionTitle}>{title}</h2>
@@ -44,8 +39,8 @@ export const HackathonOverview: FC<HackathonOverviewProps> = ({
         <div className={styles.accentLine} />
       </header>
 
-      <div className={styles.themePanel}>
-        <div className={styles.themeText}>{themeText}</div>
+      <div className={`${styles.themePanel} mb-4`}>
+        <div className={`${styles.themeText} mb-2`}>{themeText}</div>
         <p className={styles.themeSub}>{themeSub}</p>
       </div>
 
diff --git a/components/Activity/Hackathon/Participants.module.less b/components/Activity/Hackathon/Participants.module.less
index 56c1ff3..d08e0b4 100644
--- a/components/Activity/Hackathon/Participants.module.less
+++ b/components/Activity/Hackathon/Participants.module.less
@@ -1,9 +1,9 @@
 @import './theme.less';
 
+;
+
 .participantCloud {
-  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
 
   @media (max-width: 767px) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -11,16 +11,11 @@
 }
 
 .participantCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.04);
   padding: 1.1rem 0.9rem;
   color: #fff;
-  text-align: center;
   text-decoration: none;
 }
 
@@ -41,3 +36,20 @@
   font-size: 0.92rem;
   line-height: 1.4;
 }
+
+.toggleButton {
+  border: 1px solid rgba(44, 232, 255, 0.28);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.62rem 0.95rem;
+  color: #fff;
+  font-size: 0.78rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.11);
+  }
+}
diff --git a/components/Activity/Hackathon/Participants.tsx b/components/Activity/Hackathon/Participants.tsx
index b1b1ee8..33107da 100644
--- a/components/Activity/Hackathon/Participants.tsx
+++ b/components/Activity/Hackathon/Participants.tsx
@@ -1,5 +1,5 @@
 import { TableCellValue } from 'mobx-lark';
-import { FC } from 'react';
+import { FC, useMemo, useState } from 'react';
 import { Container } from 'react-bootstrap';
 
 import { LarkImage } from '../../LarkImage';
@@ -13,7 +13,10 @@ export interface HackathonParticipantItem {
 }
 
 export interface HackathonParticipantsProps {
+  initialVisible?: number;
   participants: HackathonParticipantItem[];
+  showLessLabel?: string;
+  showMoreLabel?: string;
   subtitle: string;
   title: string;
 }
@@ -27,32 +30,63 @@ const ParticipantCard: FC<HackathonParticipantItem> = ({ avatar, githubLink, nam
   );
 
   return githubLink ? (
-    <a className={styles.participantCard} href={githubLink} target="_blank" rel="noreferrer">
+    <a
+      className={`${styles.participantCard} d-flex flex-column align-items-center gap-3 text-center`}
+      href={githubLink}
+      target="_blank"
+      rel="noreferrer"
+    >
       {content}
     </a>
   ) : (
-    <div className={styles.participantCard}>{content}</div>
+    <div
+      className={`${styles.participantCard} d-flex flex-column align-items-center gap-3 text-center`}
+    >
+      {content}
+    </div>
   );
 };
 
 export const HackathonParticipants: FC<HackathonParticipantsProps> = ({
+  initialVisible = 12,
   participants,
+  showLessLabel,
+  showMoreLabel,
   subtitle,
   title,
-}) => (
-  <section className={styles.section}>
-    <Container>
-      <header className={styles.sectionHeader}>
-        <h2 className={styles.sectionTitle}>{title}</h2>
-        <p className={styles.sectionSubtitle}>{subtitle}</p>
-        <div className={styles.accentLine} />
-      </header>
-
-      <div className={styles.participantCloud}>
-        {participants.map(participant => (
-          <ParticipantCard key={participant.id} {...participant} />
-        ))}
-      </div>
-    </Container>
-  </section>
-);
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const visibleParticipants = useMemo(
+    () => (expanded ? participants : participants.slice(0, initialVisible)),
+    [expanded, initialVisible, participants],
+  );
+  const hasMore = participants.length > initialVisible;
+
+  return (
+    <section className={styles.section}>
+      <Container>
+        <header className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>{title}</h2>
+          <p className={styles.sectionSubtitle}>{subtitle}</p>
+          <div className={styles.accentLine} />
+        </header>
+
+        <div className={`${styles.participantCloud} d-grid gap-3`}>
+          {visibleParticipants.map(participant => (
+            <ParticipantCard key={participant.id} {...participant} />
+          ))}
+        </div>
+
+        {hasMore && (
+          <button
+            type="button"
+            className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+            onClick={() => setExpanded(value => !value)}
+          >
+            {expanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+          </button>
+        )}
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Resources.module.less b/components/Activity/Hackathon/Resources.module.less
index 77f7a3a..90c3ee0 100644
--- a/components/Activity/Hackathon/Resources.module.less
+++ b/components/Activity/Hackathon/Resources.module.less
@@ -1,26 +1,28 @@
 @import './theme.less';
 
-.projectHeader {
-  margin-top: 2.75rem;
-}
+;
 
 .resourceCard,
 .projectCard {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
   padding: 1.25rem;
   height: 100%;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
 }
 
 .resourceHead,
 .projectTop {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  gap: 1rem;
+  min-width: 0;
 }
 
 .projectHead {
-  display: grid;
-  gap: 0.8rem;
   margin: 0;
 }
 
@@ -45,22 +47,16 @@
 
 .resourceDescription,
 .projectSummary {
-  margin: 0.8rem 0 1rem;
   color: @muted;
   line-height: 1.75;
 }
 
 .topicList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.55rem;
-  margin: 0 0 1rem;
+  margin: 0;
 }
 
 .topicChip,
 .topicChipMuted {
-  display: inline-flex;
-  align-items: center;
   border-radius: 999px;
   padding: 0.34rem 0.72rem;
   font-size: 0.76rem;
@@ -81,18 +77,47 @@
 }
 
 .resourceLinks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.9rem;
+  min-width: 0;
 }
 
 .entryLink {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 8px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.42rem 0.85rem;
+  color: @cyan;
+  font-size: 0.8rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.12);
+    color: @cyan;
+    text-decoration: none;
+  }
+}
+
+.toggleButton {
+  border: 1px solid rgba(44, 232, 255, 0.28);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.62rem 0.95rem;
+  color: #fff;
+  font-size: 0.78rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.11);
+  }
 }
 
 .scoreCircle {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
   box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
   border: 1px solid rgba(44, 232, 255, 0.2);
   border-radius: 50%;
diff --git a/components/Activity/Hackathon/Resources.tsx b/components/Activity/Hackathon/Resources.tsx
index 0c7870d..962e942 100644
--- a/components/Activity/Hackathon/Resources.tsx
+++ b/components/Activity/Hackathon/Resources.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useMemo, useState } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
 import type { HackathonAwardsMeta } from './Awards';
@@ -29,13 +29,16 @@ export interface HackathonProjectItem {
   title: string;
 }
 
-export interface HackathonResourcesProps {
+export interface HackathonResourcesProps extends Record<
+  `project${'Subtitle' | 'Title'}` | `template${'Subtitle' | 'Title'}`,
+  string
+> {
+  projectInitialVisible?: number;
   projectItems: HackathonProjectItem[];
-  projectSubtitle: string;
-  projectTitle: string;
+  showLessLabel?: string;
+  showMoreLabel?: string;
+  templateInitialVisible?: number;
   templateItems: HackathonTemplateItem[];
-  templateSubtitle: string;
-  templateTitle: string;
 }
 
 const TemplateCard: FC<HackathonTemplateItem> = ({
@@ -49,32 +52,44 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
   title,
 }) => (
   <article className={styles.resourceCard}>
-    <div className={styles.resourceHead}>
+    <div
+      className={`${styles.resourceHead} d-flex justify-content-between align-items-start gap-3`}
+    >
       <h3 className={styles.resourceTitle}>{title}</h3>
     </div>
-    <p className={styles.resourceDescription}>{description}</p>
+    <p className={`${styles.resourceDescription} mt-3 mb-3`}>{description}</p>
 
-    <ul className={`list-unstyled ${styles.topicList}`}>
+    <ul className={`list-unstyled ${styles.topicList} d-flex flex-wrap gap-2 mb-3`}>
       {languages.map(language => (
-        <li key={language} className={styles.topicChip}>
+        <li key={language} className={`${styles.topicChip} d-inline-flex align-items-center`}>
           {language}
         </li>
       ))}
       {tags.map(tag => (
-        <li key={tag} className={styles.topicChipMuted}>
+        <li key={tag} className={`${styles.topicChipMuted} d-inline-flex align-items-center`}>
           {tag}
         </li>
       ))}
     </ul>
 
-    <nav className={styles.resourceLinks} aria-label={title}>
+    <nav className={`${styles.resourceLinks} d-flex flex-wrap gap-3`} aria-label={title}>
       {sourceUrl && (
-        <a className={styles.entryLink} href={sourceUrl} target="_blank" rel="noreferrer">
+        <a
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
+          href={sourceUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
           {sourceLabel}
         </a>
       )}
       {previewUrl && (
-        <a className={styles.entryLink} href={previewUrl} target="_blank" rel="noreferrer">
+        <a
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
+          href={previewUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
           {previewLabel}
         </a>
       )}
@@ -84,14 +99,18 @@ const TemplateCard: FC<HackathonTemplateItem> = ({
 
 const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score, title }) => (
   <article className={styles.projectCard}>
-    <div className={styles.projectTop}>
-      <hgroup className={styles.projectHead}>
+    <div className={`${styles.projectTop} d-flex justify-content-between align-items-start gap-3`}>
+      <hgroup className={`${styles.projectHead} d-grid gap-3`}>
         <h3 className={styles.projectTitle}>
           <a href={link}>{title}</a>
         </h3>
-        {description && <p className={styles.projectSummary}>{description}</p>}
+        {description && <p className={`${styles.projectSummary} mt-0 mb-0`}>{description}</p>}
       </hgroup>
-      <div className={styles.scoreCircle}>{score}</div>
+      <div
+        className={`${styles.scoreCircle} d-inline-flex justify-content-center align-items-center`}
+      >
+        {score}
+      </div>
     </div>
 
     <dl className={styles.projectMeta}>
@@ -106,50 +125,89 @@ const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score,
 );
 
 export const HackathonResources: FC<HackathonResourcesProps> = ({
+  projectInitialVisible = 3,
   projectItems,
+  showLessLabel,
+  showMoreLabel,
+  templateInitialVisible = 6,
   projectSubtitle,
   projectTitle,
   templateItems,
   templateSubtitle,
   templateTitle,
-}) => (
-  <section className={styles.section}>
-    <Container>
-      {templateItems[0] && (
-        <>
-          <header className={styles.sectionHeader}>
-            <h2 className={styles.sectionTitle}>{templateTitle}</h2>
-            <p className={styles.sectionSubtitle}>{templateSubtitle}</p>
-            <div className={styles.accentLine} />
-          </header>
-
-          <Row className="g-3">
-            {templateItems.map(template => (
-              <Col key={template.id} md={6} xl={4}>
-                <TemplateCard {...template} />
-              </Col>
-            ))}
-          </Row>
-        </>
-      )}
+}) => {
+  const [templatesExpanded, setTemplatesExpanded] = useState(false);
+  const [projectsExpanded, setProjectsExpanded] = useState(false);
+  const visibleTemplates = useMemo(
+    () => (templatesExpanded ? templateItems : templateItems.slice(0, templateInitialVisible)),
+    [templateInitialVisible, templateItems, templatesExpanded],
+  );
+  const visibleProjects = useMemo(
+    () => (projectsExpanded ? projectItems : projectItems.slice(0, projectInitialVisible)),
+    [projectInitialVisible, projectItems, projectsExpanded],
+  );
+  const hasMoreTemplates = templateItems.length > templateInitialVisible;
+  const hasMoreProjects = projectItems.length > projectInitialVisible;
 
-      {projectItems[0] && (
-        <>
-          <header className={`${styles.sectionHeader} ${styles.projectHeader}`}>
-            <h2 className={styles.sectionTitle}>{projectTitle}</h2>
-            <p className={styles.sectionSubtitle}>{projectSubtitle}</p>
-            <div className={styles.accentLine} />
-          </header>
-
-          <Row className="g-3">
-            {projectItems.map(project => (
-              <Col key={project.id} md={6} xl={4}>
-                <ProjectCard {...project} />
-              </Col>
-            ))}
-          </Row>
-        </>
-      )}
-    </Container>
-  </section>
-);
+  return (
+    <section id="projects" className={styles.section}>
+      <Container>
+        {templateItems[0] && (
+          <>
+            <header className={styles.sectionHeader}>
+              <h2 className={styles.sectionTitle}>{templateTitle}</h2>
+              <p className={styles.sectionSubtitle}>{templateSubtitle}</p>
+              <div className={styles.accentLine} />
+            </header>
+
+            <Row className="g-3">
+              {visibleTemplates.map(template => (
+                <Col key={template.id} md={6} xl={4}>
+                  <TemplateCard {...template} />
+                </Col>
+              ))}
+            </Row>
+
+            {hasMoreTemplates && (
+              <button
+                type="button"
+                className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+                onClick={() => setTemplatesExpanded(value => !value)}
+              >
+                {templatesExpanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+              </button>
+            )}
+          </>
+        )}
+
+        {projectItems[0] && (
+          <>
+            <header className={`${styles.sectionHeader} mt-5`}>
+              <h2 className={styles.sectionTitle}>{projectTitle}</h2>
+              <p className={styles.sectionSubtitle}>{projectSubtitle}</p>
+              <div className={styles.accentLine} />
+            </header>
+
+            <Row className="g-3">
+              {visibleProjects.map(project => (
+                <Col key={project.id} md={6} xl={4}>
+                  <ProjectCard {...project} />
+                </Col>
+              ))}
+            </Row>
+
+            {hasMoreProjects && (
+              <button
+                type="button"
+                className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+                onClick={() => setProjectsExpanded(value => !value)}
+              >
+                {projectsExpanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+              </button>
+            )}
+          </>
+        )}
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Schedule.module.less b/components/Activity/Hackathon/Schedule.module.less
index 56a50a8..4b84c0c 100644
--- a/components/Activity/Hackathon/Schedule.module.less
+++ b/components/Activity/Hackathon/Schedule.module.less
@@ -1,12 +1,13 @@
 @import './theme.less';
 
+;
+
 .scheduleIntro {
-  margin-bottom: 1.35rem;
-  text-align: center;
+  margin-bottom: 0;
 }
 
 .scheduleKicker {
-  margin: 0 0 0.35rem;
+  margin: 0;
   color: @cyan;
   font-size: 0.8rem;
   font-family: @heading;
@@ -23,16 +24,14 @@
 }
 
 .scheduleOverview {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
 }
 
 .schedulePill {
-  padding: 0.58rem 0.9rem;
-  color: @copy;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  color: @muted;
   font-size: 0.74rem;
   font-family: @heading;
   letter-spacing: 0.06em;
@@ -54,54 +53,152 @@
 }
 
 .dayCard {
+  ;
+  position: relative;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease;
   padding: 1.35rem;
   height: 100%;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
+    border-color: rgba(44, 232, 255, 0.28);
+  }
 }
 
 .formation {
-  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
+  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @purple, @cyan);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(123, 97, 255, 0.18);
+    color: @purple;
+  }
 }
 
 .enrollment {
-  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @cyan, @purple);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(44, 232, 255, 0.14);
+    color: @cyan;
+  }
 }
 
 .competition {
   background: linear-gradient(135deg, rgba(255, 201, 77, 0.12), rgba(60, 35, 8, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @gold, @rose);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(255, 201, 77, 0.16);
+    color: @gold;
+  }
 }
 
 .break {
   background: linear-gradient(135deg, rgba(255, 120, 186, 0.1), rgba(72, 18, 48, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @rose, @purple);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(255, 120, 186, 0.16);
+    color: @rose;
+  }
 }
 
 .evaluation {
   background: linear-gradient(135deg, rgba(72, 241, 168, 0.12), rgba(14, 50, 39, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @green, @cyan);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(72, 241, 168, 0.16);
+    color: @green;
+  }
 }
 
 .dayCardHead {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 0.75rem;
+  min-width: 0;
 }
 
 .dayNo {
+  border-radius: 999px;
+  background: rgba(44, 232, 255, 0.12);
+  padding: 0.3rem 0.85rem;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
 .dayDate {
-  color: @copy;
-  font-size: 0.85rem;
+  color: @muted;
+  font-size: 0.82rem;
+  font-family: @heading;
+  letter-spacing: 0.04em;
 }
 
 .dayTitle {
-  margin: 0.9rem 0 0.45rem;
+  margin: 0;
   color: #fff;
-  font-size: 1.08rem;
+  font-weight: 800;
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
   font-family: @heading;
+  letter-spacing: 0.04em;
 }
 
 .daySub {
-  margin: 0 0 1rem;
+  margin: 0;
   color: @muted;
   line-height: 1.7;
 }
@@ -125,8 +222,6 @@
 }
 
 .timePill {
-  display: inline-flex;
-  align-items: center;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   padding: 0.4rem 0.75rem;
@@ -139,9 +234,7 @@
 }
 
 .agendaCopy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.14rem;
+  min-width: 0;
 
   strong {
     color: #fff;
@@ -154,3 +247,64 @@
     line-height: 1.55;
   }
 }
+
+.stageGoal {
+  margin: 0;
+  border-top: 1px dashed rgba(255, 255, 255, 0.16);
+  padding-top: 0;
+
+  strong {
+    color: @cyan;
+    font-size: 0.78rem;
+    font-family: @heading;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  span {
+    color: #fff;
+    font-size: 0.92rem;
+    line-height: 1.6;
+  }
+}
+
+.keyDates {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.85rem;
+  margin: 0;
+
+  @media (max-width: 991px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: 575px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.keyDateCard {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 14px;
+  background: rgba(44, 232, 255, 0.08);
+  padding: 0.95rem 1rem;
+}
+
+.keyDateCardWarn {
+  border-color: rgba(255, 201, 77, 0.26);
+  background: rgba(255, 201, 77, 0.08);
+}
+
+.keyDateValue {
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1.2;
+  font-family: @heading;
+  letter-spacing: 0.04em;
+}
+
+.keyDateLabel {
+  color: @muted;
+  font-size: 0.84rem;
+  line-height: 1.6;
+}
diff --git a/components/Activity/Hackathon/Schedule.tsx b/components/Activity/Hackathon/Schedule.tsx
index 5760ec7..ec2e678 100644
--- a/components/Activity/Hackathon/Schedule.tsx
+++ b/components/Activity/Hackathon/Schedule.tsx
@@ -15,82 +15,99 @@ export interface HackathonScheduleFact extends HackathonAwardsMeta {
   meta: string;
 }
 
-export interface HackathonScheduleItem {
-  dateText: string;
-  description: string;
+export interface HackathonScheduleItem extends Record<
+  'id' | 'phase' | 'title' | 'dateText' | 'description',
+  string
+> {
   facts: HackathonScheduleFact[];
-  id: string;
-  phase: string;
-  title: string;
+
+  stageGoal?: string;
   tone: HackathonScheduleTone;
 }
 
-export interface HackathonScheduleProps {
+export interface HackathonScheduleProps extends Record<
+  'title' | 'subtitle' | 'lead' | 'kicker' | 'stageGoalLabel',
+  string
+> {
   items: HackathonScheduleItem[];
-  kicker: string;
-  lead: string;
+  keyDates?: Record<'date' | 'label', string>[];
   overviewPills: string[];
-  subtitle: string;
-  title: string;
 }
 
-const ScheduleCard: FC<HackathonScheduleItem & { phaseLabel: string }> = ({
+const ScheduleCard: FC<HackathonScheduleItem & Record<'phaseLabel' | 'stageGoalLabel', string>> = ({
   dateText,
   description,
   facts,
   phase,
   phaseLabel,
+  stageGoal,
+  stageGoalLabel,
   title,
   tone,
 }) => (
   <article className={`${styles.dayCard} ${styles[tone]}`}>
-    <div className={styles.dayCardHead}>
-      <span className={styles.dayNo}>
+    <div
+      className={`${styles.dayCardHead} d-flex justify-content-between align-items-baseline gap-3`}
+    >
+      <span className={`${styles.dayNo} d-inline-flex align-items-center`}>
         {phaseLabel} {phase}
       </span>
       <time className={styles.dayDate}>{dateText}</time>
     </div>
 
-    <h3 className={styles.dayTitle}>{title}</h3>
-    <p className={styles.daySub}>{description}</p>
+    <h3 className={`${styles.dayTitle} mt-3 mb-2`}>{title}</h3>
+    <p className={`${styles.daySub} mb-3`}>{description}</p>
 
     <dl className={styles.dayAgenda}>
       {facts.map(({ label, meta, value }) => (
         <div key={`${label}-${value}`}>
-          <dt className={styles.timePill}>{label}</dt>
-          <dd className={styles.agendaCopy}>
+          <dt className={`${styles.timePill} d-inline-flex align-items-center`}>{label}</dt>
+          <dd className={`${styles.agendaCopy} d-flex flex-column gap-1`}>
             <strong>{value}</strong>
             <span>{meta}</span>
           </dd>
         </div>
       ))}
     </dl>
+
+    {stageGoal && (
+      <p className={`${styles.stageGoal} d-flex flex-wrap gap-2 mt-3 pt-3`}>
+        <strong>{stageGoalLabel}:</strong>
+        <span>{stageGoal}</span>
+      </p>
+    )}
   </article>
 );
 
 export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string }> = ({
   items,
+  keyDates,
   kicker,
   lead,
   overviewPills,
   phaseLabel,
+  stageGoalLabel,
   subtitle,
   title,
 }) => (
   <section id="schedule" className={styles.section}>
     <Container>
       <header className={styles.sectionHeader}>
+        <p className={`${styles.scheduleKicker} mb-1`}>{kicker}</p>
         <h2 className={styles.sectionTitle}>{title}</h2>
         <p className={styles.sectionSubtitle}>{subtitle}</p>
         <div className={styles.accentLine} />
       </header>
 
-      <hgroup className={styles.scheduleIntro}>
-        <p className={styles.scheduleKicker}>{kicker}</p>
-        <h3 className={styles.scheduleLead}>{lead}</h3>
-      </hgroup>
+      {lead && (
+        <hgroup className={`${styles.scheduleIntro} text-center mb-4`}>
+          <h3 className={styles.scheduleLead}>{lead}</h3>
+        </hgroup>
+      )}
 
-      <ul className={`list-unstyled ${styles.scheduleOverview}`}>
+      <ul
+        className={`list-unstyled ${styles.scheduleOverview} d-flex flex-wrap justify-content-center gap-3 mb-4`}
+      >
         {overviewPills.map(pill => (
           <li key={pill} className={styles.schedulePill}>
             {pill}
@@ -100,9 +117,28 @@ export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string
 
       <div className={styles.scheduleDays}>
         {items.map(item => (
-          <ScheduleCard key={item.id} {...item} phaseLabel={phaseLabel} />
+          <ScheduleCard
+            key={item.id}
+            {...item}
+            phaseLabel={phaseLabel}
+            stageGoalLabel={stageGoalLabel}
+          />
         ))}
       </div>
+
+      {keyDates?.[0] && (
+        <ul className={`list-unstyled ${styles.keyDates} mt-4`}>
+          {keyDates.map(({ date, label }, index) => (
+            <li
+              key={`${date}-${label}`}
+              className={`${styles.keyDateCard} d-grid gap-1 ${index % 2 ? styles.keyDateCardWarn : ''}`}
+            >
+              <strong className={styles.keyDateValue}>{date}</strong>
+              <span className={styles.keyDateLabel}>{label}</span>
+            </li>
+          ))}
+        </ul>
+      )}
     </Container>
   </section>
 );
diff --git a/components/Activity/Hackathon/constant.ts b/components/Activity/Hackathon/constant.ts
new file mode 100644
index 0000000..c39c078
--- /dev/null
+++ b/components/Activity/Hackathon/constant.ts
@@ -0,0 +1,362 @@
+import { TableCellUser } from 'mobx-lark';
+
+import { Activity, ActivityModel } from '../../../models/Activity';
+import { Agenda, Organization, Person, Prize, Project, Template } from '../../../models/Hackathon';
+import { i18n } from '../../../models/Translation';
+import type { HackathonAwardsMeta } from './Awards';
+import type { HackathonFAQItem } from './FAQ';
+import { HackathonHeroCard, HackathonHeroNavItem } from './Hero';
+import {
+  agendaToneClassOf,
+  agendaTypeLabelOf,
+  compactSummaryOf,
+  formatPeriod,
+  normalizeAgendaType,
+  previewText,
+} from './utility';
+
+export const RequiredTableKeys = [
+  'Person',
+  'Organization',
+  'Agenda',
+  'Prize',
+  'Template',
+  'Project',
+] as const;
+
+export type RequiredTableKey = (typeof RequiredTableKeys)[number];
+
+export type FormGroupKey = 'Evaluation' | 'Person' | 'Product' | 'Project';
+
+export interface FormGroupView extends HackathonHeroCard {
+  key: FormGroupKey;
+  links: (HackathonHeroNavItem & { external: true })[];
+}
+
+export const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
+
+export const buildFormSectionMeta = ({ t }: Pick<typeof i18n, 't'>) => ({
+  Person: {
+    eyebrow: t('participants'),
+    title: t('hackathon_participant_registration'),
+    description: t('hackathon_participant_registration_description'),
+  },
+  Project: {
+    eyebrow: t('hackathon_team_lead'),
+    title: t('hackathon_project_registration'),
+    description: t('hackathon_project_registration_description'),
+  },
+  Product: {
+    eyebrow: t('hackathon_submission'),
+    title: t('product_submission'),
+    description: t('hackathon_product_submission_description'),
+  },
+  Evaluation: {
+    eyebrow: t('hackathon_review'),
+    title: t('hackathon_evaluation_entry'),
+    description: t('hackathon_evaluation_entry_description'),
+  },
+});
+
+export const buildScheduleReasonMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_reason_enrollment'),
+  formation: t('hackathon_schedule_reason_formation'),
+  competition: t('hackathon_schedule_reason_competition'),
+  evaluation: t('hackathon_schedule_reason_evaluation'),
+});
+
+export const buildScheduleFocusMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_focus_enrollment'),
+  formation: t('hackathon_schedule_focus_formation'),
+  competition: t('hackathon_schedule_focus_competition'),
+  evaluation: t('hackathon_schedule_focus_evaluation'),
+});
+
+export const buildScheduleGoalMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_goal_enrollment'),
+  formation: t('hackathon_schedule_goal_formation'),
+  competition: t('hackathon_schedule_goal_competition'),
+  evaluation: t('hackathon_schedule_goal_evaluation'),
+});
+
+export const heroNavigation = ({ t }: typeof i18n) => [
+  { href: '#tracks', label: t('hackathon_highlights') },
+  { href: '#schedule', label: t('agenda') },
+  { href: '#awards', label: t('prizes') },
+  { href: '#faq', label: t('common_questions') },
+];
+
+export const buildCountdownUnitLabels = ({ t }: typeof i18n) => [
+  t('countdown_days'),
+  t('countdown_hours'),
+  t('countdown_minutes'),
+  t('countdown_seconds'),
+];
+
+export const buildHighlightCards = (
+  { t }: typeof i18n,
+  {
+    agendaItems,
+    eventRange,
+    organizations,
+    prizes,
+    templates,
+  }: {
+    agendaItems: Agenda[];
+    eventRange: string;
+    organizations: Organization[];
+    prizes: Prize[];
+    templates: Template[];
+  },
+) => [
+  {
+    icon: '👥',
+    title: t('participants'),
+    description: buildFormSectionMeta({ t }).Person.description,
+  },
+  {
+    icon: '🚀',
+    title: t('projects'),
+    description: buildFormSectionMeta({ t }).Project.description,
+  },
+  {
+    icon: '🛠',
+    title: t('templates'),
+    description: previewText(
+      templates.map(({ name }) => name),
+      t('templates'),
+    ),
+  },
+  {
+    icon: '🏆',
+    title: t('prizes'),
+    description: previewText(
+      prizes.map(({ name }) => name),
+      t('hackathon_prizes'),
+    ),
+  },
+  {
+    icon: '🤝',
+    title: t('organizations'),
+    description: previewText(
+      organizations.map(({ name }) => name),
+      t('organizations'),
+    ),
+  },
+  {
+    icon: '📅',
+    title: t('agenda'),
+    description: previewText(
+      agendaItems.map(({ name }) => name),
+      eventRange || t('agenda'),
+    ),
+  },
+];
+
+export const buildJudgingCriteria = ({ t }: typeof i18n) => [
+  {
+    id: 'innovation',
+    weight: '30%',
+    title: t('hackathon_criteria_innovation_title'),
+    description: t('hackathon_criteria_innovation_desc'),
+  },
+  {
+    id: 'technical_depth',
+    weight: '25%',
+    title: t('hackathon_criteria_technical_title'),
+    description: t('hackathon_criteria_technical_desc'),
+  },
+  {
+    id: 'completion',
+    weight: '25%',
+    title: t('hackathon_criteria_completion_title'),
+    description: t('hackathon_criteria_completion_desc'),
+  },
+  {
+    id: 'presentation',
+    weight: '20%',
+    title: t('hackathon_criteria_presentation_title'),
+    description: t('hackathon_criteria_presentation_desc'),
+  },
+];
+export const buildScheduleItems = (
+  { t }: typeof i18n,
+  { agendaItems, locationText }: { agendaItems: Agenda[]; locationText: string },
+) => {
+  const scheduleReasonMap = buildScheduleReasonMap({ t });
+  const scheduleFocusMap = buildScheduleFocusMap({ t });
+  const scheduleGoalMap = buildScheduleGoalMap({ t });
+
+  return agendaItems.map(({ id, name, type, summary, startedAt, endedAt }, index) => {
+    const normalizedType = normalizeAgendaType(type);
+    const typeLabel = agendaTypeLabelOf(type, t);
+    const reasonText = scheduleReasonMap[normalizedType] ?? t('hackathon_schedule_reason_default');
+    const focusText = scheduleFocusMap[normalizedType] ?? t('hackathon_schedule_focus_default');
+    const stageGoalText = scheduleGoalMap[normalizedType] ?? t('hackathon_schedule_goal_default');
+    const description = compactSummaryOf((summary as string) || reasonText, reasonText, 120);
+    const windowValue = formatPeriod(startedAt, endedAt) || '-';
+    const focusValue = compactSummaryOf((summary as string) || focusText, focusText, 92);
+
+    return {
+      id: id as string,
+      phase: String(index + 1).padStart(2, '0'),
+      dateText: formatPeriod(startedAt, endedAt),
+      title: name as string,
+      description,
+      stageGoal: stageGoalText,
+      tone: agendaToneClassOf(type, index),
+      facts: [
+        {
+          label: t('hackathon_schedule_window_label'),
+          value: windowValue,
+          meta: `${typeLabel} · ${locationText}`,
+        },
+        {
+          label: t('hackathon_schedule_reason_label'),
+          value: reasonText,
+          meta: t('hackathon_schedule_reason_meta'),
+        },
+        {
+          label: t('hackathon_schedule_focus_label'),
+          value: focusValue,
+          meta: t('hackathon_schedule_focus_meta'),
+        },
+      ],
+    };
+  });
+};
+
+export const buildPrizeItems = ({ t }: typeof i18n, prizes: Prize[]) =>
+  prizes.map(({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
+    id: id as string,
+    title: name as string,
+    tier: (level as string) || `#${index + 1}`,
+    description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
+    image,
+    meta: [
+      sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
+      price ? { label: t('price'), value: price as string } : null,
+      amount ? { label: t('amount'), value: amount as string } : null,
+    ].filter(Boolean) as HackathonAwardsMeta[],
+  }));
+
+export const buildOrganizationItems = (organizations: Organization[]) =>
+  organizations.map(({ id, name, link, logo }) => ({
+    id: id as string,
+    name: name as string,
+    href: link as string | undefined,
+    logo,
+  }));
+
+export const buildTemplateItems = ({ t }: typeof i18n, templates: Template[]) =>
+  templates.map(({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
+    id: id as string,
+    title: name as string,
+    description: (summary as string) || '',
+    languages: ((languages as string[] | undefined) || []).filter(Boolean),
+    tags: ((tags as string[] | undefined) || []).filter(Boolean),
+    sourceUrl: sourceLink as string | undefined,
+    sourceLabel: t('source_code'),
+    previewUrl: previewLink as string | undefined,
+    previewLabel: t('preview'),
+  }));
+
+export const buildParticipantItems = (people: Person[]) =>
+  people.map(({ id, name, avatar, githubLink }) => ({
+    id: id as string,
+    name: name as string,
+    avatar,
+    githubLink: githubLink as string | undefined,
+  }));
+
+export const buildFAQItems = (
+  { t }: typeof i18n,
+  {
+    eventRange,
+    locationText,
+    organizationsCount,
+    primaryForm,
+    projectsCount,
+    resourceSummary,
+    scheduleOverviewPills,
+    secondaryForm,
+    templatesCount,
+  }: {
+    eventRange: string;
+    locationText: string;
+    organizationsCount: number;
+    primaryForm?: FormGroupView;
+    projectsCount: number;
+    resourceSummary: string;
+    scheduleOverviewPills: string[];
+    secondaryForm?: FormGroupView;
+    templatesCount: number;
+  },
+): HackathonFAQItem[] =>
+  [
+    primaryForm
+      ? {
+          id: 'registration',
+          question: t('hackathon_faq_registration_question'),
+          answer: `${t('hackathon_faq_registration_answer_prefix')}${primaryForm.title}。${primaryForm.description}`,
+        }
+      : null,
+    {
+      id: 'schedule',
+      question: t('hackathon_faq_schedule_question'),
+      answer: [eventRange, ...scheduleOverviewPills.slice(0, 3)].filter(Boolean).join(' · '),
+    },
+    {
+      id: 'location',
+      question: t('hackathon_faq_location_question'),
+      answer: `${t('event_location')}：${locationText}`,
+    },
+    {
+      id: 'resources',
+      question: t('hackathon_faq_resources_question'),
+      answer: `${t('templates')} ${templatesCount} · ${t('projects')} ${projectsCount} · ${t('organizations')} ${organizationsCount}。${resourceSummary}`,
+    },
+    secondaryForm
+      ? {
+          id: 'submission',
+          question: t('hackathon_faq_submission_question'),
+          answer: `${t('hackathon_faq_submission_answer_prefix')}${secondaryForm.title}。${secondaryForm.description}`,
+        }
+      : null,
+  ].filter(Boolean) as HackathonFAQItem[];
+
+export const buildProjectItems = (
+  { t }: typeof i18n,
+  { projects, activity }: { projects: Project[]; activity: Activity },
+) =>
+  projects.map(({ id, name, score, summary, createdBy, members }) => {
+    const creator = createdBy as TableCellUser | undefined;
+    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
+
+    return {
+      id: id as string,
+      title: name as string,
+      link: `${ActivityModel.getLink(activity)}/team/${id}`,
+      score: scoreText,
+      description: (summary as string) || '',
+      meta: [
+        creator
+          ? {
+              label: t('created_by'),
+              value: creator.name || '—',
+              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
+            }
+          : { label: t('created_by'), value: '—' },
+        {
+          label: t('members'),
+          value: (members as string[] | undefined)?.join(', ') || '—',
+        },
+      ],
+    };
+  });
diff --git a/components/Activity/Hackathon/utility.ts b/components/Activity/Hackathon/utility.ts
new file mode 100644
index 0000000..0ba13b8
--- /dev/null
+++ b/components/Activity/Hackathon/utility.ts
@@ -0,0 +1,107 @@
+import { TableCellValue, TableFormView } from 'mobx-lark';
+import { formatDate } from 'web-utility';
+
+import type { HackathonScheduleTone } from './Schedule';
+import { i18n, I18nKey } from '../../../models/Translation';
+
+export const AgendaTypeClassMap: Partial<Record<string, HackathonScheduleTone>> = {
+  workshop: 'formation',
+  formation: 'formation',
+  presentation: 'enrollment',
+  enrollment: 'enrollment',
+  coding: 'competition',
+  competition: 'competition',
+  break: 'break',
+  ceremony: 'evaluation',
+  evaluation: 'evaluation',
+};
+
+export const buildAgendaTypeLabelMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  workshop: t('workshop'),
+  presentation: t('presentation'),
+  coding: t('coding'),
+  break: t('break'),
+  ceremony: t('ceremony'),
+  enrollment: t('enrollment'),
+  formation: t('formation'),
+  competition: t('competition'),
+  evaluation: t('evaluation'),
+});
+
+export const isPublicForm = ({ shared_limit }: TableFormView) =>
+  ['anyone_editable'].includes(shared_limit as string);
+
+export const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
+
+export const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
+  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
+
+export const previewText = (items: TableCellValue[], fallback: string) =>
+  items
+    .map(item => item?.toString())
+    .filter(Boolean)
+    .slice(0, 2)
+    .join(' · ') || fallback;
+
+export const agendaToneClassOf = (type: TableCellValue, index: number) => {
+  const normalized = type?.toString().toLowerCase() || '';
+  const fallbackOrder: HackathonScheduleTone[] = [
+    'formation',
+    'enrollment',
+    'competition',
+    'break',
+    'evaluation',
+  ];
+
+  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
+};
+
+export const agendaTypeLabelOf = (
+  type: TableCellValue,
+  t: (key: I18nKey) => string,
+  fallback = '-',
+) => {
+  const normalized = type?.toString().toLowerCase() || '';
+
+  return buildAgendaTypeLabelMap({ t })[normalized] || type?.toString() || fallback;
+};
+
+export const compactSummaryOf = (
+  text: TableCellValue | string[] | string | undefined,
+  fallback: string,
+  limit = 96,
+) => {
+  const source = Array.isArray(text)
+    ? text
+        .map(item => item?.toString())
+        .filter(Boolean)
+        .join(' · ')
+    : text?.toString() || '';
+  const normalized = source.replace(/\s+/g, ' ').trim();
+
+  if (!normalized) return fallback;
+
+  return normalized.length > limit ? `${normalized.slice(0, limit).trim()}...` : normalized;
+};
+
+export const dateKeyOf = (value?: TableCellValue) => {
+  const dateText = formatMoment(value);
+
+  return dateText ? dateText.slice(5, 10).replace(/\//g, '-') : '';
+};
+
+export const compactDateKeyOf = (value?: TableCellValue) => dateKeyOf(value).replace('-', '.');
+
+export const daysBetween = (startedAt?: TableCellValue, endedAt?: TableCellValue) => {
+  const start = new Date((startedAt as string) || '').getTime();
+  const end = new Date((endedAt as string) || '').getTime();
+
+  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return 0;
+
+  return Math.max(1, Math.ceil((end - start) / (24 * 60 * 60 * 1000)));
+};
+
+export const normalizeAgendaType = (value?: TableCellValue) =>
+  value?.toString().toLowerCase() || '';
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e2dbf2f..b16c6f0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -43,6 +43,8 @@ export default class CustomApp extends App<I18nProps> {
       { t } = this.i18nStore;
     const thisFullYear = new Date().getFullYear(),
       { asPath } = router;
+    const isArticlePage = asPath.startsWith('/article/') || asPath.startsWith('/policy/'),
+      isActivityPage = asPath.startsWith('/hackathon');
 
     return (
       <I18nContext.Provider value={this.i18nStore}>
@@ -52,18 +54,23 @@ export default class CustomApp extends App<I18nProps> {
           <title>{t('open_source_bazaar')}</title>
         </Head>
 
-        <MainNavigator />
-
-        <div className="mt-5 pt-2">
-          {asPath.startsWith('/article/') || asPath.startsWith('/policy/') ? (
-            <PageContent>
-              <Component {...pageProps} />
-            </PageContent>
-          ) : (
-            <Component {...pageProps} />
-          )}
-        </div>
+        {isActivityPage ? (
+          <Component {...pageProps} />
+        ) : (
+          <>
+            <MainNavigator />
 
+            <div className="mt-5 pt-2">
+              {isArticlePage ? (
+                <PageContent>
+                  <Component {...pageProps} />
+                </PageContent>
+              ) : (
+                <Component {...pageProps} />
+              )}
+            </div>
+          </>
+        )}
         <footer className="mw-100 bg-dark text-white">
           <p className="text-center my-0 py-3">
             <span className="pr-3">
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 642a0ad..5ee064e 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,29 +1,19 @@
-import {
-  BiTableSchema,
-  TableCellLocation,
-  TableCellUser,
-  TableCellValue,
-  TableFormView,
-} from 'mobx-lark';
+import { BiTableSchema, TableCellLocation, TableFormView } from 'mobx-lark';
 import { observer } from 'mobx-react';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
-import { formatDate } from 'web-utility';
 
 import {
   HackathonActionHub,
   HackathonActionHubLink,
 } from '../../components/Activity/Hackathon/ActionHub';
 import { HackathonAwards } from '../../components/Activity/Hackathon/Awards';
-import type { HackathonAwardsMeta } from '../../components/Activity/Hackathon/Awards';
+import { HackathonFAQ } from '../../components/Activity/Hackathon/FAQ';
 import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
 import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';
 import { HackathonParticipants } from '../../components/Activity/Hackathon/Participants';
 import { HackathonResources } from '../../components/Activity/Hackathon/Resources';
-import {
-  HackathonSchedule,
-  HackathonScheduleTone,
-} from '../../components/Activity/Hackathon/Schedule';
+import { HackathonSchedule } from '../../components/Activity/Hackathon/Schedule';
 import { PageHead } from '../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../models/Activity';
 import {
@@ -40,19 +30,37 @@ import {
   Template,
   TemplateModel,
 } from '../../models/Hackathon';
-import { I18nContext, I18nKey } from '../../models/Translation';
-
-const RequiredTableKeys = [
-  'Person',
-  'Organization',
-  'Agenda',
-  'Prize',
-  'Template',
-  'Project',
-] as const;
-
-type RequiredTableKey = (typeof RequiredTableKeys)[number];
-type FormGroupKey = 'Evaluation' | 'Person' | 'Product' | 'Project';
+import { I18nContext } from '../../models/Translation';
+import {
+  buildCountdownUnitLabels,
+  buildFAQItems,
+  buildHighlightCards,
+  buildJudgingCriteria,
+  buildOrganizationItems,
+  buildParticipantItems,
+  buildPrizeItems,
+  buildProjectItems,
+  buildScheduleItems,
+  buildTemplateItems,
+  FormButtonBar,
+  FormGroupKey,
+  FormGroupView,
+  buildFormSectionMeta,
+  heroNavigation,
+  RequiredTableKeys,
+} from '../../components/Activity/Hackathon/constant';
+import {
+  agendaTypeLabelOf,
+  compactDateKeyOf,
+  compactSummaryOf,
+  dateKeyOf,
+  daysBetween,
+  formatMoment,
+  formatPeriod,
+  isPublicForm,
+  normalizeAgendaType,
+  previewText,
+} from '../../components/Activity/Hackathon/utility';
 
 interface HackathonDetailProps {
   activity: Activity;
@@ -66,100 +74,6 @@ interface HackathonDetailProps {
   };
 }
 
-interface FormGroupMeta {
-  description: I18nKey;
-  eyebrow: I18nKey;
-  title: I18nKey;
-}
-
-interface FormGroupView {
-  description: string;
-  eyebrow: string;
-  key: FormGroupKey;
-  links: { external: true; href: string; label: string }[];
-  title: string;
-}
-
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
-
-const FormSectionMeta: Record<FormGroupKey, FormGroupMeta> = {
-  Person: {
-    eyebrow: 'participants',
-    title: 'hackathon_participant_registration',
-    description: 'hackathon_participant_registration_description',
-  },
-  Project: {
-    eyebrow: 'hackathon_team_lead',
-    title: 'hackathon_project_registration',
-    description: 'hackathon_project_registration_description',
-  },
-  Product: {
-    eyebrow: 'hackathon_submission',
-    title: 'product_submission',
-    description: 'hackathon_product_submission_description',
-  },
-  Evaluation: {
-    eyebrow: 'hackathon_review',
-    title: 'hackathon_evaluation_entry',
-    description: 'hackathon_evaluation_entry_description',
-  },
-};
-
-const AgendaTypeClassMap: Partial<Record<string, HackathonScheduleTone>> = {
-  workshop: 'formation',
-  formation: 'formation',
-  presentation: 'enrollment',
-  enrollment: 'enrollment',
-  coding: 'competition',
-  competition: 'competition',
-  break: 'break',
-  ceremony: 'evaluation',
-  evaluation: 'evaluation',
-};
-
-const AgendaTypeLabelMap: Partial<Record<string, I18nKey>> = {
-  workshop: 'workshop',
-  presentation: 'presentation',
-  coding: 'coding',
-  break: 'break',
-  ceremony: 'ceremony',
-};
-
-const isPublicForm = ({ shared_limit }: TableFormView) =>
-  ['anyone_editable'].includes(shared_limit as string);
-
-const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
-
-const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
-  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
-
-const previewText = (items: TableCellValue[], fallback: string) =>
-  items
-    .map(item => item?.toString())
-    .filter(Boolean)
-    .slice(0, 2)
-    .join(' · ') || fallback;
-
-const agendaToneClassOf = (type: TableCellValue, index: number) => {
-  const normalized = type?.toString().toLowerCase() || '';
-  const fallbackOrder: HackathonScheduleTone[] = [
-    'formation',
-    'enrollment',
-    'competition',
-    'break',
-    'evaluation',
-  ];
-
-  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
-};
-
-const agendaTypeLabelOf = (type: TableCellValue, t: (key: I18nKey) => string, fallback = '-') => {
-  const normalized = type?.toString().toLowerCase() || '';
-  const i18nKey = AgendaTypeLabelMap[normalized];
-
-  return i18nKey ? t(i18nKey) : type?.toString() || fallback;
-};
-
 export const getServerSideProps = compose<{ id: string }>(
   cache(),
   errorLogger,
@@ -191,8 +105,8 @@ export const getServerSideProps = compose<{ id: string }>(
 );
 
 const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  const { t } = useContext(I18nContext);
-
+  const i18n = useContext(I18nContext);
+  const { t } = i18n;
   const {
       name,
       summary,
@@ -215,19 +129,100 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
   const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
   const eventRange = formatPeriod(startTime, endTime);
   const locationText = (location as TableCellLocation | undefined)?.full_address || '-';
-  const heroBadges = [
-    (activityType as string) || t('hackathon'),
-    ...hostTags,
-    formatMoment(startTime),
-    formatMoment(endTime),
-  ].filter((value): value is string => Boolean(value));
-  const heroStats = [
-    { label: t('participants'), value: people.length },
-    { label: t('projects'), value: projects.length },
-    { label: t('templates'), value: templates.length },
-    { label: t('prizes'), value: prizes.length },
-  ];
+  const phaseBadges = agendaItems
+    .slice(0, 4)
+    .map(({ type, startedAt, endedAt }) => {
+      const phase = agendaTypeLabelOf(type, t, t('agenda'));
+      const start = compactDateKeyOf(startedAt);
+      const end = compactDateKeyOf(endedAt);
+      const period =
+        start && end && start !== end
+          ? `${start} - ${end}`
+          : start || end || formatMoment(startedAt);
+
+      return [phase, period].filter(Boolean).join(' ');
+    })
+    .filter(Boolean);
+  const heroBadges =
+    phaseBadges[0] && phaseBadges[1]
+      ? phaseBadges
+      : [
+          (activityType as string) || t('hackathon'),
+          ...hostTags,
+          formatMoment(startTime),
+          formatMoment(endTime),
+        ].filter((value): value is string => Boolean(value));
   const agendaPreview = agendaItems.slice(0, 3);
+  const scheduleOverviewPills = agendaItems.slice(0, 6).map(({ id, name, type, startedAt }) => {
+    const label = agendaTypeLabelOf(type, t, (name as string) || t('agenda'));
+    const dateText = dateKeyOf(startedAt) || formatMoment(startedAt);
+
+    return [label, dateText].filter(Boolean).join(' · ') || (id as string);
+  });
+  const heroStatChips = [
+    activityType ? `🎯 ${activityType as string}` : `🎯 ${t('hackathon')}`,
+    ...scheduleOverviewPills.slice(0, 4),
+  ].filter(Boolean) as string[];
+  const countdownUnitLabels = buildCountdownUnitLabels(i18n);
+  const heroPrimaryActionLabel = t('hackathon_register_now');
+  const scheduleKeyDates = agendaItems
+    .slice(0, 6)
+    .map(({ id, name, type, startedAt, endedAt }) => {
+      const beginText = dateKeyOf(startedAt);
+      const endText = dateKeyOf(endedAt);
+      const dateLabel =
+        beginText && endText && beginText !== endText
+          ? `${beginText} - ${endText}`
+          : beginText || endText || '-';
+
+      return {
+        id: id as string,
+        date: dateLabel,
+        label: (name as string) || agendaTypeLabelOf(type, t, t('agenda')),
+      };
+    })
+    .filter(({ date, label }) => Boolean(date && label));
+  const now = Date.now();
+  const nextAgendaItem = agendaItems.find(({ startedAt, endedAt }) => {
+    const started = new Date((startedAt as string) || 0).getTime();
+    const ended = new Date((endedAt as string) || 0).getTime();
+
+    return Number.isFinite(started) && Number.isFinite(ended) && now <= ended;
+  });
+  const nextAgendaStarted = nextAgendaItem?.startedAt as string | undefined;
+  const nextAgendaEnded = nextAgendaItem?.endedAt as string | undefined;
+  const countdownTo =
+    (nextAgendaStarted && new Date(nextAgendaStarted).getTime() > now
+      ? nextAgendaStarted
+      : nextAgendaEnded) ||
+    ((startTime as string | undefined) && new Date(startTime as string).getTime() > now
+      ? (startTime as string)
+      : (endTime as string | undefined));
+  const countdownLabel = nextAgendaItem
+    ? agendaTypeLabelOf(nextAgendaItem.type, t, t('agenda'))
+    : t('event_duration');
+  const enrollmentPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'enrollment',
+  );
+  const formationPhase = agendaItems.find(({ type }) => normalizeAgendaType(type) === 'formation');
+  const competitionPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'competition',
+  );
+  const evaluationPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'evaluation',
+  );
+  const scheduleNarrativeLead = [
+    enrollmentPhase &&
+      `${t('enrollment')} ${daysBetween(enrollmentPhase.startedAt, enrollmentPhase.endedAt)}${t('countdown_days')}`,
+    formationPhase &&
+      `${t('formation')} ${daysBetween(formationPhase.startedAt, formationPhase.endedAt)}${t('countdown_days')}`,
+    competitionPhase &&
+      `${t('competition')} ${daysBetween(competitionPhase.startedAt, competitionPhase.endedAt)}${t('countdown_days')}`,
+    evaluationPhase &&
+      `${t('evaluation')} ${daysBetween(evaluationPhase.startedAt, evaluationPhase.endedAt)}${t('countdown_days')}`,
+  ]
+    .filter(Boolean)
+    .join('，');
 
   const formGroups = FormButtonBar.flatMap<FormGroupView>(key => {
     const list = (formMap[key] || []).filter(isPublicForm);
@@ -236,9 +231,9 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       ? [
           {
             key,
-            eyebrow: t(FormSectionMeta[key].eyebrow),
-            title: t(FormSectionMeta[key].title),
-            description: t(FormSectionMeta[key].description),
+            eyebrow: buildFormSectionMeta(i18n)[key].eyebrow,
+            title: buildFormSectionMeta(i18n)[key].title,
+            description: buildFormSectionMeta(i18n)[key].description,
             links: list.map(({ name, shared_url }) => ({
               label: name as string,
               href: shared_url,
@@ -261,160 +256,58 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       .filter(Boolean)
       .slice(0, 2)
       .join(' · ') || t('hackathon_action_hub');
+  const actionHubFacts = [
+    eventRange || t('event_duration'),
+    locationText,
+    ...scheduleOverviewPills.slice(0, 2),
+    formPreview,
+  ]
+    .filter(Boolean)
+    .slice(0, 4);
+
+  const highlightCards = buildHighlightCards(i18n, {
+    agendaItems,
+    eventRange,
+    organizations,
+    prizes,
+    templates,
+  });
 
-  const highlightCards = [
-    {
-      icon: '👥',
-      title: t('participants'),
-      value: people.length,
-      description: t(FormSectionMeta.Person.description),
-    },
-    {
-      icon: '🚀',
-      title: t('projects'),
-      value: projects.length,
-      description: t(FormSectionMeta.Project.description),
-    },
-    {
-      icon: '🛠',
-      title: t('templates'),
-      value: templates.length,
-      description: previewText(
-        templates.map(({ name }) => name),
-        t('templates'),
-      ),
-    },
-    {
-      icon: '🏆',
-      title: t('prizes'),
-      value: prizes.length,
-      description: previewText(
-        prizes.map(({ name }) => name),
-        t('hackathon_prizes'),
-      ),
-    },
-    {
-      icon: '🤝',
-      title: t('organizations'),
-      value: organizations.length,
-      description: previewText(
-        organizations.map(({ name }) => name),
-        t('organizations'),
-      ),
-    },
-    {
-      icon: '📅',
-      title: t('agenda'),
-      value: agendaItems.length,
-      description: previewText(
-        agendaItems.map(({ name }) => name),
-        eventRange || t('agenda'),
-      ),
-    },
-  ];
-
-  const scheduleItems = agendaItems.map(
-    ({ id, name, type, summary, startedAt, endedAt }, index) => {
-      const typeLabel = agendaTypeLabelOf(type, t);
-      const description = (summary as string) || typeLabel;
+  const scheduleItems = buildScheduleItems(i18n, { agendaItems, locationText });
 
-      return {
-        id: id as string,
-        phase: String(index + 1).padStart(2, '0'),
-        dateText: formatPeriod(startedAt, endedAt),
-        title: name as string,
-        description,
-        tone: agendaToneClassOf(type, index),
-        facts: [
-          {
-            label: t('type'),
-            value: typeLabel,
-            meta: description || eventRange || locationText,
-          },
-          {
-            label: t('start_time'),
-            value: formatMoment(startedAt),
-            meta: t('event_duration'),
-          },
-          {
-            label: t('end_time'),
-            value: formatMoment(endedAt),
-            meta: `${t('event_location')}: ${locationText}`,
-          },
-        ],
-      };
-    },
-  );
+  const prizeItems = buildPrizeItems(i18n, prizes);
 
-  const prizeItems = prizes.map(
-    ({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
-      id: id as string,
-      title: name as string,
-      tier: (level as string) || `#${index + 1}`,
-      description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
-      image,
-      meta: [
-        sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
-        price ? { label: t('price'), value: price as string } : null,
-        amount ? { label: t('amount'), value: amount as string } : null,
-      ].filter(Boolean) as HackathonAwardsMeta[],
-    }),
-  );
+  const organizationItems = buildOrganizationItems(organizations);
+  const judgingCriteria = buildJudgingCriteria(i18n);
+  const supportAction = organizations.find(({ link }) => Boolean(link))?.link
+    ? {
+        label: t('hackathon_support_action'),
+        href: organizations.find(({ link }) => Boolean(link))!.link as string,
+        external: true,
+      }
+    : undefined;
 
-  const organizationItems = organizations.map(({ id, name, link, logo }) => ({
-    id: id as string,
-    name: name as string,
-    href: link as string | undefined,
-    logo,
-  }));
-
-  const templateItems = templates.map(
-    ({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
-      id: id as string,
-      title: name as string,
-      description: (summary as string) || '',
-      languages: ((languages as string[] | undefined) || []).filter(Boolean),
-      tags: ((tags as string[] | undefined) || []).filter(Boolean),
-      sourceUrl: sourceLink as string | undefined,
-      sourceLabel: t('source_code'),
-      previewUrl: previewLink as string | undefined,
-      previewLabel: t('preview'),
-    }),
-  );
+  const templateItems = buildTemplateItems(i18n, templates);
 
-  const projectItems = projects.map(({ id, name, score, summary, createdBy, members }) => {
-    const creator = createdBy as TableCellUser | undefined;
-    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
+  const projectItems = buildProjectItems(i18n, { projects, activity });
 
-    return {
-      id: id as string,
-      title: name as string,
-      link: `${ActivityModel.getLink(activity)}/team/${id}`,
-      score: scoreText,
-      description: (summary as string) || '',
-      meta: [
-        creator
-          ? {
-              label: t('created_by'),
-              value: creator.name || '—',
-              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
-            }
-          : { label: t('created_by'), value: '—' },
-        {
-          label: t('members'),
-          value: (members as string[] | undefined)?.join(', ') || '—',
-        },
-      ],
-    };
+  const participantItems = buildParticipantItems(people);
+  const resourceSummary = previewText(
+    [templates[0]?.name, projects[0]?.name, organizations[0]?.name].filter(Boolean),
+    t('hackathon_resource_zone_subtitle'),
+  );
+  const faqItems = buildFAQItems(i18n, {
+    eventRange,
+    locationText,
+    organizationsCount: organizations.length,
+    primaryForm,
+    projectsCount: projects.length,
+    resourceSummary,
+    scheduleOverviewPills,
+    secondaryForm,
+    templatesCount: templates.length,
   });
 
-  const participantItems = people.map(({ id, name, avatar, githubLink }) => ({
-    id: id as string,
-    name: name as string,
-    avatar,
-    githubLink: githubLink as string | undefined,
-  }));
-
   return (
     <div
       style={{
@@ -429,52 +322,69 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       <HackathonHero
         badges={heroBadges}
         bottomCard={
-          agendaPreview[0]
+          agendaItems[0] || agendaItems[agendaItems.length - 1]
             ? {
-                eyebrow: t('hackathon_agenda_preview'),
-                title: agendaPreview[0].name as string,
-                description: formatPeriod(agendaPreview[0].startedAt, agendaPreview[0].endedAt),
+                eyebrow: t('event_duration'),
+                title:
+                  eventRange ||
+                  [
+                    formatMoment(agendaItems[0]?.startedAt),
+                    formatMoment(agendaItems[agendaItems.length - 1]?.endedAt),
+                  ]
+                    .filter(Boolean)
+                    .join(' - '),
+                description:
+                  agendaPreview[0]?.name?.toString() ||
+                  agendaTypeLabelOf(agendaItems[0]?.type, t, t('agenda')),
               }
             : undefined
         }
+        countdownLabel={countdownLabel}
+        countdownUnitLabels={countdownUnitLabels}
+        countdownTo={countdownTo}
         description={summaryText}
         image={image}
         imageFallback={(activityType as string) || t('hackathon')}
         locationText={locationText}
         name={name as string}
+        navigation={heroNavigation(i18n)}
         primaryAction={
           primaryForm
             ? {
-                label: primaryForm.title,
+                label: heroPrimaryActionLabel,
                 href: primaryForm.links[0].href,
                 external: true,
               }
-            : { label: t('hackathon_entry_flow'), href: '#entry-hub' }
+            : { label: heroPrimaryActionLabel, href: '#entry-hub' }
         }
         secondaryAction={{ label: t('agenda'), href: '#schedule' }}
-        stats={heroStats}
+        chips={heroStatChips}
         subtitle={(activityType as string) || t('hackathon_detail')}
         topCard={
-          primaryForm
+          summaryText || activityType
             ? {
-                eyebrow: primaryForm.eyebrow,
-                title: primaryForm.title,
-                description: primaryForm.description,
+                eyebrow: t('event_description'),
+                title: compactSummaryOf(
+                  summaryText,
+                  (activityType as string) || t('hackathon_detail'),
+                  36,
+                ),
+                description: locationText,
               }
             : undefined
         }
-        visualChip={t('hackathon_detail')}
-        visualCopy={summaryText}
-        visualKicker={t('event_info')}
-        visualTitle={eventRange || summaryText}
+        visualChip={(activityType as string) || t('hackathon_detail')}
+        visualCopy={eventRange || locationText}
+        visualKicker={t('main_visual')}
+        visualTitle={compactSummaryOf(summaryText, t('hackathon_detail'), 48)}
       />
 
       <HackathonOverview
         cards={highlightCards}
-        subtitle={t('event_description')}
+        subtitle={t('hackathon_highlights_subtitle')}
         themeSub={summaryText}
         themeText={(activityType as string) || t('hackathon')}
-        title={t('event_info')}
+        title={t('hackathon_highlights')}
       />
 
       {formGroups[0] && (
@@ -486,7 +396,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
             links,
             count: links.length,
           }))}
-          facts={[eventRange || t('event_duration'), locationText, formPreview]}
+          facts={actionHubFacts}
           primaryAction={
             primaryForm
               ? {
@@ -519,21 +429,25 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       {scheduleItems[0] && (
         <HackathonSchedule
           items={scheduleItems}
-          kicker={eventRange}
-          lead={name as string}
-          overviewPills={agendaItems.slice(0, 6).map(({ name }) => name as string)}
+          keyDates={scheduleKeyDates.map(({ date, label }) => ({ date, label }))}
+          kicker={t('hackathon_event_schedule')}
+          lead={scheduleNarrativeLead || summaryText || (name as string)}
+          overviewPills={scheduleOverviewPills}
           phaseLabel={t('hackathon_phase')}
-          subtitle={t('event_duration')}
+          stageGoalLabel={t('hackathon_schedule_goal_label')}
+          subtitle={eventRange || t('event_description')}
           title={t('agenda')}
         />
       )}
 
       {(prizeItems[0] || organizationItems[0]) && (
         <HackathonAwards
+          criteria={judgingCriteria}
           organizations={organizationItems}
           prizes={prizeItems}
-          subtitle={t('hackathon_prizes')}
-          supportDescription={summaryText}
+          subtitle={t('hackathon_judging_title')}
+          supportAction={supportAction}
+          supportDescription={summaryText || eventRange || locationText}
           supportEyebrow={t('organizations')}
           supportTitle={previewText(
             organizations.map(({ name }) => name),
@@ -543,22 +457,37 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
         />
       )}
 
-      {(templateItems[0] || projectItems[0]) && (
-        <HackathonResources
-          projectItems={projectItems}
-          projectSubtitle={t('products')}
-          projectTitle={t('projects')}
-          templateItems={templateItems}
-          templateSubtitle={t('source_code')}
-          templateTitle={t('templates')}
+      {faqItems[0] && (
+        <HackathonFAQ
+          items={faqItems}
+          subtitle={t('hackathon_faq_subtitle')}
+          title={t('common_questions')}
         />
       )}
 
       {participantItems[0] && (
         <HackathonParticipants
+          initialVisible={8}
           participants={participantItems}
-          subtitle={t('github_account')}
-          title={t('participants')}
+          showLessLabel={t('hackathon_show_less')}
+          showMoreLabel={t('hackathon_show_more')}
+          subtitle={t('hackathon_people_showcase_subtitle')}
+          title={t('hackathon_people_showcase')}
+        />
+      )}
+
+      {(templateItems[0] || projectItems[0]) && (
+        <HackathonResources
+          projectInitialVisible={2}
+          projectItems={projectItems}
+          projectSubtitle={t('products')}
+          projectTitle={t('projects')}
+          showLessLabel={t('hackathon_show_less')}
+          showMoreLabel={t('hackathon_show_more')}
+          templateInitialVisible={6}
+          templateItems={templateItems}
+          templateSubtitle={t('hackathon_resource_zone_subtitle')}
+          templateTitle={t('hackathon_resource_zone')}
         />
       )}
     </div>
diff --git a/translation/en-US.ts b/translation/en-US.ts
index ce03d98..724cc00 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -211,10 +211,16 @@ export default {
 
   // Hackathon
   hackathon_detail: 'Hackathon Details',
-  event_info: 'Event Information',
+  hackathon_highlights: 'Tracks',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: 'Event Description',
   event_location: 'Location',
   event_duration: 'Duration',
+  main_visual: 'Main Visual',
+  countdown_days: 'Days',
+  countdown_hours: 'Hours',
+  countdown_minutes: 'Minutes',
+  countdown_seconds: 'Seconds',
   product_submission: 'Product Submission Form',
   agenda: 'Agenda',
   hackathon_participant_registration: 'Participant Registration',
@@ -231,64 +237,104 @@ export default {
   hackathon_evaluation_entry: 'Evaluation Portal',
   hackathon_evaluation_entry_description:
     'Used by judges or mentors during scoring, review, and result consolidation.',
-  hackathon_view_all_entries: 'View All Forms',
-  hackathon_agenda_preview: 'Agenda Preview',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: 'FAQ',
+  hackathon_faq_subtitle: 'Common Questions',
+  hackathon_faq_registration_question: 'Where should I start?',
+  hackathon_faq_registration_answer_prefix: 'Start with the currently open entry: ',
+  hackathon_faq_schedule_question: 'What is the event timeline?',
+  hackathon_faq_location_question: 'Where does the event take place?',
+  hackathon_faq_resources_question: 'What resources are available?',
+  hackathon_faq_submission_question: 'Where do I submit or continue next?',
+  hackathon_faq_submission_answer_prefix: 'For the next stage, use: ',
+  hackathon_people_showcase: 'Community',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: 'Resources & Projects',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: 'Show more',
+  hackathon_show_less: 'Show less',
+  hackathon_register_now: 'Register Now',
+  hackathon_judging_title: 'Judging Criteria',
+  hackathon_support_action: 'Contact via organizer',
+  hackathon_criteria_innovation_title: 'Innovation',
+  hackathon_criteria_innovation_desc:
+    'Novel ideas that clearly address meaningful real-world problems.',
+  hackathon_criteria_technical_title: 'Technical Depth',
+  hackathon_criteria_technical_desc:
+    'Effective and substantial use of AI capability in the implementation.',
+  hackathon_criteria_completion_title: 'Completion',
+  hackathon_criteria_completion_desc: 'A runnable, demonstrable product with a complete core flow.',
+  hackathon_criteria_presentation_title: 'Presentation & Design',
+  hackathon_criteria_presentation_desc:
+    'Clear storytelling, polished interaction, and persuasive product experience.',
   hackathon_action_hub: 'Action Hub · Forms',
   hackathon_entry_flow: 'Registration and Submission Flow',
   hackathon_entry_flow_description:
     'Entries are generated from the current activity schema so different events can reuse the same page structure.',
-  hackathon_step: 'Step',
   hackathon_phase: 'Phase',
+  hackathon_schedule_window_label: 'Window',
+  hackathon_schedule_reason_label: 'Reason',
+  hackathon_schedule_focus_label: 'Focus',
+  hackathon_schedule_goal_label: 'Stage Goal',
+  hackathon_schedule_reason_meta: 'Rhythm Design',
+  hackathon_schedule_focus_meta: 'Execution Focus',
+  hackathon_schedule_reason_enrollment:
+    'Start early warm-up and participant outreach so team formation has enough qualified candidates.',
+  hackathon_schedule_reason_formation:
+    'Keep the team-up window short to force faster decisions and reduce drift.',
+  hackathon_schedule_reason_competition:
+    'Constrain sprint duration to prioritize a demonstrable output instead of endless scope growth.',
+  hackathon_schedule_reason_evaluation:
+    'Reserve a dedicated judging window to improve scoring consistency and review quality.',
+  hackathon_schedule_reason_default:
+    'Arrange critical actions by phase so the overall timeline remains executable.',
+  hackathon_schedule_focus_enrollment:
+    'Complete participant registration and enter the community channels for matching.',
+  hackathon_schedule_focus_formation:
+    'Lock topic, members, and roles quickly to form a stable execution team.',
+  hackathon_schedule_focus_competition:
+    'Submit a runnable demo, repository, and core documentation before deadline.',
+  hackathon_schedule_focus_evaluation:
+    'Score against judging criteria, complete reviews, and prepare demo shortlist.',
+  hackathon_schedule_focus_default:
+    'Drive the phase-critical tasks first and complete key deliverables on time.',
+  hackathon_schedule_goal_enrollment:
+    'Build a strong participant pool as the quality foundation for the next phases.',
+  hackathon_schedule_goal_formation:
+    'Close team formation rapidly and move each team into execution mode.',
+  hackathon_schedule_goal_competition:
+    'Deliver a demo-ready and reproducible project with on-time submission.',
+  hackathon_schedule_goal_evaluation:
+    'Produce stable judging outcomes and finish Demo Day preparation.',
+  hackathon_schedule_goal_default:
+    'Keep each phase goal clear, closed-loop, and deliverable within schedule.',
   participants: 'Participants',
   organizations: 'Organizations',
   prizes: 'Prizes',
   hackathon_prizes: 'Hackathon Prizes',
   templates: 'Templates',
   projects: 'Projects',
-  type: 'Type',
-  start_time: 'Start Time',
-  end_time: 'End Time',
   workshop: 'Workshop',
+  enrollment: 'Enrollment',
+  formation: 'Teaming',
+  competition: 'Competition',
+  evaluation: 'Evaluation',
   presentation: 'Presentation',
   coding: 'Coding',
   break: 'Break',
   ceremony: 'Ceremony',
-  gender: 'Gender',
-  age: 'Age',
-  address: 'Address',
-  skills: 'Skills',
-  github_account: 'GitHub Account',
-  view_github: 'View GitHub',
   members: 'Members',
   sponsor: 'Sponsor',
   price: 'Prize Money',
   amount: 'Amount',
-  level: 'Level',
-  gold: 'Gold',
-  silver: 'Silver',
-  bronze: 'Bronze',
-  special: 'Special',
   source_code: 'Source Code',
   preview: 'Preview',
   created_by: 'Created By',
-  group: 'Team',
   products: 'Products',
   score: 'Score',
-  male: 'Male',
-  female: 'Female',
-  other: 'Other',
 
   // Team detail page
   team_members: 'Team Members',
   team_works: 'Team Works',
-  latest_news: 'Latest News',
   no_news_yet: 'No news yet',
-  join_team: 'Join Team',
-  leave_team: 'Leave Team',
-  manage_team: 'Manage Team',
-  cancel_application: 'Cancel Application',
-  please_make_sure: 'Please confirm',
-  success: 'Success',
-  team_description: 'Team Description',
-  team_details: 'Team Details',
 };
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 764681b..99d776f 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -207,10 +207,16 @@ export default {
 
   // Hackathon
   hackathon_detail: '黑客松详情',
-  event_info: '活动信息',
+  hackathon_highlights: '赛道方向',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: '活动描述',
   event_location: '活动地点',
   event_duration: '活动时间',
+  main_visual: '主视觉',
+  countdown_days: '天',
+  countdown_hours: '时',
+  countdown_minutes: '分',
+  countdown_seconds: '秒',
   product_submission: '产品提交',
   agenda: '日程安排',
   hackathon_participant_registration: '参与者登记',
@@ -225,64 +231,86 @@ export default {
   hackathon_review: '评审',
   hackathon_evaluation_entry: '评审入口',
   hackathon_evaluation_entry_description: '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
-  hackathon_view_all_entries: '查看全部入口',
-  hackathon_agenda_preview: '议程预览',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: '常见问题',
+  hackathon_faq_subtitle: 'FAQ',
+  hackathon_faq_registration_question: '应该从哪个入口开始？',
+  hackathon_faq_registration_answer_prefix: '优先使用当前开放的入口：',
+  hackathon_faq_schedule_question: '活动节奏怎么安排？',
+  hackathon_faq_location_question: '活动在哪里进行？',
+  hackathon_faq_resources_question: '现场能提供哪些资源？',
+  hackathon_faq_submission_question: '提交或后续流程从哪里进入？',
+  hackathon_faq_submission_answer_prefix: '后续阶段可继续使用：',
+  hackathon_people_showcase: '参与者社区',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: '资源与项目',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: '展开更多',
+  hackathon_show_less: '收起内容',
+  hackathon_register_now: '立即报名',
+  hackathon_judging_title: '评审标准 · Judging Criteria',
+  hackathon_support_action: '通过组织方联系',
+  hackathon_criteria_innovation_title: '创新性 Innovation',
+  hackathon_criteria_innovation_desc: '想法有新意，能针对真实问题给出明确方案。',
+  hackathon_criteria_technical_title: '技术深度 Technical Depth',
+  hackathon_criteria_technical_desc: 'AI 能力是否被有效运用，并形成技术壁垒。',
+  hackathon_criteria_completion_title: '完成度 Completion',
+  hackathon_criteria_completion_desc: '作品是否可运行、可演示，主路径是否完整。',
+  hackathon_criteria_presentation_title: '表达与设计 Presentation',
+  hackathon_criteria_presentation_desc: '叙事清晰，交互流畅，整体体验具有说服力。',
   hackathon_action_hub: '入口中心 · 表单',
   hackathon_entry_flow: '报名与提交流程',
   hackathon_entry_flow_description:
     '入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。',
-  hackathon_step: '步骤',
   hackathon_phase: '阶段',
+  hackathon_schedule_window_label: '窗口',
+  hackathon_schedule_reason_label: '原因',
+  hackathon_schedule_focus_label: '重点',
+  hackathon_schedule_goal_label: '阶段目标',
+  hackathon_schedule_reason_meta: '节奏设计',
+  hackathon_schedule_focus_meta: '执行重点',
+  hackathon_schedule_reason_enrollment: '提前预热并集中拉新，保证组队前有足够候选参与者。',
+  hackathon_schedule_reason_formation: '压缩组队窗口，促进快速决策，避免长期摇摆。',
+  hackathon_schedule_reason_competition: '限定冲刺周期，聚焦可演示成果而非无限扩展。',
+  hackathon_schedule_reason_evaluation: '留出独立评审时间，保证打分与复核质量。',
+  hackathon_schedule_reason_default: '根据当前活动阶段安排关键动作，确保节奏可执行。',
+  hackathon_schedule_focus_enrollment: '完成队员登记并进入社群，尽快匹配潜在队友。',
+  hackathon_schedule_focus_formation: '明确题目、锁定成员和分工，快速形成稳定队伍。',
+  hackathon_schedule_focus_competition: '提交可运行 Demo、仓库与核心说明，保证主路径完整。',
+  hackathon_schedule_focus_evaluation: '围绕评审标准完成评分、复核并准备展示名单。',
+  hackathon_schedule_focus_default: '围绕阶段核心任务推进，优先完成关键交付。',
+  hackathon_schedule_goal_enrollment: '把参与者池建立起来，为后续组队和比赛提供质量基础。',
+  hackathon_schedule_goal_formation: '在短周期内完成组队闭环，让队伍进入可执行状态。',
+  hackathon_schedule_goal_competition: '产出可演示、可复现的作品并按时提交。',
+  hackathon_schedule_goal_evaluation: '形成稳定评审结果并完成 Demo Day 前置准备。',
+  hackathon_schedule_goal_default: '确保当前阶段目标清晰、动作闭环并可按时交付。',
   participants: '参与者',
   organizations: '组织方',
   prizes: '奖项',
   hackathon_prizes: '黑客松奖项',
   templates: '项目模板',
   projects: '参赛项目',
-  type: '类型',
-  start_time: '开始时间',
-  end_time: '结束时间',
   workshop: '工作坊',
+  enrollment: '报名中',
+  formation: '组队',
+  competition: '比赛',
+  evaluation: '评审',
   presentation: '展示',
   coding: '编程',
   break: '休息',
   ceremony: '仪式',
-  gender: '性别',
-  age: '年龄',
-  address: '地址',
-  skills: '技能',
-  github_account: 'GitHub 账号',
-  view_github: '查看 GitHub',
   members: '成员',
   sponsor: '赞助商',
   price: '奖金',
   amount: '数量',
-  level: '等级',
-  gold: '金奖',
-  silver: '银奖',
-  bronze: '铜奖',
-  special: '特别奖',
   source_code: '源代码',
   preview: '预览',
   created_by: '创建者',
-  group: '团队',
   products: '产品',
   score: '评分',
-  male: '男',
-  female: '女',
-  other: '其他',
 
   // Team detail page
   team_members: '团队成员',
   team_works: '团队作品',
-  latest_news: '最新动态',
   no_news_yet: '暂无动态',
-  join_team: '加入团队',
-  leave_team: '退出团队',
-  manage_team: '管理团队',
-  cancel_application: '取消申请',
-  please_make_sure: '请确认',
-  success: '成功',
-  team_description: '团队描述',
-  team_details: '团队详情',
 };
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index 716098f..457192c 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -207,10 +207,16 @@ export default {
 
   // Hackathon
   hackathon_detail: '黑客松詳情',
-  event_info: '活動資訊',
+  hackathon_highlights: '賽道方向',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: '活動描述',
   event_location: '活動地點',
   event_duration: '活動時間',
+  main_visual: '主視覺',
+  countdown_days: '天',
+  countdown_hours: '時',
+  countdown_minutes: '分',
+  countdown_seconds: '秒',
   product_submission: '產品提交',
   agenda: '日程安排',
   hackathon_participant_registration: '參與者登記',
@@ -225,64 +231,86 @@ export default {
   hackathon_review: '評審',
   hackathon_evaluation_entry: '評審入口',
   hackathon_evaluation_entry_description: '評委或導師在評審階段使用，用於評分、複核與結果整理。',
-  hackathon_view_all_entries: '查看全部入口',
-  hackathon_agenda_preview: '議程預覽',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: '常見問題',
+  hackathon_faq_subtitle: 'FAQ',
+  hackathon_faq_registration_question: '應該從哪個入口開始？',
+  hackathon_faq_registration_answer_prefix: '優先使用當前開放的入口：',
+  hackathon_faq_schedule_question: '活動節奏怎麼安排？',
+  hackathon_faq_location_question: '活動在哪裡進行？',
+  hackathon_faq_resources_question: '現場能提供哪些資源？',
+  hackathon_faq_submission_question: '提交或後續流程從哪裡進入？',
+  hackathon_faq_submission_answer_prefix: '後續階段可繼續使用：',
+  hackathon_people_showcase: '參與者社群',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: '資源與項目',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: '展開更多',
+  hackathon_show_less: '收起內容',
+  hackathon_register_now: '立即報名',
+  hackathon_judging_title: '評審標準 · Judging Criteria',
+  hackathon_support_action: '通過主辦方聯繫',
+  hackathon_criteria_innovation_title: '創新性 Innovation',
+  hackathon_criteria_innovation_desc: '想法有新意，能針對真實問題提出清晰方案。',
+  hackathon_criteria_technical_title: '技術深度 Technical Depth',
+  hackathon_criteria_technical_desc: 'AI 能力是否被有效運用，並形成技術價值。',
+  hackathon_criteria_completion_title: '完成度 Completion',
+  hackathon_criteria_completion_desc: '作品是否可運行、可演示，主路徑是否完整。',
+  hackathon_criteria_presentation_title: '表達與設計 Presentation',
+  hackathon_criteria_presentation_desc: '敘事清晰，互動流暢，整體體驗具有說服力。',
   hackathon_action_hub: '入口中心 · 表單',
   hackathon_entry_flow: '報名與提交流程',
   hackathon_entry_flow_description:
     '入口會根據活動當前配置自動生成。不同活動可以共用同一套頁面結構，而不是為每次活動單開專頁。',
-  hackathon_step: '步驟',
   hackathon_phase: '階段',
+  hackathon_schedule_window_label: '窗口',
+  hackathon_schedule_reason_label: '原因',
+  hackathon_schedule_focus_label: '重點',
+  hackathon_schedule_goal_label: '階段目標',
+  hackathon_schedule_reason_meta: '節奏設計',
+  hackathon_schedule_focus_meta: '執行重點',
+  hackathon_schedule_reason_enrollment: '提前預熱並集中拉新，確保組隊前有足夠候選參賽者。',
+  hackathon_schedule_reason_formation: '壓縮組隊窗口，促進快速決策，避免長期搖擺。',
+  hackathon_schedule_reason_competition: '限定衝刺周期，聚焦可演示成果而非無限擴展。',
+  hackathon_schedule_reason_evaluation: '保留獨立評審時間，保障打分與複核品質。',
+  hackathon_schedule_reason_default: '根據當前活動階段安排關鍵動作，確保節奏可執行。',
+  hackathon_schedule_focus_enrollment: '完成隊員登記並進入社群，盡快匹配潛在隊友。',
+  hackathon_schedule_focus_formation: '明確題目、鎖定成員與分工，快速形成穩定隊伍。',
+  hackathon_schedule_focus_competition: '提交可運行 Demo、代碼庫與核心說明，保證主路徑完整。',
+  hackathon_schedule_focus_evaluation: '圍繞評審標準完成評分、複核並準備展示名單。',
+  hackathon_schedule_focus_default: '圍繞階段核心任務推進，優先完成關鍵交付。',
+  hackathon_schedule_goal_enrollment: '建立參賽者池，為後續組隊與比賽提供品質基礎。',
+  hackathon_schedule_goal_formation: '在短周期內完成組隊閉環，讓隊伍進入可執行狀態。',
+  hackathon_schedule_goal_competition: '產出可演示、可復現的作品並按時提交。',
+  hackathon_schedule_goal_evaluation: '形成穩定評審結果並完成 Demo Day 前置準備。',
+  hackathon_schedule_goal_default: '確保當前階段目標清晰、動作閉環且可按時交付。',
   participants: '參與者',
   organizations: '組織方',
   prizes: '獎項',
   hackathon_prizes: '黑客松獎項',
   templates: '項目模板',
   projects: '參賽項目',
-  type: '類型',
-  start_time: '開始時間',
-  end_time: '結束時間',
   workshop: '工作坊',
+  enrollment: '報名中',
+  formation: '組隊',
+  competition: '比賽',
+  evaluation: '評審',
   presentation: '展示',
   coding: '編程',
   break: '休息',
   ceremony: '儀式',
-  gender: '性別',
-  age: '年齡',
-  address: '地址',
-  skills: '技能',
-  github_account: 'GitHub 帳號',
-  view_github: '查看 GitHub',
   members: '成員',
   sponsor: '贊助商',
   price: '獎金',
   amount: '數量',
-  level: '等級',
-  gold: '金獎',
-  silver: '銀獎',
-  bronze: '銅獎',
-  special: '特別獎',
   source_code: '源代碼',
   preview: '預覽',
   created_by: '創建者',
-  group: '團隊',
   products: '產品',
   score: '評分',
-  male: '男',
-  female: '女',
-  other: '其他',
 
   // Team detail page
   team_members: '團隊成員',
   team_works: '團隊作品',
-  latest_news: '最新動態',
   no_news_yet: '暫無動態',
-  join_team: '加入團隊',
-  leave_team: '退出團隊',
-  manage_team: '管理團隊',
-  cancel_application: '取消申請',
-  please_make_sure: '請確認',
-  success: '成功',
-  team_description: '團隊描述',
-  team_details: '團隊詳情',
 };

From faaad199013086720645152a80a6d9ff9ba781f3 Mon Sep 17 00:00:00 2001
From: TechQuery <shiy2008@gmail.com>
Date: Tue, 31 Mar 2026 05:29:59 +0800
Subject: [PATCH 14/14] [optimize] simplify CodeX codes

---
 styles/Hackathon.module.less | 1074 +---------------------------------
 1 file changed, 31 insertions(+), 1043 deletions(-)

diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index 80aafed..a0d97da 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -1,35 +1,21 @@
 @bg: #050814;
-@bg-soft: #0b1328;
 @panel: rgba(8, 18, 39, 0.76);
-@panel-strong: rgba(6, 13, 30, 0.92);
 @border: rgba(120, 160, 255, 0.18);
 @copy: #eef5ff;
 @muted: rgba(220, 232, 255, 0.72);
 @cyan: #2ce8ff;
-@gold: #ffc94d;
-@green: #48f1a8;
-@rose: #ff78ba;
-@purple: #7b61ff;
 @shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
-@heading: "Orbitron", "Avenir Next", "Segoe UI", sans-serif;
-@body: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
+@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
+@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
 
 .hero {
   position: relative;
-  overflow: hidden;
   background:
-    radial-gradient(
-      circle at top left,
-      rgba(44, 232, 255, 0.18),
-      transparent 32%
-    ),
-    radial-gradient(
-      circle at 85% 12%,
-      rgba(255, 120, 186, 0.15),
-      transparent 24%
-    ),
+    radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),
+    radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),
     linear-gradient(180deg, @bg 0%, #091022 48%, #050814 100%);
   padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
+  overflow: hidden;
   color: @copy;
 
   &::before,
@@ -37,407 +23,53 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    content: "";
+    content: '';
   }
 
   &::before {
+    opacity: 0.45;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
     background-image:
       linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
       linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
     background-size: 54px 54px;
-    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
-    opacity: 0.45;
   }
 
   &::after {
     inset: auto 0 0;
-    height: 140px;
     background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
+    height: 140px;
   }
 }
 
-.heroInner {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
-  gap: clamp(2rem, 4vw, 4rem);
-  align-items: center;
-}
-
-.heroContent {
-  display: flex;
-  flex-direction: column;
-  gap: 1.35rem;
-}
-
-.heroEyebrow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin: 0;
-}
-
-.heroBadge {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 0.42rem 0.9rem;
-  color: @copy;
-  font-family: @heading;
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.heroBadgeCyan {
-  box-shadow: 0 0 18px rgba(44, 232, 255, 0.22);
-  border-color: rgba(44, 232, 255, 0.28);
-  color: @cyan;
-}
-
-.heroBadgeGold {
-  box-shadow: 0 0 18px rgba(255, 201, 77, 0.18);
-  border-color: rgba(255, 201, 77, 0.24);
-  color: @gold;
-}
-
-.heroBadgeGreen {
-  box-shadow: 0 0 18px rgba(72, 241, 168, 0.2);
-  border-color: rgba(72, 241, 168, 0.24);
-  color: @green;
-}
-
-.heroBadgeRose {
-  box-shadow: 0 0 18px rgba(255, 120, 186, 0.18);
-  border-color: rgba(255, 120, 186, 0.24);
-  color: @rose;
-}
-
 .title {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   margin: 0;
-  font-family: @heading;
-  font-size: clamp(2.6rem, 5vw, 4.45rem);
   font-weight: 900;
-  letter-spacing: 0.02em;
+  font-size: clamp(2.6rem, 5vw, 4.45rem);
   line-height: 1;
-}
-
-.heroTitlePrimary {
-  color: #fff;
-}
-
-.heroTitleSecondary {
-  background: linear-gradient(90deg, @cyan, @gold 78%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  font-size: clamp(1.05rem, 2vw, 1.6rem);
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-family: @heading;
+  letter-spacing: 0.02em;
 }
 
 .description {
-  max-width: 62ch;
   margin: 0;
+  max-width: 62ch;
   color: @muted;
-  font-family: @body;
   font-size: 1.05rem;
   line-height: 1.8;
+  font-family: @body;
 }
 
-.heroActions,
-.regActions,
-.resourceLinks,
-.entryLinks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.9rem;
-}
-
-.actionButton,
-.actionButtonGhost,
-.entryLink {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  transition:
-    transform 0.22s ease,
-    box-shadow 0.22s ease,
-    border-color 0.22s ease,
-    background 0.22s ease,
-    color 0.22s ease;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 0.9rem 1.35rem;
-  font-family: @heading;
-  font-size: 0.82rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-
-  &:hover {
-    transform: translateY(-2px);
-    text-decoration: none;
-  }
-}
-
-.actionButton {
-  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
-  border-color: rgba(44, 232, 255, 0.3);
-  background: rgba(44, 232, 255, 0.12);
-  color: @cyan;
-
-  &:hover {
-    box-shadow: 0 0 34px rgba(44, 232, 255, 0.28);
-    background: rgba(44, 232, 255, 0.2);
-    color: #fff;
-  }
-}
-
-.actionButtonGhost,
-.entryLink {
-  border-color: rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.04);
-  color: @copy;
-
-  &:hover {
-    border-color: rgba(255, 201, 77, 0.24);
-    background: rgba(255, 201, 77, 0.1);
-    color: @gold;
-  }
-}
-
-.heroStats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.85rem;
-  margin: 0;
-}
-
-.statChip {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-  min-width: 108px;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 0.85rem 1rem;
-
-  strong {
-    font-family: @heading;
-    font-size: 1.25rem;
-    line-height: 1.1;
-  }
-
-  span {
-    color: @muted;
-    font-size: 0.82rem;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-}
-
-.heroVisual {
-  position: relative;
-  min-height: 580px;
-}
-
-.heroVisualCard,
-.registerCard,
-.entryHub,
-.trackCard,
-.badgeTile,
-.resourceCard,
-.projectCard,
-.dayCard,
-.supportCard,
-.darkCard,
-.lightCard {
-  box-shadow: @shadow;
-  border: 1px solid @border;
-  border-radius: 28px;
-  background: @panel;
-  backdrop-filter: blur(18px);
-}
-
-.heroVisualCard {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  background: linear-gradient(
-    180deg,
-    rgba(11, 19, 40, 0.95),
-    rgba(8, 18, 39, 0.9)
-  );
-}
-
-.heroVisualHead {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.8rem;
-  padding: 1.15rem 1.25rem 0;
-}
-
-.visualKicker,
-.visualChip,
-.floatingLabel,
-.regEyebrow,
-.entryEyebrow,
-.supportEyebrow,
-.entryStep,
-.dayNo,
-.sectionSubtitle {
-  font-family: @heading;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.visualKicker,
-.floatingLabel,
-.sectionSubtitle,
-.regEyebrow,
-.entryEyebrow,
-.supportEyebrow {
-  color: @muted;
-}
-
-.visualChip {
-  color: @gold;
-}
-
-.heroImageFrame {
-  position: relative;
-  overflow: hidden;
-  margin: 1rem 1.25rem 0;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.08),
-    rgba(123, 97, 255, 0.14)
-  );
-  min-height: 340px;
-
-  :global(img) {
-    position: relative;
-    z-index: 2;
-  }
-}
-
-.mascotGlow {
-  position: absolute;
-  inset: 12% 18%;
-  z-index: 1;
-  border-radius: 999px;
-  background: radial-gradient(
-    circle,
-    rgba(44, 232, 255, 0.35),
-    transparent 70%
-  );
-  filter: blur(28px);
-}
-
-.heroImageFallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 340px;
-  color: @cyan;
-  font-family: @heading;
-  font-size: clamp(1.25rem, 3vw, 2rem);
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-.heroVisualFoot {
-  padding: 1.15rem 1.25rem 1.35rem;
-}
-
-.heroVisualTitle {
-  margin: 0 0 0.35rem;
-  color: #fff;
-  font-family: @heading;
-  font-size: 1rem;
-}
-
-.heroVisualCopy {
-  margin: 0;
-  color: @muted;
-  line-height: 1.75;
-}
-
-.heroFloatingCard {
-  position: absolute;
-  z-index: 2;
-  max-width: 260px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 22px;
-  background: rgba(8, 18, 39, 0.88);
-  padding: 1rem 1.1rem;
-
-  strong {
-    display: block;
-    margin-top: 0.35rem;
-    color: #fff;
-    font-size: 1rem;
-    line-height: 1.4;
-  }
-
-  p {
-    margin: 0.45rem 0 0;
-    color: @muted;
-    font-size: 0.92rem;
-    line-height: 1.6;
-  }
-}
-
-.heroFloatingCardTop {
-  top: 2.5rem;
-  left: -1.5rem;
-}
-
-.heroFloatingCardBottom {
-  right: -1.5rem;
-  bottom: 1.5rem;
-}
-
-.section,
-.registerSection {
+.section {
   position: relative;
+  background: linear-gradient(180deg, rgba(5, 8, 20, 0.98), rgba(7, 12, 26, 0.98));
   padding: clamp(4rem, 7vw, 6rem) 0;
-  background: linear-gradient(
-    180deg,
-    rgba(5, 8, 20, 0.98),
-    rgba(7, 12, 26, 0.98)
-  );
   color: @copy;
 }
 
-.registerSection {
-  padding-top: clamp(3rem, 5vw, 4rem);
-}
-
-.sectionHeader {
-  text-align: center;
-  margin-bottom: clamp(2.3rem, 4vw, 3rem);
-}
-
 .sectionTitle {
   display: inline-block;
   margin: 0;
@@ -445,603 +77,20 @@
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
-  font-family: @heading;
-  font-size: clamp(1.9rem, 4vw, 2.6rem);
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.accentLine {
-  width: 72px;
-  height: 2px;
-  margin: 1rem auto 0;
-  border-radius: 999px;
-  background: linear-gradient(90deg, @cyan, @purple);
-  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
-}
-
-.themePanel {
-  margin-bottom: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 28px;
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.08),
-    rgba(123, 97, 255, 0.12)
-  );
-  padding: 1.5rem 1.6rem;
-}
-
-.themeText {
-  margin-bottom: 0.4rem;
-  color: #fff;
-  font-family: @heading;
-  font-size: clamp(1.35rem, 2.6vw, 2rem);
   font-weight: 900;
-}
-
-.themeSub {
-  margin: 0;
-  color: @muted;
-  line-height: 1.75;
-}
-
-.trackCard {
-  transition:
-    transform 0.22s ease,
-    border-color 0.22s ease;
-  height: 100%;
-  padding: 1.4rem;
-
-  &:hover {
-    transform: translateY(-4px);
-    border-color: rgba(44, 232, 255, 0.26);
-  }
-}
-
-.trackIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.06);
-  width: 54px;
-  height: 54px;
-  font-size: 1.35rem;
-}
-
-.trackName,
-.regTitle,
-.entryTitle,
-.scheduleLead,
-.badgeTileTitle,
-.resourceTitle,
-.projectTitle,
-.supportTitle {
-  margin: 0;
-  color: #fff;
-  font-family: @heading;
-  font-weight: 800;
-  line-height: 1.3;
-}
-
-.trackName {
-  font-size: 1.08rem;
-}
-
-.trackDesc,
-.regDesc,
-.entryCopy,
-.scheduleCopy,
-.badgeTileCopy,
-.resourceDescription,
-.projectSummary,
-.supportDescription {
-  color: @muted;
-  line-height: 1.75;
-}
-
-.trackDesc {
-  min-height: 4.8rem;
-  margin: 0.75rem 0 0.95rem;
-}
-
-.trackMetric {
-  color: @cyan;
-  font-family: @heading;
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.registerWrap {
-  display: grid;
-  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
-  gap: 1.5rem;
-  align-items: start;
-}
-
-.registerCard {
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.08),
-    rgba(123, 97, 255, 0.14)
-  );
-}
-
-.registerCardInner,
-.entryHub,
-.supportCard {
-  padding: 1.55rem;
-}
-
-.regTitle {
-  margin-top: 0.4rem;
-  font-size: clamp(1.55rem, 3vw, 2.1rem);
-}
-
-.regDesc {
-  margin: 0.9rem 0 1.2rem;
-}
-
-.regFacts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin: 1.3rem 0 0;
-
-  li {
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
-    padding: 0.48rem 0.85rem;
-    color: @copy;
-    font-size: 0.9rem;
-  }
-}
-
-.entryHubHead {
-  margin-bottom: 1.25rem;
-}
-
-.entryTitle {
-  margin-top: 0.35rem;
-  font-size: 1.55rem;
-}
-
-.entryCard {
-  height: 100%;
-  padding: 1.3rem;
-}
-
-.entryStep {
-  color: @cyan;
-}
-
-.entryCard h4 {
-  margin: 0.55rem 0 0.45rem;
-  color: #fff;
-  font-family: @heading;
-  font-size: 1.02rem;
-}
-
-.entryCard p {
-  margin: 0;
-  color: @muted;
-  line-height: 1.7;
-}
-
-.entryMetaRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  margin: 1rem 0;
-}
-
-.entryMeta {
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 0.35rem 0.7rem;
-  color: @gold;
-  font-family: @heading;
-  font-size: 0.72rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.scheduleIntro {
-  margin-bottom: 1.35rem;
-  text-align: center;
-}
-
-.scheduleKicker {
-  margin: 0 0 0.35rem;
-  color: @cyan;
-  font-family: @heading;
-  font-size: 0.8rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.scheduleLead {
-  font-size: clamp(1.45rem, 3vw, 2.05rem);
-}
-
-.scheduleCopy {
-  max-width: 72ch;
-  margin: 0.8rem auto 0;
-}
-
-.scheduleOverview {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.schedulePill {
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 0.58rem 0.9rem;
-  color: @copy;
-  font-family: @heading;
-  font-size: 0.74rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.scheduleDays {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
-}
-
-.dayCard {
-  height: 100%;
-  padding: 1.35rem;
-}
-
-.formation {
-  background: linear-gradient(
-    135deg,
-    rgba(44, 232, 255, 0.1),
-    rgba(14, 43, 80, 0.86)
-  );
-}
-
-.enrollment {
-  background: linear-gradient(
-    135deg,
-    rgba(123, 97, 255, 0.12),
-    rgba(28, 20, 67, 0.86)
-  );
-}
-
-.competition {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 201, 77, 0.12),
-    rgba(60, 35, 8, 0.88)
-  );
-}
-
-.break {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 120, 186, 0.1),
-    rgba(72, 18, 48, 0.88)
-  );
-}
-
-.evaluation {
-  background: linear-gradient(
-    135deg,
-    rgba(72, 241, 168, 0.12),
-    rgba(14, 50, 39, 0.88)
-  );
-}
-
-.dayCardHead {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-  align-items: baseline;
-}
-
-.dayNo {
-  color: @muted;
-}
-
-.dayDate {
-  color: @copy;
-  font-size: 0.85rem;
-}
-
-.dayTitle {
-  margin: 0.9rem 0 0.45rem;
-  color: #fff;
-  font-family: @heading;
-  font-size: 1.08rem;
-}
-
-.daySub {
-  margin: 0 0 1rem;
-  color: @muted;
-  line-height: 1.7;
-}
-
-.dayAgenda,
-.prizeMeta,
-.projectMeta {
-  display: grid;
-  gap: 0.7rem;
-  margin: 0;
-
-  div {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.8rem;
-    align-items: start;
-  }
-
-  dt,
-  dd {
-    margin: 0;
-  }
-}
-
-.timePill {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-  min-height: 30px;
-  padding: 0.4rem 0.75rem;
-  color: @copy;
-  font-family: @heading;
-  font-size: 0.72rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.agendaCopy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.14rem;
-
-  strong {
-    color: #fff;
-    line-height: 1.4;
-  }
-
-  span {
-    color: @muted;
-    font-size: 0.92rem;
-    line-height: 1.55;
-  }
-}
-
-.awardsGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem;
-}
-
-.badgeTile {
-  overflow: hidden;
-}
-
-.badgeArtWrap {
-  padding: 1.1rem 1.1rem 0;
-}
-
-.badgeArt {
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.04);
-  width: 100%;
-  aspect-ratio: 1;
-  object-fit: cover;
-}
-
-.badgeTileBody {
-  padding: 1.15rem 1.2rem 1.3rem;
-}
-
-.badgeTierLabel {
-  color: @gold;
-  font-family: @heading;
-  font-size: 0.74rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.badgeTileTitle {
-  font-size: 1.05rem;
-}
-
-.badgeTileCopy {
-  margin: 0.7rem 0 1rem;
-}
-
-.prizeMeta dt,
-.projectMeta dt {
-  color: @muted;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
   font-family: @heading;
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
-.prizeMeta dd,
-.projectMeta dd {
-  color: #fff;
-  line-height: 1.5;
-}
-
-.supportCard {
-  display: grid;
-  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
-  gap: 1.25rem;
-  margin-top: 1.4rem;
-}
-
-.supportTitle {
-  margin-top: 0.35rem;
-  font-size: 1.45rem;
-}
-
-.partnerGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
-  gap: 0.8rem;
-  align-items: center;
-}
-
-.partnerLink {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.04);
-  min-height: 104px;
-  padding: 1rem;
-}
-
-.partnerLogo {
-  max-width: 100%;
-  max-height: 58px;
-  object-fit: contain;
-}
-
-.resourceCard,
-.projectCard {
-  height: 100%;
-  padding: 1.25rem;
-}
-
-.resourceHead,
-.projectHead {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: start;
-}
-
-.resourceTitle,
-.projectTitle {
-  font-size: 1.02rem;
-}
-
-.resourceTitle,
-.projectTitle a {
-  color: #fff;
-  text-decoration: none;
-}
-
-.projectTitle a:hover {
-  color: @cyan;
-  text-decoration: none;
-}
-
-.resourceDescription,
-.projectSummary {
-  margin: 0.8rem 0 1rem;
-}
-
-.topicList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.55rem;
-  margin: 0 0 1rem;
-}
-
-.topicChip,
-.topicChipMuted,
-.skillBadge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  padding: 0.34rem 0.72rem;
-  font-size: 0.76rem;
-}
-
-.topicChip,
-.skillBadge {
-  background: rgba(44, 232, 255, 0.12);
-  color: @cyan;
-}
-
-.topicChipMuted {
-  background: rgba(255, 255, 255, 0.08);
-  color: @copy;
-}
-
-.projectHeader {
-  margin-top: 2.75rem;
-}
-
-.scoreCircle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
-  border: 1px solid rgba(44, 232, 255, 0.2);
-  border-radius: 50%;
-  background: rgba(44, 232, 255, 0.1);
-  width: 62px;
-  height: 62px;
-  color: @cyan;
-  font-family: @heading;
-  font-size: 1.05rem;
-  font-weight: 800;
-}
-
-.participantCloud {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-}
-
-.participantCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.04);
-  padding: 1.1rem 0.9rem;
-  color: #fff;
-  text-align: center;
-  text-decoration: none;
-}
-
-.participantCard:hover {
-  color: @cyan;
-  text-decoration: none;
-}
-
-.avatar {
-  border: 2px solid rgba(44, 232, 255, 0.2);
-  border-radius: 50%;
-  width: 84px;
-  height: 84px;
-  object-fit: cover;
-}
-
-.participantName {
-  font-size: 0.92rem;
-  line-height: 1.4;
-}
-
 .darkCard,
 .lightCard {
+  backdrop-filter: blur(18px);
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
   padding: 1.3rem;
 }
 
@@ -1049,38 +98,17 @@
   background: rgba(255, 255, 255, 0.08);
 }
 
-.techGradient {
-  background: linear-gradient(90deg, @cyan, @gold 78%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-}
-
-@media (max-width: 1199px) {
-  .heroInner,
-  .registerWrap,
-  .supportCard {
-    grid-template-columns: 1fr;
-  }
-
-  .heroVisual {
-    min-height: 0;
-  }
-
-  .heroFloatingCardTop {
-    left: 1rem;
-  }
-
-  .heroFloatingCardBottom {
-    right: 1rem;
-  }
+.projectCard {
+  backdrop-filter: blur(18px);
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  padding: 1.25rem;
+  height: 100%;
 }
 
 @media (max-width: 991px) {
-  .scheduleDays {
-    grid-template-columns: 1fr;
-  }
-
   .title {
     font-size: clamp(2.2rem, 9vw, 3.45rem);
   }
@@ -1091,48 +119,8 @@
     padding-top: 4rem;
   }
 
-  .heroFloatingCard {
-    position: static;
-    max-width: none;
-    margin-top: 1rem;
-  }
-
-  .heroVisual {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .heroImageFrame,
-  .heroImageFallback {
-    min-height: 260px;
-  }
-
-  .heroStats {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .sectionTitle {
     font-size: 1.65rem;
     letter-spacing: 0.08em;
   }
-
-  .heroBadge,
-  .schedulePill,
-  .regFacts li,
-  .topicChip,
-  .topicChipMuted,
-  .skillBadge {
-    font-size: 0.72rem;
-  }
-
-  .participantCloud {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .scoreCircle {
-    width: 54px;
-    height: 54px;
-    font-size: 0.92rem;
-  }
 }