From a0eabe812c48a2ca15c133a4f5119b0b7be9f57a Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Mon, 3 Mar 2025 16:34:55 +0800
Subject: [PATCH 1/9] refactor: move page-specific styles to each page

---
 app/app.vue            | 26 --------------------------
 app/pages/projects.vue | 25 +++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 373d6da..1dd747c 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -241,32 +241,6 @@ button {
   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/pages/projects.vue b/app/pages/projects.vue
index ea8eb41..f6698ba 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -72,6 +72,31 @@ function toggleQR(project: keyof QRStates) {
 </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;
+}
+
+.project-description p {
+  margin: 0 0 1rem;
+}
+
 .download-badge {
   display: flex;
   justify-content: center;

From 2f217fe0964019faa8dea70d778c6d36653c8101 Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Mon, 3 Mar 2025 16:35:21 +0800
Subject: [PATCH 2/9] chore: remove unused styles

---
 app/app.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 1dd747c..7c1a747 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -224,11 +224,7 @@ button {
   gap: 1rem;
   padding: 2rem 0.5rem;
   margin: auto;
-  /* border-radius: 8px; */
   max-width: 1000px;
-  & > div {
-    gap: 0;
-  }
 }
 
 .npc-box {

From 6c1e39617128929440f1fcb7350baffcde3598f1 Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Mon, 3 Mar 2025 16:35:55 +0800
Subject: [PATCH 3/9] refactor: rename .npc-box to .card and use sections
 instead of divs

---
 app/app.vue            | 2 +-
 app/pages/contact.vue  | 8 ++++----
 app/pages/join.vue     | 9 ++++-----
 app/pages/projects.vue | 8 ++++----
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 7c1a747..e006b4a 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -227,7 +227,7 @@ button {
   max-width: 1000px;
 }
 
-.npc-box {
+.card {
   display: flex;
   flex-direction: column;
   gap: 2rem;
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index a7b4313..acff0ab 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="npc-paragraph">
-    <div class="npc-box">
+    <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:contact@ntut.club">contact@ntut.club</a></p>
       <p>
@@ -28,7 +28,7 @@
           target="_blank"
         >https://to.ntut.club/discord</a>
       </p>
-    </div>
+    </section>
   </div>
 </template>
 
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 9bc54e4..c7ab281 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="npc-paragraph">
-    <!-- <h1>加入社團</h1> -->
-    <div class="npc-box">
+    <section class="card">
       <h2>社員</h2>
       <div class="project-content">
         <img
@@ -35,9 +34,9 @@
           <button>Email</button>
         </a>
       </div>
-    </div>
+    </section>
 
-    <div class="npc-box">
+    <section class="card">
       <h2>線上成員</h2>
       <div class="project-content">
         <img
@@ -65,7 +64,7 @@
         </div>
         <p>💰 好吃的古早味社課，每次只要 50 元，歡迎來看看！</p>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
index f6698ba..6473dd2 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -18,7 +18,7 @@ function toggleQR(project: keyof QRStates) {
 
 <template>
   <div class="npc-paragraph">
-    <div class="npc-box">
+    <section class="card">
       <h2>TAT - 北科生活</h2>
       <div class="project-content">
         <img
@@ -49,9 +49,9 @@ function toggleQR(project: keyof QRStates) {
           >
         </a>
       </div>
-    </div>
+    </section>
 
-    <div class="npc-box">
+    <section class="card">
       <h2>Shorts - 短褲</h2>
       <div class="project-content">
         <img
@@ -67,7 +67,7 @@ function toggleQR(project: keyof QRStates) {
           </a>
         </div>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 

From 60ef8cb8e5d8b0b9e274df7472eb6f2bc78f6d6f Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Mon, 3 Mar 2025 16:39:23 +0800
Subject: [PATCH 4/9] refactor: rename .npc-paragraph to .container and use
 articles instead of divs

---
 app/app.vue             | 2 +-
 app/pages/contact.vue   | 4 ++--
 app/pages/index.vue     | 4 ++--
 app/pages/join.vue      | 4 ++--
 app/pages/not-found.vue | 6 +++---
 app/pages/projects.vue  | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index e006b4a..d5a7d0e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -218,7 +218,7 @@ button {
   }
 }
 
-.npc-paragraph {
+.container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index acff0ab..fc29b5d 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="npc-paragraph">
+  <article class="container">
     <section class="card">
       <h2>社辦位置</h2>
       <p>宏裕科技研究大樓 B4</p>
@@ -29,7 +29,7 @@
         >https://to.ntut.club/discord</a>
       </p>
     </section>
-  </div>
+  </article>
 </template>
 
 <style scoped>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c826659..d10eb83 100644
--- 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
index c7ab281..0a82ed7 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="npc-paragraph">
+  <article class="container">
     <section class="card">
       <h2>社員</h2>
       <div class="project-content">
@@ -65,7 +65,7 @@
         <p>💰 好吃的古早味社課，每次只要 50 元，歡迎來看看！</p>
       </div>
     </section>
-  </div>
+  </article>
 </template>
 
 <style scoped>
diff --git a/app/pages/not-found.vue b/app/pages/not-found.vue
index 6e57d79..414cc03 100644
--- 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 {
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
index 6473dd2..da033f8 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -17,7 +17,7 @@ function toggleQR(project: keyof QRStates) {
 </script>
 
 <template>
-  <div class="npc-paragraph">
+  <article class="container">
     <section class="card">
       <h2>TAT - 北科生活</h2>
       <div class="project-content">
@@ -68,7 +68,7 @@ function toggleQR(project: keyof QRStates) {
         </div>
       </div>
     </section>
-  </div>
+  </article>
 </template>
 
 <style scoped>

From f37a80d6d33e9d7caaddae44109c364f76d62214 Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Thu, 6 Mar 2025 10:33:45 +0800
Subject: [PATCH 5/9] chore: remove unneeded imports

---
 app/error.vue          | 3 ---
 app/pages/projects.vue | 2 --
 2 files changed, 5 deletions(-)

diff --git a/app/error.vue b/app/error.vue
index b1b159b..a482971 100644
--- 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/projects.vue b/app/pages/projects.vue
index da033f8..92a37f2 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 interface QRStates {
   shorts: boolean
   tat: boolean

From dc3852accb2fda4228acceffb38c5e28855ed782 Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Thu, 6 Mar 2025 10:38:39 +0800
Subject: [PATCH 6/9] chore: format styles

---
 app/pages/contact.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index fc29b5d..311e4ce 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -33,7 +33,7 @@
 </template>
 
 <style scoped>
-  .address {
+.address {
   width: 100%;
   margin: 0;
   color: var(--text-color);

From bbb1514677396a83e2e33b37953924129254eea3 Mon Sep 17 00:00:00 2001
From: Riley Ho <riley@rileychh.dev>
Date: Thu, 6 Mar 2025 10:39:23 +0800
Subject: [PATCH 7/9] refactor: add FeatureCard component for reuse in join and
 projects page

---
 app/components/FeatureCard.vue |  53 ++++++++++++++
 app/pages/join.vue             | 123 ++++++++++++++++-----------------
 app/pages/projects.vue         | 121 +++++++++++++-------------------
 3 files changed, 162 insertions(+), 135 deletions(-)
 create mode 100644 app/components/FeatureCard.vue

diff --git a/app/components/FeatureCard.vue b/app/components/FeatureCard.vue
new file mode 100644
index 0000000..049acbd
--- /dev/null
+++ 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/pages/join.vue b/app/pages/join.vue
index 0a82ed7..832041d 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,70 +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>
   <article class="container">
-    <section class="card">
-      <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>
+    <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:contact@ntut.club">
+            <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:contact@ntut.club">
-          <button>Email</button>
-        </a>
-      </div>
-    </section>
+      </template>
+    </FeatureCard>
 
-    <section class="card">
-      <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>
+    <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>
         <p>💰 好吃的古早味社課，每次只要 50 元，歡迎來看看！</p>
-      </div>
-    </section>
+      </template>
+    </FeatureCard>
   </article>
 </template>
 
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
index 92a37f2..6c06469 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import ShortsQrCode from '~/assets/img/shorts_qr_code.svg'
+import TatQrCode from '~/assets/img/tat_qr_code.svg'
+import FeatureCard from '~/components/FeatureCard.vue'
+
 interface QRStates {
   shorts: boolean
   tat: boolean
@@ -16,85 +20,56 @@ function toggleQR(project: keyof QRStates) {
 
 <template>
   <article class="container">
-    <section class="card">
-      <h2>TAT - 北科生活</h2>
-      <div class="project-content">
-        <img
-          class="project-image"
-          src="assets/img/tat_qr_code.svg"
-          @click="toggleQR('tat')"
-        >
-        <div class="project-description">
-          <p>方便，簡潔，快速，強大，豐富您的北科生活！</p>
-          <p>迅速查詢北科學生課表與行事曆，查看北科 i 學園公告，下載北科 i 學園檔案</p>
-          <p>查閱北科學生成績與學分資訊，並主動推播重要消息</p>
-          <p>支援中文、英文顯示，老師亦可使用</p>
-          <p>即刻安裝，北科生活無煩惱～</p>
-          <p>歡迎您提供寶貴的意見、錯誤回報、創意點子給我們。你的想法，我們實現！</p>
-        </div>
-      </div>
-      <div class="download-badge">
-        <a href="https://to.ntut.club/tat/ios">
-          <img
-            alt="Download on the App Store"
-            src="assets/img/app_store.svg"
-          >
-        </a>
-        <a href="https://to.ntut.club/tat/android">
-          <img
-            alt="Get it on Google Play"
-            src="assets/img/google_play.svg"
-          >
-        </a>
-      </div>
-    </section>
-
-    <section class="card">
-      <h2>Shorts - 短褲</h2>
-      <div class="project-content">
-        <img
-          class="project-image"
-          src="assets/img/shorts_qr_code.svg"
-          @click="toggleQR('shorts')"
-        >
-        <div class="project-description">
-          <h3>一個極簡的短網址伺服器 </h3>
-          <p>用一個檔案定義短連結，提供統計數據</p>
-          <a href="https://github.com/NTUT-NPC/shorts/">
-            原始碼
+    <FeatureCard
+      image-alt="TAT QR Code"
+      :image-src="TatQrCode"
+      title="TAT - 北科生活"
+      :toggle-fn="() => toggleQR('tat')"
+    >
+      <template #description>
+        <p>方便，簡潔，快速，強大，豐富您的北科生活！</p>
+        <p>迅速查詢北科學生課表與行事曆，查看北科 i 學園公告，下載北科 i 學園檔案</p>
+        <p>查閱北科學生成績與學分資訊，並主動推播重要消息</p>
+        <p>支援中文、英文顯示，老師亦可使用</p>
+        <p>即刻安裝，北科生活無煩惱～</p>
+        <p>歡迎您提供寶貴的意見、錯誤回報、創意點子給我們。你的想法，我們實現！</p>
+      </template>
+      <template #footer>
+        <div class="download-badge">
+          <a href="https://to.ntut.club/tat/ios">
+            <img
+              alt="Download on the App Store"
+              src="assets/img/app_store.svg"
+            >
+          </a>
+          <a href="https://to.ntut.club/tat/android">
+            <img
+              alt="Get it on Google Play"
+              src="assets/img/google_play.svg"
+            >
           </a>
         </div>
-      </div>
-    </section>
+      </template>
+    </FeatureCard>
+
+    <FeatureCard
+      image-alt="Shorts QR Code"
+      :image-src="ShortsQrCode"
+      title="Shorts - 短褲"
+      :toggle-fn="() => toggleQR('shorts')"
+    >
+      <template #description>
+        <h3>一個極簡的短網址伺服器 </h3>
+        <p>用一個檔案定義短連結，提供統計數據</p>
+        <a href="https://github.com/NTUT-NPC/shorts/">
+          原始碼
+        </a>
+      </template>
+    </FeatureCard>
   </article>
 </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;
-}
-
-.project-description p {
-  margin: 0 0 1rem;
-}
-
 .download-badge {
   display: flex;
   justify-content: center;

From c02f3e0c124769358c3d218d5d19d0b04ca1a704 Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Thu, 6 Mar 2025 12:02:34 +0800
Subject: [PATCH 8/9] refactor: remove gap from .card class for improved layout

---
 app/app.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/app.vue b/app/app.vue
index d5a7d0e..027cf6d 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -230,7 +230,6 @@ button {
 .card {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
   padding: 2rem;
   margin: auto;
   border-radius: 8px;

From 3c2556b2baccd872a150a5789a35e25bcd87a746 Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Thu, 6 Mar 2025 12:02:58 +0800
Subject: [PATCH 9/9] refactor: remove

---
 app/pages/join.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index 832041d..c1a52a8 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -61,7 +61,6 @@ import FeatureCard from '~/components/FeatureCard.vue'
             加入 Discord
           </strong>
         </button></a>
-        <p>💰 好吃的古早味社課，每次只要 50 元，歡迎來看看！</p>
       </template>
     </FeatureCard>
   </article>