New Officer Page

lib/types.d.ts

@@ -116,3 +116,15 @@ export type DevProjects = {
   links: ProjectLink[];
   image: string;
 };
+
+export type OfficerSections =
+  | 'advisor'
+  | 'board'
+  | 'media'
+  | 'research'
+  | 'development'
+  | 'projects'
+  | 'education'
+  | 'community'
+  | 'hackutd'
+  | 'industry';

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-hover-card": "^1.1.7",
     "@radix-ui/react-popover": "^1.1.7",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@tanstack/react-query": "^5.85.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -40,6 +41,6 @@
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "tailwindcss": "^3.4.5",
-    "typescript": "^5"
+    "typescript": "5.9.2"
   }
 }

src/app/officers/page.tsx

@@ -1,49 +1,29 @@
-import OfficerGrid from '@/components/Officers/OfficerGrid';
 import OfficerHeader from '@/components/Officers/OfficerHeader';
-import Image from 'next/image';
+import { divisionOfficerMap } from '../../../config/officers.config';
+import OfficerClient from '@/components/Officers/OfficerClient';
+import { divisions, allDivisions, titleMap } from '@/components/Officers/constants';
 
-function Apply() {
+function Officers() {
   return (
-    <div className="relative h-full w-full bg-[url(/assets/officer/officer-bg.png)] bg-cover py-20">
-      <div className="absolute right-20 top-28 hidden h-[105rem] w-0 flex-shrink-0 text-center text-[0.625rem] font-bold leading-[99.99%] tracking-[-0.01875rem] text-[#8A8A8A] md:block">
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-        <p>
-          0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 0 0 0 0 1 0 1 0
-          0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0 0 0 1 1 0 1 0 1 0 1 0 0 0 1
-          0 1 0 0 1 1 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0 1 0 0 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 0 0 0
-          0 0 1 0 1 0 0 0 0 0 1 0 1 0 0 1 0 0 1 0 0 1 1 1 1 0 1 0 0 1 0 1 0 0 1 0 0 0 1 0 1 0 1 0 0
-          0 0 1 1 0 1 0 1 0 1 0 0 0 1 0 1 0 0 1 1
-        </p>
-      </div>
-      <div className="absolute right-24 top-72 hidden md:block">
-        <Image src="/assets/officer/divisions.png" alt="Division" width={40} height={463} />
+    <div className="relative min-h-screen w-full">
+      <div className="fixed inset-0 bg-[url(/assets/officer/officer-bg.png)] bg-cover bg-center bg-no-repeat" />
+
+      <div className="relative z-10">
+        <OfficerHeader />
+
+        <div className="relative">
+          <div className="container relative z-10 mx-auto px-4 py-12 lg:px-8 lg:py-16">
+            <OfficerClient
+              divisions={divisions}
+              allDivisions={allDivisions}
+              titleMap={titleMap}
+              divisionOfficerMap={divisionOfficerMap}
+            />
+          </div>
+        </div>
       </div>
-      <OfficerHeader />
-      <OfficerGrid type="board" />
-      <OfficerGrid type="media" />
-      <OfficerGrid type="research" />
-      <OfficerGrid type="development" />
-      <OfficerGrid type="projects" />
-      <OfficerGrid type="education" />
-      <OfficerGrid type="community" />
-      <OfficerGrid type="hackutd" />
-      <OfficerGrid type="industry" />
-      <OfficerGrid type="advisor" />
     </div>
   );
 }
 
-export default Apply;
+export default Officers;

src/components/Officers/DivisionIcon.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+import { OfficerSections } from '../../../lib/types';
+
+interface DivisionIconProps {
+  divisionKey: OfficerSections | 'all';
+  label: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const DivisionIcon = ({ divisionKey, label, size = 'sm', className = '' }: DivisionIconProps) => {
+  if (divisionKey === 'all' || divisionKey === 'advisor') {
+    return null;
+  }
+
+  const dimensions = size === 'sm' ? { width: 16, height: 16 } : { width: 24, height: 24 };
+
+  return (
+    <Image
+      src={`/assets/divisions/${divisionKey}.png`}
+      alt={`${label} icon`}
+      {...dimensions}
+      className={`opacity-80 ${className}`}
+    />
+  );
+};
+
+export default DivisionIcon;

src/components/Officers/OfficerCard.tsx

@@ -0,0 +1,31 @@
+import { type Officer } from '../../../config/officers.config';
+import { OfficerImageWithFallback } from './OfficerImageWithFallback';
+
+type OfficerCardProps = {
+  officer: Officer & { division?: string };
+};
+
+export const OfficerCard = ({ officer }: OfficerCardProps) => (
+  <div className="group flex-shrink-0">
+    <div className="relative rounded-xl p-4">
+      <div className="flex items-center space-x-4">
+        <div className="relative h-16 w-16 flex-shrink-0 sm:h-20 sm:w-20">
+          <OfficerImageWithFallback
+            src={officer.image}
+            alt={officer.name}
+            fallbackSrc="/assets/officer/OfficerImage.png"
+            className="h-full w-full rounded-full object-cover ring-2 ring-white/20 transition-all duration-200 group-hover:ring-4 group-hover:ring-blue-400/60"
+          />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-base font-semibold text-white transition-colors duration-200 group-hover:text-blue-300">
+            {officer.name}
+          </h3>
+          <p className="text-sm leading-tight text-gray-200/90 transition-colors duration-200 group-hover:text-gray-100">
+            {officer.position}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);