easter egg

src/components/react/OfficerCard.jsx

@@ -1,23 +1,38 @@
 import React from "react";
 
-const OfficerCard = ({ picture, name, position, email }) => (
+const OfficerCard = ({
-    <div className={`flex flex-col items-center w-64 rounded-lg  `}>
+    picture,
-        <img
+    name,
-            className="w-26 h-auto sm:h-64 object-cover rounded-3xl"
+    position,
-            src={picture}
+    email,
-            alt={`Picture of ${name}`}
+    onMustahsinClicked,
-        />
+}) => {
-        <div className="p-4">
+    const handleImageClick = () => {
-            <h3 className="text-lg font-bold text-center">{name}</h3>
+        if (name === "Mustahsin Zarif") {
-            <p className="text-center text-sm text-gray-600">{position}</p>
+            onMustahsinClicked(); // This function is to be provided by the parent component
-            <a
+        }
-                href={`mailto:${email}`}
+    };
-                className="block text-center mt-2 text-sm text-blue-500 hover:underline"
+
-            >
+    return (
-                {email}
+        <div className={`flex flex-col items-center w-64 rounded-lg`}>
-            </a>
+            <img
+                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>
+                <p className="text-center text-sm text-gray-600">{position}</p>
+                <a
+                    href={`mailto:${email}`}
+                    className="block text-center mt-2 text-sm text-blue-500 hover:underline"
+                >
+                    {email}
+                </a>
+            </div>
         </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>