hackatons (#55)

* feat(hackathon): add hackathon page static * feat(hackathon): enhance animation effects on hackathon cards * feat(hackathon): update hackathon screenshots and add new projects
2025-08-24 22:57:03 +07:00
parent b38afd2b44
commit a157e11e13
3 changed files with 141 additions and 0 deletions
@@ -0,0 +1,79 @@
+'use client';
+
+import hackathons from '@/data/hackathons.json';
+import { buttonVariants } from '@components';
+import { cn } from '@utils';
+import Image from 'next/image';
+import { HiOutlineCode } from 'react-icons/hi';
+import { motion } from 'framer-motion';
+
+export default function HackathonsPage() {
+  const sortedHackathons = [...hackathons];
+
+  if (sortedHackathons.length === 0) {
+    return (
+      <section className="min-h-screen bg-background container py-10 flex items-center justify-center">
+        <p className="text-muted-foreground text-lg">No hackathon projects available yet.</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="min-h-screen bg-background container py-10">
+      <motion.div
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+        initial="hidden"
+        animate="visible"
+        variants={{
+          visible: { transition: { staggerChildren: 0.12 } },
+        }}
+      >
+        {sortedHackathons.map((hackathon, idx) => (
+          <motion.div
+            key={hackathon.project_title}
+            className="rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 bg-card group"
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: idx * 0.08, type: 'spring', stiffness: 60 }}
+            whileHover={{ scale: 1.03, boxShadow: '0 8px 32px rgba(0,0,0,0.10)' }}
+          >
+            <motion.div className="h-48 bg-muted relative overflow-hidden rounded-t-xl">
+              <Image
+                src={`https://cdn.asepharyana.tech/imphnen/hackatons/${hackathon.file_name}`}
+                alt={hackathon.project_title}
+                fill
+                className="object-cover object-top group-hover:scale-105 transition-transform duration-500"
+                sizes="(max-width: 768px) 100vw, 33vw"
+                unoptimized
+              />
+            </motion.div>
+            <div className="p-6">
+              <h3 className="text-lg font-semibold mb-3 text-foreground">
+                {hackathon.project_title}
+              </h3>
+              <div className="space-y-2 mb-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <HiOutlineCode className="w-4 h-4" />
+                  <span>{hackathon.team_name}</span>
+                </div>
+              </div>
+              <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                {hackathon.description}
+              </p>
+              <a
+                href={hackathon.repo_link}
+                target="_blank"
+                className={cn(
+                  buttonVariants({ variant: 'bordered' }),
+                  'w-full text-sm'
+                )}
+              >
+                Lihat Proyek
+              </a>
+            </div>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+}
@@ -0,0 +1,58 @@
+[
+  {
+    "team_name": "Lineproject",
+    "project_title": "LaporMerdeka",
+    "description": "Platform pelaporan infrastruktur publik Indonesia yang memungkinkan warga melaporkan masalah dengan cepat dan mudah untuk Indonesia yang lebih baik.",
+    "repo_link": "https://github.com/MANFIT7/lapormerdeka",
+    "screenshot": "https://drive.google.com/open?id=1tbOJKacQGsfldr5TsWtzNKL65iCpADz2",
+    "file_name": "Screenshot 2025-08-22 062036 - Fafnir.png"
+  },
+  {
+    "team_name": "Aliansi switch",
+    "project_title": "News-ai",
+    "description": "ai agent untuk memilah beritah hoax dengan asli",
+    "repo_link": "https://github.com/7FIl/News-AI",
+    "screenshot": "https://drive.google.com/open?id=1IYoOB1zqL70tpxaeopdS6VtuL8hoqpPn",
+    "file_name": "Screenshot 2025-08-22 223626 - 7Fil.png"
+  },
+  {
+    "team_name": "Sodev Sedap",
+    "project_title": "Sejarah Alternatif ID",
+    "description": "Website AI Agent yang dapat memberikan user pov bagaimana jika user ada di situasi tersebut menggunakan reka adegan dengan pendekatan teks dengan gaya novel",
+    "repo_link": "https://github.com/rizalkr/sejarah-alternatif-id/tree/main",
+    "screenshot": "https://drive.google.com/open?id=1TMUgayvtI45gU79I-0SokQnPJP6LHQaC",
+    "file_name": "Screenshot 2025-08-23 115137 - Rizal Kurnia.png"
+  },
+  {
+    "team_name": "Muhammad Harafsan Alhad",
+    "project_title": "Elysia AI Kemerdekaan Indonesia",
+    "description": "“Sebuah chatbot AI interaktif yang menampilkan Elysia (dari Honkai Impact) yang menjawab pertanyaan tentang Kemerdekaan Indonesia dengan gaya khas Elysia, lengkap dengan fitur kuis interaktif.",
+    "repo_link": "https://github.com/rafsanalhad/elysia-ai-kemerdekaan",
+    "screenshot": "https://drive.google.com/open?id=1_QE59lgHNbJfuVikJ5KT0_85tbJc6pMo",
+    "file_name": "Screenshot 2025-08-23 131756 - Ralhad Alhad.png"
+  },
+  {
+    "team_name": "RaflanGT",
+    "project_title": "Ecobot",
+    "description": "EcoBot adalah AI Agent yang hadir untuk menjawab tantangan pengelolaan sampah dan keterbatasan digitalisasi di masyarakat. Melalui WhatsApp yang akrab bagi warga, EcoBot memandu pemilahan sampah dengan analisis gambar berbasis AI sekaligus menumbuhkan kesadaran lingkungan. Kemerdekaan bukan hanya bebas dari penjajahan, tetapi juga kesadaran kolektif untuk mengelola hal-hal sederhana yang berdampak besar. Dengan langkah kecil seperti ini, desa dan masyarakat dapat mandiri secara digital, menjaga lingkungan, dan bersama-sama membawa Indonesia terus maju.",
+    "repo_link": "https://github.com/mycoderisyad/raflangt-ecobot",
+    "screenshot": "https://drive.google.com/open?id=1lj5DMJfxSrCwyNSLIlq-GQohJHCUDU1-",
+    "file_name" : "Screenshot 2025-08-23 223413 - MRisyad Raflan.png"
+  },
+  {
+    "team_name": "Tchh Tidak Akan",
+    "project_title": "Merdeka Quiziz",
+    "description": "Merdeka Quiziz merupakan web kuis yang menggunakan tema Kemerdekaan Indonesia dengan fitur gamifikasi yang membuat kuis menjadi menyenangkan, dimana setiap kuis dibuat oleh Mera (AI) dan dipersonalisasi untuk pengguna. Selain itu  di Merdeka Quiziz pengguna juga dapat membahas sejarah Indonesia bersama Mera (AI).",
+    "repo_link": "https://gitlab.com/personal-projects9094234/merdeka-quiziz",
+    "screenshot": "https://drive.google.com/open?id=1U_UMaYABLjbO38GA9DopXebDWznFKQcI",
+    "file_name" : "Screenshot 2025-08-24 at 09.15.06 - Khen Cahyo.png"
+  },
+  {
+    "team_name": "Pengen Ikut tapi Bingung Mau Buat Apa",
+    "project_title": "IMMPHNEN (Ingin Menjadi Mesin Pencari Handal Namun Enggan Ngecrawl)",
+    "description": "Mesin pencari yang didesain untuk memerdekakan para pencari informasi dari tracker-tracker yang berlebihan (lelah bukan habis mencari A, nongol iklan A dimana-mana?). Memiliki fitur ringkasan pencarian, serta filter negatif penelusuran (judi & pornografi). Dibuat dengan LangSearch dan Lunos(ChatGPT 5.0).",
+    "repo_link": "https://gitlab.com/myracledev/py-search-engine",
+    "screenshot": "https://drive.google.com/open?id=1xNFtvGSLfWwdA4Mx46S7bx2nmwpt5CXA",
+    "file_name" : "{CBBB6849-BC8E-4435-9C6A-8C88C83287DF} - Mohamad Yusuf Rizaldi.png"
+  }
+]
@@ -7,6 +7,10 @@
    "title": "Event",
    "link": "/events"
  },
+  {
+    "title": "Hackathon",
+    "link": "/hackathon"
+  },
  {
    "title": "Testimoni",
    "link": "/testimonials"