[add] Hackathon home page with Lark BI Table API

[Copilot]

Implementation Plan: Hackathon Detail Page with Mock Data

• Create mock data generator for hackathon entities (Agenda, Person, Organization, Prize, Template, Project)
• Create hackathon detail page component at /pages/hackathon/[id].tsx
• Design tech-themed styling with vibrant color scheme
• Add translation keys for all hackathon-related text in all language files (zh-CN, en-US, zh-TW)
• Create reusable components for displaying hackathon sections
• Test the page with development server
• Fix TypeScript type issues
• Update to vibrant, lively color scheme with multiple gradients
• Convert styling from SCSS to LESS
• Implement colorful gradients throughout the page
• Reorganize page layout with optimized section order
• Integrate UserRankView component for prizes display
• Integrate GitCard component for templates display
• Implement horizontal logo layout for organizations
• Simplify participants display to circular avatars only

Preview

Vibrant, energetic design with multiple colorful gradients:

Styling & Layout

Technology:

• LESS styling with vibrant gradient color scheme
• File: styles/Hackathon.module.less

Color Scheme (Vibrant & Lively):

Hero Section:

• Background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) - Purple to pink gradient
• Grid animation: White dots with subtle opacity

Section Titles:

• Gradient text: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) - Pink to red to yellow
• Matching gradient border

Agenda Items (Each type has unique vibrant gradient):

• Workshop: Cyan to lime gradient #00c9ff → #92fe9d
• Presentation: Pink gradient #f5576c → #f093fb
• Coding: Blue cyan gradient #4facfe → #00f2fe
• Break: Yellow to coral gradient #ffd140 → #ff6b6b
• Ceremony: Purple gradient #667eea → #764ba2

Cards:

