From a24e9b10a1fb0445d7f9aec2f803074c31779a88 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 6 Jan 2026 14:21:46 +0000
Subject: [PATCH 1/5] Initial plan


From 819461371bde79be319eb074478b05aa986f242e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 6 Jan 2026 14:33:37 +0000
Subject: [PATCH 2/5] Add bounty page with fresh UI and navigation integration

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
---
 components/Navigator/MainNavigator.tsx |   1 +
 pages/bounty.tsx                       | 104 +++++++++++++++++++++++
 styles/Bounty.module.less              | 113 +++++++++++++++++++++++++
 translation/en-US.ts                   |  13 +++
 translation/zh-CN.ts                   |  13 +++
 translation/zh-TW.ts                   |  13 +++
 6 files changed, 257 insertions(+)
 create mode 100644 pages/bounty.tsx
 create mode 100644 styles/Bounty.module.less

diff --git a/components/Navigator/MainNavigator.tsx b/components/Navigator/MainNavigator.tsx
index 76b0824..f9808d3 100644
--- a/components/Navigator/MainNavigator.tsx
+++ b/components/Navigator/MainNavigator.tsx
@@ -43,6 +43,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
         href: 'https://github.com/Open-Source-Bazaar/Git-Hackathon-scaffold',
         title: t('hackathon'),
       },
+      { href: '/bounty', title: t('bounty') },
       { href: '/license-filter', title: t('license_filter') },
     ],
   },
