From f494a54d264f13a82eb66cb04d762f96b18223fd Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Tue, 8 Oct 2024 20:41:49 +1300
Subject: [PATCH 1/9] :lipstick: adjust header sizes in feedback page

---
 next/components/feedback/ActiveSection.tsx | 8 ++++----
 next/components/feedback/FAQ.tsx           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx
index aa0e881..90d9725 100644
--- a/next/components/feedback/ActiveSection.tsx
+++ b/next/components/feedback/ActiveSection.tsx
@@ -37,9 +37,9 @@ export default function ActiveSection({
       className={`flex flex-col md:flex-row w-full max-w-5xl mb-24 mx-auto gap-12 ${styleClick ? "animate-[fadeOut_0.3s_ease-in_forwards]" : "animate-[fadeIn_0.3s_ease-in_forwards]"}`}
     >
       <div className="flex flex-col items-center md:items-left">
-        <div className="flex flex-col md:items-end w-80 ml-5">
+        <div className="flex flex-col md:items-end w-80 md:ml-5">
           <button
-            className={`text-wrap uppercase font-bold text-7xl mb-2`}
+            className={`text-wrap uppercase font-bold  md:text-7xl ${activeSection == "FAQ" ? "text-6xl" : "text-5xl"} mb-2`}
             disabled={true}
           >
             {activeSection == "FAQ" ? "FAQ" : "Contact"}
@@ -48,10 +48,10 @@ export default function ActiveSection({
             <Image
               src={selectionArrow}
               alt="Selection arrow"
-              className="inline-block"
+              className="inline-block md:w-16 w-12"
             />
             <button
-              className="text-b-dark-blue ml-2 uppercase text-4xl font-bold"
+              className = {`text-b-dark-blue ml-2 uppercase ${activeSection == "FAQ" ? "text-3xl" : "text-3xl"} font-bold`}
               onClick={() => handleClick()}
             >
               {activeSection == "FAQ" ? "Contact" : "FAQ"}
diff --git a/next/components/feedback/FAQ.tsx b/next/components/feedback/FAQ.tsx
index b9924e7..efccdf4 100644
--- a/next/components/feedback/FAQ.tsx
+++ b/next/components/feedback/FAQ.tsx
@@ -7,7 +7,7 @@ export default function FAQ({
 }) {
   return (
     <div className="w-full">
-      <h1 className="text-2xl xs:text-3xl md:text-left text-center font-bold mb-10">
+      <h1 className="text-xl md:text-2xl md:text-left text-center font-bold mb-10">
         Frequently Asked Questions
       </h1>
       <div className="flex flex-col gap-6">

From 9e99b8b3a5fd5b9a8e60f87a61352dca8b3b0f11 Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Tue, 8 Oct 2024 20:44:47 +1300
Subject: [PATCH 2/9] :memo: remove debugging, adjust larger screen header
 sizes

---
 next/components/feedback/ActiveSection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx
index 90d9725..43cbe2d 100644
--- a/next/components/feedback/ActiveSection.tsx
+++ b/next/components/feedback/ActiveSection.tsx
@@ -39,7 +39,7 @@ export default function ActiveSection({
       <div className="flex flex-col items-center md:items-left">
         <div className="flex flex-col md:items-end w-80 md:ml-5">
           <button
-            className={`text-wrap uppercase font-bold  md:text-7xl ${activeSection == "FAQ" ? "text-6xl" : "text-5xl"} mb-2`}
+            className={`text-wrap uppercase font-bold  md:text-7xl sm:text-6xl ${activeSection == "FAQ" ? "text-6xl" : "text-5xl"} mb-2`}
             disabled={true}
           >
             {activeSection == "FAQ" ? "FAQ" : "Contact"}
@@ -51,7 +51,7 @@ export default function ActiveSection({
               className="inline-block md:w-16 w-12"
             />
             <button
-              className = {`text-b-dark-blue ml-2 uppercase ${activeSection == "FAQ" ? "text-3xl" : "text-3xl"} font-bold`}
+              className = {`text-b-dark-blue ml-2 uppercase md:text-4xl text-3xl font-bold`}
               onClick={() => handleClick()}
             >
               {activeSection == "FAQ" ? "Contact" : "FAQ"}

From 291ada6a3e9d1b982cb2b53256c4fd51da2d2306 Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Tue, 8 Oct 2024 21:17:41 +1300
Subject: [PATCH 3/9] :lipstick: overlay team image and blurb, adjust heading
 sizes

---
 next/app/members/[year]/page.tsx           | 12 ++++++------
 next/components/feedback/ActiveSection.tsx |  4 ++--
 next/components/members/Chairman.tsx       |  2 +-
 next/components/members/Teams.tsx          |  4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/next/app/members/[year]/page.tsx b/next/app/members/[year]/page.tsx
index 90a1732..464325b 100644
--- a/next/app/members/[year]/page.tsx
+++ b/next/app/members/[year]/page.tsx
@@ -23,20 +23,20 @@ export default async function MemberPage({
 
   return (
     <>
-      <div className="flex flex-col items-center justify-center gap-6 mt-header pt-24">
-        <h1 className="uppercase flex flex-col items-center mx-auto mb-24">
-          <span className="md:text-6xl text-5xl leading-[0.95]">Meet the</span>
-          <span className="md:text-8xl text-6xl text-center font-bold leading-[0.95]">
+      <div className="flex flex-col items-center justify-center md:gap-6 mt-header pt-24">
+        <h1 className="uppercase flex flex-col items-center mx-auto md:mb-24 mb-16">
+          <span className="md:text-6xl sm:text-5xl text-3xl leading-[0.95]">Meet the</span>
+          <span className="md:text-8xl sm:text-6xl text-4xl text-center font-bold leading-[0.95]">
             {team.CommitteeYear} Team
           </span>
         </h1>
         <div className="relative w-full grid place-items-center isolate">
           <img
-            className="w-full max-w-5xl"
+            className="w-full max-w-5xl relative overflow-hidden"
             src={getLargestImageUrl(team.teamPhoto)}
             alt=""
           />
-          <div className="md:absolute md:bottom-8 md:right-12 m-3 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
+          <div className="md:absolute z-10 md:bottom-8 md:right-12 -mt-6 sm:-mt-10 md:mt-3 m-3 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
             <RichText text={team.description} />
             <a
               className="block mr-auto w-fit bg-b-blue px-5 py-3 rounded-full font-bold mt-8"
diff --git a/next/components/feedback/ActiveSection.tsx b/next/components/feedback/ActiveSection.tsx
index 43cbe2d..ee466e5 100644
--- a/next/components/feedback/ActiveSection.tsx
+++ b/next/components/feedback/ActiveSection.tsx
@@ -48,10 +48,10 @@ export default function ActiveSection({
             <Image
               src={selectionArrow}
               alt="Selection arrow"
-              className="inline-block md:w-16 w-12"
+              className="inline-block sm:w-16 w-12"
             />
             <button
-              className = {`text-b-dark-blue ml-2 uppercase md:text-4xl text-3xl font-bold`}
+              className = {`text-b-dark-blue ml-2 uppercase sm:text-4xl text-3xl font-bold`}
               onClick={() => handleClick()}
             >
               {activeSection == "FAQ" ? "Contact" : "FAQ"}
diff --git a/next/components/members/Chairman.tsx b/next/components/members/Chairman.tsx
index b40196a..71bef61 100644
--- a/next/components/members/Chairman.tsx
+++ b/next/components/members/Chairman.tsx
@@ -17,7 +17,7 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
           "radial-gradient(47.21% 33.08% at 23.96% 39.49%, #FD8D5D 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(66.83% 44.73% at 78.61% 81.23%, #FAAB36 0%, rgba(255, 255, 255, 0.00) 97.76%), linear-gradient(180deg, #FFF 0%, #FABD6E 100%)",
       }}
     >
-      <h2 className="text-7xl text-center mb-4">
+      <h2 className="md:text-7xl text-5xl text-center mb-4">
         Meet the <span className="font-bold">Chairs</span>
       </h2>
       <p className="text-center max-w-5xl mx-auto mb-20">
diff --git a/next/components/members/Teams.tsx b/next/components/members/Teams.tsx
index 0c35ed2..1118dd9 100644
--- a/next/components/members/Teams.tsx
+++ b/next/components/members/Teams.tsx
@@ -28,7 +28,7 @@ export default function Teams({ teams }: { teams: RoleSection[] }) {
             <div key={i}>
               <button
                 onClick={() => setActive(i)}
-                className={`px-4 py-2 text-xl transform transition-transform duration-150 border-transparent border ${
+                className={`px-4 py-2 sm:text-xl text-lg transform transition-transform duration-150 border-transparent border ${
                   i === active ? "font-bold border-0" : "border-l-1 border-r-1"
                 }`}
               >
@@ -37,7 +37,7 @@ export default function Teams({ teams }: { teams: RoleSection[] }) {
             </div>
           ))}
         </div>
-        <h2 className="text-5xl text-center mb-4">{activeTeam.SectionName}</h2>
+        <h2 className="sm:text-5xl text-4xl text-center mb-4">{activeTeam.SectionName}</h2>
         <p className="text-center max-w-5xl mx-auto mb-20">
           {activeTeam.Description}
         </p>

From 1df3e471d684cc47e37fd23f63cb7f0aebe50589 Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Sun, 13 Oct 2024 18:06:04 +1300
Subject: [PATCH 4/9] :lipstick: make homepage blobs on page and connected,
 header size adjustments across pages

---
 next/app/about/page.tsx                         |  4 ++--
 next/app/members/[year]/page.tsx                |  2 +-
 next/components/blocks/ImageWithText.module.css | 10 ++++++++--
 next/components/blocks/ImageWithText.tsx        |  2 +-
 next/components/home/HomePageBlob.tsx           | 12 +++++++-----
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/next/app/about/page.tsx b/next/app/about/page.tsx
index 8748de5..10b081b 100644
--- a/next/app/about/page.tsx
+++ b/next/app/about/page.tsx
@@ -22,7 +22,7 @@ export default async function AboutPage() {
     <>
       <Image src={flair} alt="" className="absolute -z-10 top-[70%]" />
       <section className="max-w-4xl mx-auto mt-header pt-24 flex flex-col items-center text-center">
-        <h1 className="md:text-8xl sm:text-7xl text-5xl font-bold leading-[0.95] uppercase mb-6">
+        <h1 className="lg:text-8xl md:text-7xl sm:text-6xl text-4xl font-bold leading-[0.95] uppercase mb-6">
           Our Values
         </h1>
         <p className="mb-2 mx-6">{data.Subtitle}</p>
@@ -46,7 +46,7 @@ export default async function AboutPage() {
         </div>
       </section>
       <section className="py-40 text-center px-4">
-        <h2 className="md:text-8xl sm:text-7xl text-6xl font-bold leading-[0.95] uppercase mb-12">
+        <h2 className="lg:text-8xl md:text-7xl sm:text-6xl text-4xl font-bold leading-[0.95] uppercase mb-12">
           Our History
         </h2>
         <History timelineElements={timeline} />
diff --git a/next/app/members/[year]/page.tsx b/next/app/members/[year]/page.tsx
index 464325b..1aa206c 100644
--- a/next/app/members/[year]/page.tsx
+++ b/next/app/members/[year]/page.tsx
@@ -36,7 +36,7 @@ export default async function MemberPage({
             src={getLargestImageUrl(team.teamPhoto)}
             alt=""
           />
-          <div className="md:absolute z-10 md:bottom-8 md:right-12 -mt-6 sm:-mt-10 md:mt-3 m-3 p-8 pr-16 max-w-lg bg-white shadow-lg rounded-3xl text-b-dark-blue __markdown">
+          <div className="md:absolute z-10 md:bottom-8 md:shadow-lg drop-shadow-lg md:right-12 -mt-6 sm:-mt-10 md:mt-3 m-3 p-8 pr-16 max-w-lg bg-white rounded-3xl text-b-dark-blue __markdown">
             <RichText text={team.description} />
             <a
               className="block mr-auto w-fit bg-b-blue px-5 py-3 rounded-full font-bold mt-8"
diff --git a/next/components/blocks/ImageWithText.module.css b/next/components/blocks/ImageWithText.module.css
index 5314b70..4813463 100644
--- a/next/components/blocks/ImageWithText.module.css
+++ b/next/components/blocks/ImageWithText.module.css
@@ -1,8 +1,14 @@
 .heading {
   color: #014788;
-  font-size: 3rem;
-  align-content: center;
   font-weight: bold;
+  align-content: center;
+  font-size: 3rem; /* default size for larger screens */
+}
+
+@media screen and (max-width: 768px) {
+  .heading {
+    font-size: 2rem; /* medium size for screens below 768px */
+  }
 }
 
 .content {
diff --git a/next/components/blocks/ImageWithText.tsx b/next/components/blocks/ImageWithText.tsx
index a37fe87..8c74db4 100644
--- a/next/components/blocks/ImageWithText.tsx
+++ b/next/components/blocks/ImageWithText.tsx
@@ -17,7 +17,7 @@ export default function ImageWithText({ props }: ImageWithTextProps) {
   return (
     //
     // grid grid-cols-2 max-h-[80vh]
-    <div className="flex outline flex-col md:flex-row md:items-stretch">
+    <div className="flex flex-col md:flex-row md:items-stretch">
       {/* <div className="flex"> */}
         <Image
           className={styles.backgroundImg}
diff --git a/next/components/home/HomePageBlob.tsx b/next/components/home/HomePageBlob.tsx
index 71df531..f59b315 100644
--- a/next/components/home/HomePageBlob.tsx
+++ b/next/components/home/HomePageBlob.tsx
@@ -12,17 +12,19 @@ type Props = {
 export default function HomePageBlobs({ blob1, blob2, blob3 }: Props) {
   return (
     <div
-      className={`${styles.container} grid grid-cols-14 my-24 p-5 drop-shadow-xl`}
+      className={`${styles.container} md:grid md:grid-cols-14 my-24 p-5 drop-shadow-xl`}
     >
-      <Blob className="bg-white col-start-8 col-span-4">{blob1}</Blob>
-      <ConnectorBlob className="col-start-10 col-end-12 justify-self-center hidden md:block" />
-      <Blob className="bg-white col-start-10 col-span-4">
+      <Blob className="bg-white md:col-start-8 mr-10 md:mr-0 block md:inline col-span-4">
+        {blob1}
+      </Blob>
+      <ConnectorBlob className="md:col-start-10 md:col-end-12 justify-self-center md:ml-0 ml-20 md:block" />
+      <Blob className="bg-white md:col-start-10 md:ml-0 block md:inline ml-10 md:mt-0 col-span-4">
         <RichText text={blob2} />
         <button className="bg-[#92E0FE] rounded-full py-2 px-12 font-bold">
           JOIN US NOW
         </button>
       </Blob>
-      <Blob className="bg-[#ffaa00] row-start-4 col-start-2 col-span-4">
+      <Blob className="bg-[#ffaa00] row-start-4 mt-10 md:mt-0 col-start-2 col-span-4">
         <RichText text={blob3} />
       </Blob>
     </div>

From 2ce0de67186b668bd7295df63e2c12ee93865dcf Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Sun, 13 Oct 2024 18:10:54 +1300
Subject: [PATCH 5/9] :memo: adjust carousel header

---
 next/components/home/CarouselBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next/components/home/CarouselBase.tsx b/next/components/home/CarouselBase.tsx
index aac55d9..9539b2c 100644
--- a/next/components/home/CarouselBase.tsx
+++ b/next/components/home/CarouselBase.tsx
@@ -23,7 +23,7 @@ export default function CarouselBase({
   return (
     <div>
       <div className="text-blue-800 font-semibold text-4xl pr-6 pt-28 flex flex-col sm:flex-row justify-between">
-        <p className="text-center sm:text-left sm:mb-0 mb-5">Upcoming Events</p>
+        <p className="text-center md:text-4xl sm:text-3xl text-2xl sm:text-left sm:mb-0 mb-5">Upcoming Events</p>
         <div className="flex justify-center -mb-10 sm:-mb-5 md:-mb-0">
           <button className="-mr-0.5" onClick={scrollPrev}>
             <svg

From 4a383ba4a775a8a39573c57c7bfcc94341d084af Mon Sep 17 00:00:00 2001
From: daisy-of-the-valley <deizat1111@gmail.com>
Date: Tue, 15 Oct 2024 21:21:14 +1300
Subject: [PATCH 6/9] :sparkles: tuck under project descriptions on smaller
 screen sizes on projects page

---
 next/components/projects/ProjectsComponent.tsx | 18 ++++++++++--------
 next/components/projects/Timeline.tsx          |  4 ++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/next/components/projects/ProjectsComponent.tsx b/next/components/projects/ProjectsComponent.tsx
index ab155b7..fc3777e 100644
--- a/next/components/projects/ProjectsComponent.tsx
+++ b/next/components/projects/ProjectsComponent.tsx
@@ -33,16 +33,18 @@ export default function ProjectsComponent({
   }
 
   return (
-    <div className="flex items-center pl-[6px] p-4">
+    <div className="flex ml-4 sm:ml-10 md:ml-0 items-center pl-[6px] p-4">
       {/* Vertical line, -my-4 to 'undo' the p-4 */}
       <div className="bg-white w-1 self-stretch -my-4" />
-      <DateBlob timelineElement={timelineElement} isEven={isEven} />
-      <ImageComponent
-        src={getLargestImageUrl(timelineElement.image)}
-        title={timelineElement.title}
-        type={type}
-        openModal={openModal}
-      />
+      <div className="flex flex-col gap-7 md:flex-row">
+        <DateBlob timelineElement={timelineElement} isEven={isEven} />
+        <ImageComponent
+          src={getLargestImageUrl(timelineElement.image)}
+          title={timelineElement.title}
+          type={type}
+          openModal={openModal}
+        />
+      </div>
     </div>
   );
 }
diff --git a/next/components/projects/Timeline.tsx b/next/components/projects/Timeline.tsx
index 6a4ee4c..951925c 100644
--- a/next/components/projects/Timeline.tsx
+++ b/next/components/projects/Timeline.tsx
@@ -9,7 +9,7 @@ type TimelineProps = {
 const Timeline = ({ timelineElements, type }: TimelineProps) => {
   return (
     <div className="flex flex-col pl-[10%] pt-[5%] pb-[5%]">
-      <div className="h-4 w-4 bg-white rounded-full"></div>
+      <div className="h-4 w-4 ml-4 sm:ml-10 md:ml-0 bg-white rounded-full"></div>
       <div>
         {timelineElements.map((timelineElement, index) => (
           <ProjectsComponent
@@ -20,7 +20,7 @@ const Timeline = ({ timelineElements, type }: TimelineProps) => {
           />
         ))}
       </div>
-      <div className="h-4 w-4 bg-white rounded-full"></div>
+      <div className="h-4 w-4 ml-4 sm:ml-10 md:ml-0 bg-white rounded-full"></div>
     </div>
   );
 };

From 964b2a989cbaf47a527f3a3d1c1fbc77a8329566 Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Mon, 21 Oct 2024 13:16:10 +1300
Subject: [PATCH 7/9] :memo: get images rendering correctly

---
 next/components/members/MemberModal.tsx | 3 ++-
 next/components/members/Teams.tsx       | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/next/components/members/MemberModal.tsx b/next/components/members/MemberModal.tsx
index f3ef50c..9185f2a 100644
--- a/next/components/members/MemberModal.tsx
+++ b/next/components/members/MemberModal.tsx
@@ -1,13 +1,14 @@
 import { Member } from "@/schemas/collection/Team";
 import Image from "next/image";
 import { IoClose } from "react-icons/io5";
+import { getLargestImageUrl } from "@/util/image";
 
 function MemberModal({ activeMember }: { activeMember: Member }) {
   return (
     <div>
       <Image
         className="max-h-[80vh] w-full object-cover"
-        src="http://127.0.0.1:1337/uploads/priscilla_du_preez_n_F8xh_L_Mmg0c_unsplash_1_7b7bcfcb87.png" //Instead of URL, its supposed to be src={getLargestImageUrl(member.Photo)}, but it does not work
+        src={getLargestImageUrl(activeMember.Photo)}
         alt=""
         objectFit="cover"
         width={100}
diff --git a/next/components/members/Teams.tsx b/next/components/members/Teams.tsx
index 1118dd9..7668622 100644
--- a/next/components/members/Teams.tsx
+++ b/next/components/members/Teams.tsx
@@ -4,6 +4,7 @@ import Image from "next/image";
 import { useState } from "react";
 import MemberModal from "./MemberModal";
 import { useModal } from "../modal/ModalContextProvider";
+import { getLargestImageUrl } from "@/util/image";
 
 export default function Teams({ teams }: { teams: RoleSection[] }) {
   const [active, setActive] = useState(0);
@@ -50,7 +51,7 @@ export default function Teams({ teams }: { teams: RoleSection[] }) {
             >
               <Image
                 className="w-full"
-                src="http://127.0.0.1:1337/uploads/priscilla_du_preez_n_F8xh_L_Mmg0c_unsplash_1_7b7bcfcb87.png" //Instead or URL, supposed to be src={getLargestImageUrl(member.Photo)}, but it does not work
+                src={getLargestImageUrl(member.Photo)} //Instead or URL, supposed to be src={getLargestImageUrl(member.Photo)}, but it does not work
                 alt={member.Name}
                 objectFit="cover"
                 width={100}

From 2e22ef5d1db1223700df3ec9c5b7a4c381df7fe9 Mon Sep 17 00:00:00 2001
From: h4yleysh4rpe <sharpeh42@gmail.com>
Date: Mon, 21 Oct 2024 15:58:39 +1300
Subject: [PATCH 8/9] :bug: connect chair cards for various image sizes

---
 next/components/members/Chairman.tsx      | 27 +++++++++--------------
 next/components/members/FunFactArrow1.tsx | 19 ++++++++++++++++
 next/components/members/FunFactArrow2.tsx | 19 ++++++++++++++++
 3 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 next/components/members/FunFactArrow1.tsx
 create mode 100644 next/components/members/FunFactArrow2.tsx

diff --git a/next/components/members/Chairman.tsx b/next/components/members/Chairman.tsx
index 71bef61..5735326 100644
--- a/next/components/members/Chairman.tsx
+++ b/next/components/members/Chairman.tsx
@@ -3,6 +3,8 @@ import Flair2 from "@/assets/members/flair2.png";
 import { Member } from "@/schemas/collection/Team";
 import { getLargestImageUrl } from "@/util/image";
 import Image from "next/image";
+import FunFactArrow1 from "./FunFactArrow1";
+import FunFactArrow2 from "./FunFactArrow2";
 
 const Chairman = ({ chairs }: { chairs: Member[] }) => {
   const chair1 = chairs[0];
@@ -28,15 +30,12 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
         leadership in action!
       </p>
 
-      <div className="grid grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-2 max-w-6xl isolate mx-auto">
+      <div className="grid relative grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-[repeat(2),minmax(0))] 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="top-24 -right-96 max-md:hidden md:visible h-64 w-80 object-contain absolute"
-            src={Flair2}
-            alt=""
+        <FunFactArrow1
+            funFact = {chair1.funFact}
+            imgSrc = {Flair2}
+            className = "absolute lg:-right-[24em] -right-[22em] max-md:hidden sm:visible"
           />
           <img
             className="w-full"
@@ -49,14 +48,10 @@ const Chairman = ({ chairs }: { chairs: Member[] }) => {
             <p>{chair1.About}</p>
           </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-80 absolute max-md:hidden bottom-48 -left-96 h-64 object-contain"
-            src={Flair1}
-            alt=""
+        <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-[20%] -z-10">
+          <FunFactArrow2 funFact = {chair2.funFact}
+            imgSrc = {Flair1}
+            className = "absolute lg:-left-[22rem] -left-[22rem] top-[11rem] lg:top-[16rem] max-md:hidden sm:visible"
           />
           <img
             className="w-full"
diff --git a/next/components/members/FunFactArrow1.tsx b/next/components/members/FunFactArrow1.tsx
new file mode 100644
index 0000000..30a8524
--- /dev/null
+++ b/next/components/members/FunFactArrow1.tsx
@@ -0,0 +1,19 @@
+import Image from "next/image";
+import { StaticImageData } from "next/image";
+
+export default function FunFactArrow1({funFact, imgSrc, className} : {funFact: string | null, imgSrc:StaticImageData, className: string}) {
+  return (
+    <div className={className}>
+      <div className="w-96 absolute left-[5em] top-[1em]">
+        <p className="text-xl rotate-12 margin-auto text-center">
+          {funFact}
+        </p>
+      </div>
+      <Image
+        className="h-64 w-80 object-contain"
+        src={imgSrc}
+        alt=""
+      />
+    </div>
+  );
+}
diff --git a/next/components/members/FunFactArrow2.tsx b/next/components/members/FunFactArrow2.tsx
new file mode 100644
index 0000000..33dd8fb
--- /dev/null
+++ b/next/components/members/FunFactArrow2.tsx
@@ -0,0 +1,19 @@
+import Image from "next/image";
+import { StaticImageData } from "next/image";
+
+export default function FunFactArrow2({funFact, imgSrc, className} : {funFact: string | null, imgSrc:StaticImageData, className: string}) {
+  return (
+    <div className={className}>
+      <Image
+        className="h-64 w-80 object-contain"
+        src={imgSrc}
+        alt=""
+      />
+      <div className="w-96 absolute bottom-[1em] right-[4em]">
+        <p className="text-xl -rotate-12 margin-auto text-center">
+          {funFact}
+        </p>
+      </div>
+    </div>
+  );
+}

From 92db7c901b4d74550dbec203d03d7b1ecd4370fd Mon Sep 17 00:00:00 2001
From: Oculux <nate.williamson.nz@gmail.com>
Date: Mon, 21 Oct 2024 16:45:50 +1300
Subject: [PATCH 9/9] :lipstick: make home image not too short at medium zoom
 level

---
 next/app/page.tsx                               |  3 ---
 next/components/blocks/ImageWithText.module.css | 10 ++++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/next/app/page.tsx b/next/app/page.tsx
index f126e71..bbe282c 100644
--- a/next/app/page.tsx
+++ b/next/app/page.tsx
@@ -1,14 +1,11 @@
 import event1 from "@/assets/home/event1.png";
 import ImageWithText from "@/components/blocks/ImageWithText";
-import Footer from "@/components/footer/footer";
-import Header from "@/components/header/header";
 import CarouselBase from "@/components/home/CarouselBase";
 import HomePageBlobs from "@/components/home/HomePageBlob";
 import BGWaves from "@/components/svg/BGWaves";
 import { homePageSchema } from "@/schemas/single/HomePage";
 import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
-import styles from "./page.module.css";
 
 export default async function Home() {
   const data = await fetchStrapi("home-page", homePageSchema);
diff --git a/next/components/blocks/ImageWithText.module.css b/next/components/blocks/ImageWithText.module.css
index 495cb0b..b76c770 100644
--- a/next/components/blocks/ImageWithText.module.css
+++ b/next/components/blocks/ImageWithText.module.css
@@ -29,16 +29,18 @@
   padding: 3rem;
 }
 .backgroundImg {
-  object-fit: cover;
-  max-height: 80vh;
-  width: 100%;
+  object-fit: contain;
+  max-width: 50%;
   border-right: solid white 2px;
-
 }
 
 @media (max-width: 760px) {
   .backgroundImg {
     border-bottom: solid white 2px;
+    object-fit: cover;
+    max-width: 100%;
+    width: 100%;
+    border-right: transparent;
   }
 }