From b189195112c9e00df495df4ac02b4be30ef84785 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:12:16 -0400
Subject: [PATCH 01/16] accesibility fix on apply button

---
 react-ystemandchess/src/Pages/Mentor/Mentor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-ystemandchess/src/Pages/Mentor/Mentor.tsx b/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
index 5db7a3f6..c0d014af 100644
--- a/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
+++ b/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
@@ -35,7 +35,7 @@ const Mentor = () => {
         <img src={teacher} alt="Teaching and Learning" />
       </section>
 
-      <button className="apply-button" arial-label="Apply Button" >Apply Now</button>
+      <button className="apply-button" aria-label="Apply Button" >Apply Now</button>
     </main>
   );
 };

From b27897979b037972aef6c868af52c77d0fd21260 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:12:29 -0400
Subject: [PATCH 02/16] refactor Mentor.scss for improved layout and styling
 consistency

---
 .../src/Pages/Mentor/Mentor.scss              | 65 ++++++++++++++-----
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Mentor/Mentor.scss b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
index 713d1a04..be264f27 100644
--- a/react-ystemandchess/src/Pages/Mentor/Mentor.scss
+++ b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
@@ -1,14 +1,17 @@
 .board-container {
   text-align: center;
   padding: 20px;
+  max-width: 1200px;       /* center the entire page content */
+  margin: 0 auto;
 
   .flex-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;   /* keep text + image centered as a group */
+    gap: 3rem;                 /* spacing between text and image */
 
     .text-content {
-      flex: 1;
+      flex: 0 1 520px;
       text-align: left;
 
       h1 {
@@ -24,30 +27,41 @@
       }
 
       .apply-button {
-        @extend .apply-button; // Reuse the same button styling
+        @extend .apply-button;
       }
     }
 
     .image-content {
-      flex: 1;
-      text-align: right;
+      flex: 0 1 520px;
+      display: flex;
+      justify-content: center;  /* center the mentor image horizontally */
+      align-items: center;
 
       img {
         max-width: 100%;
+        max-height: 450px;
         height: auto;
       }
     }
   }
 
   .line-break {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: 20px auto;
+    max-width: 900px;
+    text-align: center;
   }
 
-  .mentor-details img {
-    width: 100%;
-    height: auto;
-    margin-bottom: 20px;
+  .mentor-details {
+    display: flex;
+    justify-content: center;
+    max-width: 900px;
+    margin: 20px auto;
+
+    img {
+      width: 100%;
+      height: auto;
+      margin-bottom: 20px;
+    }
   }
 
   .mentor-roles {
@@ -61,10 +75,16 @@
       margin: 0 5px;
     }
   }
+
+  /* center the final Apply Now button */
+  > .apply-button {
+    display: block;
+    margin: 20px auto 0;
+  }
 }
 
 .apply-button {
-  background-color: #ead94c; /* Same color as view-button */
+  background-color: #ead94c; /* keep original color */
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
@@ -74,14 +94,15 @@
   transition: background-color 0.3s, transform 0.2s;
 
   &:hover {
-    background-color: #ffe066; /* Brighter yellow on hover */
-    transform: translateY(-1px); /* Slight push up on hover */
+    background-color: #ffe066;
+    transform: translateY(-1px);
   }
 
   &:active {
-    transform: translateY(1px); /* Slight push down on click */
+    transform: translateY(1px);
   }
 }
