From 3a8faf318c25c2f5138f30f0a07d96d40ee501a9 Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Sat, 1 Mar 2025 14:01:21 +0800
Subject: [PATCH 1/4] feat: add instructions page for membership application
 process and update join page link

---
 app/pages/Instructions.vue | 99 ++++++++++++++++++++++++++++++++++++++
 app/pages/join.vue         | 11 ++---
 2 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 app/pages/Instructions.vue

diff --git a/app/pages/Instructions.vue b/app/pages/Instructions.vue
new file mode 100644
index 0000000..52966ed
--- /dev/null
+++ b/app/pages/Instructions.vue
@@ -0,0 +1,99 @@
+<script>
+export default {
+  data() {
+    return {
+      name: '',
+      num: '',
+      dep: '',
+      classroom: '共科 312',
+      day: '二',
+    }
+  },
+  computed: {
+    formUrl() {
+      return 'https://docs.google.com/forms/d/e/1FAIpQLSciz2ZVjV-yBNIurfYDtsof0ZSiqwXm0-oQlxZwwdmp6wnF_Q/viewform?usp=pp_url'
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="npc-paragraph">
+    <div class="npc-box">
+      <strong>
+        <h2>
+          入社流程
+        </h2>
+      </strong>
+      <div class="project-content">
+        <div class="project-description">
+          <p>
+            首先請加入 <a
+              href="https://to.ntut.club/discord"
+              target="_blank"
+            >Discord 群組</a>，並且在下方填寫入社申請表單
+          </p>
+          <form
+            :action="formUrl"
+            method="GET"
+            target="_blank"
+          >
+            <label>
+              姓名：
+              <input
+                id="name"
+                v-model="name"
+                name="entry.709574167"
+                placeholder="王大同"
+                type="text"
+              >
+            </label>
+            <label>
+              學號：
+              <input
+                id="num"
+                v-model="num"
+                name="entry.781375275"
+                placeholder="112345678"
+                type="text"
+              >
+            </label>
+            <label>
+              系級：
+              <input
+                id="dep"
+                v-model="dep"
+                name="entry.458858603"
+                placeholder="電資十"
+                type="text"
+              >
+            </label>
+            <button type="submit">
+              前往申請表
+            </button>
+          </form>
+          <br>
+          <p>
+            可於禮拜{{ day }}社課期間至<strong>{{ classroom }}</strong> 或於平日中午到 <NuxtLink to="/contact">
+              社團辦公室
+            </NuxtLink> 繳費
+          </p>
+          <p>繳費完將立即啟用 Discord 社員身份</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+form {
+  display: grid;
+  gap: 1.5rem;
+  input {
+    background-color: transparent;
+    border: 0;
+    /* border-bottom: var(--text-color) solid 1px; */
+    color: var(--text-color);
+  }
+}
+</style>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 00e02ab..77ad804 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -21,16 +21,15 @@
           <p>💰 社費僅需 500 元，讓您享受所有會員專屬福利！</p>
           <p>📢 建議加入我們的 Discord 群組，隨時掌握最新消息與活動資訊，與其他會員互動交流！</p>
           <p>快來加入我們的大家庭，一起創造美好的回憶！💖</p>
-          <p>有興趣的朋友請點擊下方 Discord 連結，或透過 Email 聯絡我們！</p>
-          <p>歡迎來社課或社辦繳費</p>
+          <p>有興趣的朋友請點擊下方按鈕填寫表單！</p>
         </div>
       </div>
       <div class="join-button-container">
-        <a href="https://to.ntut.club/discord">
-          <button class="btn-discord">
-            <strong>加入 Discord</strong>
+        <NuxtLink to="/instructions">
+          <button>
+            填寫表單入社
           </button>
-        </a>
+        </NuxtLink>
         <a href="mailto:contact@ntut.club">
           <button>Email</button>
         </a>

From 000a37e005792fa6def5225292471cdcb5d5383c Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Tue, 4 Mar 2025 17:14:53 +0800
Subject: [PATCH 2/4] feat: update instructions page

---
 app/components/DC.vue      |  36 ++++++++++
 app/pages/Instructions.vue | 139 ++++++++++++++++++++++---------------
 app/pages/join.vue         |   7 +-
 3 files changed, 120 insertions(+), 62 deletions(-)
 create mode 100644 app/components/DC.vue

diff --git a/app/components/DC.vue b/app/components/DC.vue
new file mode 100644
index 0000000..e3af5b6
--- /dev/null
+++ b/app/components/DC.vue
@@ -0,0 +1,36 @@
+<script>
+export default {
+  name: 'DC',
+  props: {
+    userId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    href() {
+      return `https://discord.com/users/${this.userId}`
+    },
+  },
+}
+</script>
+
+<template>
+  <a
+    class="dc-at"
+    :href="href"
+    target="_blank"
+  >
+    <slot />
+  </a>
+</template>
+
+<style scoped>
+.dc-at {
+  background-color: #40447e;
+  color: white;
+  font-weight: 700;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.3rem;
+}
+</style>
diff --git a/app/pages/Instructions.vue b/app/pages/Instructions.vue
index 52966ed..5f44c59 100644
--- a/app/pages/Instructions.vue
+++ b/app/pages/Instructions.vue
@@ -2,11 +2,7 @@
 export default {
   data() {
     return {
-      name: '',
-      num: '',
-      dep: '',
-      classroom: '共科 312',
-      day: '二',
+      np_cat_dc_link: 'https://discord.com/users/1171113302739394628',
     }
   },
   computed: {
@@ -31,69 +27,98 @@ export default {
             首先請加入 <a
               href="https://to.ntut.club/discord"
               target="_blank"
-            >Discord 群組</a>，並且在下方填寫入社申請表單
+            >Discord 伺服器</a>，並透過以下幾種方式聯絡我們
           </p>
-          <form
-            :action="formUrl"
-            method="GET"
+          <a
+            href="https://to.ntut.club/discord"
             target="_blank"
           >
-            <label>
-              姓名：
-              <input
-                id="name"
-                v-model="name"
-                name="entry.709574167"
-                placeholder="王大同"
-                type="text"
-              >
-            </label>
-            <label>
-              學號：
-              <input
-                id="num"
-                v-model="num"
-                name="entry.781375275"
-                placeholder="112345678"
-                type="text"
-              >
-            </label>
-            <label>
-              系級：
-              <input
-                id="dep"
-                v-model="dep"
-                name="entry.458858603"
-                placeholder="電資十"
-                type="text"
-              >
-            </label>
-            <button type="submit">
-              前往申請表
-            </button>
-          </form>
+            <div class="discord-channel">
+              <svg
+                aria-hidden="true"
+                class="icon__2ea32"
+                fill="none"
+                height="24"
+                role="svg"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              ><path
+                class=""
+                clip-rule="evenodd"
+                d="M15 2a3 3 0 0 1 3 3v12H5.5a1.5 1.5 0 0 0 0 3h14a.5.5 0 0 0 .5-.5V5h1a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h10Zm-.3 5.7a1 1 0 0 0-1.4-1.4L9 10.58l-2.3-2.3a1 1 0 0 0-1.4 1.42l3 3a1 1 0 0 0 1.4 0l5-5Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              /></svg>
+              <strong>北科程式設計研究社</strong>
+            </div>
+          </a>
+          <ul>
+            <li>
+              <h4>
+                Instagram <a href="https://instagram.com/npc.designer">@npc.designer</a>
+              </h4>
+            </li>
+
+            <li>
+              <h4>
+                於社課期間到上課教室
+              </h4>
+            </li>
+            <li>
+              <h4>
+                Discord 伺服器首頁點選私訊 <DC user-id="1171113302739394628">
+                  @小N
+                </DC>
+              </h4>
+            </li>
+            <li>
+              <h4>
+                Email <a href="mailto:contact@ntut.club">contact@ntut.club</a>
+              </h4>
+            </li>
+          </ul>
           <br>
-          <p>
-            可於禮拜{{ day }}社課期間至<strong>{{ classroom }}</strong> 或於平日中午到 <NuxtLink to="/contact">
-              社團辦公室
-            </NuxtLink> 繳費
-          </p>
-          <p>繳費完將立即啟用 Discord 社員身份</p>
+          <p>並告訴我們你的 <strong>姓名</strong>、<strong>學號</strong> 和 <strong>Discord 使用者名稱</strong>，我們將為您安排時間繳費與領取社服</p>
         </div>
       </div>
+      <NuxtLink to="/join">
+        <button>
+          返回
+        </button>
+      </NuxtLink>
     </div>
   </div>
 </template>
 
 <style scoped>
-form {
-  display: grid;
-  gap: 1.5rem;
-  input {
-    background-color: transparent;
-    border: 0;
-    /* border-bottom: var(--text-color) solid 1px; */
-    color: var(--text-color);
+.discord-channel {
+  display: flex;
+  align-items: center;
+  background-color: #353535;
+  width: fit-content;
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.5rem;
+  margin: 0.5rem;
+  cursor: pointer;
+  svg {
+    margin-right: 0.5rem;
+    color: white;
   }
+  strong {
+    margin-right: 2rem;
+    color: white;
+  }
+  &:hover {
+    background-color: #494949;
+    transform: scale(1.02);
+  }
+}
+.dc-at {
+  background-color: #40447e;
+  color: white;
+  font-weight: 700;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.3rem;
 }
 </style>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 77ad804..b2b8179 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -21,18 +21,15 @@
           <p>💰 社費僅需 500 元，讓您享受所有會員專屬福利！</p>
           <p>📢 建議加入我們的 Discord 群組，隨時掌握最新消息與活動資訊，與其他會員互動交流！</p>
           <p>快來加入我們的大家庭，一起創造美好的回憶！💖</p>
-          <p>有興趣的朋友請點擊下方按鈕填寫表單！</p>
+          <p>有興趣的朋友請點擊下方按鈕！</p>
         </div>
       </div>
       <div class="join-button-container">
         <NuxtLink to="/instructions">
           <button>
-            填寫表單入社
+            查看說明
           </button>
         </NuxtLink>
-        <a href="mailto:contact@ntut.club">
-          <button>Email</button>
-        </a>
       </div>
     </div>
 

From 26d76f6217f756cb706513917fa41cec94902a72 Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Tue, 4 Mar 2025 17:17:41 +0800
Subject: [PATCH 3/4] refactor: remove unused script section from
 Instructions.vue

---
 app/pages/Instructions.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/pages/Instructions.vue b/app/pages/Instructions.vue
index 5f44c59..6189207 100644
--- a/app/pages/Instructions.vue
+++ b/app/pages/Instructions.vue
@@ -1,18 +1,3 @@
-<script>
-export default {
-  data() {
-    return {
-      np_cat_dc_link: 'https://discord.com/users/1171113302739394628',
-    }
-  },
-  computed: {
-    formUrl() {
-      return 'https://docs.google.com/forms/d/e/1FAIpQLSciz2ZVjV-yBNIurfYDtsof0ZSiqwXm0-oQlxZwwdmp6wnF_Q/viewform?usp=pp_url'
-    },
-  },
-}
-</script>
-
 <template>
   <div class="npc-paragraph">
     <div class="npc-box">

From 41582cc2fa73c80f5a086b7f65f541d6e068190f Mon Sep 17 00:00:00 2001
From: kevinlee-06 <cgshyuankai@proton.me>
Date: Wed, 5 Mar 2025 21:06:18 +0800
Subject: [PATCH 4/4] fix: comment out unused links and update membership
 description in Instructions.vue and join.vue

---
 app/pages/Instructions.vue | 11 ++++++-----
 app/pages/join.vue         |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/pages/Instructions.vue b/app/pages/Instructions.vue
index 6189207..8a1cacb 100644
--- a/app/pages/Instructions.vue
+++ b/app/pages/Instructions.vue
@@ -14,7 +14,7 @@
               target="_blank"
             >Discord 伺服器</a>，並透過以下幾種方式聯絡我們
           </p>
-          <a
+          <!-- <a
             href="https://to.ntut.club/discord"
             target="_blank"
           >
@@ -37,7 +37,7 @@
               /></svg>
               <strong>北科程式設計研究社</strong>
             </div>
-          </a>
+          </a> -->
           <ul>
             <li>
               <h4>
@@ -52,9 +52,10 @@
             </li>
             <li>
               <h4>
-                Discord 伺服器首頁點選私訊 <DC user-id="1171113302739394628">
-                  @小N
-                </DC>
+                Discord 伺服器首頁點選私訊
+                <!-- <DC user-id="1171113302739394628"> -->
+                @小N
+                <!-- </DC> -->
               </h4>
             </li>
             <li>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index b2b8179..10db347 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -11,7 +11,7 @@
         >
         <div class="project-description">
           <h3>🌟 加入我們的社團吧！🌟</h3>
-          <p>🎉 成為 <strong>我們的一員</strong>，您將獲得：</p>
+          <p>🎉 成為 <strong>NPC</strong> 的一員，您將獲得：</p>
           <ul>
             <li>獨家社服一件，展現您的團隊精神！</li>
             <li>精彩的社課，提升您的技能與知識！</li>