Added Executive Committee page

src/components/Family/Family.astro

@@ -19,13 +19,13 @@ import family3 from '../../assets/images/family/family_3.png';
     </div>
     
     <div class="text-panel">
-      <div class="cover">
+      <a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
         <h3>Executive Committee</h3>
-      </div>
-      <div class="under">
+      </a>
+      <a href="/executive-committee" class="under" style="color: inherit; text-decoration: none;">
         <h3>Executive Committee</h3>
         <strong>A bit information about the current heads of each committee</strong>
-      </div>
+      </a>
     </div>
     
     <div class="image-panel">
@@ -51,7 +51,9 @@ import family3 from '../../assets/images/family/family_3.png';
     <div class="image-panel">
       <img src={family3.src} alt="" />
       <div class="image-panel-popup">
-        <h3>Executive Committee &rarr;</h3>
+        <a href="/executive-committee" style="color: inherit; text-decoration: none;">
+          <h3>Executive Committee &rarr;</h3>
+        </a>
         <p>A bit information about the current heads of each committee</p>
       </div>
     </div>

src/pages/executive-committee.astro

@@ -0,0 +1,38 @@
+---
+import Layout from '../layouts/Layout.astro';
+import '../styles/executive-committee.scss';
+
+// MAKE SURE THESE FILES EXIST BEFORE BUILDING, or comment them out!
+import execomm_banner from '../../assets/images/execomm/execomm_banner.png';
+import pres from '../../assets/images/execomm/pres.png';
+import vp_acad from '../../assets/images/execomm/vp_acad.png';
+import vp_exte from '../../assets/images/execomm/vp_exte.png';
+import vp_inte from '../../assets/images/execomm/vp_inte.png';
+import vp_log from '../../assets/images/execomm/vp_log.png';
+import vp_marfin from '../../assets/images/execomm/vp_marfin.png';
+import vp_pub from '../../assets/images/execomm/vp_pub.png';
+import vp_sec from '../../assets/images/execomm/vp_sec.png';
+---
+
+<Layout title="Executive Committee | UP IECEP">
+  <section class="execomm-section">
+    <h1>Executive Committee</h1>
+    
+    <!-- Banner Image -->
+    <div class="banner-container">
+      <img src={execomm_banner.src} alt="Executive Committee Banner" />
+    </div>
+
+    <!-- 4x2 Photo Grid -->
+    <div class="photo-grid">
+      <div class="photo-card"><img src={pres.src} alt="President" /></div>
+      <div class="photo-card"><img src={vp_acad.src} alt="Vice President for Academic Affairs" /></div>
+      <div class="photo-card"><img src={vp_exte.src} alt="Vice President for External Affairs" /></div>
+      <div class="photo-card"><img src={vp_inte.src} alt="Vice President for Internal Affairs" /></div>
+      <div class="photo-card"><img src={vp_log.src} alt="Vice President for Logistics" /></div>
+      <div class="photo-card"><img src={vp_marfin.src} alt="Vice President for Marketing and Finance" /></div>
+      <div class="photo-card"><img src={vp_pub.src} alt="Vice President for Publicity" /></div>
+      <div class="photo-card"><img src={vp_sec.src} alt="Vice President for Secretariat" /></div>
+    </div>
+  </section>
+</Layout>

src/styles/executive-committee.scss

@@ -0,0 +1,102 @@
+@import './variables.scss';
+
+.execomm-section {
+  padding-block: 8rem;
+  padding-inline: 2.81rem;
+  width: 100%;
+  max-width: 1800px;
+  margin: 0 auto;
+  min-height: 100vh;
+
+  /* Matches the exact size and weight of Current Active Members */
+  h1 {
+    text-align: center;
+    color: $primary;
+    font-size: 3rem; 
+    font-weight: 900;
+    margin-bottom: 3rem;
+  }
+
+  .banner-container {
+    width: 100%;
+    margin-bottom: 4rem;
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+
+    img {
+      width: 100%;
+      height: auto;
+      max-height: 500px; /* Prevents the banner from getting absurdly tall on massive screens */
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  .photo-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+    
+    .photo-card {
+      width: 100%;
+      border-radius: 1rem;
+      overflow: hidden;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+
+      /* Adds a subtle hover effect to make the photos feel interactive */
+      &:hover {
+        transform: translateY(-5px);
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 3 / 4; /* Standard portrait ratio. Adjust if your photos are squares! */
+        object-fit: cover;
+        display: block;
+      }
+    }
+  }
+}
+
+/* --- Responsive Adjustments --- */
+
+@media screen and (max-width: 1024px) {
+  .execomm-section {
+    .photo-grid {
+      /* Drop to 2 columns on tablets so the photos don't get too skinny */
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .execomm-section {
+    padding-top: 7rem; /* Safely clears the fixed mobile navigation bar */
+    padding-bottom: 4rem;
+    padding-inline: 1rem;
+
+    h1 {
+      font-size: 2rem; /* Scales down exactly like Current Members */
+      margin-bottom: 2rem;
+    }
+
+    .banner-container {
+      margin-bottom: 2rem;
+      border-radius: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .execomm-section {
+    .photo-grid {
+      /* Drop to 1 column on phones to keep the embedded text readable */
+      grid-template-columns: repeat(1, 1fr);
+      gap: 1.5rem;
+    }
+  }
+}