added responsiveness, animation and string manipulation

.env

@@ -4,6 +4,7 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
+NEXT_BASE_URL="http://localhost:3000"
 # DATABASE_URL="postgresql://postgres:postgres@localhost:5432/mydb?schema=prisma"
 
 # #!! fill this

next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
   images: {
     remotePatterns: [
       {
@@ -8,7 +9,9 @@ const nextConfig = {
       },
     ],
   },
-  reactStrictMode: true,
+  env: {
+    BASE_URL: process.env.BASE_URL,
+  },
 };
 
 export default nextConfig;

src/assets/data/bpaList.tsx

@@ -0,0 +1,214 @@
+import { bpaType } from "@/components/BPAinfo";
+
+export const bpaListGeneral: bpaType[] = [
+  {
+    name: "Ketua Angkatan",
+    jobDesc:
+      "Memiliki tugas utama memimpin organisasi dan bertanggung jawab atas keputusan di dalamnya. Menjadi perwakilan STEI-K 2023 di ranah antarfakultas TPB dan kegiatan lain di ITB. Mengkoordinasikan seluruh bidang dan divisi dalam BPA STEI-K 2023. Mengawasi kinerja BPA dan memonitoring keberjalanan program kerja yang dilaksanakan. Mengkoordinasikan program kerja serta timeline-nya.",
+    members: [
+      {
+        name: "Surya Suharna",
+        imgUrl: "",
+      },
+    ],
+  },
+  {
+    name: "Wakil Ketua Angkatan",
+    jobDesc:
+      "Membantu memimpin organisasi dan berdiskusi dengan Ketua Angkatan mengenai keputusan-keputusan yang akan di ambil dalam BPA. Menggantikkan Ketua Angkatan dalam mewakili fakultas jika Ketua Angkatan berhalangan hadir. Mengkoordinasikan seluruh bidang dan divisi dalam BPA STEI-K 2023. Mengawasi kinerja BPA dan memonitoring keberjalanan program kerja yang dilaksanakan Mengkoordinasikan program kerja serta timeline-nya.",
+    members: [
+      {
+        name: "Persada Ramiiza Abyudaya",
+        imgUrl: "",
+      },
+    ],
+  },
+  {
+    name: "Sekretaris",
+    jobDesc:
+      "Membuat arsip rapat setiap bidang atau divisi yang dikelola. Membuat template dokumen seperti template proposal, laporan, dan lain-lain. Sekretaris 1 akan mengelola arsip dokumen Bidang Internal divisi Public Relation, Publication, Design, Creative Event, dan Project. Sekretaris 2 akan mengelola arsip dokumen Bidang External divisi Akademic, IT, Punakawan, HRD, dan Finance",
+    members: [
+      { name: "Bevinda Vivian", imgUrl: "" },
+      { name: "Zheannetta Apple", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Bendahara",
+    jobDesc:
+      " Merekap pemasukkan dan pengeluaran BPA STEI-K 2023. Memiliki wewenang dalam persetujuan pengeluaran keuangan. Melakukan koordinasi pembukaan rekening STEI-K 2023. Menerima laporan pemasukkan dari Finance. Melakukan pembukuan di akhir periode.",
+    members: [
+      { name: "Nayla Zahira", imgUrl: "" },
+      { name: "Wardatul Khoiroh", imgUrl: "" },
+    ],
+  },
+  {
+    name: "TPB Committee",
+    jobDesc:
+      "Menghadiri setiap kegiatan di kongres ITB sebagai perwakilan STEI-K 2023. Membuat rekap informasi pada setiap pertemuan kongres ITB. Membuat wadah aspriasi massa STEI-K 2023 dan menyampaikannya di rapat kongres ITB. Melaporkan dan mengkomunikasikan hasil kegiatan di kongres ITB pada massa STEI-K 2023.",
+    members: [{ name: "Naufarrel Zhafif Abhista", imgUrl: "" }],
+  },
+  {
+    name: "General Manager",
+    jobDesc:
+      "Mengkoordinasikan setiap divisi yang kelola. Bertanggung jawab atas keputusan setiap bidang dan divisi. Mengkoordinasikan arahan kerja bersama Ketua dan Wakil Angkatan. Melaporkan rekap progress program kerja pada Ring 1 BPA STEI-K 2023. Mengarahkan, melaksanakan, dan mengawasi setiap divisi untuk setiap arahan kerja yang dijalankan ",
+    members: [
+      {
+        name: "Wisa Ahmaduta Dinutama",
+        position: "GM External",
+        imgUrl: "",
+      },
+      {
+        name: "Najwa Kahani Fatima",
+        position: "GM External",
+        imgUrl: "",
+      },
+      {
+        name: "Qodri Azkarayan",
+        position: "GM Internal",
+        imgUrl: "",
+      },
+      {
+        name: "Farrel Athalla Putra",
+        position: "GM Internal",
+        imgUrl: "",
+      },
+      {
+        name: "Muhammad Azizdzaki Khrisnanurmuflih",
+        position: "GM of Finance",
+        imgUrl: "",
+      },
+      {
+        name: "Muhamad Hasbullah",
+        position: "GM of HRD",
+        imgUrl: "",
+      },
+    ],
+  },
+];
+
+export const bpaListExternal: bpaType[] = [
+  {
+    name: "Akademik",
+    jobDesc:
+      "Melakukan dan membuat survey jurusan, info jurusan, info mata kuliah, dan informasi tambahan yang berkaitan dengan akademik. Tutor sebaya UTS Semester 2. Tutor sebaya UAS Semester 2. Tutor sebaya UP Semester 2. Membuat Try-Out Matematika, Fisika, Daspro, dan Kimia setelah setiap kali dilaksanakan Tutor Sebaya. Tutor sebaya KBF dan Praktikkum Daspro. Membuat video pembelajaran Kimia. Membuat drive terpusat akademik STEI-K 2023. Membuat rangkuman materi 1 semester atau materi UTS dan UAS.",
+    members: [
+      { name: "Zulfaqqar Nayaka Athadiansyah", imgUrl: "" },
+      { name: "Mochammad Fariz Rifqi Rizqulloh", imgUrl: "" },
+      { name: "Muhammad Fathur Rizky", imgUrl: "" },
+      { name: "Darrel Adinarya Sunanda", imgUrl: "" },
+      { name: "Azfa Radhiyya Hakim", imgUrl: "" },
+      { name: "Razi Rachman Widyadhana", imgUrl: "" },
+    ],
+  },
+  {
+    name: "IT",
+    jobDesc:
+      "Merencanakan dan membuat website yang mengintegrasi informasi penting terkait akademik, kemahasiswaan, kegiatan STEI-K 2023, program kerja, dan lain-lain.Merevisi setiap bug yang terjadi. Mengembangkan website menjadi lebih interaktif dengan fitur-fitur yang bermanfaat bagi massa STEI-K 2023. Mengembangkan fitur kritik dan saran di Website.",
+    members: [
+      { name: "Yonatan Edward Njoto", imgUrl: "" },
+      { name: "Michael Ballard Isaiah Silaen", imgUrl: "" },
+      { name: "Dave Daniell Yanni", imgUrl: "" },
+      { name: "Alvin Christopher Santausa", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Punakawan",
+    jobDesc:
+      "Melakukan  pencarian informasi terkait penerimaan mahasiswa baru STEI-K 2024. Melakukan pencarian informasi terkait kehidupan di Jatinangor, seperti informasi tempat makan, tempat healing, tempat belajar, kost ataupun transportasi. Berkoordinasi dengan divisi akademik mengenai data survei STEI-K 2023. Membuat persiapan materi dari pencarian informasi dan data survei yang dituangkan ke dalam PPT. Melakukan persiapan welpar (games, rundown, dan lain-lain). Melakukan kegiatan pengenalan awal mengenai dunia perkuliahan dan lingkungan di STEI-K terhadap Massa STEIK-24 (Welpar). Melaksanakan gathering dengan Massa STEI-K 24 dan STEI-K 23. Menerapkan mentoring berkelompok antar STEI-K 24 dan STEI-K 23 sebagai mentor.",
+    members: [
+      { name: "Ahsan Malik Al Farisi", imgUrl: "" },
+      { name: "Naura Ayurachmani", imgUrl: "" },
+      { name: "Mayla Yaffa Ludmilla", imgUrl: "" },
+      { name: "Gabriela Jennifer Sandy", imgUrl: "" },
+      { name: "Raka Daffa Iftikhaar", imgUrl: "" },
+      { name: "Muhammad Adha Ridwan", imgUrl: "" },
+      { name: "Jessica Allen", imgUrl: "" },
+    ],
+  },
+];
+export const bpaListInternal: bpaType[] = [
+  {
+    name: "Publikasi",
+    jobDesc: "",
+    members: [
+      { name: "Princessfa Azzahra Alvin", imgUrl: "" },
+      { name: "Nazwan Siddqi Muttaqin", imgUrl: "" },
+      { name: "Haegen Quinston Sutomo", imgUrl: "" },
+      { name: "Stanislaus Ardy Bramantyo", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Creative Event",
+    jobDesc: "",
+    members: [
+      { name: "Desati Dinda Saraswati", imgUrl: "" },
+      { name: "Muhammad Timur Kanigara", imgUrl: "" },
+      { name: "Adam Joaquin Girsang", imgUrl: "" },
+      { name: "Alma Felicia Vielrizki", imgUrl: "" },
+      { name: "Hasri Fayadh Muqaffa", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Desain",
+    jobDesc: "",
+    members: [
+      { name: "Leticia Aldina Trulykinanti", imgUrl: "" },
+      { name: "Aulia Azka Azzahra", imgUrl: "" },
+      { name: "Naila Selvira Budiana", imgUrl: "" },
+      { name: "Frederiko Eldad Mugiyono", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Public Relation",
+    jobDesc:
+      " Membuat broadcast yang dikirimkan pada massa STEI-K 2023 sesuai program kerja bidang divisi terkait. Membuat contact person untuk teman-teman STEI-K yang sakit dan menindaklanjuti dengan memberikan bantuan makan dan obat-obatan. Membuat contact person untuk teman-teman STEI-K yang mengalami pelecehan seksual dan bullying untuk ditinjau dan ditindaklanjuti. Mendata massa STEI-K yang mendapatkan prestasi untuk diberikan appreciation post. Mendata massa STEI-K untuk pengajuan keringanan UKT dari IOM.",
+    members: [
+      { name: "Kevin Azra", imgUrl: "" },
+      { name: "Muhammad Faiz Alfikrona", imgUrl: "" },
+      { name: "Muhammad Aymar Barkhaya", imgUrl: "" },
+      { name: "Kefas Kurnia Jonathan", imgUrl: "" },
+      { name: "Aliya Harta Ary Utama", imgUrl: "" },
+      { name: "Adinda Putri", imgUrl: "" },
+      { name: "Henrycus Hugatama Risaldy", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Project",
+    jobDesc:
+      "Melakukan pemilihan dan penyusunan panitia Jaket Angkatan STEI-K 2023. Melakukan pemilihan dan penyusunan panitia Makrab STEI-K 2023. Melakukan pemilihan dan penyusunan panitia IMPACT 2024. Dalam pelaksanaan setiap projectnya, pembentukkan panitia pelaksana kegiatan akan dibentuk melalui recruitment terbuka kepada massa STEI-K 2023. Pada recruitment terbuka tersebut, anggota BPA diperkenankan untuk mengajukan diri sebagai panitia project. Pada akhirnya penyeleksian panitia akan dilakukan oleh Divisi Project dan mengumumkannya ke massa STEI-K 2023.  ",
+    members: [
+      { name: "Allodya Qonnita Arofa", imgUrl: "" },
+      { name: "Wijaksara Aptaluhung", imgUrl: "" },
+      { name: "Brian Albar Hadian", imgUrl: "" },
+    ],
+  },
+  {
+    name: "HRD",
+    jobDesc:
+      "Melakukan penilaian pada kinerja setiap anggota BPA STEI-K 2023. Penilaian tersebut dituangkan di dalam data tabel yang direkap berkala. Menentukkan best staff BPA STEI-K 2023 setiap bulan atau dalam skala waktu yang ditentukkan. Best staff tersebut akan dipublikasikan di sosial media instagram STEI-K 2023. Menyusun SOP yang diperlukan untuk landasan aturan yang dipatuhi oleh seluruh BPA STEI-K 2023. Mengadakan kegiatan bonding BPA STEI-K 2023 dengan tujuan mendekatkan dan menguatkan kedekatan antar BPA STEI-K 2023. Melakukan rapat evaluasi jika terdapat divisi yang dinilai memiliki kendala atau kinerja tim yang tidak sesuai dengan target.",
+    members: [
+      { name: "Barru Adi Utomo", imgUrl: "" },
+      { name: "Arqila Surya Putra", imgUrl: "" },
+      { name: "Naomi Risaka Sitorus", imgUrl: "" },
+      { name: "Lidya Marthadilla", imgUrl: "" },
+      { name: "Dita Maheswari", imgUrl: "" },
+      { name: "Sendi Putra Alicia", imgUrl: "" },
+      { name: "Aldoy Fauzan Avanza", imgUrl: "" },
+      { name: "Ni Made Sekar Jelita Parameswari", imgUrl: "" },
+      { name: "Anella Utari Gunadi", imgUrl: "" },
+      { name: "Rayhan Hidayatul Fikri", imgUrl: "" },
+      { name: "Muhammad Fithra Rizki", imgUrl: "" },
+    ],
+  },
+  {
+    name: "Finance",
+    jobDesc: "",
+    members: [
+      { name: "Nawaf Amjad Rizqi Aldaha Ismail", imgUrl: "" },
+      { name: "Nurul Na'im Natifah", imgUrl: "" },
+      { name: "Sabilul Huda", imgUrl: "" },
+      { name: "Muhammad Raihaan Perdana", imgUrl: "" },
+      { name: "Nakeisha Valya Shakila", imgUrl: "" },
+    ],
+  },
+];

src/components/BPACard.tsx

@@ -8,7 +8,7 @@ export type memberBPA = {
 };
 const BPACard = ({ imgUrl, name, position }: { imgUrl: string; name: string; position?: string }) => {
   return (
-    <div className="w-[23%] text-center shadow-md border-2 rounded-xl bg-slate-200">
+    <div className="w-[18%] min-w-[180px] max-w-[200px] aspect-[3/4] h-auto text-center drop-shadow-xl border-4 rounded-xl flex flex-col bg-slate-50 border-slate-50 hover:scale-110 duration-150 ease-in hover:shadow-lg hover:font-semibold flex-grow-0">
       <Image
         src={imgUrl || "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"}
         alt={name}
@@ -17,8 +17,10 @@ const BPACard = ({ imgUrl, name, position }: { imgUrl: string; name: string; pos
         className="object-cover w-full h-auto"
         blurDataURL={imgUrl}
       />
-      <p className="border-t-2 border-slate-300 px-2 py-3 font-bold">{name}</p>
-      {position && <p className="border-t-2 border-slate-300 px-2 py-3 font-bold">{position}</p>}
+      <div className="flex justify-center items-center flex-grow">
+        <p className="border-t-2 border-slate-300 px-2 py-3">{name}</p>
+        {position && <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>}
+      </div>
     </div>
   );
 };