include-davis · C3viche · Mar 25, 2025 · Mar 17, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.jsx
@@ -5,28 +5,26 @@ import { FaCircleExclamation } from "react-icons/fa6";
 import styles from "./CommunityPartnersCard.module.scss";
 import Image from "next/image";
 
-export default function CommunityPartnersCard({
-  index,
-  partner,
-  containerClass,
-}) {
+export default function CommunityPartnersCard({ index, partner }) {
+  // Set class based on index and reverse if it is the first or third image
+
   return (
-    <div key={index} className={containerClass}>
+    <div
+      className={`${styles.cardContainer} ${index % 2 == 0 ? styles.reverse : ""}`}
+    >
       <div className={styles.imageWrapper}>
-        <div className={styles.imageWrapper}>
-          <Image
-            src={partner.image_src}
-            style={{ objectFit: "cover" }}
-            fill={true}
-            alt={partner.images_src}
-          />
-        </div>
+        <Image
+          src={partner.imageSrc}
+          style={{ objectFit: "cover", objectPosition: "50% 20%" }}
+          fill={true}
+          alt={partner.imageAlt}
+        />
       </div>
 
       <div className={styles.partnersCard}>
-        <div>
-          <h4 className={styles.partnersName}>{partner.name}</h4>
-          <p className={styles.partnersDescription}>{partner.description}</p>
+        <div className={styles.header}>
+          <h4>{partner.name}</h4>
+          <p>{partner.description}</p>
         </div>
         <div className={styles.contactInfo}>
           <p className={styles.locationText}>
@@ -38,11 +36,13 @@ export default function CommunityPartnersCard({
             {partner.date}
           </p>
           <p className={styles.appointmentText}>
-            {index === 1 && <FaCircleExclamation className={styles.icon} />}
+            {partner.appointment && (
+              <FaCircleExclamation className={styles.icon} />
+            )}
             {partner.appointment}
           </p>
         </div>
-        <a className="btn" href={partner.website}>
+        <a className={`${styles.button} btn`} href={partner.website}>
           {partner.buttonText}
         </a>
       </div>

diff --git a/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss b/app/(pages)/_components/CommunityPartnersCard/CommunityPartnersCard.module.scss
@@ -1,7 +1,4 @@
-.partnerContainer {
-  display: flex;
-  align-items: center;
-}
+@use "@/app/(pages)/_globals/mixins.scss";
 
 .partnersCard {
   background-color: var(--white);
@@ -14,6 +11,30 @@
   display: flex;
   flex-direction: column;
   gap: 36px;
+
+  @include mixins.tablet {
+    width: 60%;
+    height: 400px;
+    gap: 20px;
+  }
+
+  @include mixins.phone {
+    width: 100%;
+    height: auto;
+    padding: 20px;
+    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
+    gap: 24px;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  h4 {
+    line-height: 150%;
+  }
 }
 
 .imageWrapper {
@@ -22,42 +43,86 @@
   width: 434px;
   height: 452px;
   border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
+
+  @include mixins.tablet {
+    width: 40%;
+    height: 400px;
+  }
+
+  @include mixins.phone {
+    width: 100%;
+    height: 250px;
+    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
+  }
 }
 
 .cardContainer {
   display: flex;
   align-items: center;
+
+  @include mixins.tablet {
+    width: 90%;
+  }
+
+  @include mixins.phone {
+    flex-direction: column;
+  }
 }
 
 .reverse {
   flex-direction: row-reverse; /* Image on the left */
+
+  @include mixins.phone {
+    flex-direction: column;
+  }
 }
 
 .reverse .imageWrapper {
   border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
+
+  @include mixins.phone {
+    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
+  }
 }
 
 .reverse .partnersCard {
   border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
+
+  @include mixins.phone {
+    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
+  }
 }
 
 .contactInfo {
   display: flex;
   flex-direction: column;
   gap: 12px;
+
+  @include mixins.phone {
+    gap: 8px;
+  }
 }
 
-.locationText {
+.locationText,
+.dateText,
+.appointmentText {
   display: flex;
   align-items: center;
+  gap: 12px;
 }
 
-.dateText {
-  display: flex;
-  align-items: center;
+.button {
+  width: 12rem;
+  height: 3rem;
 }
 
-.appointmentText {
-  display: flex;
-  align-items: center;
+.icon {
+  width: 20px;
+  height: 20px;
+  color: var(--emerald);
+
+  @include mixins.phone {
+    width: 16px;
+    height: 16px;
+  }
 }
diff --git a/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss b/app/(pages)/_components/CommunityPartnersCarousel/CommunityPartnersCarousel.module.scss
@@ -3,12 +3,19 @@
 $image-dim: 400px;
 $image-gap: 50px;
 
+$mobile-image-dim: 216px;
+$mobile-image-gap: 24px;
+
 .carousel {
   display: flex;
   position: relative;
   height: $image-dim;
   align-items: center;
   align-self: flex-start;
+
+  @include mixins.phone {
+    height: $mobile-image-dim;
+  }
 }
 
 .column {
@@ -24,25 +31,35 @@ $image-gap: 50px;
   background: lightgray 50% / cover no-repeat;
   /* mint-drop-shadow, not same as globals var */
   box-shadow: 0px 0px 48px 0px rgba(171, 220, 207, 0.35);
+
+  @include mixins.phone {
+    height: $mobile-image-dim;
+    width: $mobile-image-dim;
+  }
 }
 
 .carousel .row {
   display: flex;
   position: absolute;
   width: fit-content;
-  animation: slide 20s linear infinite; /*take 10s to perform this animation once*/
+  animation: slide-desktop 20s linear infinite; /*take 10s to perform this animation once*/
   gap: $image-gap;
   &:hover {
     animation-play-state: paused;
   }
+
+  @include mixins.phone {
+    animation: slide-mobile 20s linear infinite; /*take 10s to perform this animation once*/
+    gap: $mobile-image-gap;
+  }
 }
 
 .carousel .row .column {
   perspective: 100px; /*how far away a 3D object is from user*/
   display: flex;
 }
 
-@keyframes slide {
+@keyframes slide-desktop {
   0% {
     left: 0;
   }
@@ -51,3 +68,14 @@ $image-gap: 50px;
     left: calc(-1 * var(--num-images) * ($image-dim + $image-gap));
   }
 }
+
+@keyframes slide-mobile {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: calc(
+      -1 * var(--num-images) * ($mobile-image-dim + $mobile-image-gap)
+    );
+  }
+}
diff --git a/app/(pages)/_data/community-partners-carousel.json b/app/(pages)/_data/community-partners-carousel.json
@@ -0,0 +1,18 @@
+[
+    {
+      "src": "/cm_carousel1.png",
+      "alt": "picture of the jvmc"
+    },
+    {
+      "src": "/cm_carousel2.png",
+      "alt": "jvmc volunteers"
+    },
+    {
+      "src": "/cm_carousel3.png",
+      "alt": "jvmc volunteers"
+    },
+    {
+      "src": "/cm_carousel4.png",
+      "alt": "jvmc volunteers"
+    }
+  ]
diff --git a/app/(pages)/_data/community-partners.json b/app/(pages)/_data/community-partners.json
@@ -1,15 +1,14 @@
-{
-  "title": "Community Partners",
-  "subtitle": "Our trusted allies supporting our mission beyond the our clinics.",
-  "partners": [
+[
     {
       "name": "Harm Reduction Services",
       "description": "HRS offers free, confidential harm reduction services to improve the health and well-being of drug users, in addition to empowering local communities.",
       "location": "2800 Stockton Blvd. Sacramento, CA 95817",
       "date": "Monday - Friday, 12:00 PM - 6:00 PM",
       "appointment": "",
       "website": "https://hrssac.org/",
-      "buttonText": "Visit HRS Website"
+      "buttonText": "Visit HRS Website",
+      "imageSrc": "/HRS.png",
+      "imageAlt": "Volunteers at an event table for Harm Reduction Services"
     },
     {
       "name": "Gender Health Center",
@@ -18,7 +17,9 @@
       "date": "1st & 3rd Friday of each month, 6:00 PM - 9:00 PM",
       "appointment": "By appointment only",
       "website": "https://www.genderhealthcenter.org/",
-      "buttonText": "Visit GHC Website"
+      "buttonText": "Visit GHC Website",
+      "imageSrc": "/GHC.png",
+      "imageAlt": "Three volunteers holding service items"
     },
     {
       "name": "Stockton Harm Reduction Program",
@@ -27,57 +28,8 @@
       "date": "Saturdays, 9:00 AM - 1 :00 PM",
       "appointment": "",
       "website": "https://theshrp.org/",
-      "buttonText": "Visit SHRP Website"
+      "buttonText": "Visit SHRP Website",
+      "imageSrc": "/SHRC.jpg",
+      "imageAlt": "Stockton Harm Reduction Program volunteers at a community event"
     }
-  ],
-
-  "images": ["/HRS.png", "/GHC.png", "/SHRC.png"],
-
-  "imagesAlt": [
-    "Volunteers at an event table for Harm Reduction Services",
-    "Three volunteers holding service items",
-    "Stockton Harm Reduction Program volunteers at a community event"
-  ],
-
-  "carousel": {
-    "bottom_title": "Where We’ve Gone",
-    "bottom_subtitle": "See our community in action!",
-    "carousel_images": [
-      {
-        "src": "/cm_carousel1.png",
-        "alt": "picture of the jvmc"
-      },
-      {
-        "src": "/cm_carousel2.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel3.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel4.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel1.png",
-        "alt": "picture of the jvmc"
-      },
-      {
-        "src": "/cm_carousel2.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel3.png",
-        "alt": "jvmc volunteers"
-      },
-      {
-        "src": "/cm_carousel4.png",
-        "alt": "jvmc volunteers"
-      }
-    ]
-  },
-
-  "bottom_gradient": "/images/communityPartnersGradient.png",
-  "bottom_gradient_alt": "Bottom Gradient"
-}
+  ]