simba-index/components/achievements-section.tsx
2025-04-18 19:21:33 +08:00

79 lines
3.4 KiB
TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Trophy, Medal, Award, Star } from "lucide-react"
export default function AchievementsSection() {
const achievements = [
{
year: "2025",
title: "RoboMaster 高校联盟赛 辽宁站",
position: "三等奖",
icon: <Award className="h-8 w-8 text-primary" />,
description:
"与 32 支来自辽宁周边城市的大学参赛队伍同台竞技,直接对阵的队伍有:哈尔滨工业大学 I Hiter 战队、北京邮电大学 鸿雁 战队、沈阳工业大学辽阳分校 赫兹矩阵战队。",
},
{
year: "2024",
title: "RoboMaster 高校联盟赛 山东站",
position: "三等奖",
icon: <Award className="h-8 w-8 text-primary" />,
description:
"与 32 支来自山东周边城市的大学参赛队伍同台竞技,直接对阵的队伍有:北方工业大学 DreamTeam 战队、哈尔滨工业大学威海 HERO 战队。",
},
{
year: "2017",
title: "RoboMaster 区域赛 东部赛区",
position: "三等奖",
icon: <Star className="h-8 w-8 text-primary" />,
description:
"与 29 支大学参赛队伍同台竞技。",
},
]
return (
<section id="achievements" className="py-20 relative overflow-hidden">
<div className="absolute inset-0 grid-pattern opacity-20" />
<div className="absolute left-0 top-0 bottom-0 red-section z-0" />
<div className="container mx-auto px-4 relative z-10">
<div className="flex flex-col md:flex-row gap-8">
<div className="md:w-1/3">
<div className="red-accent pl-4">
<h2 className="text-3xl font-bold mb-2 uppercase"></h2>
<p className="text-xs text-muted-foreground uppercase mb-4 font-mono">ACHIEVEMENTS</p>
</div>
<div className="diagonal-line mb-8"></div>
<div className="content-overlay">
<p className="text-muted-foreground leading-relaxed">
RoboMaster
</p>
</div>
</div>
<div className="md:w-2/3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{achievements.map((achievement, index) => (
<Card key={index} className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
<CardHeader className="flex flex-row items-center gap-4 pb-2 border-b border-white/10">
<div className="p-2 bg-primary/10">{achievement.icon}</div>
<div>
<CardTitle className="text-xl">{achievement.title}</CardTitle>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="text-primary font-mono">{achievement.year}</span>
<span></span>
<span>{achievement.position}</span>
</div>
</div>
</CardHeader>
<CardContent className="pt-4">
<p className="text-muted-foreground leading-relaxed">{achievement.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</div>
</div>
</section>
)
}