@@ -51,7 +51,9 @@ import family3 from '../../assets/images/family/family_3.png';
diff --git a/src/pages/executive-committee.astro b/src/pages/executive-committee.astro
new file mode 100644
index 0000000..68bd60e
--- /dev/null
+++ b/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';
+---
+
+
+
+ Executive Committee
+
+
+
+
+
diff --git a/src/styles/executive-committee.scss b/src/styles/executive-committee.scss
new file mode 100644
index 0000000..2dac68a
--- /dev/null
+++ b/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;
+ }
+ }
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+