feat(acaab): implementasi halaman prestasi & karya mahasiswa

2026-05-29 10:30:26 +07:00
parent 0ebc25809b
commit b8099c1dca
33 changed files with 5301 additions and 51 deletions
@@ -0,0 +1,78 @@
+import type { Achievement } from '../data';
+import { Trophy, Calendar } from 'lucide-react';
+import { useLang } from '../context/LanguageContext';
+
+interface AchievementCardProps {
+  achievement: Achievement;
+  onReadMore: (achievement: Achievement) => void;
+}
+
+export default function AchievementCard({ achievement, onReadMore }: AchievementCardProps) {
+  const { t } = useLang();
+
+  return (
+    <article className="bg-white rounded-lg overflow-hidden group hover:-translate-y-1 transition-all duration-300 shadow-md hover:shadow-xl border border-slate-200 flex flex-col h-full relative">
+      <div className="absolute top-0 left-0 w-full h-1 bg-primary-navy z-10 group-hover:bg-primary-gold transition-colors"></div>
+
+      <div className="relative h-56 overflow-hidden bg-slate-100">
+        <img
+          src={achievement.image}
+          alt={achievement.title}
+          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          referrerPolicy="no-referrer"
+          onError={(e) => {
+            (e.target as HTMLImageElement).src = 'https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN';
+          }}
+        />
+        <div className="absolute top-3 left-3 bg-white/95 backdrop-blur text-primary-navy font-bold px-3 py-1 rounded shadow-sm flex items-center gap-1.5 text-xs">
+          <Trophy size={14} className="text-primary-gold" />
+          {achievement.rank}
+        </div>
+      </div>
+
+      <div className="p-6 flex flex-col flex-grow">
+        <div className="flex items-center gap-3 mb-3">
+          <span className="text-untan-blue text-xs font-bold uppercase tracking-wider">
+            {achievement.category}
+          </span>
+          <span className="text-slate-400 text-xs font-medium flex items-center gap-1 border-l border-slate-300 pl-3">
+            <Calendar size={12} />
+            {achievement.year}
+          </span>
+        </div>
+
+        <h3 className="text-xl font-bold font-display text-primary-navy mb-3 leading-snug group-hover:text-untan-blue transition-colors">
+          {achievement.title}
+        </h3>
+
+        <p className="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
+          {achievement.description}
+        </p>
+
+        <div className="mt-auto border-t border-slate-100 pt-4">
+          <div className="flex justify-between items-center mb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded bg-primary-navy/5 flex items-center justify-center text-primary-navy font-bold text-xs ring-1 ring-primary-navy/10">
+                {achievement.avatar}
+              </div>
+              <div>
+                <span className="font-bold text-slate-800 block text-sm">{achievement.team}</span>
+                <span className="text-slate-500 block text-xs">{achievement.generation}</span>
+              </div>
+            </div>
+            <span className="bg-slate-100 text-slate-600 text-[10px] px-2 py-1 rounded font-bold uppercase tracking-wide">
+              {achievement.level}
+            </span>
+          </div>
+
+          <button
+            onClick={() => onReadMore(achievement)}
+            className="w-full py-2.5 rounded bg-primary-navy/5 text-primary-navy font-bold hover:bg-primary-navy hover:text-white transition-all duration-300 text-sm min-h-[44px]"
+          >
+            {t.achievement.readMore}
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+}