+
 @media screen and (max-width: 768px) {
   .board-container {
     padding: 10px;
@@ -108,7 +129,7 @@
       }
 
       .image-content {
-        text-align: center;
+        justify-content: center;
 
         img {
           width: 100%;
@@ -117,8 +138,11 @@
       }
     }
 
-    .mentor-details img {
-      margin-bottom: 10px;
+    .mentor-details {
+      max-width: 90%;
+      img {
+        margin-bottom: 10px;
+      }
     }
 
     .mentor-roles {
@@ -136,6 +160,11 @@
       margin-top: 10px;
       margin-bottom: 10px;
     }
+
+    > .apply-button {
+      width: 80%;
+      max-width: 300px;
+    }
   }
 
   .apply-button {

From e9f66606ba9d5eca508c303f30dd02082bdbf857 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:30:13 -0400
Subject: [PATCH 03/16] enhance accessibility and content clarity/spelling
 errors in Programs component

---
 .../src/Pages/Programs/Programs.tsx           | 59 ++++++++++++-------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.tsx b/react-ystemandchess/src/Pages/Programs/Programs.tsx
index 301d74c1..f6cf2472 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.tsx
+++ b/react-ystemandchess/src/Pages/Programs/Programs.tsx
@@ -1,17 +1,28 @@
 import React from "react";
 import kidsCoding from "../../images/kidsCoding.png";
 import "./Programs.scss";
+
 const Programs = () => {
   return (
-    <main role="main">
-      <section className="hero-section" role="region">
-        <img src={kidsCoding} alt="kids coding" role="presentaion" />
+    <main>
+      <section className="hero-section" aria-labelledby="programs-title">
+        <img
+          src={kidsCoding}
+          alt="Children learning coding together"
+          loading="lazy"
+          decoding="async"
+        />
+
         <div className="programs-text">
-          <h2 data-testid="programs-title">Our Programs</h2>
+          <h2 id="programs-title" data-testid="programs-title">
+            Our Programs
+          </h2>
+
           <h4>
             Become a member today to benefit your child and all other children
             participating in our program!
           </h4>
+
           <p>
             Y STEM and Chess Inc. (YSC) seeks to open the hearts and minds of
             kids (K-12) to the world of STEM through chess and the Mastery
@@ -19,12 +30,14 @@ const Programs = () => {
             principles. YSC strives to empower underserved and at-risk children
             through mentoring and STEM skills development to enable them to
             pursue STEM careers and change their life trajectories.
-            <br />
-            <br />
+          </p>
+
+          <p>
             Students will receive personal guidance and role development in a
             safe environment through our background-checked mentors. Specific
-            instruction includes
+            instruction includes:
           </p>
+
           <ul>
             <li>In-depth programs from K-12</li>
             <li>Chess strategy instruction</li>
@@ -34,22 +47,26 @@ const Programs = () => {
             <li>Personal skills development</li>
             <li>Preparation for Advanced Learning and Career Paths</li>
           </ul>
+
           <a
+            className="register-button"
             data-testid="register-btn-link"
             href="https://forms.gle/cvdJxrSRCg1kpWXP8"
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
+            aria-label="Register for Y STEM and Chess (opens in a new tab)"
           >
-            <button
-              data-testid="register-btn"
-              aria-label="Register for Y STEM and Chess"
-            >
-              Register Now
-            </button>
+            Register Now
           </a>
         </div>
       </section>
-      <section className="sub-terms" role="region">
+
+      {/* Subscription terms */}
+      <section className="sub-terms" aria-labelledby="sub-terms-heading">
+        <h2 id="sub-terms-heading" className="sr-only">
+          Program Subscription Terms
+        </h2>
+
         <div data-testid="sub-terms-left" className="sub-terms-left">
           <h3>
             First Month is Free <br />
@@ -57,13 +74,14 @@ const Programs = () => {
           </h3>
           <h5>The cost is just $25 a week after the first month.</h5>
           <p>
-            After an initial sign-up, students can retain access to the program,
-            and all sessions, for a fixed cost. Students will recieve personal
-            guidance and role-developement, in a safe environment, through our
+            After an initial sign-up, students can retain access to the program
+            and all sessions for a fixed cost. Students will receive personal
+            guidance and role development in a safe environment through our
             background-checked mentors. If you have no need for tutoring and
-            just want to help our mission out, donate through our Cause link.
+            just want to help our mission, donate through our Cause link.
           </p>
         </div>
+
         <div data-testid="sub-terms-right" className="sub-terms-right">
           <h3>
             Can't afford to pay monthly? We'd still love to have your student
@@ -76,11 +94,10 @@ const Programs = () => {
             in one generation. The founders were tired of help being promised
             every year, every election, every generation. We are helping our
             students help themselves.
-            <br />
           </p>
           <p>
             That is why our program is FREE to students from at-risk
-            backgrounds, schools or organizations that help disadvantaged
+            backgrounds, schools, or organizations that help disadvantaged
             communities, specifically those that qualify for free and reduced
             lunch.
           </p>

From 7e8bc0bd0ee2284b0f5b2927453b9745b04c6fbf Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:34:53 -0400
Subject: [PATCH 04/16] refactor Programs.scss for improved layout, and spacing

---
 .../src/Pages/Programs/Programs.scss          | 232 +++++++++++-------
 1 file changed, 149 insertions(+), 83 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index b59a0ec6..f262a932 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,158 +1,224 @@
+
+.hero-section,
+.sub-terms {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .hero-section {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 8rem;
-  margin: 5rem 7rem;
-  border-radius: 1rem;
+  justify-content: center;
+  gap: 3.5rem;
+  margin: 4rem 1.5rem;
+  padding: 2.25rem;
   background-color: #3f8cdf;
-  padding: 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
 
+  /* image column */
   img {
+    display: block;
+    width: 100%;
+    max-width: 520px;     /* keeps image from exploding */
+    height: auto;
     object-fit: contain;
-    border-radius: 1rem;
-    box-shadow: 0.1rem 0.1rem 0.1rem black;
+    border-radius: 0.75rem;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
   }
 
+  /* text column */
   .programs-text {
-    text-align: left;
     color: rgb(255, 250, 250);
-    max-width: 65%;
+    max-width: 560px;
+    text-align: left;
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: 0.9rem;          /* consistent spacing */
+    line-height: 1.6;
+
+    h2 {
+      margin: 0 0 0.25rem 0;
+      font-size: 2.25rem;
+      line-height: 1.2;
+      letter-spacing: 0.2px;
+      text-shadow: 0 1px 1px rgba(0,0,0,0.18);
+    }
+
+    h4 {
+      margin: 0 0 0.25rem 0;
+      font-size: 1.35rem;
+      font-weight: 600;
+      opacity: 0.95;
+    }
 
     p {
-      font-size: 1.2rem;
+      margin: 0;
+      font-size: 1.05rem;
+      opacity: 0.95;
     }
+
     ul {
-      margin: 0;
+      margin: 0.25rem 0 0.25rem 1.2rem;
+      padding: 0;
+      list-style: disc;
+
       li {
-        font-size: 1.2rem;
+        font-size: 1.05rem;
+        margin: 0.25rem 0;
       }
     }
 
-    h2 {
-      font-size: 2.5rem;
-      margin: 0;
-    }
-    h4 {
-      margin: 0;
-      font-size: 1.5rem;
-    }
-  }
+    a {
+      margin-top: 0.5rem;
+      text-decoration: none;
+
+      button,
+      &.register-button {
+        display: inline-block;
+        border: none;
+        border-radius: 0.5rem;
+        background-color: #eef36a;
+        color: #111;
+        width: auto;
+        min-width: 12rem;
+        height: 3rem;
+        padding: 0 1rem;
+        cursor: pointer;
+        font-size: 1.1rem;
+        font-weight: 700;
+        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
+        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+      }
 
-  a {
-    margin-top: 0.4rem;
-    button {
-      border: none;
-      border-radius: 0.5rem;
-      background: transparent;
-      width: 12rem;
-      height: 3rem;
-      cursor: pointer;
-      font-size: 1.2rem;
-      background-color: #eef36a;
-    }
-    button:hover {
-      transition: 0.3s;
-      transform: scale(1.1);
+      button:hover,
+      &.register-button:hover {
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: 0 10px 18px rgba(0,0,0,0.18);
+        background-color: #f3f67d;
+      }
+
+      button:active,
+      &.register-button:active {
+        transform: translateY(0);
+      }
+
+      button:focus-visible,
+      &.register-button:focus-visible {
+        outline: 3px solid #fff;
+        outline-offset: 2px;
+      }
     }
   }
 }
 
 .sub-terms {
-  display: flex;
-  margin: 5rem 7rem;
-  gap: 10rem;
-
-  .sub-terms-left {
-    height: 80%;
-  }
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2.5rem;
+  margin: 4rem 1.5rem;
 
   .sub-terms-left,
   .sub-terms-right {
-    text-align: left;
     background-color: #e2aa03;
+    color: #ffffff;
     border-radius: 1rem;
     padding: 2rem;
-    font-size: 1.4rem;
-    flex: 1;
-    color: white;
+    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
     display: flex;
     flex-direction: column;
-    gap: 0.8rem;
+    gap: 0.9rem;
+    text-align: left;
+
+    h3 {
+      margin: 0;
+      font-size: 2rem;
+      line-height: 1.3;
+      text-shadow: 0 1px 1px rgba(0,0,0,0.16);
+    }
+
+    h5 {
+      margin: 0;
+      font-size: 1.2rem;
+      font-weight: 600;
+      opacity: 0.95;
+    }
 
     p {
       margin: 0;
+      font-size: 1.05rem;
+      line-height: 1.7;
     }
   }
+}
+
 
-  h3 {
-    font-size: 2.4rem;
-    margin: 0;
+@media (max-width: 992px) {
+  .hero-section {
+    gap: 2.25rem;
+    padding: 1.75rem;
+
+    .programs-text h2 { font-size: 2rem; }
+    .programs-text h4 { font-size: 1.2rem; }
   }
-  h5 {
-    font-size: 1.7rem;
-    margin: 0;
+
+  .sub-terms {
+    gap: 1.75rem;
   }
 }
 
-/* ----------- Responsive styles ----------- */
 @media (max-width: 768px) {
   .hero-section {
     flex-direction: column;
     margin: 2rem 1rem;
-    gap: 2rem;
-    padding: 1.5rem;
+    gap: 1.5rem;
+    padding: 1.25rem;
 
     img {
       width: 100%;
+      max-width: 420px;
       height: auto;
+      margin: 0 auto;
     }
 
     .programs-text {
       max-width: 100%;
-      text-align: center;
+      text-align: left; 
+      padding: 0 0.25rem;
 
-      h2 {
-        font-size: 2rem;
-      }
-      h4 {
-        font-size: 1.2rem;
-      }
-      p {
-        font-size: 1rem;
-      }
+      h2 { font-size: 1.8rem; }
+      h4 { font-size: 1.05rem; }
+      p  { font-size: 0.98rem; }
 
-      ul li {
-        font-size: 1rem;
-        text-align: left;
-      }
+      ul li { font-size: 0.98rem; }
 
-      a button {
+      a button,
+      a.register-button {
         width: 100%;
+        max-width: 360px;
       }
     }
   }
 
   .sub-terms {
-    flex-direction: column;
+    grid-template-columns: 1fr;
     margin: 2rem 1rem;
-    gap: 2rem;
 
     .sub-terms-left,
     .sub-terms-right {
-      font-size: 1.1rem;
-      padding: 1.5rem;
-    }
+      font-size: 1rem;
+      padding: 1.25rem;
 
-    h3 {
-      font-size: 1.8rem;
+      h3 { font-size: 1.5rem; }
+      h5 { font-size: 1.05rem; }
     }
+  }
+}
 
-    h5 {
-      font-size: 1.3rem;
-    }
+/* ---------- Motion preference ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .hero-section .programs-text a button,
+  .hero-section .programs-text a.register-button {
+    transition: none;
   }
 }

From dc5b1b5cbce65003b13de6e75bb47d1fd6008451 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:52:30 -0400
Subject: [PATCH 05/16] some alignment fixes

---
 .../src/Pages/Programs/Programs.scss          | 115 +++++++++---------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index f262a932..245b93e8 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,100 +1,106 @@
-
+/* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
   max-width: 1200px;
   margin: 0 auto;
 }
 
+/* ===== HERO CARD (blue) ===== */
 .hero-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 3.5rem;
-  margin: 4rem 1.5rem;
-  padding: 2.25rem;
+  /* one nice card */
   background-color: #3f8cdf;
-  border-radius: 1rem;
-  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
+  margin: 4rem 1.5rem;
+  padding: 2.5rem;
+  border-radius: 16px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+
+  /* use grid for tighter control */
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) 1.2fr;
+  align-items: center;
+  gap: 2.25rem;
 
   /* image column */
   img {
     display: block;
     width: 100%;
-    max-width: 520px;     /* keeps image from exploding */
+    max-width: 520px;
     height: auto;
-    object-fit: contain;
-    border-radius: 0.75rem;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    margin: 0 auto; /* keeps image centered within its column */
   }
 
   /* text column */
   .programs-text {
-    color: rgb(255, 250, 250);
-    max-width: 560px;
-    text-align: left;
+    color: #fff;
+    max-width: 640px;
+    margin: 0 auto; /* keeps column centered when very wide */
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;          /* consistent spacing */
-    line-height: 1.6;
+    gap: 0.9rem;
+    line-height: 1.65;
+    text-align: left;
 
     h2 {
-      margin: 0 0 0.25rem 0;
-      font-size: 2.25rem;
+      margin: 0 0 0.35rem 0;
+      font-size: 2.35rem;
       line-height: 1.2;
       letter-spacing: 0.2px;
-      text-shadow: 0 1px 1px rgba(0,0,0,0.18);
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
     }
 
     h4 {
-      margin: 0 0 0.25rem 0;
+      margin: 0 0 0.5rem 0;
       font-size: 1.35rem;
-      font-weight: 600;
-      opacity: 0.95;
+      font-weight: 700;
+      opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.05rem;
-      opacity: 0.95;
+      font-size: 1.06rem;
+      opacity: 0.96;
     }
 
+    /* nicer bullets, consistent spacing */
     ul {
-      margin: 0.25rem 0 0.25rem 1.2rem;
+      margin: 0.35rem 0 0.35rem 1.25rem;
       padding: 0;
       list-style: disc;
 
       li {
-        font-size: 1.05rem;
+        font-size: 1.06rem;
         margin: 0.25rem 0;
       }
     }
 
+    /* CTA: supports either <a><button>… or <a class="register-button">… */
     a {
-      margin-top: 0.5rem;
+      margin-top: 0.75rem;
       text-decoration: none;
 
       button,
       &.register-button {
         display: inline-block;
         border: none;
-        border-radius: 0.5rem;
-        background-color: #eef36a;
+        border-radius: 8px;
+        background-color: #eef36a; /* your yellow */
         color: #111;
-        width: auto;
         min-width: 12rem;
-        height: 3rem;
-        padding: 0 1rem;
-        cursor: pointer;
+        padding: 0.85rem 1.25rem;
         font-size: 1.1rem;
-        font-weight: 700;
-        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
+        font-weight: 800;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
         transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+        cursor: pointer;
       }
 
       button:hover,
       &.register-button:hover {
         transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 10px 18px rgba(0,0,0,0.18);
+        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
         background-color: #f3f67d;
       }
 
@@ -112,6 +118,7 @@
   }
 }
 
+/* ===== SUBSCRIPTION CARDS (yellow) ===== */
 .sub-terms {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -122,9 +129,9 @@
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
-    border-radius: 1rem;
+    border-radius: 16px;
     padding: 2rem;
-    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
@@ -134,7 +141,7 @@
       margin: 0;
       font-size: 2rem;
       line-height: 1.3;
-      text-shadow: 0 1px 1px rgba(0,0,0,0.16);
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
     }
 
     h5 {
@@ -152,14 +159,15 @@
   }
 }
 
-
+/* ===== RESPONSIVE ===== */
 @media (max-width: 992px) {
   .hero-section {
-    gap: 2.25rem;
-    padding: 1.75rem;
+    grid-template-columns: 1fr; /* stack image and text */
+    gap: 1.75rem;
+    padding: 2rem;
 
     .programs-text h2 { font-size: 2rem; }
-    .programs-text h4 { font-size: 1.2rem; }
+    .programs-text h4 { font-size: 1.18rem; }
   }
 
   .sub-terms {
@@ -169,28 +177,21 @@
 
 @media (max-width: 768px) {
   .hero-section {
-    flex-direction: column;
     margin: 2rem 1rem;
-    gap: 1.5rem;
-    padding: 1.25rem;
+    padding: 1.5rem;
 
     img {
-      width: 100%;
       max-width: 420px;
-      height: auto;
-      margin: 0 auto;
     }
 
     .programs-text {
-      max-width: 100%;
-      text-align: left; 
       padding: 0 0.25rem;
 
       h2 { font-size: 1.8rem; }
-      h4 { font-size: 1.05rem; }
-      p  { font-size: 0.98rem; }
+      h4 { font-size: 1.06rem; }
+      p  { font-size: 0.99rem; }
 
-      ul li { font-size: 0.98rem; }
+      ul li { font-size: 0.99rem; }
 
       a button,
       a.register-button {
@@ -215,7 +216,7 @@
   }
 }
 
-/* ---------- Motion preference ---------- */
+/* motion preference */
 @media (prefers-reduced-motion: reduce) {
   .hero-section .programs-text a button,
   .hero-section .programs-text a.register-button {

From 0fac0d030b4f4c7644d79ca6056c60f9813592c4 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 18:07:50 -0400
Subject: [PATCH 06/16] Everything centered

---
 .../src/Pages/Programs/Programs.scss          | 109 ++++++++++--------
 1 file changed, 64 insertions(+), 45 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index 245b93e8..d5d8c0f8 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,22 +1,28 @@
+/* Shared container width so hero + yellow cards line up perfectly */
+:root {
+  --container-max: 1280px;              /* increase for wider card */
+  --container-gutter: 2rem;             /* side padding on small screens */
+}
+
 /* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
-  max-width: 1200px;
-  margin: 0 auto;
+  width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
+  margin-inline: auto;                   /* perfect horizontal centering */
 }
 
 /* ===== HERO CARD (blue) ===== */
 .hero-section {
-  /* one nice card */
+  /* big, centered card */
+  margin-block: 3rem;                    /* vertical space */
   background-color: #3f8cdf;
-  margin: 4rem 1.5rem;
-  padding: 2.5rem;
-  border-radius: 16px;
-  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+  padding: 2.75rem;                      /* a touch more breathing room */
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
 
-  /* use grid for tighter control */
+  /* inside layout */
   display: grid;
-  grid-template-columns: minmax(260px, 1fr) 1.2fr;
+  grid-template-columns: minmax(280px, 1.05fr) 1.3fr;  /* more room for text */
   align-items: center;
   gap: 2.25rem;
 
@@ -24,76 +30,75 @@
   img {
     display: block;
     width: 100%;
-    max-width: 520px;
+    max-width: 560px;                    /* a tad larger */
     height: auto;
     object-fit: cover;
-    border-radius: 12px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-    margin: 0 auto; /* keeps image centered within its column */
+    border-radius: 14px;
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
+    margin: 0 auto;
   }
 
   /* text column */
   .programs-text {
     color: #fff;
-    max-width: 640px;
-    margin: 0 auto; /* keeps column centered when very wide */
+    max-width: 720px;                    /* wider text block */
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;
-    line-height: 1.65;
+    gap: 1rem;
+    line-height: 1.68;
     text-align: left;
 
     h2 {
-      margin: 0 0 0.35rem 0;
-      font-size: 2.35rem;
+      margin: 0 0 0.4rem 0;
+      font-size: 2.5rem;
       line-height: 1.2;
       letter-spacing: 0.2px;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
     }
 
     h4 {
-      margin: 0 0 0.5rem 0;
-      font-size: 1.35rem;
+      margin: 0 0 0.6rem 0;
+      font-size: 1.4rem;
       font-weight: 700;
       opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.06rem;
+      font-size: 1.08rem;
       opacity: 0.96;
     }
 
-    /* nicer bullets, consistent spacing */
     ul {
-      margin: 0.35rem 0 0.35rem 1.25rem;
+      margin: 0.4rem 0 0.4rem 1.25rem;
       padding: 0;
       list-style: disc;
 
       li {
         font-size: 1.06rem;
-        margin: 0.25rem 0;
+        margin: 0.3rem 0;
       }
     }
 
-    /* CTA: supports either <a><button>… or <a class="register-button">… */
+    /* CTA (supports <a><button> or <a.register-button>) */
     a {
-      margin-top: 0.75rem;
+      margin-top: 0.9rem;
       text-decoration: none;
 
       button,
       &.register-button {
         display: inline-block;
         border: none;
-        border-radius: 8px;
-        background-color: #eef36a; /* your yellow */
+        border-radius: 10px;
+        background-color: #eef36a;
         color: #111;
-        min-width: 12rem;
-        padding: 0.85rem 1.25rem;
+        min-width: 14rem;                /* slightly wider button */
+        padding: 0.9rem 1.35rem;
         font-size: 1.1rem;
         font-weight: 800;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+        transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
         cursor: pointer;
       }
 
@@ -120,22 +125,27 @@
 
 /* ===== SUBSCRIPTION CARDS (yellow) ===== */
 .sub-terms {
+  /* same centered container width as hero */
+  margin-block: 3rem;
+
+  /* two equal columns, centered; cards stretch to same height */
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 2.5rem;
-  margin: 4rem 1.5rem;
+  align-items: stretch;                  /* equal height cards */
+  gap: 2.25rem;
 
   .sub-terms-left,
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
-    border-radius: 16px;
+    border-radius: 18px;
     padding: 2rem;
-    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
     text-align: left;
+    min-height: 260px;                   /* helps alignment on uneven content */
 
     h3 {
       margin: 0;
@@ -160,13 +170,19 @@
 }
 
 /* ===== RESPONSIVE ===== */
+@media (max-width: 1100px) {
+  .hero-section {
+    grid-template-columns: 1fr 1.2fr;
+  }
+}
+
 @media (max-width: 992px) {
   .hero-section {
-    grid-template-columns: 1fr; /* stack image and text */
-    gap: 1.75rem;
+    grid-template-columns: 1fr;          /* stack image + text */
+    gap: 1.6rem;
     padding: 2rem;
 
-    .programs-text h2 { font-size: 2rem; }
+    .programs-text h2 { font-size: 2.1rem; }
     .programs-text h4 { font-size: 1.18rem; }
   }
 
@@ -177,17 +193,20 @@
 
 @media (max-width: 768px) {
   .hero-section {
-    margin: 2rem 1rem;
+    width: min(100%, calc(100% - 2rem));
+    margin-block: 2rem;
     padding: 1.5rem;
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
 
     img {
-      max-width: 420px;
+      max-width: 440px;
     }
 
     .programs-text {
       padding: 0 0.25rem;
 
-      h2 { font-size: 1.8rem; }
+      h2 { font-size: 1.85rem; }
       h4 { font-size: 1.06rem; }
       p  { font-size: 0.99rem; }
 
@@ -196,13 +215,13 @@
       a button,
       a.register-button {
         width: 100%;
-        max-width: 360px;
+        max-width: 380px;
       }
     }
   }
 
   .sub-terms {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr;          /* stack cards */
     margin: 2rem 1rem;
 
     .sub-terms-left,
@@ -216,7 +235,7 @@
   }
 }
 
-/* motion preference */
+/* respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .hero-section .programs-text a button,
   .hero-section .programs-text a.register-button {

From c6591b1c8111a5e36febcd3d303ac7f2280b20ec Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 18:39:36 -0400
Subject: [PATCH 07/16] refactor Programs component - shadow and other fixes

---
 .../src/Pages/Programs/Programs.scss          | 193 +++++++-----------
 .../src/Pages/Programs/Programs.tsx           |  10 +-
 2 files changed, 79 insertions(+), 124 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index d5d8c0f8..ab032af7 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,48 +1,48 @@
-/* Shared container width so hero + yellow cards line up perfectly */
+
 :root {
-  --container-max: 1280px;              /* increase for wider card */
-  --container-gutter: 2rem;             /* side padding on small screens */
+  --container-max: 100rem; // 1600px = 100rem (assuming 1rem = 16px)
+  // Responsive gutter: min 0.75rem for small screens, scales with viewport (2vw), max 1.25rem for large screens
+  --container-gutter: clamp(0.75rem, 2vw, 1.25rem);
 }
 
-/* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
   width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
-  margin-inline: auto;                   /* perfect horizontal centering */
+  margin-inline: auto;
 }
 
-/* ===== HERO CARD (blue) ===== */
+
+//hero section (blue)
 .hero-section {
-  /* big, centered card */
-  margin-block: 3rem;                    /* vertical space */
+  margin-block: 2.5rem;
   background-color: #3f8cdf;
-  padding: 2.75rem;                      /* a touch more breathing room */
+  padding: clamp(2.0rem, 3vw + 2rem, 4rem);
   border-radius: 18px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+
+  width: min(var(--container-max), calc(100% - var(--container-gutter) * 1.2));
+  margin-inline: auto;
 
-  /* inside layout */
   display: grid;
-  grid-template-columns: minmax(280px, 1.05fr) 1.3fr;  /* more room for text */
+  grid-template-columns: minmax(300px, 1.1fr) 1.4fr;
   align-items: center;
-  gap: 2.25rem;
+  gap: clamp(1.25rem, 1.2vw + 0.5rem, 2.5rem);
 
-  /* image column */
   img {
     display: block;
     width: 100%;
-    max-width: 560px;                    /* a tad larger */
+    max-width: 700px;
     height: auto;
     object-fit: cover;
     border-radius: 14px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
-    margin: 0 auto;
+    margin: 0;
   }
 
-  /* text column */
   .programs-text {
     color: #fff;
-    max-width: 720px;                    /* wider text block */
-    margin: 0 auto;
+    max-width: 800px;
+    margin: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -51,7 +51,7 @@
 
     h2 {
       margin: 0 0 0.4rem 0;
-      font-size: 2.5rem;
+      font-size: clamp(2rem, 1.2vw + 1.6rem, 2.6rem);
       line-height: 1.2;
       letter-spacing: 0.2px;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
@@ -59,14 +59,14 @@
 
     h4 {
       margin: 0 0 0.6rem 0;
-      font-size: 1.4rem;
+      font-size: clamp(1.1rem, 0.6vw + 0.8rem, 1.45rem);
       font-weight: 700;
       opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.08rem;
+      font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1rem);
       opacity: 0.96;
     }
 
@@ -76,169 +76,128 @@
       list-style: disc;
 
       li {
-        font-size: 1.06rem;
+        font-size: clamp(1rem, 0.3vw + 0.9rem, 1.08rem);
         margin: 0.3rem 0;
       }
     }
 
-    /* CTA (supports <a><button> or <a.register-button>) */
-    a {
-      margin-top: 0.9rem;
+    a.register-button,
+    a > button {
+      display: inline-block;
+      border: none;
+      border-radius: 10px;
+      background-color: #eef36a;
+      color: #111;
+      min-width: 14rem;
+      padding: 0.9rem 1.35rem;
+      font-size: 1.1rem;
+      font-weight: 800;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+      transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
+      cursor: pointer;
       text-decoration: none;
+      margin-top: 0.9rem;
+    }
 
-      button,
-      &.register-button {
-        display: inline-block;
-        border: none;
-        border-radius: 10px;
-        background-color: #eef36a;
-        color: #111;
-        min-width: 14rem;                /* slightly wider button */
-        padding: 0.9rem 1.35rem;
-        font-size: 1.1rem;
-        font-weight: 800;
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-        transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
-        cursor: pointer;
-      }
-
-      button:hover,
-      &.register-button:hover {
-        transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
-        background-color: #f3f67d;
-      }
+    a.register-button:hover,
+    a > button:hover {
+      transform: translateY(-2px) scale(1.02);
+      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
+      background-color: #f3f67d;
+    }
 
-      button:active,
-      &.register-button:active {
-        transform: translateY(0);
-      }
+    a.register-button:active,
+    a > button:active {
+      transform: translateY(0);
+    }
 
-      button:focus-visible,
-      &.register-button:focus-visible {
-        outline: 3px solid #fff;
-        outline-offset: 2px;
-      }
+    a.register-button:focus-visible,
+    a > button:focus-visible {
+      outline: 3px solid #fff;
+      outline-offset: 2px;
     }
   }
 }
 
-/* ===== SUBSCRIPTION CARDS (yellow) ===== */
+//subscription cards(yellow)
 .sub-terms {
-  /* same centered container width as hero */
-  margin-block: 3rem;
+  margin-block: 2.5rem;
 
-  /* two equal columns, centered; cards stretch to same height */
   display: grid;
   grid-template-columns: 1fr 1fr;
-  align-items: stretch;                  /* equal height cards */
-  gap: 2.25rem;
+  align-items: stretch;
+  gap: clamp(1.25rem, 1.2vw + 0.5rem, 2.25rem);
 
   .sub-terms-left,
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
     border-radius: 18px;
-    padding: 2rem;
+    padding: clamp(1.25rem, 1.2vw + 0.5rem, 2rem);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
     text-align: left;
-    min-height: 260px;                   /* helps alignment on uneven content */
+    min-height: 260px;
 
     h3 {
       margin: 0;
-      font-size: 2rem;
+      font-size: clamp(1.5rem, 0.9vw + 1rem, 2rem);
       line-height: 1.3;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
     }
 
     h5 {
       margin: 0;
-      font-size: 1.2rem;
+      font-size: clamp(1rem, 0.4vw + 0.85rem, 1.2rem);
       font-weight: 600;
       opacity: 0.95;
     }
 
     p {
       margin: 0;
-      font-size: 1.05rem;
+      font-size: clamp(0.98rem, 0.3vw + 0.85rem, 1.06rem);
       line-height: 1.7;
     }
   }
 }
 
-/* ===== RESPONSIVE ===== */
 @media (max-width: 1100px) {
-  .hero-section {
-    grid-template-columns: 1fr 1.2fr;
-  }
+  .hero-section { grid-template-columns: 1fr 1.2fr; }
 }
 
 @media (max-width: 992px) {
   .hero-section {
-    grid-template-columns: 1fr;          /* stack image + text */
-    gap: 1.6rem;
-    padding: 2rem;
-
-    .programs-text h2 { font-size: 2.1rem; }
-    .programs-text h4 { font-size: 1.18rem; }
-  }
-
-  .sub-terms {
-    gap: 1.75rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
   }
 }
 
 @media (max-width: 768px) {
   .hero-section {
-    width: min(100%, calc(100% - 2rem));
+    width: min(100%, calc(100% - 1.5rem));
     margin-block: 2rem;
-    padding: 1.5rem;
     grid-template-columns: 1fr;
     gap: 1.25rem;
 
-    img {
-      max-width: 440px;
-    }
-
-    .programs-text {
-      padding: 0 0.25rem;
-
-      h2 { font-size: 1.85rem; }
-      h4 { font-size: 1.06rem; }
-      p  { font-size: 0.99rem; }
+    img { max-width: 460px; }
 
-      ul li { font-size: 0.99rem; }
-
-      a button,
-      a.register-button {
-        width: 100%;
-        max-width: 380px;
-      }
+    .programs-text a.register-button,
+    .programs-text a > button {
+      width: 100%;
+      max-width: 380px;
     }
   }
 
   .sub-terms {
-    grid-template-columns: 1fr;          /* stack cards */
-    margin: 2rem 1rem;
-
-    .sub-terms-left,
-    .sub-terms-right {
-      font-size: 1rem;
-      padding: 1.25rem;
-
-      h3 { font-size: 1.5rem; }
-      h5 { font-size: 1.05rem; }
-    }
+    grid-template-columns: 1fr;
+    width: min(var(--container-max), calc(100% - 1.5rem));
+    margin-inline: auto;
   }
 }
 
-/* respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
-  .hero-section .programs-text a button,
-  .hero-section .programs-text a.register-button {
-    transition: none;
-  }
+  .hero-section .programs-text a.register-button,
+  .hero-section .programs-text a > button { transition: none; }
 }
diff --git a/react-ystemandchess/src/Pages/Programs/Programs.tsx b/react-ystemandchess/src/Pages/Programs/Programs.tsx
index f6cf2472..24ddccfe 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.tsx
+++ b/react-ystemandchess/src/Pages/Programs/Programs.tsx
@@ -14,9 +14,7 @@ const Programs = () => {
         />
 
         <div className="programs-text">
-          <h2 id="programs-title" data-testid="programs-title">
-            Our Programs
-          </h2>
+          <h2 id="programs-title" data-testid="programs-title">Our Programs</h2>
 
           <h4>
             Become a member today to benefit your child and all other children
@@ -69,8 +67,7 @@ const Programs = () => {
 
         <div data-testid="sub-terms-left" className="sub-terms-left">
           <h3>
-            First Month is Free <br />
-            Cancel anytime
+            First Month is Free <br /> Cancel anytime
           </h3>
           <h5>The cost is just $25 a week after the first month.</h5>
           <p>
@@ -84,8 +81,7 @@ const Programs = () => {
 
         <div data-testid="sub-terms-right" className="sub-terms-right">
           <h3>
-            Can't afford to pay monthly? We'd still love to have your student
-            join!
+            Can't afford to pay monthly? We'd still love to have your student join!
           </h3>
           <p>
             Our program was designed to help the most vulnerable students find

From 3d71f9a299660a2edd3c01afc73abbced83e1a76 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:12:16 -0400
Subject: [PATCH 08/16] accesibility fix on apply button

---
 react-ystemandchess/src/Pages/Mentor/Mentor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-ystemandchess/src/Pages/Mentor/Mentor.tsx b/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
index 5db7a3f6..c0d014af 100644
--- a/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
+++ b/react-ystemandchess/src/Pages/Mentor/Mentor.tsx
@@ -35,7 +35,7 @@ const Mentor = () => {
         <img src={teacher} alt="Teaching and Learning" />
       </section>
 
-      <button className="apply-button" arial-label="Apply Button" >Apply Now</button>
+      <button className="apply-button" aria-label="Apply Button" >Apply Now</button>
     </main>
   );
 };

From e1d9cf7b53c6cc88458272d8164695476f446b57 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:12:29 -0400
Subject: [PATCH 09/16] refactor Mentor.scss for improved layout and styling
 consistency

---
 .../src/Pages/Mentor/Mentor.scss              | 65 ++++++++++++++-----
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Mentor/Mentor.scss b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
index 713d1a04..be264f27 100644
--- a/react-ystemandchess/src/Pages/Mentor/Mentor.scss
+++ b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
@@ -1,14 +1,17 @@
 .board-container {
   text-align: center;
   padding: 20px;
+  max-width: 1200px;       /* center the entire page content */
+  margin: 0 auto;
 
   .flex-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;   /* keep text + image centered as a group */
+    gap: 3rem;                 /* spacing between text and image */
 
     .text-content {
-      flex: 1;
+      flex: 0 1 520px;
       text-align: left;
 
       h1 {
@@ -24,30 +27,41 @@
       }
 
       .apply-button {
-        @extend .apply-button; // Reuse the same button styling
+        @extend .apply-button;
       }
     }
 
     .image-content {
-      flex: 1;
-      text-align: right;
+      flex: 0 1 520px;
+      display: flex;
+      justify-content: center;  /* center the mentor image horizontally */
+      align-items: center;
 
       img {
         max-width: 100%;
+        max-height: 450px;
         height: auto;
       }
     }
   }
 
   .line-break {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin: 20px auto;
+    max-width: 900px;
+    text-align: center;
   }
 
-  .mentor-details img {
-    width: 100%;
-    height: auto;
-    margin-bottom: 20px;
+  .mentor-details {
+    display: flex;
+    justify-content: center;
+    max-width: 900px;
+    margin: 20px auto;
+
+    img {
+      width: 100%;
+      height: auto;
+      margin-bottom: 20px;
+    }
   }
 
   .mentor-roles {
@@ -61,10 +75,16 @@
       margin: 0 5px;
     }
   }
+
+  /* center the final Apply Now button */
+  > .apply-button {
+    display: block;
+    margin: 20px auto 0;
+  }
 }
 
 .apply-button {
-  background-color: #ead94c; /* Same color as view-button */
+  background-color: #ead94c; /* keep original color */
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
@@ -74,14 +94,15 @@
   transition: background-color 0.3s, transform 0.2s;
 
   &:hover {
-    background-color: #ffe066; /* Brighter yellow on hover */
-    transform: translateY(-1px); /* Slight push up on hover */
+    background-color: #ffe066;
+    transform: translateY(-1px);
   }
 
   &:active {
-    transform: translateY(1px); /* Slight push down on click */
+    transform: translateY(1px);
   }
 }
+
 @media screen and (max-width: 768px) {
   .board-container {
     padding: 10px;
@@ -108,7 +129,7 @@
       }
 
       .image-content {
-        text-align: center;
+        justify-content: center;
 
         img {
           width: 100%;
@@ -117,8 +138,11 @@
       }
     }
 
-    .mentor-details img {
-      margin-bottom: 10px;
+    .mentor-details {
+      max-width: 90%;
+      img {
+        margin-bottom: 10px;
+      }
     }
 
     .mentor-roles {
@@ -136,6 +160,11 @@
       margin-top: 10px;
       margin-bottom: 10px;
     }
+
+    > .apply-button {
+      width: 80%;
+      max-width: 300px;
+    }
   }
 
   .apply-button {

From 74be888f331ccf5ec8a2e89ec85ecf13ae00f1c7 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:30:13 -0400
Subject: [PATCH 10/16] enhance accessibility and content clarity/spelling
 errors in Programs component

---
 .../src/Pages/Programs/Programs.tsx           | 59 ++++++++++++-------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.tsx b/react-ystemandchess/src/Pages/Programs/Programs.tsx
index 301d74c1..f6cf2472 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.tsx
+++ b/react-ystemandchess/src/Pages/Programs/Programs.tsx
@@ -1,17 +1,28 @@
 import React from "react";
 import kidsCoding from "../../images/kidsCoding.png";
 import "./Programs.scss";
+
 const Programs = () => {
   return (
-    <main role="main">
-      <section className="hero-section" role="region">
-        <img src={kidsCoding} alt="kids coding" role="presentaion" />
+    <main>
+      <section className="hero-section" aria-labelledby="programs-title">
+        <img
+          src={kidsCoding}
+          alt="Children learning coding together"
+          loading="lazy"
+          decoding="async"
+        />
+
         <div className="programs-text">
-          <h2 data-testid="programs-title">Our Programs</h2>
+          <h2 id="programs-title" data-testid="programs-title">
+            Our Programs
+          </h2>
+
           <h4>
             Become a member today to benefit your child and all other children
             participating in our program!
           </h4>
+
           <p>
             Y STEM and Chess Inc. (YSC) seeks to open the hearts and minds of
             kids (K-12) to the world of STEM through chess and the Mastery
@@ -19,12 +30,14 @@ const Programs = () => {
             principles. YSC strives to empower underserved and at-risk children
             through mentoring and STEM skills development to enable them to
             pursue STEM careers and change their life trajectories.
-            <br />
-            <br />
+          </p>
+
+          <p>
             Students will receive personal guidance and role development in a
             safe environment through our background-checked mentors. Specific
-            instruction includes
+            instruction includes:
           </p>
+
           <ul>
             <li>In-depth programs from K-12</li>
             <li>Chess strategy instruction</li>
@@ -34,22 +47,26 @@ const Programs = () => {
             <li>Personal skills development</li>
             <li>Preparation for Advanced Learning and Career Paths</li>
           </ul>
+
           <a
+            className="register-button"
             data-testid="register-btn-link"
             href="https://forms.gle/cvdJxrSRCg1kpWXP8"
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
+            aria-label="Register for Y STEM and Chess (opens in a new tab)"
           >
-            <button
-              data-testid="register-btn"
-              aria-label="Register for Y STEM and Chess"
-            >
-              Register Now
-            </button>
+            Register Now
           </a>
         </div>
       </section>
-      <section className="sub-terms" role="region">
+
+      {/* Subscription terms */}
+      <section className="sub-terms" aria-labelledby="sub-terms-heading">
+        <h2 id="sub-terms-heading" className="sr-only">
+          Program Subscription Terms
+        </h2>
+
         <div data-testid="sub-terms-left" className="sub-terms-left">
           <h3>
             First Month is Free <br />
@@ -57,13 +74,14 @@ const Programs = () => {
           </h3>
           <h5>The cost is just $25 a week after the first month.</h5>
           <p>
-            After an initial sign-up, students can retain access to the program,
-            and all sessions, for a fixed cost. Students will recieve personal
-            guidance and role-developement, in a safe environment, through our
+            After an initial sign-up, students can retain access to the program
+            and all sessions for a fixed cost. Students will receive personal
+            guidance and role development in a safe environment through our
             background-checked mentors. If you have no need for tutoring and
-            just want to help our mission out, donate through our Cause link.
+            just want to help our mission, donate through our Cause link.
           </p>
         </div>
+
         <div data-testid="sub-terms-right" className="sub-terms-right">
           <h3>
             Can't afford to pay monthly? We'd still love to have your student
@@ -76,11 +94,10 @@ const Programs = () => {
             in one generation. The founders were tired of help being promised
             every year, every election, every generation. We are helping our
             students help themselves.
-            <br />
           </p>
           <p>
             That is why our program is FREE to students from at-risk
-            backgrounds, schools or organizations that help disadvantaged
+            backgrounds, schools, or organizations that help disadvantaged
             communities, specifically those that qualify for free and reduced
             lunch.
           </p>

From 259aef34f67b26eab0a22afac48cf1bbbc657b9f Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:34:53 -0400
Subject: [PATCH 11/16] refactor Programs.scss for improved layout, and spacing

---
 .../src/Pages/Programs/Programs.scss          | 232 +++++++++++-------
 1 file changed, 149 insertions(+), 83 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index b59a0ec6..f262a932 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,158 +1,224 @@
+
+.hero-section,
+.sub-terms {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 .hero-section {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 8rem;
-  margin: 5rem 7rem;
-  border-radius: 1rem;
+  justify-content: center;
+  gap: 3.5rem;
+  margin: 4rem 1.5rem;
+  padding: 2.25rem;
   background-color: #3f8cdf;
-  padding: 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
 
+  /* image column */
   img {
+    display: block;
+    width: 100%;
+    max-width: 520px;     /* keeps image from exploding */
+    height: auto;
     object-fit: contain;
-    border-radius: 1rem;
-    box-shadow: 0.1rem 0.1rem 0.1rem black;
+    border-radius: 0.75rem;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
   }
 
+  /* text column */
   .programs-text {
-    text-align: left;
     color: rgb(255, 250, 250);
-    max-width: 65%;
+    max-width: 560px;
+    text-align: left;
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: 0.9rem;          /* consistent spacing */
+    line-height: 1.6;
+
+    h2 {
+      margin: 0 0 0.25rem 0;
+      font-size: 2.25rem;
+      line-height: 1.2;
+      letter-spacing: 0.2px;
+      text-shadow: 0 1px 1px rgba(0,0,0,0.18);
+    }
+
+    h4 {
+      margin: 0 0 0.25rem 0;
+      font-size: 1.35rem;
+      font-weight: 600;
+      opacity: 0.95;
+    }
 
     p {
-      font-size: 1.2rem;
+      margin: 0;
+      font-size: 1.05rem;
+      opacity: 0.95;
     }
+
     ul {
-      margin: 0;
+      margin: 0.25rem 0 0.25rem 1.2rem;
+      padding: 0;
+      list-style: disc;
+
       li {
-        font-size: 1.2rem;
+        font-size: 1.05rem;
+        margin: 0.25rem 0;
       }
     }
 
-    h2 {
-      font-size: 2.5rem;
-      margin: 0;
-    }
-    h4 {
-      margin: 0;
-      font-size: 1.5rem;
-    }
-  }
+    a {
+      margin-top: 0.5rem;
+      text-decoration: none;
+
+      button,
+      &.register-button {
+        display: inline-block;
+        border: none;
+        border-radius: 0.5rem;
+        background-color: #eef36a;
+        color: #111;
+        width: auto;
+        min-width: 12rem;
+        height: 3rem;
+        padding: 0 1rem;
+        cursor: pointer;
+        font-size: 1.1rem;
+        font-weight: 700;
+        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
+        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+      }
 
-  a {
-    margin-top: 0.4rem;
-    button {
-      border: none;
-      border-radius: 0.5rem;
-      background: transparent;
-      width: 12rem;
-      height: 3rem;
-      cursor: pointer;
-      font-size: 1.2rem;
-      background-color: #eef36a;
-    }
-    button:hover {
-      transition: 0.3s;
-      transform: scale(1.1);
+      button:hover,
+      &.register-button:hover {
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: 0 10px 18px rgba(0,0,0,0.18);
+        background-color: #f3f67d;
+      }
+
+      button:active,
+      &.register-button:active {
+        transform: translateY(0);
+      }
+
+      button:focus-visible,
+      &.register-button:focus-visible {
+        outline: 3px solid #fff;
+        outline-offset: 2px;
+      }
     }
   }
 }
 
 .sub-terms {
-  display: flex;
-  margin: 5rem 7rem;
-  gap: 10rem;
-
-  .sub-terms-left {
-    height: 80%;
-  }
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2.5rem;
+  margin: 4rem 1.5rem;
 
   .sub-terms-left,
   .sub-terms-right {
-    text-align: left;
     background-color: #e2aa03;
+    color: #ffffff;
     border-radius: 1rem;
     padding: 2rem;
-    font-size: 1.4rem;
-    flex: 1;
-    color: white;
+    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
     display: flex;
     flex-direction: column;
-    gap: 0.8rem;
+    gap: 0.9rem;
+    text-align: left;
+
+    h3 {
+      margin: 0;
+      font-size: 2rem;
+      line-height: 1.3;
+      text-shadow: 0 1px 1px rgba(0,0,0,0.16);
+    }
+
+    h5 {
+      margin: 0;
+      font-size: 1.2rem;
+      font-weight: 600;
+      opacity: 0.95;
+    }
 
     p {
       margin: 0;
+      font-size: 1.05rem;
+      line-height: 1.7;
     }
   }
+}
+
 
-  h3 {
-    font-size: 2.4rem;
-    margin: 0;
+@media (max-width: 992px) {
+  .hero-section {
+    gap: 2.25rem;
+    padding: 1.75rem;
+
+    .programs-text h2 { font-size: 2rem; }
+    .programs-text h4 { font-size: 1.2rem; }
   }
-  h5 {
-    font-size: 1.7rem;
-    margin: 0;
+
+  .sub-terms {
+    gap: 1.75rem;
   }
 }
 
-/* ----------- Responsive styles ----------- */
 @media (max-width: 768px) {
   .hero-section {
     flex-direction: column;
     margin: 2rem 1rem;
-    gap: 2rem;
-    padding: 1.5rem;
+    gap: 1.5rem;
+    padding: 1.25rem;
 
     img {
       width: 100%;
+      max-width: 420px;
       height: auto;
+      margin: 0 auto;
     }
 
     .programs-text {
       max-width: 100%;
-      text-align: center;
+      text-align: left; 
+      padding: 0 0.25rem;
 
-      h2 {
-        font-size: 2rem;
-      }
-      h4 {
-        font-size: 1.2rem;
-      }
-      p {
-        font-size: 1rem;
-      }
+      h2 { font-size: 1.8rem; }
+      h4 { font-size: 1.05rem; }
+      p  { font-size: 0.98rem; }
 
-      ul li {
-        font-size: 1rem;
-        text-align: left;
-      }
+      ul li { font-size: 0.98rem; }
 
-      a button {
+      a button,
+      a.register-button {
         width: 100%;
+        max-width: 360px;
       }
     }
   }
 
   .sub-terms {
-    flex-direction: column;
+    grid-template-columns: 1fr;
     margin: 2rem 1rem;
-    gap: 2rem;
 
     .sub-terms-left,
     .sub-terms-right {
-      font-size: 1.1rem;
-      padding: 1.5rem;
-    }
+      font-size: 1rem;
+      padding: 1.25rem;
 
-    h3 {
-      font-size: 1.8rem;
+      h3 { font-size: 1.5rem; }
+      h5 { font-size: 1.05rem; }
     }
+  }
+}
 
-    h5 {
-      font-size: 1.3rem;
-    }
+/* ---------- Motion preference ---------- */
+@media (prefers-reduced-motion: reduce) {
+  .hero-section .programs-text a button,
+  .hero-section .programs-text a.register-button {
+    transition: none;
   }
 }

From 56ee751bfce6d5c6ea3ff5e6e93de572ac7bf1be Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 17:52:30 -0400
Subject: [PATCH 12/16] some alignment fixes

---
 .../src/Pages/Programs/Programs.scss          | 115 +++++++++---------
 1 file changed, 58 insertions(+), 57 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index f262a932..245b93e8 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,100 +1,106 @@
-
+/* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
   max-width: 1200px;
   margin: 0 auto;
 }
 
+/* ===== HERO CARD (blue) ===== */
 .hero-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 3.5rem;
-  margin: 4rem 1.5rem;
-  padding: 2.25rem;
+  /* one nice card */
   background-color: #3f8cdf;
-  border-radius: 1rem;
-  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
+  margin: 4rem 1.5rem;
+  padding: 2.5rem;
+  border-radius: 16px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+
+  /* use grid for tighter control */
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) 1.2fr;
+  align-items: center;
+  gap: 2.25rem;
 
   /* image column */
   img {
     display: block;
     width: 100%;
-    max-width: 520px;     /* keeps image from exploding */
+    max-width: 520px;
     height: auto;
-    object-fit: contain;
-    border-radius: 0.75rem;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+    object-fit: cover;
+    border-radius: 12px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    margin: 0 auto; /* keeps image centered within its column */
   }
 
   /* text column */
   .programs-text {
-    color: rgb(255, 250, 250);
-    max-width: 560px;
-    text-align: left;
+    color: #fff;
+    max-width: 640px;
+    margin: 0 auto; /* keeps column centered when very wide */
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;          /* consistent spacing */
-    line-height: 1.6;
+    gap: 0.9rem;
+    line-height: 1.65;
+    text-align: left;
 
     h2 {
-      margin: 0 0 0.25rem 0;
-      font-size: 2.25rem;
+      margin: 0 0 0.35rem 0;
+      font-size: 2.35rem;
       line-height: 1.2;
       letter-spacing: 0.2px;
-      text-shadow: 0 1px 1px rgba(0,0,0,0.18);
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
     }
 
     h4 {
-      margin: 0 0 0.25rem 0;
+      margin: 0 0 0.5rem 0;
       font-size: 1.35rem;
-      font-weight: 600;
-      opacity: 0.95;
+      font-weight: 700;
+      opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.05rem;
-      opacity: 0.95;
+      font-size: 1.06rem;
+      opacity: 0.96;
     }
 
+    /* nicer bullets, consistent spacing */
     ul {
-      margin: 0.25rem 0 0.25rem 1.2rem;
+      margin: 0.35rem 0 0.35rem 1.25rem;
       padding: 0;
       list-style: disc;
 
       li {
-        font-size: 1.05rem;
+        font-size: 1.06rem;
         margin: 0.25rem 0;
       }
     }
 
+    /* CTA: supports either <a><button>… or <a class="register-button">… */
     a {
-      margin-top: 0.5rem;
+      margin-top: 0.75rem;
       text-decoration: none;
 
       button,
       &.register-button {
         display: inline-block;
         border: none;
-        border-radius: 0.5rem;
-        background-color: #eef36a;
+        border-radius: 8px;
+        background-color: #eef36a; /* your yellow */
         color: #111;
-        width: auto;
         min-width: 12rem;
-        height: 3rem;
-        padding: 0 1rem;
-        cursor: pointer;
+        padding: 0.85rem 1.25rem;
         font-size: 1.1rem;
-        font-weight: 700;
-        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
+        font-weight: 800;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
         transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+        cursor: pointer;
       }
 
       button:hover,
       &.register-button:hover {
         transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 10px 18px rgba(0,0,0,0.18);
+        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
         background-color: #f3f67d;
       }
 
@@ -112,6 +118,7 @@
   }
 }
 
+/* ===== SUBSCRIPTION CARDS (yellow) ===== */
 .sub-terms {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -122,9 +129,9 @@
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
-    border-radius: 1rem;
+    border-radius: 16px;
     padding: 2rem;
-    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
+    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
@@ -134,7 +141,7 @@
       margin: 0;
       font-size: 2rem;
       line-height: 1.3;
-      text-shadow: 0 1px 1px rgba(0,0,0,0.16);
+      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
     }
 
     h5 {
@@ -152,14 +159,15 @@
   }
 }
 
-
+/* ===== RESPONSIVE ===== */
 @media (max-width: 992px) {
   .hero-section {
-    gap: 2.25rem;
-    padding: 1.75rem;
+    grid-template-columns: 1fr; /* stack image and text */
+    gap: 1.75rem;
+    padding: 2rem;
 
     .programs-text h2 { font-size: 2rem; }
-    .programs-text h4 { font-size: 1.2rem; }
+    .programs-text h4 { font-size: 1.18rem; }
   }
 
   .sub-terms {
@@ -169,28 +177,21 @@
 
 @media (max-width: 768px) {
   .hero-section {
-    flex-direction: column;
     margin: 2rem 1rem;
-    gap: 1.5rem;
-    padding: 1.25rem;
+    padding: 1.5rem;
 
     img {
-      width: 100%;
       max-width: 420px;
-      height: auto;
-      margin: 0 auto;
     }
 
     .programs-text {
-      max-width: 100%;
-      text-align: left; 
       padding: 0 0.25rem;
 
       h2 { font-size: 1.8rem; }
-      h4 { font-size: 1.05rem; }
-      p  { font-size: 0.98rem; }
+      h4 { font-size: 1.06rem; }
+      p  { font-size: 0.99rem; }
 
-      ul li { font-size: 0.98rem; }
+      ul li { font-size: 0.99rem; }
 
       a button,
       a.register-button {
@@ -215,7 +216,7 @@
   }
 }
 
-/* ---------- Motion preference ---------- */
+/* motion preference */
 @media (prefers-reduced-motion: reduce) {
   .hero-section .programs-text a button,
   .hero-section .programs-text a.register-button {

From f48ed47fb4862a0504570e920200b6299a014238 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 18:07:50 -0400
Subject: [PATCH 13/16] Everything centered

---
 .../src/Pages/Programs/Programs.scss          | 109 ++++++++++--------
 1 file changed, 64 insertions(+), 45 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index 245b93e8..d5d8c0f8 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,22 +1,28 @@
+/* Shared container width so hero + yellow cards line up perfectly */
+:root {
+  --container-max: 1280px;              /* increase for wider card */
+  --container-gutter: 2rem;             /* side padding on small screens */
+}
+
 /* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
-  max-width: 1200px;
-  margin: 0 auto;
+  width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
+  margin-inline: auto;                   /* perfect horizontal centering */
 }
 
 /* ===== HERO CARD (blue) ===== */
 .hero-section {
-  /* one nice card */
+  /* big, centered card */
+  margin-block: 3rem;                    /* vertical space */
   background-color: #3f8cdf;
-  margin: 4rem 1.5rem;
-  padding: 2.5rem;
-  border-radius: 16px;
-  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+  padding: 2.75rem;                      /* a touch more breathing room */
+  border-radius: 18px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
 
-  /* use grid for tighter control */
+  /* inside layout */
   display: grid;
-  grid-template-columns: minmax(260px, 1fr) 1.2fr;
+  grid-template-columns: minmax(280px, 1.05fr) 1.3fr;  /* more room for text */
   align-items: center;
   gap: 2.25rem;
 
@@ -24,76 +30,75 @@
   img {
     display: block;
     width: 100%;
-    max-width: 520px;
+    max-width: 560px;                    /* a tad larger */
     height: auto;
     object-fit: cover;
-    border-radius: 12px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-    margin: 0 auto; /* keeps image centered within its column */
+    border-radius: 14px;
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
+    margin: 0 auto;
   }
 
   /* text column */
   .programs-text {
     color: #fff;
-    max-width: 640px;
-    margin: 0 auto; /* keeps column centered when very wide */
+    max-width: 720px;                    /* wider text block */
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
-    gap: 0.9rem;
-    line-height: 1.65;
+    gap: 1rem;
+    line-height: 1.68;
     text-align: left;
 
     h2 {
-      margin: 0 0 0.35rem 0;
-      font-size: 2.35rem;
+      margin: 0 0 0.4rem 0;
+      font-size: 2.5rem;
       line-height: 1.2;
       letter-spacing: 0.2px;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
     }
 
     h4 {
-      margin: 0 0 0.5rem 0;
-      font-size: 1.35rem;
+      margin: 0 0 0.6rem 0;
+      font-size: 1.4rem;
       font-weight: 700;
       opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.06rem;
+      font-size: 1.08rem;
       opacity: 0.96;
     }
 
-    /* nicer bullets, consistent spacing */
     ul {
-      margin: 0.35rem 0 0.35rem 1.25rem;
+      margin: 0.4rem 0 0.4rem 1.25rem;
       padding: 0;
       list-style: disc;
 
       li {
         font-size: 1.06rem;
-        margin: 0.25rem 0;
+        margin: 0.3rem 0;
       }
     }
 
-    /* CTA: supports either <a><button>… or <a class="register-button">… */
+    /* CTA (supports <a><button> or <a.register-button>) */
     a {
-      margin-top: 0.75rem;
+      margin-top: 0.9rem;
       text-decoration: none;
 
       button,
       &.register-button {
         display: inline-block;
         border: none;
-        border-radius: 8px;
-        background-color: #eef36a; /* your yellow */
+        border-radius: 10px;
+        background-color: #eef36a;
         color: #111;
-        min-width: 12rem;
-        padding: 0.85rem 1.25rem;
+        min-width: 14rem;                /* slightly wider button */
+        padding: 0.9rem 1.35rem;
         font-size: 1.1rem;
         font-weight: 800;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+        transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
         cursor: pointer;
       }
 
@@ -120,22 +125,27 @@
 
 /* ===== SUBSCRIPTION CARDS (yellow) ===== */
 .sub-terms {
+  /* same centered container width as hero */
+  margin-block: 3rem;
+
+  /* two equal columns, centered; cards stretch to same height */
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 2.5rem;
-  margin: 4rem 1.5rem;
+  align-items: stretch;                  /* equal height cards */
+  gap: 2.25rem;
 
   .sub-terms-left,
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
-    border-radius: 16px;
+    border-radius: 18px;
     padding: 2rem;
-    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
     text-align: left;
+    min-height: 260px;                   /* helps alignment on uneven content */
 
     h3 {
       margin: 0;
@@ -160,13 +170,19 @@
 }
 
 /* ===== RESPONSIVE ===== */
+@media (max-width: 1100px) {
+  .hero-section {
+    grid-template-columns: 1fr 1.2fr;
+  }
+}
+
 @media (max-width: 992px) {
   .hero-section {
-    grid-template-columns: 1fr; /* stack image and text */
-    gap: 1.75rem;
+    grid-template-columns: 1fr;          /* stack image + text */
+    gap: 1.6rem;
     padding: 2rem;
 
-    .programs-text h2 { font-size: 2rem; }
+    .programs-text h2 { font-size: 2.1rem; }
     .programs-text h4 { font-size: 1.18rem; }
   }
 
@@ -177,17 +193,20 @@
 
 @media (max-width: 768px) {
   .hero-section {
-    margin: 2rem 1rem;
+    width: min(100%, calc(100% - 2rem));
+    margin-block: 2rem;
     padding: 1.5rem;
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
 
     img {
-      max-width: 420px;
+      max-width: 440px;
     }
 
     .programs-text {
       padding: 0 0.25rem;
 
-      h2 { font-size: 1.8rem; }
+      h2 { font-size: 1.85rem; }
       h4 { font-size: 1.06rem; }
       p  { font-size: 0.99rem; }
 
@@ -196,13 +215,13 @@
       a button,
       a.register-button {
         width: 100%;
-        max-width: 360px;
+        max-width: 380px;
       }
     }
   }
 
   .sub-terms {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr;          /* stack cards */
     margin: 2rem 1rem;
 
     .sub-terms-left,
@@ -216,7 +235,7 @@
   }
 }
 
-/* motion preference */
+/* respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .hero-section .programs-text a button,
   .hero-section .programs-text a.register-button {

From 25ee1167336edcf3576b2fe3683c1ea41a6bfff9 Mon Sep 17 00:00:00 2001
From: Diya Kithani <diyakithani.2003@gmail.com>
Date: Mon, 22 Sep 2025 18:39:36 -0400
Subject: [PATCH 14/16] refactor Programs component - shadow and other fixes

---
 .../src/Pages/Programs/Programs.scss          | 193 +++++++-----------
 .../src/Pages/Programs/Programs.tsx           |  10 +-
 2 files changed, 79 insertions(+), 124 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index d5d8c0f8..ab032af7 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,48 +1,48 @@
-/* Shared container width so hero + yellow cards line up perfectly */
+
 :root {
-  --container-max: 1280px;              /* increase for wider card */
-  --container-gutter: 2rem;             /* side padding on small screens */
+  --container-max: 100rem; // 1600px = 100rem (assuming 1rem = 16px)
+  // Responsive gutter: min 0.75rem for small screens, scales with viewport (2vw), max 1.25rem for large screens
+  --container-gutter: clamp(0.75rem, 2vw, 1.25rem);
 }
 
-/* keep sections centered on large screens */
 .hero-section,
 .sub-terms {
   width: min(var(--container-max), calc(100% - var(--container-gutter) * 2));
-  margin-inline: auto;                   /* perfect horizontal centering */
+  margin-inline: auto;
 }
 
-/* ===== HERO CARD (blue) ===== */
+
+//hero section (blue)
 .hero-section {
-  /* big, centered card */
-  margin-block: 3rem;                    /* vertical space */
+  margin-block: 2.5rem;
   background-color: #3f8cdf;
-  padding: 2.75rem;                      /* a touch more breathing room */
+  padding: clamp(2.0rem, 3vw + 2rem, 4rem);
   border-radius: 18px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+
+  width: min(var(--container-max), calc(100% - var(--container-gutter) * 1.2));
+  margin-inline: auto;
 
-  /* inside layout */
   display: grid;
-  grid-template-columns: minmax(280px, 1.05fr) 1.3fr;  /* more room for text */
+  grid-template-columns: minmax(300px, 1.1fr) 1.4fr;
   align-items: center;
-  gap: 2.25rem;
+  gap: clamp(1.25rem, 1.2vw + 0.5rem, 2.5rem);
 
-  /* image column */
   img {
     display: block;
     width: 100%;
-    max-width: 560px;                    /* a tad larger */
+    max-width: 700px;
     height: auto;
     object-fit: cover;
     border-radius: 14px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
-    margin: 0 auto;
+    margin: 0;
   }
 
-  /* text column */
   .programs-text {
     color: #fff;
-    max-width: 720px;                    /* wider text block */
-    margin: 0 auto;
+    max-width: 800px;
+    margin: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -51,7 +51,7 @@
 
     h2 {
       margin: 0 0 0.4rem 0;
-      font-size: 2.5rem;
+      font-size: clamp(2rem, 1.2vw + 1.6rem, 2.6rem);
       line-height: 1.2;
       letter-spacing: 0.2px;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
@@ -59,14 +59,14 @@
 
     h4 {
       margin: 0 0 0.6rem 0;
-      font-size: 1.4rem;
+      font-size: clamp(1.1rem, 0.6vw + 0.8rem, 1.45rem);
       font-weight: 700;
       opacity: 0.98;
     }
 
     p {
       margin: 0;
-      font-size: 1.08rem;
+      font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1rem);
       opacity: 0.96;
     }
 
@@ -76,169 +76,128 @@
       list-style: disc;
 
       li {
-        font-size: 1.06rem;
+        font-size: clamp(1rem, 0.3vw + 0.9rem, 1.08rem);
         margin: 0.3rem 0;
       }
     }
 
-    /* CTA (supports <a><button> or <a.register-button>) */
-    a {
-      margin-top: 0.9rem;
+    a.register-button,
+    a > button {
+      display: inline-block;
+      border: none;
+      border-radius: 10px;
+      background-color: #eef36a;
+      color: #111;
+      min-width: 14rem;
+      padding: 0.9rem 1.35rem;
+      font-size: 1.1rem;
+      font-weight: 800;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+      transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
+      cursor: pointer;
       text-decoration: none;
+      margin-top: 0.9rem;
+    }
 
-      button,
-      &.register-button {
-        display: inline-block;
-        border: none;
-        border-radius: 10px;
-        background-color: #eef36a;
-        color: #111;
-        min-width: 14rem;                /* slightly wider button */
-        padding: 0.9rem 1.35rem;
-        font-size: 1.1rem;
-        font-weight: 800;
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-        transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
-        cursor: pointer;
-      }
-
-      button:hover,
-      &.register-button:hover {
-        transform: translateY(-2px) scale(1.02);
-        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
-        background-color: #f3f67d;
-      }
+    a.register-button:hover,
+    a > button:hover {
+      transform: translateY(-2px) scale(1.02);
+      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
+      background-color: #f3f67d;
+    }
 
-      button:active,
-      &.register-button:active {
-        transform: translateY(0);
-      }
+    a.register-button:active,
+    a > button:active {
+      transform: translateY(0);
+    }
 
-      button:focus-visible,
-      &.register-button:focus-visible {
-        outline: 3px solid #fff;
-        outline-offset: 2px;
-      }
+    a.register-button:focus-visible,
+    a > button:focus-visible {
+      outline: 3px solid #fff;
+      outline-offset: 2px;
     }
   }
 }
 
-/* ===== SUBSCRIPTION CARDS (yellow) ===== */
+//subscription cards(yellow)
 .sub-terms {
-  /* same centered container width as hero */
-  margin-block: 3rem;
+  margin-block: 2.5rem;
 
-  /* two equal columns, centered; cards stretch to same height */
   display: grid;
   grid-template-columns: 1fr 1fr;
-  align-items: stretch;                  /* equal height cards */
-  gap: 2.25rem;
+  align-items: stretch;
+  gap: clamp(1.25rem, 1.2vw + 0.5rem, 2.25rem);
 
   .sub-terms-left,
   .sub-terms-right {
     background-color: #e2aa03;
     color: #ffffff;
     border-radius: 18px;
-    padding: 2rem;
+    padding: clamp(1.25rem, 1.2vw + 0.5rem, 2rem);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
     display: flex;
     flex-direction: column;
     gap: 0.9rem;
     text-align: left;
-    min-height: 260px;                   /* helps alignment on uneven content */
+    min-height: 260px;
 
     h3 {
       margin: 0;
-      font-size: 2rem;
+      font-size: clamp(1.5rem, 0.9vw + 1rem, 2rem);
       line-height: 1.3;
       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
     }
 
     h5 {
       margin: 0;
-      font-size: 1.2rem;
+      font-size: clamp(1rem, 0.4vw + 0.85rem, 1.2rem);
       font-weight: 600;
       opacity: 0.95;
     }
 
     p {
       margin: 0;
-      font-size: 1.05rem;
+      font-size: clamp(0.98rem, 0.3vw + 0.85rem, 1.06rem);
       line-height: 1.7;
     }
   }
 }
 
-/* ===== RESPONSIVE ===== */
 @media (max-width: 1100px) {
-  .hero-section {
-    grid-template-columns: 1fr 1.2fr;
-  }
+  .hero-section { grid-template-columns: 1fr 1.2fr; }
 }
 
 @media (max-width: 992px) {
   .hero-section {
-    grid-template-columns: 1fr;          /* stack image + text */
-    gap: 1.6rem;
-    padding: 2rem;
-
-    .programs-text h2 { font-size: 2.1rem; }
-    .programs-text h4 { font-size: 1.18rem; }
-  }
-
-  .sub-terms {
-    gap: 1.75rem;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
   }
 }
 
 @media (max-width: 768px) {
   .hero-section {
-    width: min(100%, calc(100% - 2rem));
+    width: min(100%, calc(100% - 1.5rem));
     margin-block: 2rem;
-    padding: 1.5rem;
     grid-template-columns: 1fr;
     gap: 1.25rem;
 
-    img {
-      max-width: 440px;
-    }
-
-    .programs-text {
-      padding: 0 0.25rem;
-
-      h2 { font-size: 1.85rem; }
-      h4 { font-size: 1.06rem; }
-      p  { font-size: 0.99rem; }
+    img { max-width: 460px; }
 
-      ul li { font-size: 0.99rem; }
-
-      a button,
-      a.register-button {
-        width: 100%;
-        max-width: 380px;
-      }
+    .programs-text a.register-button,
+    .programs-text a > button {
+      width: 100%;
+      max-width: 380px;
     }
   }
 
   .sub-terms {
-    grid-template-columns: 1fr;          /* stack cards */
-    margin: 2rem 1rem;
-
-    .sub-terms-left,
-    .sub-terms-right {
-      font-size: 1rem;
-      padding: 1.25rem;
-
-      h3 { font-size: 1.5rem; }
-      h5 { font-size: 1.05rem; }
-    }
+    grid-template-columns: 1fr;
+    width: min(var(--container-max), calc(100% - 1.5rem));
+    margin-inline: auto;
   }
 }
 
-/* respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
-  .hero-section .programs-text a button,
-  .hero-section .programs-text a.register-button {
-    transition: none;
-  }
+  .hero-section .programs-text a.register-button,
+  .hero-section .programs-text a > button { transition: none; }
 }
diff --git a/react-ystemandchess/src/Pages/Programs/Programs.tsx b/react-ystemandchess/src/Pages/Programs/Programs.tsx
index f6cf2472..24ddccfe 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.tsx
+++ b/react-ystemandchess/src/Pages/Programs/Programs.tsx
@@ -14,9 +14,7 @@ const Programs = () => {
         />
 
         <div className="programs-text">
-          <h2 id="programs-title" data-testid="programs-title">
-            Our Programs
-          </h2>
+          <h2 id="programs-title" data-testid="programs-title">Our Programs</h2>
 
           <h4>
             Become a member today to benefit your child and all other children
@@ -69,8 +67,7 @@ const Programs = () => {
 
         <div data-testid="sub-terms-left" className="sub-terms-left">
           <h3>
-            First Month is Free <br />
-            Cancel anytime
+            First Month is Free <br /> Cancel anytime
           </h3>
           <h5>The cost is just $25 a week after the first month.</h5>
           <p>
@@ -84,8 +81,7 @@ const Programs = () => {
 
         <div data-testid="sub-terms-right" className="sub-terms-right">
           <h3>
-            Can't afford to pay monthly? We'd still love to have your student
-            join!
+            Can't afford to pay monthly? We'd still love to have your student join!
           </h3>
           <p>
             Our program was designed to help the most vulnerable students find

From ca7917de7534e2b60ac921ad84edc7117581e0a6 Mon Sep 17 00:00:00 2001
From: Yousif Alrubaye <yousif.alrubaye1994@gmail.com>
Date: Thu, 11 Dec 2025 16:32:30 -0800
Subject: [PATCH 15/16] UI fixes: improve mentor page responsiveness, align
 button styles/hover effects, unify spacing

---
 .../src/Pages/Mentor/Mentor.scss              | 11 ++++---
 .../src/Pages/Programs/Programs.scss          | 33 ++++++++++++-------
 .../src/Pages/Programs/Programs.tsx           |  3 +-
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/react-ystemandchess/src/Pages/Mentor/Mentor.scss b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
index be264f27..95100a41 100644
--- a/react-ystemandchess/src/Pages/Mentor/Mentor.scss
+++ b/react-ystemandchess/src/Pages/Mentor/Mentor.scss
@@ -11,7 +11,8 @@
     gap: 3rem;                 /* spacing between text and image */
 
     .text-content {
-      flex: 0 1 520px;
+      flex: 1 1 400px;         /* flexible — no more rigid 520px */
+      max-width: 520px;
       text-align: left;
 
       h1 {
@@ -32,9 +33,10 @@
     }
 
     .image-content {
-      flex: 0 1 520px;
+      flex: 1 1 400px;        /* flexible — scales smoothly */
+      max-width: 520px;
       display: flex;
-      justify-content: center;  /* center the mentor image horizontally */
+      justify-content: center; 
       align-items: center;
 
       img {
@@ -140,6 +142,7 @@
 
     .mentor-details {
       max-width: 90%;
+
       img {
         margin-bottom: 10px;
       }
@@ -171,4 +174,4 @@
     font-size: 1.1em;
     padding: 12px;
   }
-}
+}
\ No newline at end of file
diff --git a/react-ystemandchess/src/Pages/Programs/Programs.scss b/react-ystemandchess/src/Pages/Programs/Programs.scss
index ab032af7..ebb929f7 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.scss
+++ b/react-ystemandchess/src/Pages/Programs/Programs.scss
@@ -1,7 +1,5 @@
-
 :root {
-  --container-max: 100rem; // 1600px = 100rem (assuming 1rem = 16px)
-  // Responsive gutter: min 0.75rem for small screens, scales with viewport (2vw), max 1.25rem for large screens
+  --container-max: 100rem;
   --container-gutter: clamp(0.75rem, 2vw, 1.25rem);
 }
 
@@ -81,34 +79,46 @@
       }
     }
 
+    /******************************
+     * BUTTON FIX (CONSISTENCY)
+     ******************************/
+
     a.register-button,
     a > button {
       display: inline-block;
       border: none;
       border-radius: 10px;
-      background-color: #eef36a;
-      color: #111;
+
+      /* NEW: unified site-wide orange button */
+      background-color: #f57c00;
+      color: #fff;
+
       min-width: 14rem;
       padding: 0.9rem 1.35rem;
       font-size: 1.1rem;
       font-weight: 800;
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-      transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
+
+      /* NEW: remove transform animations */
+      transition: background-color 0.2s, box-shadow 0.2s;
+
       cursor: pointer;
       text-decoration: none;
       margin-top: 0.9rem;
     }
 
+    /* NEW: simple color-only hover */
     a.register-button:hover,
     a > button:hover {
-      transform: translateY(-2px) scale(1.02);
-      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
-      background-color: #f3f67d;
+      background-color: #ff8f00; /* lighter orange */
+      box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
+      transform: none !important; /* remove scaling */
     }
 
     a.register-button:active,
     a > button:active {
-      transform: translateY(0);
+      background-color: #e56f00; /* darker on press */
+      transform: none !important;
     }
 
     a.register-button:focus-visible,
@@ -119,6 +129,7 @@
   }
 }
 
+
 //subscription cards(yellow)
 .sub-terms {
   margin-block: 2.5rem;
@@ -200,4 +211,4 @@
 @media (prefers-reduced-motion: reduce) {
   .hero-section .programs-text a.register-button,
   .hero-section .programs-text a > button { transition: none; }
-}
+}
\ No newline at end of file
diff --git a/react-ystemandchess/src/Pages/Programs/Programs.tsx b/react-ystemandchess/src/Pages/Programs/Programs.tsx
index 24ddccfe..8fc18c30 100644
--- a/react-ystemandchess/src/Pages/Programs/Programs.tsx
+++ b/react-ystemandchess/src/Pages/Programs/Programs.tsx
@@ -59,7 +59,6 @@ const Programs = () => {
         </div>
       </section>
 
-      {/* Subscription terms */}
       <section className="sub-terms" aria-labelledby="sub-terms-heading">
         <h2 id="sub-terms-heading" className="sr-only">
           Program Subscription Terms
@@ -103,4 +102,4 @@ const Programs = () => {
   );
 };
 
-export default Programs;
+export default Programs;
\ No newline at end of file

From 3141dc2aced73909163ec6ae60597fde09107f32 Mon Sep 17 00:00:00 2001
From: Yousif Alrubaye <yousif.alrubaye1994@gmail.com>
Date: Thu, 25 Dec 2025 12:39:46 -0800
Subject: [PATCH 16/16] fix typos in Programs.test.tsx

---
 react-ystemandchess/src/features/programs/Programs.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/react-ystemandchess/src/features/programs/Programs.test.tsx b/react-ystemandchess/src/features/programs/Programs.test.tsx
index ddc1d20c..b9ffe95b 100644
--- a/react-ystemandchess/src/features/programs/Programs.test.tsx
+++ b/react-ystemandchess/src/features/programs/Programs.test.tsx
@@ -29,7 +29,7 @@ test("shows the register button", () => {
             <Programs />
         </MemoryRouter>
     );
-    const registerButton = screen.getByTestId("register-btn");
+    const registerButton = screen.getByTestId("register-btn-link");
     expect(registerButton).toBeInTheDocument();
 });
 
@@ -54,7 +54,7 @@ test("shows the left subscription terms", () => {
     const subTermsLeft = screen.getByTestId("sub-terms-left");
     expect(subTermsLeft).toBeInTheDocument();
     // Check the text content of the left subscription terms
-    expect(subTermsLeft.children[0].textContent).toBe("First Month is Free Cancel anytime");
+    expect(subTermsLeft.children[0].textContent).toBe("First Month is Free  Cancel anytime");
 });
 
 // Test that the right subscription terms are displayed correctly