[add] Open Source Bounty page based on Lark BI Table views

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') },
     ],
   },

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;

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;
+  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));
+  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;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding-bottom: 75%; // 4:3 aspect ratio
+  width: 100%;
+  overflow: hidden;
+}
+
+.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
+  }
+}

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",

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: '我不在乎',

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: '我不在乎',