diff --git a/pages/bounty.tsx b/pages/bounty.tsx
new file mode 100644
index 0000000..50d38c9
--- /dev/null
+++ b/pages/bounty.tsx
@@ -0,0 +1,104 @@
+import { observer } from 'mobx-react';
+import { FC, useContext } from 'react';
+import { Card, Col, Container, Row } from 'react-bootstrap';
+
+import { PageHead } from '../components/Layout/PageHead';
+import { I18nContext } from '../models/Translation';
+import styles from '../styles/Bounty.module.less';
+
+interface BountyViewProps {
+  title: string;
+  url: string;
+  icon: string;
+}
+
+const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
+  <Col md={6} lg={4}>
+    <Card className={styles.bountyCard}>
+      <Card.Body>
+        <h5 className={styles.cardTitle}>
+          {icon} {title}
+        </h5>
+        <div className={styles.iframeContainer}>
+          <iframe
+            src={url}
+            className={styles.bountyIframe}
+            title={title}
+            allow="clipboard-read; clipboard-write"
+          />
+        </div>
+      </Card.Body>
+    </Card>
+  </Col>
+);
+
+const BountyPage: FC = observer(() => {
+  const { t } = useContext(I18nContext);
+
+  const bountyViews: BountyViewProps[] = [
+    {
+      title: t('bounty_dashboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf',
+      icon: '📊',
+    },
+    {
+      title: t('bounty_token_leaderboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb',
+      icon: '🪙',
+    },
+    {
+      title: t('bounty_task_leaderboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb',
+      icon: '📋',
+    },
+    {
+      title: t('bounty_task_submission'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe',
+      icon: '📝',
+    },
+    {
+      title: t('bounty_achievement_leaderboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb',
+      icon: '🏆',
+    },
+    {
+      title: t('bounty_achievement_submission'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc',
+      icon: '✅',
+    },
+    {
+      title: t('bounty_hero_leaderboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc',
+      icon: '🦸',
+    },
+    {
+      title: t('bounty_debt_leaderboard'),
+      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd',
+      icon: '💳',
+    },
+  ];
+
+  return (
+    <>
+      <PageHead title={t('bounty_page_title')} />
+
+      {/* Hero Section */}
+      <section className={styles.hero}>
+        <Container>
+          <h1 className={`text-center ${styles.title}`}>{t('bounty_page_title')}</h1>
+          <p className={`text-center ${styles.description}`}>{t('bounty_page_description')}</p>
+        </Container>
+      </section>
+
+      <Container className="my-5">
+        <Row className="g-4">
+          {bountyViews.map(view => (
+            <BountyView key={view.url} {...view} />
+          ))}
+        </Row>
+      </Container>
+    </>
+  );
+});
+
+export default BountyPage;
diff --git a/styles/Bounty.module.less b/styles/Bounty.module.less
new file mode 100644
index 0000000..38bc2e5
--- /dev/null
+++ b/styles/Bounty.module.less
@@ -0,0 +1,113 @@
+// Fresh and lively bounty page styling inspired by hackathon page
+
+.hero {
+  position: relative;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  padding: 4rem 0;
+  overflow: hidden;
+  color: #fff;
+
+  &::before {
+    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%;
+    pointer-events: none;
+    content: '';
+  }
+}
+
+@keyframes grid-animation {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.title {
+  margin-bottom: 1rem;
+  font-weight: 700;
+  font-size: 3rem;
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.description {
+  opacity: 0.9;
+  margin: 0 auto;
+  max-width: 800px;
+  font-size: 1.2rem;
+}
+
+.bountyCard {
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1));
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+  height: 100%;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(240, 147, 251, 0.15));
+  }
+}
+
+.cardTitle {
+  display: inline-block;
+  margin-bottom: 1.5rem;
+  border-bottom: 3px 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: 1.3rem;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.iframeContainer {
+  position: relative;
+  width: 100%;
+  padding-bottom: 75%; // 4:3 aspect ratio
+  overflow: hidden;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.bountyIframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+
+  .cardTitle {
+    font-size: 1.1rem;
+  }
+
+  .iframeContainer {
+    padding-bottom: 100%; // More square on mobile
+  }
+}
diff --git a/translation/en-US.ts b/translation/en-US.ts
index 0c272f2..f2ece72 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -7,6 +7,7 @@ export default {
   open_collaborator_award: 'Open Collaborator Award',
   activity: 'Activity',
   hackathon: 'Hackathon',
+  bounty: 'Open Source Bounty',
   open_source_projects: 'Open Source projects',
   open_source_bazaar: 'Open Source Bazaar',
   home_page: 'Home Page',
@@ -34,6 +35,18 @@ export default {
   volunteer: 'Volunteer',
   online_volunteer: 'Online Volunteer',
 
+  // Bounty page
+  bounty_page_title: 'Open Source Bounty',
+  bounty_page_description: 'Participate in open source projects and earn bounty rewards',
+  bounty_dashboard: 'Dashboard',
+  bounty_token_leaderboard: 'Token Leaderboard',
+  bounty_task_leaderboard: 'Task Leaderboard',
+  bounty_task_submission: 'Task Submission Form',
+  bounty_achievement_leaderboard: 'Achievement Leaderboard',
+  bounty_achievement_submission: 'Achievement Submission Form',
+  bounty_hero_leaderboard: 'Hero Leaderboard',
+  bounty_debt_leaderboard: 'Debt Leaderboard',
+
   //License-tool Page
   license_filter: 'Open Source License Selector',
   feature_attitude_undefined: "I don't care",
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 413eaf4..13aa176 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -9,6 +9,7 @@ export default {
   open_source_projects: '开源项目',
   activity: '活动',
   hackathon: '黑客马拉松',
+  bounty: '开源悬赏',
   home_page: '主页',
   wiki: '知识库',
 
@@ -33,6 +34,18 @@ export default {
   volunteer: '志愿者',
   online_volunteer: '线上志愿者',
 
+  // Bounty page
+  bounty_page_title: '开源悬赏',
+  bounty_page_description: '参与开源项目，获得悬赏奖励',
+  bounty_dashboard: '仪表盘',
+  bounty_token_leaderboard: '代币榜',
+  bounty_task_leaderboard: '任务榜',
+  bounty_task_submission: '任务发布表单',
+  bounty_achievement_leaderboard: '成果榜',
+  bounty_achievement_submission: '成果提交表单',
+  bounty_hero_leaderboard: '英雄榜',
+  bounty_debt_leaderboard: '欠条榜',
+
   //License-tool Page
   license_filter: '开源协议选择器',
   feature_attitude_undefined: '我不在乎',
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index 2270b9d..0813af1 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -9,6 +9,7 @@ export default {
   open_source_projects: '開源項目',
   activity: '活動',
   hackathon: '黑客馬拉松',
+  bounty: '開源懸賞',
   home_page: '主頁',
   wiki: '知識庫',
 
@@ -33,6 +34,18 @@ export default {
   volunteer: '志工',
   online_volunteer: '線上志工',
 
+  // Bounty page
+  bounty_page_title: '開源懸賞',
+  bounty_page_description: '參與開源項目，獲得懸賞獎勵',
+  bounty_dashboard: '儀表板',
+  bounty_token_leaderboard: '代幣榜',
+  bounty_task_leaderboard: '任務榜',
+  bounty_task_submission: '任務發布表單',
+  bounty_achievement_leaderboard: '成果榜',
+  bounty_achievement_submission: '成果提交表單',
+  bounty_hero_leaderboard: '英雄榜',
+  bounty_debt_leaderboard: '欠條榜',
+
   //License-tool Page
   license_filter: '開源許可證選擇器',
   feature_attitude_undefined: '我不在乎',

From 9ee468795c1060c4fe805af9d406cf63262559df Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 6 Jan 2026 14:34:05 +0000
Subject: [PATCH 3/5] Apply prettier formatting to Bounty styles

---
 styles/Bounty.module.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/styles/Bounty.module.less b/styles/Bounty.module.less
index 38bc2e5..5783fcd 100644
--- a/styles/Bounty.module.less
+++ b/styles/Bounty.module.less
@@ -46,10 +46,10 @@
 
 .bountyCard {
   transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
   border: 2px solid transparent;
   border-radius: 16px;
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.1));
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
   height: 100%;
   overflow: hidden;
 
@@ -76,11 +76,11 @@
 
 .iframeContainer {
   position: relative;
-  width: 100%;
-  padding-bottom: 75%; // 4:3 aspect ratio
-  overflow: hidden;
   border-radius: 12px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding-bottom: 75%; // 4:3 aspect ratio
+  width: 100%;
+  overflow: hidden;
 }
 
 .bountyIframe {

From 2c672b225a9fa79303955363b203cffd9f30930a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 6 Jan 2026 16:34:54 +0000
Subject: [PATCH 4/5] Address PR feedback: Use Ratio component, change
 leaderboard to rank, reorganize layout

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
---
 pages/bounty.tsx          | 146 +++++++++++++++++++++-----------------
 styles/Bounty.module.less |  39 +++++-----
 translation/en-US.ts      |  10 +--
 translation/zh-CN.ts      |  10 +--
 translation/zh-TW.ts      |  10 +--
 5 files changed, 113 insertions(+), 102 deletions(-)

diff --git a/pages/bounty.tsx b/pages/bounty.tsx
index 50d38c9..e410cf1 100644
--- a/pages/bounty.tsx
+++ b/pages/bounty.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
-import { Card, Col, Container, Row } from 'react-bootstrap';
+import { Card, Col, Container, Ratio, Row } from 'react-bootstrap';
 
 import { PageHead } from '../components/Layout/PageHead';
 import { I18nContext } from '../models/Translation';
@@ -10,24 +10,23 @@ interface BountyViewProps {
   title: string;
   url: string;
   icon: string;
+  colspan?: number;
 }
 
-const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
-  <Col md={6} lg={4}>
-    <Card className={styles.bountyCard}>
-      <Card.Body>
-        <h5 className={styles.cardTitle}>
-          {icon} {title}
-        </h5>
-        <div className={styles.iframeContainer}>
-          <iframe
-            src={url}
-            className={styles.bountyIframe}
-            title={title}
-            allow="clipboard-read; clipboard-write"
-          />
-        </div>
-      </Card.Body>
+const BountyView: FC<BountyViewProps> = ({ title, url, icon, colspan = 6 }) => (
+  <Col md={colspan}>
+    <Card className={styles.bountyCard} body>
+      <Card.Title as="h2" className={`fs-5 ${styles.cardTitle}`}>
+        {icon} {title}
+      </Card.Title>
+      <Ratio aspectRatio="4x3" className={styles.iframeContainer}>
+        <iframe
+          src={url}
+          className={styles.bountyIframe}
+          title={title}
+          allow="clipboard-read; clipboard-write"
+        />
+      </Ratio>
     </Card>
   </Col>
 );
@@ -35,49 +34,6 @@ const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
 const BountyPage: FC = observer(() => {
   const { t } = useContext(I18nContext);
 
-  const bountyViews: BountyViewProps[] = [
-    {
-      title: t('bounty_dashboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf',
-      icon: '📊',
-    },
-    {
-      title: t('bounty_token_leaderboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb',
-      icon: '🪙',
-    },
-    {
-      title: t('bounty_task_leaderboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb',
-      icon: '📋',
-    },
-    {
-      title: t('bounty_task_submission'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe',
-      icon: '📝',
-    },
-    {
-      title: t('bounty_achievement_leaderboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb',
-      icon: '🏆',
-    },
-    {
-      title: t('bounty_achievement_submission'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc',
-      icon: '✅',
-    },
-    {
-      title: t('bounty_hero_leaderboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc',
-      icon: '🦸',
-    },
-    {
-      title: t('bounty_debt_leaderboard'),
-      url: 'https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd',
-      icon: '💳',
-    },
-  ];
-
   return (
     <>
       <PageHead title={t('bounty_page_title')} />
@@ -91,10 +47,72 @@ const BountyPage: FC = observer(() => {
       </section>
 
       <Container className="my-5">
-        <Row className="g-4">
-          {bountyViews.map(view => (
-            <BountyView key={view.url} {...view} />
-          ))}
+        {/* Dashboard - full width */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_dashboard')}
+            url="https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf"
+            icon="📊"
+            colspan={12}
+          />
+        </Row>
+
+        {/* Task Rank and Submission Form - same row */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_task_rank')}
+            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb"
+            icon="📋"
+          />
+          <BountyView
+            title={t('bounty_task_submission')}
+            url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe"
+            icon="📝"
+          />
+        </Row>
+
+        {/* Achievement Rank and Submission Form - same row */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_achievement_rank')}
+            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb"
+            icon="🏆"
+          />
+          <BountyView
+            title={t('bounty_achievement_submission')}
+            url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc"
+            icon="✅"
+          />
+        </Row>
+
+        {/* Token Rank - full width */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_token_rank')}
+            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb"
+            icon="🪙"
+            colspan={12}
+          />
+        </Row>
+
+        {/* Hero Rank - full width */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_hero_rank')}
+            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc"
+            icon="🦸"
+            colspan={12}
+          />
+        </Row>
+
+        {/* Debt Rank - full width */}
+        <Row className="g-4 mb-4">
+          <BountyView
+            title={t('bounty_debt_rank')}
+            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd"
+            icon="💳"
+            colspan={12}
+          />
         </Row>
       </Container>
     </>
diff --git a/styles/Bounty.module.less b/styles/Bounty.module.less
index 5783fcd..b466a80 100644
--- a/styles/Bounty.module.less
+++ b/styles/Bounty.module.less
@@ -35,6 +35,10 @@
   font-weight: 700;
   font-size: 3rem;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
 }
 
 .description {
@@ -42,6 +46,10 @@
   margin: 0 auto;
   max-width: 800px;
   font-size: 1.2rem;
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
 }
 
 .bountyCard {
@@ -72,42 +80,27 @@
   font-size: 1.3rem;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+
+  @media (max-width: 768px) {
+    font-size: 1.1rem;
+  }
 }
 
 .iframeContainer {
   position: relative;
   border-radius: 12px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding-bottom: 75%; // 4:3 aspect ratio
   width: 100%;
   overflow: hidden;
+
+  @media (max-width: 768px) {
+    aspect-ratio: 1 / 1; // More square on mobile
+  }
 }
 
 .bountyIframe {
-  position: absolute;
-  top: 0;
-  left: 0;
   border: none;
   border-radius: 12px;
   width: 100%;
   height: 100%;
 }
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .title {
-    font-size: 2rem;
-  }
-
-  .description {
-    font-size: 1rem;
-  }
-
-  .cardTitle {
-    font-size: 1.1rem;
-  }
-
-  .iframeContainer {
-    padding-bottom: 100%; // More square on mobile
-  }
-}
diff --git a/translation/en-US.ts b/translation/en-US.ts
index 7e6d1af..ccd393d 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -39,13 +39,13 @@ export default {
   bounty_page_title: 'Open Source Bounty',
   bounty_page_description: 'Participate in open source projects and earn bounty rewards',
   bounty_dashboard: 'Dashboard',
-  bounty_token_leaderboard: 'Token Leaderboard',
-  bounty_task_leaderboard: 'Task Leaderboard',
+  bounty_token_rank: 'Token Rank',
+  bounty_task_rank: 'Task Rank',
   bounty_task_submission: 'Task Submission Form',
-  bounty_achievement_leaderboard: 'Achievement Leaderboard',
+  bounty_achievement_rank: 'Achievement Rank',
   bounty_achievement_submission: 'Achievement Submission Form',
-  bounty_hero_leaderboard: 'Hero Leaderboard',
-  bounty_debt_leaderboard: 'Debt Leaderboard',
+  bounty_hero_rank: 'Hero Rank',
+  bounty_debt_rank: 'Debt Rank',
 
   //License-tool Page
   license_filter: 'Open Source License Selector',
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 9871fc9..cc954a9 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -38,13 +38,13 @@ export default {
   bounty_page_title: '开源悬赏',
   bounty_page_description: '参与开源项目，获得悬赏奖励',
   bounty_dashboard: '仪表盘',
-  bounty_token_leaderboard: '代币榜',
-  bounty_task_leaderboard: '任务榜',
+  bounty_token_rank: '代币榜',
+  bounty_task_rank: '任务榜',
   bounty_task_submission: '任务发布表单',
-  bounty_achievement_leaderboard: '成果榜',
+  bounty_achievement_rank: '成果榜',
   bounty_achievement_submission: '成果提交表单',
-  bounty_hero_leaderboard: '英雄榜',
-  bounty_debt_leaderboard: '欠条榜',
+  bounty_hero_rank: '英雄榜',
+  bounty_debt_rank: '欠条榜',
 
   //License-tool Page
   license_filter: '开源协议选择器',
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index f3bdcbe..58956fe 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -38,13 +38,13 @@ export default {
   bounty_page_title: '開源懸賞',
   bounty_page_description: '參與開源項目，獲得懸賞獎勵',
   bounty_dashboard: '儀表板',
-  bounty_token_leaderboard: '代幣榜',
-  bounty_task_leaderboard: '任務榜',
+  bounty_token_rank: '代幣榜',
+  bounty_task_rank: '任務榜',
   bounty_task_submission: '任務發布表單',
-  bounty_achievement_leaderboard: '成果榜',
+  bounty_achievement_rank: '成果榜',
   bounty_achievement_submission: '成果提交表單',
-  bounty_hero_leaderboard: '英雄榜',
-  bounty_debt_leaderboard: '欠條榜',
+  bounty_hero_rank: '英雄榜',
+  bounty_debt_rank: '欠條榜',
 
   //License-tool Page
   license_filter: '開源許可證選擇器',

From 2491719bcf1bca0a0ac04512b22f821fa587ee83 Mon Sep 17 00:00:00 2001
From: TechQuery <shiy2008@gmail.com>
Date: Wed, 7 Jan 2026 05:11:33 +0800
Subject: [PATCH 5/5] [optimize] simplify JSX & LESS of Open Source Bounty page

---
 components/Navigator/MainNavigator.tsx |   6 +-
 pages/bounty.tsx                       | 150 +++++++++++--------------
 pages/finance/index.module.less        |   1 +
 styles/Bounty.module.less              |  16 ---
 4 files changed, 69 insertions(+), 104 deletions(-)

diff --git a/components/Navigator/MainNavigator.tsx b/components/Navigator/MainNavigator.tsx
index cb8044e..87ea119 100644
--- a/components/Navigator/MainNavigator.tsx
+++ b/components/Navigator/MainNavigator.tsx
@@ -41,6 +41,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
       { href: '/project', title: t('open_source_projects') },
       { href: '/issue', title: 'GitHub issues' },
       { href: '/license-filter', title: t('license_filter') },
+      { href: '/finance', title: t('finance_page_title') },
     ],
   },
   {
@@ -58,18 +59,17 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
         href: 'https://test.hackathon.fcc-cd.dev/open-source',
         title: textJoin(t('hackathon'), t('open_source_projects')),
       },
-      { href: '/bounty', title: t('bounty') },
-      { href: '/license-filter', title: t('license_filter') },
     ],
   },
+  { href: '/bounty', title: t('bounty') },
   {
     title: t('NGO'),
     subs: [
-      { href: '/NGO', title: t('China_NGO_DB') },
       {
         href: 'https://open-source-bazaar.feishu.cn/wiki/VGrMwiweVivWrHkTcvpcJTjjnoY',
         title: t('Open_Source_NGO_plan'),
       },
+      { href: '/NGO', title: t('China_NGO_DB') },
     ],
   },
   {
diff --git a/pages/bounty.tsx b/pages/bounty.tsx
index e410cf1..db5a546 100644
--- a/pages/bounty.tsx
+++ b/pages/bounty.tsx
@@ -1,34 +1,25 @@
 import { observer } from 'mobx-react';
 import { FC, useContext } from 'react';
-import { Card, Col, Container, Ratio, Row } from 'react-bootstrap';
+import { Card, Col, Container, Row } from 'react-bootstrap';
 
 import { PageHead } from '../components/Layout/PageHead';
 import { I18nContext } from '../models/Translation';
 import styles from '../styles/Bounty.module.less';
 
-interface BountyViewProps {
-  title: string;
-  url: string;
-  icon: string;
-  colspan?: number;
-}
+type BountyViewProps = Record<'icon' | 'title' | 'url', string>;
 
-const BountyView: FC<BountyViewProps> = ({ title, url, icon, colspan = 6 }) => (
-  <Col md={colspan}>
-    <Card className={styles.bountyCard} body>
-      <Card.Title as="h2" className={`fs-5 ${styles.cardTitle}`}>
-        {icon} {title}
-      </Card.Title>
-      <Ratio aspectRatio="4x3" className={styles.iframeContainer}>
-        <iframe
-          src={url}
-          className={styles.bountyIframe}
-          title={title}
-          allow="clipboard-read; clipboard-write"
-        />
-      </Ratio>
-    </Card>
-  </Col>
+const BountyView: FC<BountyViewProps> = ({ title, url, icon }) => (
+  <Card className={`${styles.bountyCard} rounded-4`} body>
+    <Card.Title as="h2" className="fs-5">
+      {icon} <span className={styles.cardTitle}>{title}</span>
+    </Card.Title>
+    <div
+      className={`${styles.iframeContainer} overflow-hidden w-100 rounded-4 position-relative`}
+      style={{ height: 'calc(100vh - 10rem)' }}
+    >
+      <iframe className="border-0 h-100 w-100 rounded-4" title={title} loading="lazy" src={url} />
+    </div>
+  </Card>
 );
 
 const BountyPage: FC = observer(() => {
@@ -38,7 +29,6 @@ const BountyPage: FC = observer(() => {
     <>
       <PageHead title={t('bounty_page_title')} />
 
-      {/* Hero Section */}
       <section className={styles.hero}>
         <Container>
           <h1 className={`text-center ${styles.title}`}>{t('bounty_page_title')}</h1>
@@ -46,74 +36,64 @@ const BountyPage: FC = observer(() => {
         </Container>
       </section>
 
-      <Container className="my-5">
-        {/* Dashboard - full width */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_dashboard')}
-            url="https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf"
-            icon="📊"
-            colspan={12}
-          />
-        </Row>
+      <Container className="my-5 d-flex flex-column gap-4">
+        <BountyView
+          title={t('bounty_dashboard')}
+          url="https://open-source-bazaar.feishu.cn/share/base/dashboard/shrcnt4EaAxn3zx9faRarERgEqf"
+          icon="📊"
+        />
 
-        {/* Task Rank and Submission Form - same row */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_task_rank')}
-            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb"
-            icon="📋"
-          />
-          <BountyView
-            title={t('bounty_task_submission')}
-            url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe"
-            icon="📝"
-          />
+        <Row className="g-4">
+          <Col xs={12} lg={8}>
+            <BountyView
+              icon="📋"
+              title={t('bounty_task_rank')}
+              url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnUVgb8E73UthaB2Tk4glnSb"
+            />
+          </Col>
+          <Col xs={12} lg={4}>
+            <BountyView
+              icon="📝"
+              title={t('bounty_task_submission')}
+              url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn2Ss97TSu3XgPi7mbZbrXLe"
+            />
+          </Col>
         </Row>
 
-        {/* Achievement Rank and Submission Form - same row */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_achievement_rank')}
-            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb"
-            icon="🏆"
-          />
-          <BountyView
-            title={t('bounty_achievement_submission')}
-            url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc"
-            icon="✅"
-          />
+        <Row className="g-4">
+          <Col xs={12} lg={8}>
+            <BountyView
+              icon="🏆"
+              title={t('bounty_achievement_rank')}
+              url="https://open-source-bazaar.feishu.cn/share/base/view/shrcne4IY9mYAfoo9a69oxyAdTb"
+            />
+          </Col>
+          <Col xs={12} lg={4}>
+            <BountyView
+              icon="✅"
+              title={t('bounty_achievement_submission')}
+              url="https://open-source-bazaar.feishu.cn/share/base/form/shrcn7yHGIOnPNjdZck3eBaiMVc"
+            />
+          </Col>
         </Row>
 
-        {/* Token Rank - full width */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_token_rank')}
-            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb"
-            icon="🪙"
-            colspan={12}
-          />
-        </Row>
+        <BountyView
+          icon="🪙"
+          title={t('bounty_token_rank')}
+          url="https://open-source-bazaar.feishu.cn/share/base/view/shrcn6QBgImHEjFH5qDf5tjmrzb"
+        />
 
-        {/* Hero Rank - full width */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_hero_rank')}
-            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc"
-            icon="🦸"
-            colspan={12}
-          />
-        </Row>
+        <BountyView
+          icon="🦸"
+          title={t('bounty_hero_rank')}
+          url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnyrOkRfqSAjWEjCQ9T4OOwc"
+        />
 
-        {/* Debt Rank - full width */}
-        <Row className="g-4 mb-4">
-          <BountyView
-            title={t('bounty_debt_rank')}
-            url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd"
-            icon="💳"
-            colspan={12}
-          />
-        </Row>
+        <BountyView
+          icon="💳"
+          title={t('bounty_debt_rank')}
+          url="https://open-source-bazaar.feishu.cn/share/base/view/shrcnImOzkBXW3okKp3nLskPMgd"
+        />
       </Container>
     </>
   );
diff --git a/pages/finance/index.module.less b/pages/finance/index.module.less
index 5a22d03..a55fb82 100644
--- a/pages/finance/index.module.less
+++ b/pages/finance/index.module.less
@@ -26,6 +26,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 1rem;
+    list-style: none;
   }
 
   .statCard {
diff --git a/styles/Bounty.module.less b/styles/Bounty.module.less
index b466a80..54a6976 100644
--- a/styles/Bounty.module.less
+++ b/styles/Bounty.module.less
@@ -74,7 +74,6 @@
   border-bottom: 3px 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: 1.3rem;
@@ -87,20 +86,5 @@
 }
 
 .iframeContainer {
-  position: relative;
-  border-radius: 12px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  width: 100%;
-  overflow: hidden;
-
-  @media (max-width: 768px) {
-    aspect-ratio: 1 / 1; // More square on mobile
-  }
-}
-
-.bountyIframe {
-  border: none;
-  border-radius: 12px;
-  width: 100%;
-  height: 100%;
 }