About Us Page Mobile Layout

app/(pages)/_components/AboutUsCard/AboutUsCard.jsx

@@ -18,7 +18,7 @@ export default function AboutUsCard({
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>
-      <div className={`${styles.img} ${styles[alignment]}`}>
+      <div className={styles.img}>
         <Image
           src={img}
           style={{ objectFit: "cover" }}

app/(pages)/_components/AboutUsCard/AboutUsCard.module.scss

@@ -1,24 +1,51 @@
 @use "@/app/(pages)/_globals/mixins.scss";
 
 .cardWrapper {
+  align-self: center;
   display: flex;
 
-  width: calc(8px * 130);
+  width: 100%;
+  max-width: calc(8px * 130);
   border-radius: var(--card-border-radius);
   box-shadow: var(--drop-shadow);
+
+  overflow: hidden;
+
   background-color: var(--white);
 
   h3 {
     color: var(--emerald);
   }
+  @include mixins.phone {
+    width: 100%; 
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--drop-shadow);
+   // display: flex;
+    flex-direction: column;
+    justify-content: center; 
+   // align-items: center; 
+   h3 {
+    text-align: center;
+  }
+  }
 }
 
 .cardWrapper.left {
   flex-direction: row-reverse;
+  @include mixins.phone{
+    //align-items: center;
+    flex-direction: column-reverse;
+  }
 }
 
 .cardWrapper.right {
   flex-direction: row;
+  @include mixins.phone{
+
+   // align-items: center;
+   flex-direction: column-reverse;
+  }
+
 }
 
 .cardContainer {
@@ -27,21 +54,26 @@
 
   gap: 20px;
   padding: var(--card-padding);
-  width: 100%;
+  flex: 1;
+  @mixin phone{
+    padding: 10px; 
+    align-items: center;
+  }
 }
 
 .img {
   position: relative;
-  overflow: hidden;
-  width: 100%;
-}
+  // overflow: hidden;
+  flex: 1;
 
-.img.left {
-  border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
-}
+  @include mixins.phone {
+    width: 100%;
+    align-items: center;
+    padding-bottom: 200px;
 
-.img.right {
-  border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
+
+    //margin-bottom: 10px;
+  }
 }
 
 .content {

app/(pages)/_components/ClinicRolesCard/ClinicRolesCard.jsx

@@ -21,21 +21,13 @@ export default function ClinicRolesCard({
           sizes={"(max-width: 1048px) 33vw, (max-width: 720px) 50vw, 100vw"}
         />
       </div>
-      <div className={styles.cardTop}>
-        <Image
-          src={icon}
-          width={40}
-          height={40}
-          alt={iconAlt}
-          sizes={"(max-width: 1048px) 33vw"}
-        />
-        <h3>{title}</h3>
+      <div className={styles.cardText}>
+        <div className={styles.cardTop}>
+          <Image src={icon} width={40} height={40} alt={iconAlt} />
+          <h3>{title}</h3>
+        </div>
+        <p className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
       </div>
-      {/* Below is LONG TEXT */}
-      <div
-        className={styles.description}
-        dangerouslySetInnerHTML={{ __html: description }}
-      />
     </div>
   );
 }

app/(pages)/_components/ClinicRolesCard/ClinicRolesCard.module.scss

@@ -11,14 +11,29 @@
 .card {
   width: 60%; // had to change this
   position: relative;
-  padding: 56px;
+
   flex-direction: column;
+  align-items: center;
+
+  h3 {
+    color: var(--emerald);
+  }
+
+  @include mixins.phone {
+    width: 100%;
+    margin-top: -75px;
+  }
+}
+
+.cardText {
   background-color: var(--white);
   box-shadow: var(--drop-shadow);
   border-radius: var(--card-border-radius);
+  padding: 56px;
 
-  h3 {
-    color: var(--emerald);
+  @include mixins.phone {
+    padding: 32px;
+    padding-top: calc(56px + 75px);
   }
 }
 
@@ -37,25 +52,49 @@
   border-radius: 50%;
   overflow: hidden;
   box-shadow: var(--drop-shadow-mint);
+
+  @include mixins.phone {
+    position: relative;
+  }
 }
 
 .card.left {
   margin-right: 10%;
 
+  @include mixins.phone {
+    margin-right: 0;
+  }
+
   .img {
     top: 16px;
     right: -32px;
     transform: translate(50%, -50%); // moves 0, 0 point to center of image
+
+    @include mixins.phone {
+      transform: translate(-50%, 0);
+      top: 100px;
+      right: -50%;
+    }
   }
 }
 
 .card.right {
   margin-left: 10%;
 
+  @include mixins.phone {
+    margin-left: 0;
+  }
+
   .img {
     top: 24px;
     left: -60px;
     transform: translate(-50%, -50%); // moves 0, 0 point to center of image
+
+    @include mixins.phone {
+      transform: translate(-50%, 0);
+      top: 100px;
+      left: 50%;
+    }
   }
 }
 

app/(pages)/about-us/page.jsx

@@ -106,6 +106,8 @@ export default async function About() {
   const clinicRolesCardData = await getClinicRolesCards();
   const eventCardData = await getEventCardGeneralInfo();
 
+  console.log(aboutUsCardData);
+
   return (
     <div className={styles.page}>
       <div className={styles.aboutUs}>
@@ -115,22 +117,24 @@ export default async function About() {
         </div>
 
         {/* About Us Cards are mapped here */}
-        {aboutUsCardData.map((card, idx) => (
-          <AboutUsCard
-            key={idx}
-            title={card.title}
-            content={card.description}
-            img={card.image}
-            imgAlt={card.image_alt_text}
-            alignment={idx % 2 === 0 ? "right" : "left"} // alternate alignment
-          />
-        ))}
+        <div className={styles.cardsWrapper}>
+          {aboutUsCardData.map((card, idx) => (
+            <AboutUsCard
+              key={idx}
+              title={card.title}
+              content={card.description}
+              img={card.image}
+              alt={card.image_alt_text}
+              alignment={idx % 2 === 0 ? "right" : "left"} // alternate alignment
+            />
+          ))}
+        </div>
       </div>
 
       <div className={styles.clinicRoles}>
         <div className={styles.header}>
           <h1>Clinic Roles</h1>
-          <h4>The incredible team that makes JVMC happen</h4>
+          <h4>The incredible team that makes JVMC happen.</h4>
         </div>
 
         {/* Clinic Roles Cards are mapped here */}

app/(pages)/about-us/page.module.scss

@@ -8,6 +8,7 @@
   align-items: center;
   gap: var(--element-spacing);
   padding: var(--nav-to-element-spacing) 0;
+
 }
 
 .header {
@@ -27,6 +28,28 @@
   width: 100%;
 }
 
+.clinicRoles {
+  @include mixins.phone {
+    padding: 0 16px;
+  }
+}
+
+.cardsWrapper {
+  padding: 0 var(--element-spacing);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--vertical-card-gap);
+
+  @include mixins.sm-desktop {
+    padding: 0 calc(var(--element-spacing) / 2);
+  }
+
+  @include mixins.phone {
+    padding: 0 16px;
+  }
+}
+
 .clinicRolesGradientContainer {
   position: absolute;
   top: -520px;
@@ -38,7 +61,7 @@
   position: relative;
   z-index: -1;
   pointer-events: none; /* Prevents interaction issues */
-  width: 1572px;
+  width: 100%;
   height: 1300px;
 }
 
@@ -54,6 +77,10 @@
   background-color: var(--white);
   box-shadow: var(--drop-shadow);
   border-radius: var(--card-border-radius);
+  @include mixins.phone {
+    width: calc(4px * 91);
+    padding-top: 0;
+  }
 }
 
 .fairImg {
@@ -64,6 +91,12 @@
   border-radius: var(--card-border-radius);
   border: 2px solid var(--mint);
   box-shadow: var(--drop-shadow-mint);
+  @include mixins.phone {
+    height: 200px;
+    width: 363px;
+    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0 ;
+    border: none;
+  }
 }
 
 .fairText {