Added committee emails

src/components/Contact/contact.scss

@@ -13,14 +13,39 @@
     font-size: 3rem;
   }
 
-  .contact-details {
+  /* 1. Add a comma to target both the old component and your new section! */
+  .contact-details, .committee-contacts {
     margin-top: 1rem;
+
+    /* 2. Add some styling so the new Committee Emails heading looks nice */
+    h2 {
+      font-size: 2.5rem;
+      margin-top: 4rem; 
+      margin-bottom: 1.5rem;
+      text-align: center;
+      color: $dark;
+    }
+
     ul {
       row-gap: 1rem;
+      /* Optional: Forces the list to stack neatly in the center */
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      list-style: none;
+      padding: 0;
+
       li {
         a {
+          /* Optional: perfectly aligns your MailIcon next to the email text */
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          text-decoration: none;
+
           color: $dark;
           font-size: 1.5rem;
+          
           svg {
             color: $dark;
           }
@@ -31,4 +56,4 @@
       }
     }
   }
-}
+}

src/pages/contact.astro

@@ -6,6 +6,58 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Contact | UP IECEP">
   <section class="contact-section">
     <h1>Contact Us</h1>
+
+    <!-- Your main UP IECEP general contact info -->
     <ContactDetails displayTitle={false} />
+
+    <!-- Your new Committee Emails section -->
+    <div class="committee-contacts">
+      <h2>Committee Emails</h2>
+      <ul>
+        <li>
+          <a href="mailto:academic.affairs@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Academic Affairs: academic.affairs@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:external.affairs@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>External Affairs: external.affairs@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:internal.affairs@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Internal Affairs: internal.affairs@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:logistics@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Logistics: logistics@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:marketing.and.finance@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Marketing and Finance: marketing.and.finance@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:publicity@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Publicity: publicity@upiecep.org</span>
+          </a>
+        </li>
+        <li>
+          <a href="mailto:secretariat@upiecep.org" target="_blank" rel="noopener noreferrer">
+            <MailIcon client:load />
+            <span>Secretariat: secretariat@upiecep.org</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+
   </section>
 </Layout>