Console Warnings

app/(pages)/(home)/page.jsx

@@ -91,6 +91,7 @@ export default async function Home() {
             alt={"JVMC Teddy Bear"}
             style={{ objectFit: "cover" }}
             fill={true}
+            sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
           />
         </div>
 
@@ -197,6 +198,7 @@ export default async function Home() {
               alt={"Group of medical students"}
               style={{ objectFit: "cover" }}
               fill={true}
+              sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
             />
           </div>
         </div>

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

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import styles from "./AboutUsCard.module.scss";
+
+export default function AboutUsCard({ content, img, title, alt, alignment }) {
+  return (
+    <div className={`${styles.cardWrapper} ${styles[alignment]}`}>
+      <div className={styles.cardContainer}>
+        <h3>{title}</h3>
+        {/* Map chunks of text to <p> elements */}
+        {content.map((text, idx) => (
+          <p key={idx}>{text}</p>
+        ))}
+      </div>
+      <div className={`${styles.img} ${styles[alignment]}`}>
+        <Image
+          src={img}
+          style={{ objectFit: "cover" }}
+          fill={true}
+          alt={alt}
+          sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 100vw"}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -13,16 +13,19 @@ export default function AboutUsCard({
       <div className={styles.cardContainer}>
         <h3>{title}</h3>
         {/* LONG TEXT */}
-        <p dangerouslySetInnerHTML={{ __html: content }} />
+        <div
+          className={styles.content}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
       </div>
       <div className={`${styles.img} ${styles[alignment]}`}>
         <Image
           src={img}
           style={{ objectFit: "cover" }}
           fill={true}
           alt={imgAlt}
+          sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 100vw"}
         />
-        {console.log(imgAlt)}
       </div>
     </div>
   );

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

@@ -43,3 +43,11 @@
 .img.right {
   border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
 }
+
+.content {
+  @include mixins.fontStyle(1.1rem, 400, 150%, var(--font2));
+
+  @include mixins.tablet {
+    @include mixins.fontStyle(1rem, 400, 150%, var(--font2));
+  }
+}

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

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

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

@@ -1,3 +1,5 @@
+@use "@/app/(pages)/_globals/mixins.scss";
+
 .page {
   display: flex;
   flex-direction: column;
@@ -56,3 +58,11 @@
     transform: translate(-50%, -50%); // moves 0, 0 point to center of image
   }
 }
+
+.description {
+  @include mixins.fontStyle(1.1rem, 400, 150%, var(--font2));
+
+  @include mixins.tablet {
+    @include mixins.fontStyle(1rem, 400, 150%, var(--font2));
+  }
+}

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

@@ -12,7 +12,7 @@
 
   @include mixins.tablet {
     gap: 16px;
-    width: 90%;
+    width: 100%;
   }
 }
 

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

@@ -17,6 +17,7 @@ export default function CommunityPartnersCard({ index, partner }) {
           src={partner.imageSrc}
           style={{ objectFit: "cover", objectPosition: "50% 20%" }}
           fill={true}
+          sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 100vw"}
           alt={partner.imageAlt}
         />
       </div>

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

@@ -10,13 +10,13 @@ export default function CommunityPartnersCarousel({ images }) {
       <div className={styles.row}>
         {doubleImages.map((image, index) => (
           <div key={index} className={styles.column}>
-            {console.log(image.src)}
             <Image
               className={styles.img}
               src={image.src}
               alt={image.alt}
               fill={true}
               style={{ objectFit: "cover" }}
+              sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
             />
           </div>
         ))}

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

@@ -17,8 +17,9 @@ export default function Footer() {
           <Image
             src={data.img}
             alt={data.imgAlt}
-            style={{ objectFit: "fill" }}
+            style={{ objectFit: "cover" }}
             fill={true}
+            sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
           />
         </div>
         <ul className={styles.socialLinks}>

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

@@ -124,7 +124,6 @@ $logo-width: calc(8px * 20);
   display: flex;
   background-color: var(--teal);
   color: var(--offwhite);
-  font-family: var(--font2);
   font-weight: var(--light);
 }
 

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

@@ -6,25 +6,27 @@ import Link from "next/link";
 import navLinks from "../../_data/header.json";
 import styles from "./Header.module.scss";
 import { useState } from "react";
-import {Menu, X} from 'lucide-react';
+import { Menu, X } from "lucide-react";
 
 export default function Header() {
   const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false); // Toggle state for mobile menu visibility
 
   return (
     <div className={styles.header}>
-      <Image src="/images/JVMC Logo 1.png" alt="JVMC Logo" width={120} height={88} />
-      
+      <Image src="/logo.png" alt="JVMC Logo" width={120} height={88} />
+
       {/* Mobile Menu Icon */}
       <div className={styles.menuIcon} onClick={() => setMenuOpen(!menuOpen)}>
         {menuOpen ? <X /> : <Menu />}
       </div>
 
       {/* Mobile Header Links (with class showMenu applied to toggle visibility) */}
-      <div className={`${styles.mobileMenu} ${menuOpen ? styles.showMenu : ""}`}>
+      <div
+        className={`${styles.mobileMenu} ${menuOpen ? styles.showMenu : ""}`}
+      >
         <div className={styles.mobileHeaderLinks}>
-          {navLinks.map(({ href, label}) => {
+          {navLinks.map(({ href, label }) => {
             return (
               <Link
                 key={href}
@@ -48,10 +50,10 @@ export default function Header() {
               key={href}
               href={href}
               className={
-                  isButton
-                    ? `${"btn"} ${styles.btnSize} ${isActive && styles.btnActive}`
-                    : `${styles.headerItems} ${isActive && styles.active}`
-                }
+                isButton
+                  ? `${"btn"} ${styles.btnSize} ${isActive && styles.btnActive}`
+                  : `${styles.headerItems} ${isActive && styles.active}`
+              }
             >
               {label}
             </Link>

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

@@ -93,7 +93,6 @@
   text-decoration: none;
   color: var(--dark-grey);
   @include mixins.fontStyle(1.1rem, 400, 150%, var(--font2));
-  // border: solid 1px green;
   transition:
     font-weight 0.2s ease,
     color 0.2s ease;

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

@@ -21,6 +21,7 @@ export default function HomeCard({
           alt={imgAlt}
           fill={true}
           style={{ objectFit: "cover" }}
+          sizes={"(max-width: 1048px) 33vw, (max-width: 720px) 100vw"}
         />
       </div>
 

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

@@ -69,6 +69,7 @@ export default function HomepageCarousel({ data }) {
                     alt="image"
                     fill
                     style={{ objectFit: "cover" }}
+                    sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
                   />
                 </div>
                 <div className={styles.info}>

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

@@ -14,14 +14,15 @@ export default function VolunteerCard({
 }) {
   return (
     <div className={`${styles.cardComponent} ${styles[direction]}`}>
-      <div className={styles.cardText}>
+      <div className={`${styles.cardText} ${styles[direction]}`}>
         <div className={styles.cardTitle}>
           <div className={styles.icon}>
             <Image
               src={icon}
               alt={iconAlt}
               style={{ objectFit: "cover" }}
               fill={true}
+              sizes={"(max-width: 1048px) 33vw"}
             />
           </div>
           <h4>{title}</h4>
@@ -43,6 +44,7 @@ export default function VolunteerCard({
           alt={imageAlt}
           fill={true}
           style={{ objectFit: "cover" }}
+          sizes={"(max-width: 1048px) 33vw, (max-width: 720px) 50vw, 100vw"}
         />
       </div>
     </div>

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

@@ -4,6 +4,7 @@
   display: flex;
   width: 1000px;
   position: relative;
+  text-align: left;
 
   background-color: var(--card-background);
   border-radius: var(--card-border-radius);
@@ -24,6 +25,8 @@
 .cardComponent.left {
   flex-direction: row-reverse;
   margin-left: 64px;
+  justify-content: flex-end;
+
   @include mixins.tablet {
     margin-left: 0px;
     flex-direction: column-reverse;
@@ -52,6 +55,18 @@
   }
 }
 
+.cardText.left {
+  margin-left: 240px;
+
+  @include mixins.sm-desktop {
+    margin-left: 135px;
+  }
+
+  @include mixins.tablet {
+    margin-left: 0px;
+  }
+}
+
 .cardTitle {
   display: flex;
   align-items: center;

app/(pages)/_globals/globals.scss

@@ -36,8 +36,6 @@
 
   // Text
   --bold: 700; // font-weight: var(--bold);
-  --font1: "Merriweather", sans-serif;
-  --font2: "Inter", sans-serif;
 
   // Shadows ( box-shadow: var(--drop-shadow); is syntax for shadows )
   --drop-shadow: 0px 0px 50px 0px rgba(173, 173, 173, 0.25); // For bigger shapes

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

@@ -163,12 +163,14 @@ export default async function About() {
             src={eventCardData.eventImage}
             style={{ objectFit: "cover" }}
             fill={true}
+            sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 100vw"}
             alt={eventCardData.eventImageAlt}
           />
         </div>
         <div className={styles.fairText}>
           <h4>{eventCardData.eventTitle}</h4>
-          <p
+          <div
+            className={styles.eventDescription}
             dangerouslySetInnerHTML={{
               __html: eventCardData.eventDescription,
             }}

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

@@ -93,3 +93,11 @@
   width: 100%;
   height: 100%;
 }
+
+.eventDescription {
+  @include mixins.fontStyle(1.1rem, 400, 150%, var(--font2));
+
+  @include mixins.tablet {
+    @include mixins.fontStyle(1rem, 400, 150%, var(--font2));
+  }
+}

app/(pages)/clinic-schedule/page.module.scss

@@ -136,4 +136,9 @@
   flex-direction: column;
   align-items: center;
   gap: 64px;
+
+  @include mixins.tablet {
+    max-width: calc(8px * 104);
+    width: 90%;
+  }
 }

app/(pages)/community-partners/page.jsx

@@ -107,6 +107,7 @@ export default async function CommunityPartners() {
             src={"/images/communityPartnersGradient.png"}
             alt={"Bottom gradient"}
             fill={true}
+            priority={true}
           />
         </div>
       </div>

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

@@ -37,8 +37,6 @@ export default async function ContactUs() {
   const generalData = await getContactUsGeneralInfo();
   const { heading1, heading2 } = contactData.questionsCard;
 
-  console.log(generalData.apptInstructions);
-
   return (
     <main className={styles.contactUs}>
       {/* MAP COMPONENT */}
@@ -48,6 +46,7 @@ export default async function ContactUs() {
           alt="Decorative Rainbow Top"
           fill="true"
           style={{ objectFit: "contain" }}
+          priority={true}
         />
       </div>
       <h1>Contact Us</h1>
@@ -81,6 +80,7 @@ export default async function ContactUs() {
               alt="Decorative Dots Left"
               fill="true"
               style={{ objectFit: "contain" }}
+              sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
             />
           </div>
         </div>
@@ -112,6 +112,7 @@ export default async function ContactUs() {
               alt="Decorative Dots Right"
               fill="true"
               style={{ objectFit: "contain" }}
+              sizes={"(max-width: 1048px) 50vw, (max-width: 720px) 33vw"}
             />
           </div>
         </div>