react update + awards page

package.json

@@ -21,8 +21,8 @@
     "lucide-react": "^0.511.0",
     "motion": "^12.18.1",
     "postcss": "^8.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-fast-marquee": "^1.6.5",
     "react-helmet-async": "^2.0.5",
     "react-infinite-scroll-component": "^6.1.0",

src/App.jsx

@@ -11,6 +11,7 @@ import { DepartmentDetails } from "./pages/DepartmentDetails";
 import PageNotFound from "./pages/404";
 import EmailForm from "./pages/EmailForm";
 import { AnimatePresence } from "motion/react";
+import Awarding from "./pages/Awarding";
 function App() {
   const location = useLocation();
   return (
@@ -22,6 +23,7 @@ function App() {
           <Route path="contact" element={<Contacts />} />
           <Route path="berita" element={<PageNews />} />
           <Route path="logo" element={<Logo />} />
+          <Route path="awarding" element={<Awarding />} />
           <Route path="be" element={<Departments />} />
           <Route path="dp" element={<Departments />} />
           <Route path="*" element={<PageNotFound />} />

src/components/CardKepengurusan.jsx

@@ -3,10 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 export const CardKepengurusan = ({ img, department, nama, deptType, username }) => {
   const location = useLocation();
   const linkRoute = `/${deptType}/${department.toLowerCase()}`;
-
-  const isSlugRoute = /^\/be\/.+\/?$/.test(location.pathname) || /^\/dp\/.+\/?$/.test(location.pathname);
-  const isCurrentRoute = location.pathname === linkRoute;
-  const shouldShowButton = !isSlugRoute && !isCurrentRoute;
+  const shouldShowButton = location.pathname === "/dp" || location.pathname === "/be";
 
   return (
     <div className="flex flex-col gap-6 lg:max-h-[676px] lg:w-[400px]">
@@ -24,13 +21,13 @@ export const CardKepengurusan = ({ img, department, nama, deptType, username })
             <h4 className="text-black text-4xl font-extrabold">{department}</h4>
           </div>
         </div>
-        <div className="flex flex-row gap-5 bg-[#141414]  justify-between items-center w-full h-fit">
+        <div className={`flex flex-row gap-5 bg-[#141414]  ${location.pathname === "/be" || location.pathname === "/dp" || location.pathname === "/awarding" ? "justify-center" : "justify-between"} items-center w-full h-fit`}>
           {nama && (
-            <div className="w-[170px] items-start min-h-[50px]">
+            <div className={` ${location.pathname === "/be" || location.pathname === "/dp" || location.pathname === "/awarding" ? "" : "w-[170px] items-start min-h-[50px]"}`}>
               <h2 className="text-white text-xl font-medium">{nama}</h2>
             </div>
           )}
-          <div className={`${location.pathname === "/be" || location.pathname === "/dp" ? "hidden" : "flex"} flex flex-row gap-3 `}>
+          <div className={`${location.pathname === "/be" || location.pathname === "/dp" || location.pathname === "/awarding" ? "hidden" : "flex"} flex flex-row gap-3 `}>
             <Link to={`https://www.instagram.com/${username}`} target="_blank">
               <img src="/icons/instagram.svg" alt="instagram" />
             </Link>

src/components/Header.jsx

@@ -12,6 +12,7 @@ export default function Header() {
     { to: "/berita", path: "berita", name: "Berita" },
     { to: "/struktur", path: "struktur", name: "Struktur Organisasi" },
     { to: "/contact", path: "contact", name: "Contacts" },
+    { to: "/awarding", path: "awarding", name: "Awards" },
   ];
 
   const aboutLinks = [

src/pages/Awarding.jsx

@@ -0,0 +1,95 @@
+// import { api } from "../services/apiService";
+import AnimatedLongText from "../components/AnimatedLongText";
+import AnimatedLongText2 from "../components/AnimatedLongText2";
+import { CardKepengurusan } from "../components/CardKepengurusan";
+import Transition from "@/components/Transition";
+import nate from "/nate.png";
+
+export default function Awarding() {
+  const awardingData = [
+    {
+      name: "Cassius Thunder",
+      award: "0 arrest",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "0 arrest",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "0 arrest",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "0 arrest",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "0 arrest",
+      img: nate,
+    },
+  ];
+
+  const bestExecTri = [
+    {
+      name: "Cassius Thunder",
+      award: "Triwulan 1",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "Triwulan 2",
+      img: nate,
+    },
+    {
+      name: "Cassius Thunder",
+      award: "Triwulan 3",
+      img: nate,
+    },
+  ];
+  return (
+    <>
+      {<Transition />}
+      <div id="departments" className="bg-[url(/bg/Bg-Low.png)] pt-[108px] flex flex-col items-center pb-[150px] w-full ">
+        <div className="flex flex-col items-center lg:w-[1210px] w-[343px] lg:gap-8 gap-6">
+          <AnimatedLongText className="lg:text-7xl text-[32px] text-center text-[#4B4B4B] font-semibold" text={"EXECUTIVE AWARD"} />
+          <div className="bg-black">
+            <AnimatedLongText className="lg:text-8xl text-[32px] text-center text-white font-bold" text="KABINET DEVORIA" />
+          </div>
+          <AnimatedLongText className="lg:text-4xl text-2xl text-center text-[#4B4B4B] font-semibold lg:tracking-widest" text={"HIMARPL UNIVERSITAS PENDIDIKAN INDONESIA"} />
+          <AnimatedLongText2 className="lg:text-5xl text-2xl text-center text-[#4B4B4B] font-medium tracking-wider" text={"2025"} />
+          <AnimatedLongText
+            className=" text-center text-black font-light"
+            text="Badan Eksekutif bertanggung jawab untuk melaksanakan berbagai kegiatan dan program yang terkait dengan pengembangan dan peningkatan kualitas mahasiswa jurusan rekayasa perangkat lunak. Tugas utama badan eksekutif adalah mengelola dan menjalankan rencana kerja serta keputusan yang telah disepakati bersama oleh anggota himpunan. Dengan demikian, badan eksekutif memiliki peran penting dalam memastikan berjalannya kegiatan dan mencapai visi misi HIMARPL."
+          />
+        </div>
+
+        <div className="flex items-center justify-center w-full pt-5">
+          <div className="flex flex-row flex-wrap lg:gap-x-4 lg:gap-y-12 justify-center my-10 lg:w-[1240px] w-[343px] gap-[55px]">
+            <CardKepengurusan img={nate} department={"Exec 1 Kabinet"} nama={"Cassius Thunder"} />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center w-full pt-5">
+          <div className="flex flex-row flex-wrap lg:gap-x-4 lg:gap-y-12 justify-center my-10 lg:w-[1240px] w-[343px] gap-[55px]">
+            {bestExecTri.map((item, index) => (
+              <CardKepengurusan key={index} img={item.img} department={item.award?.toUpperCase()} nama={item.name?.toUpperCase()} />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center w-full pt-5 mx-4">
+          <div className="flex flex-row flex-wrap lg:gap-x-48 lg:gap-y-28 justify-center my-10 lg:w-[1000px] w-[343px] gap-[55px]">
+            {awardingData.map((item, index) => (
+              <CardKepengurusan key={index} img={item.img} department={item.award?.toUpperCase()} nama={item.name?.toUpperCase()} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/services/apiService.js

@@ -15,8 +15,9 @@ export { api };
 // Fetch department details by type and acronym
 export const fetchDepartmentDetails = async (type, acronym) => {
   try {
-    const response = await axios.get(`https://api.himarpl.org/api/v1/departments?type=${type}&year=2025&acronym=${acronym}`);
-    // .get(`${import.meta.env.VITE_API_URL}/departments?type=${type}&year=2025&acronym=${acronym}`);
+    const response = await axios
+      // .get(`https://api.himarpl.org/api/v1/departments?type=${type}&year=2025&acronym=${acronym}`);
+      .get(`${import.meta.env.VITE_API_URL}/departments?type=${type}&year=2025&acronym=${acronym}`);
     return response.data;
   } catch (error) {
     console.error("Error fetching department details:", error);