NTUT-NPC · rileychh · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/app/app.vue b/app/app.vue
@@ -218,55 +218,24 @@ button {
   }
 }
 
-.npc-paragraph {
+.container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 2rem 0.5rem;
   margin: auto;
-  /* border-radius: 8px; */
   max-width: 1000px;
-  & > div {
-    gap: 0;
-  }
 }
 
-.npc-box {
+.card {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
   padding: 2rem;
   margin: auto;
   border-radius: 8px;
   width: 100%;
   background-color: var(--box-background-color);
   box-shadow: var(--box-shadow-color);
-
-  .project-content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2rem;
-    justify-content: center;
-  }
-
-  .project-image {
-    width: 100%;
-    min-width: 200px;
-    max-width: 300px;
-    max-height: 300px;
-    /* object-fit: cover; */
-    border-radius: 2rem;
-    object-fit: contain;
-  }
-
-  .project-description {
-    flex: 1;
-    min-width: 200px;
-  }
-
-  .project-description p {
-    margin: 0 0 1rem;
-  }
 }
 
 .shadow {

diff --git a/app/components/FeatureCard.vue b/app/components/FeatureCard.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  imageSrc?: string
+  imageAlt?: string
+  toggleFn?: () => void
+}>()
+</script>
+
+<template>
+  <section class="card">
+    <h2>{{ title }}</h2>
+    <div class="project-content">
+      <img
+        :alt="imageAlt || ''"
+        class="project-image"
+        :src="imageSrc || ''"
+        @click="toggleFn && toggleFn()"
+      >
+      <div class="project-description">
+        <slot name="description" />
+      </div>
+    </div>
+    <slot name="footer" />
+  </section>
+</template>
+
+<style scoped>
+.project-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.project-image {
+  width: 100%;
+  min-width: 200px;
+  max-width: 300px;
+  max-height: 300px;
+  border-radius: 2rem;
+  object-fit: contain;
+}
+
+.project-description {
+  flex: 1;
+  min-width: 200px;
+
+  p {
+    margin: 0 0 1rem;
+  }
+}
+</style>
diff --git a/app/error.vue b/app/error.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-
 const route = useRoute()
 
 function normalizePath(fullPath: string): string {

diff --git a/app/pages/contact.vue b/app/pages/contact.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="npc-paragraph">
-    <div class="npc-box">
+  <article class="container">
+    <section class="card">
       <h2>社辦位置</h2>
       <p>宏裕科技研究大樓 B4</p>
       <p>可搭乘六教或科研電梯，往美食街告示牌方向走到底，右轉第二間即為社辦</p>
@@ -12,8 +12,8 @@
         class="address"
         value="106 臺北市大安區新生南路一段 3 號（國立臺北科技大學-宏裕科技研究大樓）B4 程式設計研究社"
       >
-    </div>
-    <div class="npc-box">
+    </section>
+    <section class="card">
       <h2>聯絡方式</h2>
       <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
       <p>
@@ -28,12 +28,12 @@
           target="_blank"
         >https://to.ntut.club/discord</a>
       </p>
-    </div>
-  </div>
+    </section>
+  </article>
 </template>
 
 <style scoped>
-  .address {
+.address {
   width: 100%;
   margin: 0;
   color: var(--text-color);

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="npc-paragraph">
+  <article class="container">
     <h1>關於我們</h1>
     <div>
       <p>由一群熱愛程式設計的學生所組成的社團</p>
@@ -27,5 +27,5 @@
     <button @click="$router.push('/join')">
       加入我們
     </button>
-  </div>
+  </article>
 </template>
diff --git a/app/pages/join.vue b/app/pages/join.vue
@@ -1,72 +1,69 @@
+<script setup lang="ts">
+import DiscordQrCode from '~/assets/img/discord_qr_code.svg'
+import TShirtImage from '~/assets/img/t-shirt.webp'
+import FeatureCard from '~/components/FeatureCard.vue'
+</script>
+
 <template>
-  <div class="npc-paragraph">
-    <!-- <h1>加入社團</h1> -->
-    <div class="npc-box">
-      <h2>社員</h2>
-      <div class="project-content">
-        <img
-          class="project-image"
-          src="assets/img/t-shirt.webp"
-          style="object-fit: contain;"
-        >
-        <div class="project-description">
-          <h3>🌟 加入我們的社團吧！🌟</h3>
-          <p>🎉 成為 <strong>我們的一員</strong>，您將獲得：</p>
-          <ul>
-            <li>獨家社服一件，展現您的團隊精神！</li>
-            <li>精彩的社課，提升您的技能與知識！</li>
-            <li>永久社員資格，一次繳費，終身受用！</li>
-          </ul>
-          <br>
-          <p>💰 社費僅需 500 元，讓您享受所有會員專屬福利！</p>
-          <p>📢 建議加入我們的 Discord 群組，隨時掌握最新消息與活動資訊，與其他會員互動交流！</p>
-          <p>快來加入我們的大家庭，一起創造美好的回憶！💖</p>
-          <p>有興趣的朋友請點擊下方 Discord 連結，或透過 Email 聯絡我們！</p>
-          <p>歡迎來社課或社辦繳費</p>
+  <article class="container">
+    <FeatureCard
+      image-alt="社團T恤"
+      :image-src="TShirtImage"
+      title="社員"
+    >
+      <template #description>
+        <h3>🌟 加入我們的社團吧！🌟</h3>
+        <p>🎉 成為 <strong>我們的一員</strong>，您將獲得：</p>
+        <ul>
+          <li>獨家社服一件，展現您的團隊精神！</li>
+          <li>精彩的社課，提升您的技能與知識！</li>
+          <li>永久社員資格，一次繳費，終身受用！</li>
+        </ul>
+        <br>
+        <p>💰 社費僅需 500 元，讓您享受所有會員專屬福利！</p>
+        <p>📢 建議加入我們的 Discord 群組，隨時掌握最新消息與活動資訊，與其他會員互動交流！</p>
+        <p>快來加入我們的大家庭，一起創造美好的回憶！💖</p>
+        <p>有興趣的朋友請點擊下方 Discord 連結，或透過 Email 聯絡我們！</p>
+        <p>歡迎來社課或社辦繳費</p>
+      </template>
+      <template #footer>
+        <div class="join-button-container">
+          <a href="https://to.ntut.club/discord">
+            <button class="btn-discord">
+              <strong>加入 Discord</strong>
+            </button>
+          </a>
+          <a href="mailto:[email protected]">
+            <button>Email</button>
+          </a>
         </div>
-      </div>
-      <div class="join-button-container">
-        <a href="https://to.ntut.club/discord">
-          <button class="btn-discord">
-            <strong>加入 Discord</strong>
-          </button>
-        </a>
-        <a href="mailto:[email protected]">
-          <button>Email</button>
-        </a>
-      </div>
-    </div>
+      </template>
+    </FeatureCard>
 
-    <div class="npc-box">
-      <h2>線上成員</h2>
-      <div class="project-content">
-        <img
-          alt=""
-          class="project-image"
-          src="assets/img/discord_qr_code.svg"
-          style="background-color: transparent; object-fit: contain;"
-        >
-        <div class="project-description">
-          <h3>
-            還在猶豫嗎？先加入 Discord 群組吧！
-          </h3>
-          <p>加入社群，您將獲得：</p>
-          <ul>
-            <li>公開頻道存取權限！</li>
-            <li>與電神交流的機會！</li>
-            <li>了解更多社團活動！</li>
-          </ul>
-          <br>
-          <a href="https://to.ntut.club/discord"><button class="btn-discord">
-            <strong>
-              加入 Discord
-            </strong>
-          </button></a>
-        </div>
-        <p>💰 好吃的古早味社課，每次只要 50 元，歡迎來看看！</p>
-      </div>
-    </div>
-  </div>
+    <FeatureCard
+      image-alt="Discord QR Code"
+      :image-src="DiscordQrCode"
+      title="線上成員"
+    >
+      <template #description>
+        <h3>
+          還在猶豫嗎？先加入 Discord 群組吧！
+        </h3>
+        <p>加入社群，您將獲得：</p>
+        <ul>
+          <li>公開頻道存取權限！</li>
+          <li>與電神交流的機會！</li>
+          <li>了解更多社團活動！</li>
+        </ul>
+        <br>
+        <a href="https://to.ntut.club/discord"><button class="btn-discord">
+          <strong>
+            加入 Discord
+          </strong>
+        </button></a>
+      </template>
+    </FeatureCard>
+  </article>
 </template>
 
 <style scoped>

diff --git a/app/pages/not-found.vue b/app/pages/not-found.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="npc-paragraph">
+  <article class="container">
     <h1>哎呀～似乎迷路了！</h1>
     <div class="error-description">
       <p>小N 正在這裡悠哉散步，但您要找的頁面卻不在這裡。可能的原因：</p>
@@ -16,7 +16,7 @@
     >
       返回首頁
     </NuxtLink>
-  </div>
+  </article>
 
   <img
     alt="小 N 在哭"
@@ -27,7 +27,7 @@
 </template>
 
 <style scoped>
-.npc-paragraph {
+.container {
   max-width: 600px;
   padding: 0 2rem;
   h1 {