Updated Projects and Campaigns part

src/components/ProjectsAndCampaigns/ProjectsAndCampaigns.astro

@@ -1,5 +1,6 @@
 ---
 import getLicensedPicture from '../../assets/images/projects_getlicensed.jpg';
+import iecepCaresPicture from '../../assets/images/projects_iecepcares.jpg';
 import iecepDayPicture from '../../assets/images/projects_iecepday.jpg';
 ---
 
@@ -15,16 +16,32 @@ import iecepDayPicture from '../../assets/images/projects_iecepday.jpg';
         in Metro Manila, licensed engineers, and professionals who have established
         themselves in the field.
       </p>
-      <a href="get-licensed" class="learn-more">Learn More &rarr;</a>
+      <a href="https://www.facebook.com/GetLicensed.upiecep" target="_blank" rel="noopener noreferrer" class="learn-more">Learn More &rarr;</a>
     </div>
     <div class="get-licensed-picture">
       <img src={getLicensedPicture.src} alt="Get Licensed" />
     </div>
   </div>
-  <div class="iecep-day">
+
-    <div class="iecep-day-picture">
+  <div class="iecep-cares">
-      <img src={iecepDayPicture.src} alt="IECEP Day" />
+    <div class="iecep-cares-picture">
+      <img src={iecepCaresPicture.src} alt="IECEP Cares" />
     </div>
+    <div class="iecep-cares-text">
+      <h3>IECEP Cares</h3>
+      <p>
+        Going beyond academic walls, UP IECEP remains committed to promoting
+        intentional service and active community involvement. Since 2010,
+        <strong>IECEP Cares</strong> has served as the organization's charity
+        and outreach arm, driven by a shared cause, dedicated to uplifting
+        communities and welfare-oriented institutions through volunteerism
+        and sustainable action.
+      </p>
+      <a href="https://www.facebook.com/IECEPCares" target="_blank" rel="noopener noreferrer" class="learn-more">Learn More &rarr;</a>
+    </div>
+  </div>
+
+  <div class="iecep-day">
     <div class="iecep-day-text">
       <h3>UP IECEP Day</h3>
       <p>
@@ -33,7 +50,10 @@ import iecepDayPicture from '../../assets/images/projects_iecepday.jpg';
         exciting activities and sharing fun moments between the organization's
         members to <strong>tighten the bond shared as ECE students</strong>.
       </p>
-      <a href="iecep-day" class="learn-more">Learn More &rarr;</a>
+      {/* <a href="iecep-day" class="learn-more">Learn More &rarr;</a> */}
+    </div>
+    <div class="iecep-day-picture">
+      <img src={iecepDayPicture.src} alt="IECEP Day" />
     </div>
   </div>
 </section>

src/components/ProjectsAndCampaigns/projects-and-campaigns.scss

@@ -6,6 +6,7 @@
   grid-auto-flow: row;
   place-items: center;
   scroll-margin-top: 3rem;
+
   h2 {
     color: $primary;
     font-weight: 900;
@@ -21,6 +22,7 @@
     margin-bottom: 1rem;
   }
 
+  /* 1. Get Licensed */
   .get-licensed {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -63,14 +65,16 @@
       }
     }
   }
-  .iecep-day {
+
+  /* 2. IECEP Cares */
+  .iecep-cares {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-auto-flow: row;
     width: calc(100% - 2 * 12.81rem);
     margin-top: 3.56rem;
     gap: 3rem;
-    .iecep-day-picture {
+    .iecep-cares-picture {
       place-self: center start;
       width: calc(10 / 12 * 100%);
       height: auto;
@@ -84,7 +88,7 @@
         object-fit: cover;
       }
     }
-    .iecep-day-text {
+    .iecep-cares-text {
       place-self: center end;
       display: grid;
       grid-template-columns: 1fr;
@@ -105,8 +109,54 @@
       }
     }
   }
+
+  /* 3. IECEP Day */
+  .iecep-day {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-flow: row;
+    width: calc(100% - 2 * 12.81rem);
+    margin-top: 3.56rem;
+    gap: 3rem;
+    .iecep-day-text {
+      place-self: center start; /* Changed to start to match Get Licensed layout */
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 1.5rem;
+
+      p {
+        line-height: 1.6;
       }
 
+      .learn-more {
+        border-radius: 1.5625rem;
+        background-color: $primary;
+        color: $text-light;
+        text-decoration: none;
+        width: fit-content;
+        padding-inline: 2.25rem;
+        padding-block: 0.81rem;
+      }
+    }
+    .iecep-day-picture {
+      place-self: center end; /* Changed to end to match Get Licensed layout */
+      width: calc(10 / 12 * 100%);
+      height: auto;
+      aspect-ratio: 25 / 16;
+      position: relative;
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 2.5rem;
+        box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
+        object-fit: cover;
+      }
+    }
+  }
+}
+
+/* MEDIA QUERIES */
+
 @media screen and (max-width: 1024px) {
   .projects-and-campaigns-section {
     padding-block: 3rem;
@@ -122,6 +172,18 @@
         width: 100%;
       }
     }
+    .iecep-cares {
+      width: calc(100% - 6rem);
+      gap: 2rem;
+      .iecep-cares-text {
+        h3 {
+          font-size: 2.5rem;
+        }
+      }
+      .iecep-cares-picture {
+        width: 100%;
+      }
+    }
     .iecep-day {
       width: calc(100% - 6rem);
       gap: 2rem;
@@ -161,6 +223,24 @@
         order: 1;
       }
     }
+
+    .iecep-cares {
+      grid-template-columns: repeat(1, 1fr);
+      gap: 1rem;
+
+      .iecep-cares-text {
+        order: 2;
+        h3 {
+          margin-bottom: 0;
+        }
+      }
+
+      .iecep-cares-picture {
+        place-self: center;
+        order: 1;
+      }
+    }
+
     .iecep-day {
       grid-template-columns: repeat(1, 1fr);
       gap: 1rem;
@@ -189,6 +269,13 @@
         }
       }
     }
+    .iecep-cares {
+      .iecep-cares-text {
+        h3 {
+          text-align: center;
+        }
+      }
+    }
     .iecep-day {
       .iecep-day-text {
         h3 {

src/components/Slider/Slider.tsx

@@ -28,14 +28,14 @@ const Slider = () => {
             <div className='get-licensed-panel'>
               <h1>Get Licensed 2026</h1>
               <span>Geared Up for the Future</span>
-              <a href='https://www.facebook.com/GetLicensed.upiecep' className='learn-more'>Learn More &rarr;</a>
+              <a href='https://www.facebook.com/GetLicensed.upiecep' className='learn-more' target='_blank' rel='noopener noreferrer'>Learn More &rarr;</a>
             </div>
           </SwiperSlide>
           <SwiperSlide className='landing-slider-slide iecep-cares'>
             <div className='iecep-cares-panel'>
               <h1>IECEP Cares 2026</h1>
               <span>Bloom with IECEP</span>
-              <a href='https://www.facebook.com/IECEPCares' className='learn-more'>Learn More &rarr;</a>
+              <a href='https://www.facebook.com/IECEPCares' className='learn-more' target='_blank' rel='noopener noreferrer'>Learn More &rarr;</a>
             </div>
           </SwiperSlide>
         </Swiper>