Revert "Attempt to make apply page faster"

This reverts commit c2523bdfbf.

src/components/Family/Family.astro

@@ -1,25 +1,14 @@
 ---
-import family1 from '../../assets/images/family/family_1.png';
-import family2 from '../../assets/images/family/family_2.png';
-import family3 from '../../assets/images/family/family_3.png';
+import current_mems from '../../assets/images/family/current_mems.png';
+import notable_mems from '../../assets/images/family/notable_mems.png';
+import execomm from '../../assets/images/family/execomm.png';
 ---
 
 <section class="family-section" id="people">
   <h2>UP IECEP Family</h2>
   <div class="members-panel">
     
-    <!-- Mobile Popup 1 (Retains arrow) -->
-    <div class="image-panel">
-      <img src={family1.src} alt="" />
-      <div class="image-panel-popup">
-        <a href="/current-members" style="color: inherit; text-decoration: none;">
-          <h3>Current Members &rarr;</h3>
-        </a>
-        <p>A short list of all the current members of UP IECEP</p>
-      </div>
-    </div>
-    
-    <!-- Desktop Panel 1: Executive Committee -->
+    <!-- PANEL: Executive Committee Text -->
     <div class="text-panel">
       <a href="/executive-committee" class="cover" style="color: inherit; text-decoration: none;">
         <div class="title-group">
@@ -32,44 +21,19 @@ import family3 from '../../assets/images/family/family_3.png';
         <strong>A bit information about the current heads of each committee</strong>
       </a>
     </div>
-    
-    <!-- Mobile Popup 2 (Retains arrow) -->
+
+    <!-- PANEL: Current Members Image -->
     <div class="image-panel">
-      <img src={family2.src} alt="" />
+      <img src={current_mems.src} alt="" />
       <div class="image-panel-popup">
-        <h3>Notable Members &rarr;</h3>
-        <p>
-          Some of UP IECEP's most well respected and accomplished individuals
-        </p>
-      </div>
-    </div>
-    
-    <!-- Desktop Panel 2: Current Members -->
-    <div class="text-panel">
-      <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
-        <div class="title-group">
-          <h3>Current Members</h3>
-          <span class="action-hint">View list</span>
-        </div>
-      </a>
-      <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
-        <h3>Current Members</h3>
-        <strong>A short list of all the current members of UP IECEP</strong>
-      </a>
-    </div>
-    
-    <!-- Mobile Popup 3 (Retains arrow) -->
-    <div class="image-panel">
-      <img src={family3.src} alt="" />
-      <div class="image-panel-popup">
-        <a href="/executive-committee" style="color: inherit; text-decoration: none;">
-          <h3>Executive Committee &rarr;</h3>
+        <a href="/current-members" style="color: inherit; text-decoration: none;">
+          <h3>Current Members &rarr;</h3>
         </a>
-        <p>A bit information about the current heads of each committee</p>
+        <p>A short list of all the current members of UP IECEP</p>
       </div>
     </div>
-    
-    <!-- Desktop Panel 3: Notable Members -->
+
+    <!-- PANEL: Notable Members Text -->
     <div class="text-panel">
       <a href="#people" class="cover" style="color: inherit; text-decoration: none;">
         <div class="title-group">
@@ -82,6 +46,42 @@ import family3 from '../../assets/images/family/family_3.png';
         <strong>Some of UP IECEP's most well respected and accomplished individuals</strong>
       </a>
     </div>
+
+    <!-- PANEL: Executive Committee Image -->
+    <div class="image-panel">
+      <img src={execomm.src} alt="" />
+      <div class="image-panel-popup">
+        <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>
+
+    <!-- PANEL: Current Members Text -->
+    <div class="text-panel">
+      <a href="/current-members" class="cover" style="color: inherit; text-decoration: none;">
+        <div class="title-group">
+          <h3>Current Members</h3>
+          <span class="action-hint">View list</span>
+        </div>
+      </a>
+      <a href="/current-members" class="under" style="color: inherit; text-decoration: none;">
+        <h3>Current Members</h3>
+        <strong>A short list of all the current members of UP IECEP</strong>
+      </a>
+    </div>
+
+    <!-- PANEL: Notable Members Image -->
+    <div class="image-panel">
+      <img src={notable_mems.src} alt="" />
+      <div class="image-panel-popup">
+        <a href="#people" style="color: inherit; text-decoration: none;">
+          <h3>Notable Members &rarr;</h3>
+        </a>
+        <p>Some of UP IECEP's most well respected and accomplished individuals</p>
+      </div>
+    </div>
     
   </div>
 </section>

src/components/Family/family.scss