• Dark/Vibrant cards: linear-gradient(135deg, #667eea, #764ba2) - Purple gradient
• Light/Bright cards: linear-gradient(135deg, #fa709a, #fee140) - Pink to yellow gradient
• Project cards: linear-gradient(135deg, #fa709a 0%, #fee140 100%) - Pink to yellow
• All cards have colorful shadows and enhanced hover effects

Interactive Elements:

• Score circles: Cyan gradient #00f2fe → #4facfe
• Avatars: Gradient borders with pink tones
• Skill badges: Purple gradient #667eea → #764ba2
• Info cards: Semi-transparent with glassmorphism effect

Page Layout (Reorganized):

1. Header: Agenda and Prizes displayed side-by-side in 2 columns
   • Prizes use <UserRankView /> component from idea-react
2. Mid-Front: Organizations displayed as horizontal logo cloud
   • Clean centered layout with hover effects
3. Mid-Back: Templates displayed using <GitCard /> component, 3-4 per row
   • Standardized Git repository card styling
4. Mid-Back: Projects displayed in narrow cards, 3-4 per row
   • Score circles prominently displayed
5. Footer: Participants shown as circular avatars only (80px)
   • Cloud layout with centered alignment
   • Detailed information hidden, names in tooltips
   • Hover effects for visual feedback

Component Integration:

• Prizes: Uses <UserRankView /> from idea-react package for ranking visualization
• Templates: Uses <GitCard /> component for standardized repository card display
• Organizations: Horizontal logo grid (100px each) with grayscale hover effect
• Agenda items: Each type has unique vibrant gradient backgrounds with color-coded left borders
• Project cards: Vibrant pink-to-yellow gradient with high contrast dark text
• Participant avatars: Circular design with gradient borders and hover animations

Features Implemented

The page displays all hackathon data in organized sections with an energetic, modern aesthetic:

✅ Data Structures: All requested entities (Agenda, Person, Organization, Prize, Template, Project)
✅ Mock Data Generator: Comprehensive mock data in models/Hackathon.ts
✅ Dynamic Routing: Page accessible at /hackathon/[id] with any ID
✅ Vibrant Design Inspired by Hack Club:

• Multiple bright, colorful gradients throughout
• Each section has unique color scheme
• Enhanced hover effects and animations
• Glassmorphism effects on info cards
  ✅ Component Reuse:
• <UserRankView /> for prizes ranking display
• <GitCard /> for templates display
• Horizontal logo layout for organizations
  ✅ Responsive Layout: Using React Bootstrap components throughout
  ✅ Full i18n Support: Complete translations for zh-CN, en-US, and zh-TW
  ✅ LESS Styling: Unified styling approach using LESS preprocessor
  ✅ Modern Aesthetics: Vibrant, energetic design matching contemporary hackathon websites

Human changes

1. [add] Hackathon types & models based on MobX-Lark
2. [add] Activity model & card component (resolve 飞书版【开源黑客松】主页 #47)
3. [add] Query API of BI Table schema
4. [optimize] support Ownership Transfer in copying Lark documents
5. [migrate] replace SCSS with LESS for CSS
6. [remove] Undici proxy agent
7. [remove] useless codes in Hackathon page

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[TechQuery]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx

[Copilot]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx

Updated the color scheme to use a blue-purple gradient similar to the HOP reference. Changes include:

• Hero background: radial-gradient from #312e81 → #1e1b4b → #0f172a (not too dark/bright)
• Replaced cyan accents with indigo (#6366f1, #4f46e5)
• Improved foreground/background contrast with semi-transparent backgrounds
• All cards and sections now have better visibility

Commit: ef55436

[TechQuery]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx

@copilot 我要改的是 Card 的背景色，不是 Badge 的背景色…… 你写的浅色卡片也分不出文字和背景，能不能用渐变粉色做背景？还有，要统一用 LESS。

同时按如下顺序排列内容：

1. 头部：日程和奖项并列排，并用无框卡片纵向排列各奖项
2. 中前：协办组织也用无框卡片纵向排列组织内容
3. 中后：项目模板、参赛项目，都各自用窄卡片排列每项，每行 3 ~ 4 项
4. 尾部：参赛者以圆头像云集中排列，其它信息隐藏

[Copilot]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx
...

已完成所有修改：

1. 卡片背景改为渐变粉色

• 所有卡片（Agenda、Prize、Organization、Template、Project）使用粉色渐变：linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(236, 72, 153, 0.08))
• Badge 保持不变（紫色渐变）

2. 统一使用 LESS

• 删除 Hackathon.module.scss
• 创建 Hackathon.module.less

3. 内容重新排列

• ✅ 头部：日程和奖项并列（2栏），奖项用无框纵向卡片
• ✅ 中前：协办组织用无框纵向卡片
• ✅ 中后：项目模板窄卡片，每行3-4项
• ✅ 中后：参赛项目窄卡片，每行3-4项
• ✅ 尾部：参赛者仅显示圆形头像（80px）云集排列

4. 无框卡片

• Prize 和 Organization: border: none; border-radius: 0;

Commit: a167b04

由于环境限制无法运行服务器截图，但所有代码更改已完成并推送。主要变化：

• 所有卡片现在使用粉色渐变背景而不是深蓝色
• 页面布局完全按要求重组
• 参与者只显示圆形头像，无详细信息
• 奖项和组织为无框设计

[TechQuery]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx

@copilot 我要改的是 Card 的背景色，不是 Badge 的背景色…… 你写的浅色卡片也分不出文字和背景，能不能用渐变粉色做背景？还有，要统一用 LESS。

同时按如下顺序排列内容：

1. 头部：日程和奖项并列排，并用无框卡片纵向排列各奖项
2. 中前：协办组织也用无框卡片纵向排列组织内容
3. 中后：项目模板、参赛项目，都各自用窄卡片排列每项，每行 3 ~ 4 项
4. 尾部：参赛者以圆头像云集中排列，其它信息隐藏

@copilot 我前文合起来的意思是：

• 深色卡片：蓝或紫色渐变背景
• 浅色卡片：粉色渐变背景
• 所有卡片：前景、背景配色高对比度
• 奖项卡片：直接用 idea-react 包里的 <UserRankView />
• 模板卡片：直接用项目中的 <GitCard />

组织样式参考：

[Copilot]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx...

已完成所有更新：

1. 卡片配色方案（高对比度）

• 深色卡片（蓝/紫色渐变）：日程项使用 linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15)) + 白色文字
• 浅色卡片（粉色渐变）：项目卡片使用 linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.1)) + 深色文字
• 所有卡片均有高对比度前景/背景配色

2. 使用现有组件

