Merge pull request #118 from UoaWDCC/104_convert_chairperson-image-to…

…-text

104 Convert Chairperson Image to Text

next/components/members/Chairman.tsx

@@ -30,8 +30,11 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
 
       <div className="grid grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-2 max-w-6xl isolate mx-auto">
         <div className="relative col-span-12 ml-5 md:col-span-7 drop-shadow-xl">
+          <div className="absolute top-20 max-md:hidden md:visible -right-[35em] w-96">
+            <p className="text-xl rotate-12 margin-auto text-center">{chair1.funFact}</p>
+          </div>
           <Image
-            className="w-full max-md:hidden outline md:visible absolute top-0 -right-full h-72 object-contain"
+            className="top-24 -right-96 max-md:hidden md:visible h-64 w-80 object-contain absolute"
             src={Flair2}
             alt=""
           />
@@ -47,8 +50,11 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
           </div>
         </div>
         <div className="md:relative ml-5 row-start-2 col-span-12 md:col-span-7 md:col-start-7 drop-shadow-xl md:-translate-y-[30%] -z-10">
+          <div className="max-md:hidden absolute bottom-40 -left-[32em] w-96">
+            <p className="text-xl -rotate-12 margin-auto text-center">{chair2.funFact}</p>
+          </div>
           <Image
-            className="w-full max-md:hidden absolute bottom-0 -left-full h-80 object-contain"
+            className="w-80 absolute max-md:hidden bottom-48 -left-96 h-64 object-contain"
             src={Flair1}
             alt=""
           />
@@ -68,4 +74,4 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
   );
 };
 
-export default Chairman;
+export default Chairman;