easter egg

src/components/react/OfficerCard.jsx

@@ -1,11 +1,25 @@
 import React from "react";
 
-const OfficerCard = ({ picture, name, position, email }) => (
+const OfficerCard = ({
-    <div className={`flex flex-col items-center w-64 rounded-lg  `}>
+    picture,
+    name,
+    position,
+    email,
+    onMustahsinClicked,
+}) => {
+    const handleImageClick = () => {
+        if (name === "Mustahsin Zarif") {
+            onMustahsinClicked(); // This function is to be provided by the parent component
+        }
+    };
+
+    return (
+        <div className={`flex flex-col items-center w-64 rounded-lg`}>
             <img
-            className="w-26 h-auto sm:h-64 object-cover rounded-3xl"
+                className="w-26 h-auto sm:h-64 object-cover rounded-3xl cursor-pointer"
                 src={picture}
                 alt={`Picture of ${name}`}
+                onClick={handleImageClick}
             />
             <div className="p-4">
                 <h3 className="text-lg font-bold text-center">{name}</h3>
@@ -18,6 +32,7 @@ const OfficerCard = ({ picture, name, position, email }) => (
                 </a>
             </div>
         </div>
-);
+    );
+};
 
 export default OfficerCard;

src/components/react/OfficerTabs.jsx

@@ -4,6 +4,8 @@ import { AnimatePresence } from "framer-motion";
 
 const OfficerTabs = ({ officers }) => {
     const [selectedType, setSelectedType] = useState("All");
+    const [mustahsinClickCount, setMustahsinClickCount] = useState(0);
+    const [useMustahsinImage, setUseMustahsinImage] = useState(false);
 
     const uniqueTypes = [
         "All",
@@ -17,6 +19,15 @@ const OfficerTabs = ({ officers }) => {
                   officer.type?.includes(selectedType)
               );
 
+    const handleMustahsinClicked = () => {
+        const newCount = mustahsinClickCount + 1;
+        setMustahsinClickCount(newCount);
+
+        if (newCount >= 5) {
+            setUseMustahsinImage(true);
+        }
+    };
+
     return (
         <div>
             <div className="tabs flex justify-center items-center">
@@ -40,7 +51,16 @@ const OfficerTabs = ({ officers }) => {
                 className="officers flex-row flex flex-wrap items-center justify-center space-x-16 p-12"
             >
                 {filteredOfficers.map((officer) => (
-                    <OfficerCard key={officer.email} {...officer} />
+                    <OfficerCard
+                        key={officer.email}
+                        {...officer}
+                        picture={
+                            useMustahsinImage
+                                ? "/officers/mustahsin.jpg"
+                                : officer.picture
+                        }
+                        onMustahsinClicked={handleMustahsinClicked}
+                    />
                 ))}
             </div>
         </div>