AI黑客马拉松活动页面

🚀 Agentathon - MCP + 代理 AI 黑客 竞赛

官方登录页面 代理，一场30小时的黑客马拉松，专注于使用 模型上下文协议（MCP） 和 AI 代理.

📅 活动详情

• 📆 日期： 2025年11月8日至9日
• ⏰ 持续时间： 30小时不间断黑客攻击
• 📍 地点： PES大学13楼图书馆
• 💰 奖金池： ₹50,000
• 👥 团队： 40个团队，每个团队4名成员
• 🎯 集中： MCP集成、AI代理、多服务编排器

✨ 特性

本网站展示：

🎨 视觉效果

• 自定义光标动画 -带有粒子轨迹的橙色发光光标
• 玻璃形态导航栏 -通过微光动画增强玻璃效果
• 滚动触发动画 -所有部分的淡入效果
• 文本显示动画 -逐字揭示效果
• 六边形图案背景 -动态十六进制图案
• 橙色光晕效果 -贯穿始终的标志性橙色主题

📱 章节

• 英雄专区 -引人注目的介绍和活动细节
• 关于Agentathon -主题、焦点、领域和团队结构
• 主要特点 -导师和评分标准
• 时间线 -完成30小时的活动日程
• 奖项 - ₹50,000个奖金池明细+认证
• 注册 -直接链接到Google Forms注册
• 联系 -联系表格和联系方式
• 页脚 -社交链接和组织信息

🛠️ 技术栈

• 框架： Next.js 16.0 使用App Router
• 语言： TypeScript
• 造型：
  • Tailwind CSS
  • 自定义CSS动画
  • 玻璃化效应
• UI组件：
  • Radix UI图元
  • 自定义shadcn/ui组件
• 字体： 谷歌字体的Geist和Geist Mono
• 图标： Lucide反应
• 分析： Vercel分析
• 包管理器： pnpm

🚀 入门指南

先决条件

• 已安装Node.js 18+
• 已安装pnpm（或npm/yarn）

安装

1. 克隆存储库

   复制

   git clone https://github.com/Seaweed-Boi/Agentathon.git
   cd Agentathon
   

2. 安装依赖项

   复制

   pnpm install
   

3. 运行开发服务器

   复制

   pnpm dev
   

4. 打开浏览器 导航至 http://localhost:3000

构建命令

# Development
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint

📁 项目结构

Agentathon/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout with metadata
│   ├── page.tsx                 # Home page
│   └── globals.css              # Global styles & animations
├── components/                   # React components
│   ├── cursor-glow.tsx          # Custom cursor effect
│   ├── dynamic-island-header.tsx # Glassmorphism navbar
│   ├── fade-in-section.tsx      # Scroll animation wrapper
│   ├── text-reveal.tsx          # Text reveal animation
│   ├── hero-section.tsx         # Hero/landing section
│   ├── info-section.tsx         # About section
│   ├── features-section.tsx     # Features & scoring
│   ├── timeline-section.tsx     # Event schedule
│   ├── prizes-section.tsx       # Prizes & certifications
│   ├── registration-section.tsx # Registration CTA
│   ├── contact-section.tsx      # Contact form
│   ├── footer.tsx               # Footer with socials
│   └── ui/                      # shadcn/ui components
├── hooks/                        # Custom React hooks
├── lib/                          # Utility functions
├── public/                       # Static assets
└── package.json                 # Dependencies & scripts

🎯 关键组件

自定义光标(cursor-glow.tsx)

• 多层橙色发光效果
• 平滑粒子轨迹动画
• 使用requestAnimationFrame实现60fps的性能
• 高z指数，可查看所有元素

玻璃形态导航栏(dynamic-island-header.tsx)

• 增强背景模糊效果
• 带有橙色色调的渐变背景
• 滚动触发阴影增强
• 悬停时的闪烁动画
• 流畅的导航链接

动画系统

• 褪色部分： 使用交叉点观察器滚动触发淡入淡出
• 文本显示： 逐字逐句地披露，交错延迟
• 可配置的延迟和方向
• 向上/向下滚动时重新触发

🎨 定制

颜色

主配色方案使用橙色(#FF6600).要更改：

• 更新CSS变量 app/globals.css
• 在中修改顺风主题 tailwind.config.ts

动画

调整动画时间：

• components/fade-in-section.tsx -褪色持续时间
• components/text-reveal.tsx -显示时间
• app/globals.css -CSS关键帧动画

内容

更新各个组件文件中的事件详细信息：

• components/hero-section.tsx -主要活动信息
• components/timeline-section.tsx -活动日程
• components/prizes-section.tsx -奖金金额

🔗 注册

报名表： https://forms.gle/gYVheLogyZCHaQhG7

👥 组织机构

编码AI
致力于人工智能、代理和模型上下文协议的学生俱乐部
PES大学

📧 联系

• 电子邮件： encodeai@pes.edu
• 报名截止日期：2025年11月7日

📄 许可证

该项目是Agentathon 2025活动的一部分。

🙏 致谢

• 内置 Next.js
• UI组件来自 shadcn/ui
• 图标来自 Lucide
• 专为Agentathon黑客马拉松活动而设计

准备好构建人工智能的未来了吗？ 立即注册 🚀