• ✅ 奖项：使用 <UserRankView /> 组件（来自 idea-react）
• ✅ 模板：使用 <GitCard /> 组件（项目现有）

3. 组织样式

• 采用横向 Logo 云集布局（参考提供的图片）
• Logo 尺寸 100px，居中对齐
• 默认灰度滤镜，悬停时恢复彩色

Commit: e9f2f7d

主要改进：

• UserRankView 自动处理奖项排名和可视化
• GitCard 提供标准化的项目卡片样式
• 组织部分简化为 Logo 展示，更清晰
• 所有卡片背景和文字有明显对比度

[TechQuery]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.tsx

@copilot 我要改的是 Card 的背景色，不是 Badge 的背景色…… 你写的浅色卡片也分不出文字和背景，能不能用渐变粉色做背景？还有，要统一用 LESS。
同时按如下顺序排列内容：

1. 头部：日程和奖项并列排，并用无框卡片纵向排列各奖项
2. 中前：协办组织也用无框卡片纵向排列组织内容
3. 中后：项目模板、参赛项目，都各自用窄卡片排列每项，每行 3 ~ 4 项
4. 尾部：参赛者以圆头像云集中排列，其它信息隐藏

@copilot 我前文合起来的意思是：

• 深色卡片：蓝或紫色渐变背景
• 浅色卡片：粉色渐变背景
• 所有卡片：前景、背景配色高对比度
• 奖项卡片：直接用 idea-react 包里的 <UserRankView />
• 模板卡片：直接用项目中的 <GitCard />

组织样式参考：

@copilot 我说的”XXX 色渐变“指的是纯色，没说有任何透明度…… 把所有渐变色样式里的 rgba 改为 rgb！这样才能实现我说的”所有卡片：前景、背景配色高对比度“！

[Copilot]

@copilot 背景色不要太暗或太亮，可以选择蓝紫色渐变为主，并注意前/背景色对比度，可以参考：https://github.com/FreeCodeCamp-Chengdu/HOP/blob/main/pages/index.t...

已将所有渐变色从 rgba() 改为 rgb()，实现纯色无透明度：

深色卡片（蓝/紫色纯色渐变）

• linear-gradient(135deg, rgb(99, 102, 241), rgb(139, 92, 246))
• 白色文字，高对比度

浅色卡片（粉色纯色渐变）

• linear-gradient(135deg, rgb(244, 114, 182), rgb(236, 72, 153))
• 深色文字 (#1f2937)，高对比度

其他更新

• 信息卡片：rgb(15, 23, 42) 纯色背景
• 所有边框、阴影、文字阴影均为 rgb() 纯色
• 头像边框：rgb(236, 72, 153) 纯色

Commit: 95dbbd7

现在所有卡片都是纯色渐变，前景和背景有明显的高对比度。

[TechQuery]

@copilot 参考 https://hackclub.com/hackathons/ 把配色做得活泼、鲜艳一些，多用渐变色。

[Copilot]

@copilot 参考 https://hackclub.com/hackathons/ 把配色做得活泼、鲜艳一些，多用渐变色。

已更新为活泼、鲜艳的配色方案，参考 Hack Club 风格，使用多种渐变色：

主要改进：

• 英雄区背景：紫色到粉色渐变 #667eea → #764ba2 → #f093fb
• 标题文字：粉-红-黄渐变 #f093fb → #f5576c → #ffd140
• 日程项目：每种类型独特的渐变
  • 工作坊：青-绿渐变 #00c9ff → #92fe9d
  • 演讲：粉红渐变 #f5576c → #f093fb
  • 编程：蓝-青渐变 #4facfe → #00f2fe
  • 休息：黄-珊瑚渐变 #ffd140 → #ff6b6b
  • 典礼：紫色渐变 #667eea → #764ba2
• 项目卡片：粉-黄渐变 #fa709a → #fee140
• 分数圆圈：青色渐变 #00f2fe → #4facfe
• 头像边框：粉色渐变边框
• 所有元素都有彩色阴影和增强的悬停效果

Commit: 74321b3

配色现在更加明亮、活泼，充满活力。

[dosubot]

Related Documentation

Checked 10 published document(s) in 0 knowledge base(s). No updates required.

^{How did I do? Any feedback?}