新增「專案」與「加入我們」

app/app.vue

@@ -25,6 +25,8 @@ const toggleDark = useToggle(isDark)
 const routes = {
   '/': '關於',
   '/projects': '專案',
+  '/join': '加入我們',
+  '/contact': '聯絡資訊',
 }
 
 const breakpoints = useBreakpoints(breakpointsSematic)
@@ -39,7 +41,7 @@ const [mobileMenuOpen, toggleMobileMenu] = useToggle(false)
   <header id="header">
     <div class="left">
       <a href="/">
-        <img src="assets/npc-horizontal.svg">
+        <img src="assets/img/npc-horizontal.svg">
       </a>
     </div>
 
@@ -136,15 +138,145 @@ const [mobileMenuOpen, toggleMobileMenu] = useToggle(false)
   <NuxtPage />
 </template>
 
-<style lang="postcss">
-body {
-  font-family: 'Cubic 11';
+<style>
+:root {
+  --background-color: #f8f9fa;
+  --text-color: #333333;
+  --heading-color: #000000;
+  --button-background-color: #e4e4e4;
+  --button-hover-background-color: #cccccc;
+  --box-background-color: #ffffff;
+  --box-shadow-color: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --link-color: rgb(0, 115, 255);
+  --link-hover-color: rgb(0, 83, 184);
+}
+
+.dark {
+  --background-color: #222222;
+  --text-color: #e0e0e0;
+  --heading-color: #ffffff;
+  --button-background-color: #444444;
+  --button-hover-background-color: #666666;
+  --box-background-color: #2a2a2a;
+  --box-shadow-color: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --link-color: rgb(0, 221, 255);
+  --link-hover-color: rgb(65, 150, 255);
+}
+
+html {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: 'Arial', sans-serif;
+  line-height: 1.6;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--heading-color);
+  margin-bottom: 2rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+p {
+  color: var(--text-color);
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.3s;
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+button {
+  background-color: var(--button-background-color);
+  color: var(--text-color);
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 5px;
+  cursor: pointer;
+  box-shadow: 0 2px 5px var(--shadow-color);
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: var(--button-hover-background-color);
+  }
+}
+
+.npc-paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem 0.5rem;
+  margin: auto;
+  /* border-radius: 8px; */
+  max-width: 1000px;
+  & > div {
+    gap: 0;
+  }
+}
+
+.npc-box {
+  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 {
+  box-shadow: rgba(131, 131, 131, 0.479) 1px 1px 40px;
 }
 
 #header,
 #header-mobile-menu {
-  background-color: #333;
-  color: white;
+  background-color: #333 !important;
+  /* color: white !important; */
 
   ul,
   & {
@@ -157,21 +289,26 @@ body {
       list-style: none;
 
       &:hover {
-        cursor: pointer;
-        background-color: #fff3;
+        cursor: pointer !important;
+        background-color: #fff3 !important;
       }
     }
   }
 
   button,
   a {
     all: unset;
-    display: inline-block;
+    display: flex;
     padding: 0.5rem;
+    color: white !important;
+    & > svg {
+      height: 3rem;
+    }
   }
 }
 
 #header {
+  font-family: 'Cubic 11';
   display: flex;
   justify-content: space-between;
   align-items: center;

app/assets/README.md

@@ -0,0 +1,30 @@
+# QR Code 生成說明
+
+本 README 文件詳細介紹如何使用 [QR Code Generator](https://qrcodegenerator.com.tr/url-qr-code) 生成符合下列規格的 QR Code。
+
+## 使用網站
+
+使用以下網站生成 QR Code：
+[https://qrcodegenerator.com.tr/url-qr-code](https://qrcodegenerator.com.tr/url-qr-code)
+
+## 參數設置
+
+在生成 QR Code 時，請使用下列參數：
+
+- **尺寸:** 400x400 像素
+- **邊距:** 10 像素
+- **Logo 大小:** 設置為 0.4（相對於 QR Code 的比例）
+- **Logo 間距:** 10 像素
+- **點樣式選項:** 4
+- **外框方塊:** 3
+- **角落點:** 2
+
+## 操作步驟
+
+1. 打開網站 [https://qrcodegenerator.com.tr/url-qr-code](https://qrcodegenerator.com.tr/url-qr-code)。
+2. 輸入或貼上需要嵌入 QR Code 的 URL。
+3. 設置 QR Code 尺寸為 400x400 像素。
+4. 設定邊距（margin）為 10 像素，確保 QR Code 周圍有足夠空白。
+5. 如果需要添加 Logo，請將 Logo 大小設置為 0.4 並留出 10 像素的間距（logo spacing）。
+6. 選擇點樣式選項為 4，外框方塊為 3，角落點為 2（根據網站提供的選項進行調整）。
+7. 預覽並確認設置無誤後，儲存為 .svg 向量圖檔案。