Added 404 landing page

2026-05-03 11:38:21 +08:00
parent f06cecbd8b
commit d51c54e9a7
1 changed files with 128 additions and 0 deletions
@@ -0,0 +1,128 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+// 1. Capture the exact path the user tried to visit (e.g., "/hihi")
+const currentPath = Astro.url.pathname;
+
+// 2. Build the correct shortlink URL without the "www."
+const shortlinkUrl = `https://upiecep.org${currentPath}`;
+---
+
+<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>
+      The link you clicked might be broken, or the page may have been removed. 
+    </p>
+    <p class="shortlink-hint">
+      <strong>Looking for a shortlink?</strong> If you typed "www" before the link, it might have broken it. Try the direct shortlink below!
+    </p>
+
+    <div class="button-group">
+      <!-- Button 1: Back to Homepage -->
+      <a href="/" class="btn-main">Go to Homepage</a>
+      
+      <!-- Button 2: Dynamic Shortlink Attempt -->
+      <a href={shortlinkUrl} class="btn-shortlink">
+        Try {shortlinkUrl}
+      </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>