-
-
Current Members
-
-
-
Current Members
- A short list of all the current active members of UP IECEP
-
+
+
+
Current Members
+
+
+
Current Members
+ A short list of all the current active members of UP IECEP
+
+
diff --git a/src/pages/current-members.astro b/src/pages/current-members.astro
new file mode 100644
index 0000000..8086327
--- /dev/null
+++ b/src/pages/current-members.astro
@@ -0,0 +1,100 @@
+---
+import Layout from '../layouts/Layout.astro';
+import '../styles/current-members.scss'; // Make sure to create this SCSS file next!
+---
+
+
+
+ Current Members
+
+
+
President
+ [Name of President]
+
+
+
+
+
+
+
Secretariat
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Academic Affairs
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Finance
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Externals
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Internals
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Publicity
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+ - Member Name
+
+
+
+
+
+
Logistics
+ [Name of VP]
+
+
+ - Member Name
+ - Member Name
+
+
+
+
diff --git a/src/styles/current-members.scss b/src/styles/current-members.scss
new file mode 100644
index 0000000..f0e0464
--- /dev/null
+++ b/src/styles/current-members.scss
@@ -0,0 +1,125 @@
+.current-members-section {
+ padding-block: 8rem;
+ padding-inline: 2.81rem;
+ max-width: 1400px;
+ margin: 0 auto;
+ min-height: 100vh;
+
+ h1 {
+ text-align: center;
+ color: $primary;
+ font-size: 4.4374rem;
+ font-weight: 900;
+ margin-bottom: 4rem;
+ }
+
+ /* Centered President Block */
+ .executive-top {
+ text-align: center;
+ margin-bottom: 5rem;
+ padding-bottom: 3rem;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+
+ h2 {
+ font-size: 2rem;
+ color: $secondary;
+ margin-bottom: 0.5rem;
+ }
+
+ h3 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: $dark;
+ }
+ }
+
+ /* 7-Column Layout */
+ .committees-grid {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 1.5rem;
+ align-items: start;
+
+ .committee-column {
+ background-color: $background-accent;
+ padding: 1.5rem 1rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+
+ .committee-head {
+ text-align: center;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+ h4 {
+ font-size: 1.25rem;
+ color: $primary;
+ margin-bottom: 0.25rem;
+ }
+
+ strong {
+ font-size: 1.1rem;
+ color: $dark;
+ }
+ }
+
+ .member-list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ text-align: center;
+
+ li {
+ font-size: 1rem;
+ margin-bottom: 0.75rem;
+ color: #4a4a4a;
+ }
+ }
+ }
+ }
+}
+
+/* --- Responsive Adjustments --- */
+
+/* Laptops & Tablets: Shrink to 4 columns, then 3 */
+@media screen and (max-width: 1200px) {
+ .current-members-section {
+ .committees-grid {
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+ }
+ }
+}
+
+@media screen and (max-width: 900px) {
+ .current-members-section {
+ .committees-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+}
+
+/* Mobile Devices: Shrink to 2 columns, then 1 */
+@media screen and (max-width: 768px) {
+ .current-members-section {
+ padding-block: 4rem;
+ padding-inline: 1.5rem;
+
+ h1 {
+ font-size: 3rem;
+ }
+
+ .committees-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .current-members-section {
+ .committees-grid {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ }
+}