@@ -48,15 +48,9 @@
       aspect-ratio: 25.375 / 18.125;
       position: relative;
 
-      &:nth-of-type(2) {
-        .cover,
-        .under {
-          background-color: $secondary;
-        }
-      }
-
-      &:nth-of-type(4),
-      &:nth-of-type(6) {
+      &:nth-of-type(1),
+      &:nth-of-type(3),
+      &:nth-of-type(5) {
         .cover,
         .under {
           background-color: $secondary;
@@ -266,12 +260,9 @@
           }
         }
 
-        &:nth-of-type(1) {
-          order: 1;
-        }
-        &:nth-of-type(3) {
-          order: 2;
-        }
+        &:nth-of-type(1) { order: 2; }
+        &:nth-of-type(3) { order: 3; }
+        &:nth-of-type(5) { order: 1; }
       }
     }
   }

src/layouts/Layout.astro

@@ -59,6 +59,19 @@ const {
     <link rel="manifest" href="site.webmanifest" />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <ClientRouter />
+
+    <script is:inline>
+      // Runs immediately on every hard page load
+      const url = new URL(window.location.href);
+      
+      if (url.searchParams.has('noloop')) {
+        url.searchParams.delete('noloop');
+        
+        // Replace the URL in the address bar without adding to history
+        const cleanUrl = url.pathname + url.search + url.hash;
+        window.history.replaceState({}, '', cleanUrl);
+      }
+    </script>
   </head>
   <body>
     <Header client:load />

src/pages/[...path].astro

@@ -0,0 +1,131 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+// 1. Get the path from the URL params
+const { path } = Astro.params;
+
+// 2. Check for our loop-breaker
+const isLooping = Astro.url.searchParams.get('noloop') === 'true';
+
+// 3. SERVER-SIDE REDIRECT LOGIC
+if (!isLooping) {
+  // We inline the URL here. This removes the "unused variable" warning
+  // and keeps the logic tight.
+  return Astro.redirect(`https://upiecep.org/${path || ''}`);
+}
+
+// 4. If we reach here, it's a confirmed 404 (Short.io already checked).
+Astro.response.status = 404;
+---
+
+<Layout title="Page Not Found | UP IECEP">
+  <section class="not-found-section">
+    <h1>404</h1>
+    <h2>Oops! We couldn't find that page.</h2>
+    
+    <p>
+      We checked both the website and our shortlink database, but 
+      <strong>/{path}</strong> doesn't seem to exist.
+    </p>
+
+    <div class="button-group">
+      <a href="/" class="btn-main">Go to Homepage</a>
+    </div>
+  </section>
+</Layout>
+
+<style lang="scss">
+  /* Import your variables so we can use your exact colors */
+  @use '../styles/variables.scss' as *;
+
+  .not-found-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 10rem 2rem; /* Pushes it down below the navbar */
+    min-height: 60vh;
+
+    h1 {
+      font-size: 8rem;
+      color: $dark;
+      margin-bottom: 0;
+      line-height: 1;
+    }
+
+    h2 {
+      font-size: 2.5rem;
+      margin-bottom: 1.5rem;
+    }
+
+    p {
+      font-size: 1.25rem;
+      max-width: 600px;
+      margin-bottom: 1rem;
+      line-height: 1.6;
+    }
+
+    .shortlink-hint {
+      font-size: 1.1rem;
+      background-color: rgba($dark, 0.05); /* Slight highlight box */
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 3rem;
+    }
+
+    .button-group {
+      display: flex;
+      gap: 1.5rem;
+      flex-wrap: wrap; /* Allows buttons to stack on very small phone screens */
+      justify-content: center;
+
+      a {
+        text-decoration: none;
+        padding: 1rem 2rem;
+        font-size: 1.2rem;
+        border-radius: 50px; /* Pill shape */
+        font-weight: bold;
+        transition: all 0.3s ease;
+      }
+
+      .btn-main {
+        background-color: $dark;
+        color: white;
+        border: 2px solid $dark;
+
+        &:hover {
+          background-color: transparent;
+          color: $dark;
+        }
+      }
+
+      .btn-shortlink {
+        background-color: transparent;
+        color: $dark;
+        border: 2px solid $dark;
+
+        &:hover {
+          background-color: $dark;
+          color: white;
+        }
+      }
+    }
+  }
+
+  /* Mobile Responsive Tweaks */
+  @media (max-width: 768px) {
+    .not-found-section {
+      padding: 8rem 1.5rem;
+      
+      h1 { font-size: 6rem; }
+      h2 { font-size: 2rem; }
+      
+      .button-group {
+        flex-direction: column;
+        width: 100%;
+        max-width: 300px;
+      }
+    }
+  }
+</style>