Feat: Added Alumni and updated hero banners

src/app/(public)/alumni/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React, { useState, useEffect, Suspense } from "react";
+import Alumni from "@/components/pages/Alumni";
+import { useSearchParams } from "next/navigation";
+
+function AlumniWrapper() {
+  const searchParams = useSearchParams();
+  const departmentParam = searchParams.get("department");
+  const [currentDepartment, setCurrentDepartment] = useState(departmentParam || "Full-Stack");
+
+  // Optional: if URL changes during client-side navigation, update state
+  useEffect(() => {
+    const dept = searchParams.get("department");
+    setCurrentDepartment(dept || "Full-Stack");
+  }, [searchParams]);
+
+  return (
+    <Alumni
+      currentDepartment={currentDepartment}
+      setCurrentDepartment={setCurrentDepartment}
+    />
+  );
+}
+
+export default function AlumniPage() {
+  useEffect(() => {
+    document.title = "Alumni";
+  }, []);
+
+  return (
+    <Suspense fallback={<div>Loading alumni...</div>}>
+      <AlumniWrapper />
+    </Suspense>
+  );
+}

src/components/AboutUsHeroBanner.tsx

@@ -1,17 +1,23 @@
-
-
+import Image from "next/image";
+import AboutUsHeroBannerBackground from "../../public/images/ABOUT-hero.jpg";
 
 export default function AboutUsHeroBanner() {
   return (
-    <section className="relative w-full h-[400px] min-h-max flex flex-col items-center">
+    <section className="relative w-full min-h-[calc(100dvh-80px)] flex flex-col items-center">
+      <div className="absolute bg-gradient-to-b from-blue3/20 z-10 inset-0"></div>
+      <Image
+        className="absolute -z-10 w-full h-full object-cover object-center"
+        src={AboutUsHeroBannerBackground}
+        alt="About Us hero background"
+      />
       <div className="absolute -z-10 w-full h-full" />
-      <div className="flex flex-col gap-5 py-10 px-10 w-full max-w-[320px] justify-center min-h-full md:px-28 xl:px-56 md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]">
-        <h1 className="font-instrument-sans font-bold text-blue3 text-4xl md:text-7xl">
+      <div className="flex flex-col gap-5 py-10 px-10 w-full max-w-[320px] justify-center min-h-full md:px-28 xl:px-56 md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px] mt-50">
+        <h1 className="font-instrument-sans font-bold text-yellow2 text-4xl md:text-7xl">
           About Us
         </h1>
-        <p className="font-instrument-sans text-blue3 text-justify text-sm md:text-xl lg:max-w-[500px]">
-          SYSDEV develops tech solutions for SAMAHAN and the AdDU community&#44; driven by student
-          collaboration and innovation&#46;
+        <p className="font-instrument-sans  text-justify text-sm md:text-xl lg:max-w-[500px]">
+          SYSDEV develops tech solutions for SAMAHAN and the AdDU community&#44;
+          driven by student collaboration and innovation&#46;
         </p>
       </div>
     </section>

src/components/pages/Alumni.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { AlumniMeetTheTeamSection } from "../sections/AlumniMeetTheTeamSection";
+
+export interface AlumniPageProps {
+  currentDepartment: string;
+  setCurrentDepartment: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const Alumni: React.FC<AlumniPageProps> = ({
+  currentDepartment,
+  setCurrentDepartment,
+}) => {
+  return (
+    <div>
+      <AlumniMeetTheTeamSection
+        currentDepartment={currentDepartment}
+        setCurrentDepartment={setCurrentDepartment}
+      />
+      {/* <ApplyCard/> */}
+    </div>
+  );
+};
+
+export default Alumni;

src/components/sections/AboutUsMeetTheTeamSection.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
 import Link from "next/link";
-import { GetMembers } from '@/lib/features/members/service/GetMembers.api';
+import { GetMembers } from "@/lib/features/members/service/GetMembers.api";
 import { RawMember } from "@/lib/features/members/types/members";
 import Button from "../ui/Button";
 import { OfficerCard } from "../ui/OfficerCard";
@@ -24,9 +24,9 @@ export default function AboutUsMeetTheTeamSection() {
       "Backend Head",
       "UI/UX Head",
       "Creatives Head",
-      "Public Relations Officer"
+      "Public Relations Officer",
     ],
-    []
+    [],
   );
 
   // Fetch members on mount
@@ -45,15 +45,15 @@ export default function AboutUsMeetTheTeamSection() {
   // Filter and sort officers
   useEffect(() => {
     const filteredOfficers = members.filter((member) =>
-      member.roles.some((r) => officerRoles.includes(r.roles.name))
+      member.roles.some((r) => officerRoles.includes(r.roles.name)),
     );
 
     const sortedOfficers = filteredOfficers.sort((a, b) => {
       const aIndex = officerRoles.findIndex((role) =>
-        a.roles.some((r) => r.roles.name === role)
+        a.roles.some((r) => r.roles.name === role),
       );
       const bIndex = officerRoles.findIndex((role) =>
-        b.roles.some((r) => r.roles.name === role)
+        b.roles.some((r) => r.roles.name === role),
       );
       return aIndex - bIndex;
     });
@@ -65,10 +65,14 @@ export default function AboutUsMeetTheTeamSection() {
   const getOfficerClass = (index: number) => {
     // For large screens (xl), we use 4 columns
     switch (index) {
-      case 0: return "col-span-2 xl:col-span-4"; // First row single item
-      case 1: return "col-span-2 xl:col-span-4"; // Second row single item
-      case officers.length - 1: return "col-span-2 xl:col-span-4"; // Last row single item
-      default: return "col-span-1"; // All middle items take 1 column each
+      case 0:
+        return "col-span-2 xl:col-span-4"; // First row single item
+      case 1:
+        return "col-span-2 xl:col-span-4"; // Second row single item
+      case officers.length - 1:
+        return "col-span-2 xl:col-span-4"; // Last row single item
+      default:
+        return "col-span-1"; // All middle items take 1 column each
     }
   };
 
@@ -81,10 +85,10 @@ export default function AboutUsMeetTheTeamSection() {
       <div className="flex flex-col items-center text-blue3 text-center gap-2.5">
         <h1 className="font-bold text-3xl md:text-4xl">Meet the Officers</h1>
         <p className="text-sm md:text-lg -mt-2 mb-2">
-          (A.Y. &apos;24 - &apos;25)
+          (A.Y. &apos;25 - &apos;26)
         </p>
         <p className="text-sm md:text-xl">
-          The minds behind SYSDEV &#8212; building solution for a better AdDU.
+          The minds behind SYSDEV &#8212; building solution for a better AdDU .
         </p>
       </div>