feat(i18n): add localized content for landing page

app/src/components/LanguageSelector.vue

@@ -15,7 +15,7 @@ function changeLanguage(event: Event) {
 <template>
   <select
     :value="locale"
-    class="bg-bg-secondary px-3 py-2 font-mono text-sm text-text shadow-md outline-none"
+    class="bg-bg-secondary px-3 py-2 text-sm text-text shadow-md outline-none"
     aria-label="Language"
     @change="changeLanguage"
     style="font-size: 2vh"

app/src/components/header/LandingHeaderComponents.vue

@@ -64,7 +64,7 @@ const scrollToSection = (sectionId: string) => {
   </RouterLink>
 
   <a
-    :title="t('nav.reportBug')"
+    :title="t('nav.report_bug')"
     :href="bugReportUrl"
     target="_blank"
     class="h-5 w-5"

app/src/i18n/locales/en.json

@@ -1,7 +1,7 @@
 {
   "language": {
     "change": "Change language",
-    "traditionalChinese": "繁體中文",
+    "traditional_chinese": "繁體中文",
     "english": "English"
   },
   "nav": {
@@ -10,6 +10,35 @@
     "about": "About",
     "contact": "Contact",
     "login": "Sign in",
-    "reportBug": "Report a bug"
+    "report_bug": "Report a bug"
+  },
+  "landing": {
+    "intro": "Programming is about more than writing code - it also means knowing how to interact effectively with your computer. Yet programming education often overlooks the importance of the development environment, leaving many learners frustrated. A development environment includes all the tools needed to write and run software, many of which are used through terminal commands. While most learners use Windows or macOS, much of the software world runs on Linux. Linux Odyssey is an interactive online learning platform designed to bridge that gap.",
+    "feature1": "Easy for Beginners",
+    "feature1_desc": "Setting up and using development tools can be a major hurdle for beginners. With Linux Odyssey, there is nothing to install - learners can access a real Linux environment directly from their browser.",
+    "feature2": "Learn Through Play",
+    "feature2_desc": "Linux Odyssey combines the fun of gaming with practical learning. Through carefully designed levels, learners take on challenges, solve puzzles, and master Linux commands along the way.",
+    "feature3": "Hands-on Linux Experience",
+    "feature3_desc": "Linux Odyssey goes beyond theory by providing real hands-on experience. Every command runs in a real Linux environment, giving learners an authentic introduction to the world of software development.",
+    "start_journey": "Grab your keyboard and begin your Linux adventure!",
+    "team_intro": "Meet the Team",
+    "team_desc": "NTUT Intelligent Automation Engineering, 2nd Cohort",
+    "team_member1": "Wancat",
+    "team_member2": "Neil",
+    "team_member3": "A.H.",
+    "team_member4": "Ray Gur",
+    "awards": "Awards",
+    "award_desc": "2023 InnoServe Awards - 2nd Place, Titansoft Agile Development Award",
+    "player_feedback": "What Players Say",
+    "feedback1": "\"It's really fun - just like a puzzle game.\"",
+    "feedback2": "\"I never knew free software existed. Thank you!\"",
+    "feedback3": "\"It's pretty fun. It makes programming enjoyable.\"",
+    "feedback4": "\"I used to dislike computer class, but now I like it a little more.\"",
+    "feedback5": "\"The program is really beginner-friendly, and I learned a lot.\"",
+    "feedback6": "\"It's very well made, clear, and easy to understand. A lot of thought went into the level design.\"",
+    "feedback7": "\"I found the experience really interesting. I got to try programming in a way I never had before, and the student mentors were very helpful. Thank you for explaining everything so carefully. I hope I can join an activity like this again.\"",
+    "feedback8": "\"I used to think programming was difficult, but now I find it interesting.\"",
+    "feedback9": "\"I used to think programming was difficult and had nothing to do with my life. After this class, it feels much more approachable.\"",
+    "contact_us": "Contact Us"
   }
 }

app/src/i18n/locales/zh-TW.json

@@ -1,7 +1,7 @@
 {
   "language": {
     "change": "切換語言",
-    "traditionalChinese": "繁體中文",
+    "traditional_chinese": "繁體中文",
     "english": "English"
   },
   "nav": {
@@ -10,6 +10,35 @@
     "about": "關於",
     "contact": "聯絡我們",
     "login": "登入",
-    "reportBug": "回報錯誤"
+    "report_bug": "回報錯誤"
+  },
+  "landing": {
+    "intro": "程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。程式教育卻往往忽略背後「開發環境」的重要性，使得許多學生在過程中充滿挫折。「開發環境」是寫程式、執行程式過程所需要的一切工具。而這些工具需要在終端機輸入指令來使用。大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux 作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。",
+    "feature1": "初學者也能立即上手",
+    "feature1_desc": "我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux 環境。",
+    "feature2": "遊戲般的學習體驗",
+    "feature2_desc": "Linux Odyssey 融合了遊戲的樂趣與學習的實用性。透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，一邊掌握 Linux 指令的運用。",
+    "feature3": "真實的 Linux 操作之旅",
+    "feature3_desc": "Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。每一個指令都是在真實的 Linux 環境中執行，讓學習者能夠真正深入軟體開發的世界。",
+    "start_journey": "準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！",
+    "team_intro": "團隊介紹",
+    "team_desc": "國立臺北科技大學 智慧自動化工程科 第二屆",
+    "team_member1": "Wancat",
+    "team_member2": "Neil",
+    "team_member3": "A.H.",
+    "team_member4": "Ray Gur",
+    "awards": "獲獎紀錄",
+    "award_desc": "2023大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名",
+    "player_feedback": "玩家感想",
+    "feedback1": "\"很好玩很像益智遊戲\"",
+    "feedback2": "\"我從來不知道自由軟體的存在，謝謝你們。\"",
+    "feedback3": "\"還蠻好玩的，讓程式變好玩\"",
+    "feedback4": "\"以前不喜歡電腦課現在覺得喜歡一點點\"",
+    "feedback5": "\"程式真的對新手很友善，讓我學到了很多東西\"",
+    "feedback6": "\"感覺做得很好很簡明易懂關卡設計很用心\"",
+    "feedback7": "\"這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動\"",
+    "feedback8": "\"以前我覺得寫程式很難不過現在覺得很有趣\"",
+    "feedback9": "\"以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近\"",
+    "contact_us": "聯絡我們"
   }
 }

app/src/views/LandingPage.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import ContactButton from '../components/ContactButton.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import LandingHeaderComponents from '../components/header/LandingHeaderComponents.vue'
 import HeaderPart from '../components/header/HeaderPart.vue'
 
 import { facebookUrl, githubUrl } from '../config'
+
+const { t } = useI18n()
 </script>
 <template>
   <div class="w-screen h-screen bg-scroll bg-bg">
@@ -18,13 +21,9 @@ import { facebookUrl, githubUrl } from '../config'
           <div
             class="flex flex-col md:flex-row mt-10 justify-around gap-5 items-center my-10"
           >
-            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
-              Linux
-            </h1>
+            <h1 class="text-text-primary text-7xl font-extrabold">Linux</h1>
             <img src="../img/icon_totem.svg" class="h-[30vh]" />
-            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
-              Odyssey
-            </h1>
+            <h1 class="text-text-primary text-7xl font-extrabold">Odyssey</h1>
           </div>
           <!-- intro -->
           <div class="w-full md:w-2/3 px-5">
@@ -36,13 +35,7 @@ import { facebookUrl, githubUrl } from '../config'
                 class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
                 style="font-size: 2.5vh"
               >
-                程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
-                程式教育卻往往忽略背後「開發環境」的重要性，
-                使得許多學生在過程中充滿挫折。
-                「開發環境」是寫程式、執行程式過程所需要的一切工具。
-                而這些工具需要在終端機輸入指令來使用。
-                大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
-                作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
+                {{ t('landing.intro') }}
               </h1>
             </section>
             <section
@@ -57,31 +50,27 @@ import { facebookUrl, githubUrl } from '../config'
                   class="h-[18vh] row-span-2"
                 />
                 <h1
-                  class="text-text-primary p-5 font-extrabold font-mono col-span-2"
+                  class="text-text-primary p-5 font-extrabold col-span-2"
                   style="font-size: 3.5vh"
                 >
-                  初學者也能立即上手
+                  {{ t('landing.feature1') }}
                 </h1>
                 <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
-                  我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
-                  學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
-                  環境。
+                  {{ t('landing.feature1_desc') }}
                 </h1>
               </div>
               <div
                 class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
               >
                 <h1
-                  class="text-text-primary p-5 font-extrabold font-mono col-span-2"
+                  class="text-text-primary p-5 font-extrabold col-span-2"
                   style="font-size: 3.5vh"
                 >
-                  遊戲般的學習體驗
+                  {{ t('landing.feature2') }}
                 </h1>
                 <img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
                 <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
-                  Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
-                  透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
-                  一邊掌握 Linux 指令的運用。
+                  {{ t('landing.feature2_desc') }}
                 </h1>
               </div>
               <div
@@ -92,15 +81,13 @@ import { facebookUrl, githubUrl } from '../config'
                   class="h-[18vh] row-span-2"
                 />
                 <h1
-                  class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
+                  class="text-text-primary p-5 font-extrabold col-span-2 pt-8"
                   style="font-size: 3.5vh"
                 >
-                  真實的 Linux 操作之旅
+                  {{ t('landing.feature3') }}
                 </h1>
                 <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
-                  Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
-                  每一個指令都是在真實的 Linux 環境中執行，
-                  讓學習者能夠真正深入軟體開發的世界。
+                  {{ t('landing.feature3_desc') }}
                 </h1>
               </div>
             </section>
@@ -120,7 +107,7 @@ import { facebookUrl, githubUrl } from '../config'
             >
               <RouterLink title="StartGame" id="StartGame" to="/register">
                 <div class="text-text text-xl p-2 w-full text-center">
-                  準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
+                  {{ t('landing.start_journey') }}
                 </div>
               </RouterLink>
             </section>
@@ -129,24 +116,25 @@ import { facebookUrl, githubUrl } from '../config'
               class="text-text flex flex-col items-center mt-10 gap-10"
             >
               <div class="w-full flex flex-col items-center gap-2">
-                <h1 class="text-text-primary text-3xl font-extrabold font-mono">
-                  團隊介紹
+                <h1 class="text-text-primary text-3xl font-extrabold">
+                  {{ t('landing.team_intro') }}
                 </h1>
-                <p class="text-lg">國立臺北科技大學 智慧自動化工程科 第二屆</p>
+                <p class="text-lg">
+                  {{ t('landing.team_desc') }}
+                </p>
                 <div class="flex flex-row gap-5 justify-center">
-                  <h1 class="font-bold">Wancat</h1>
-                  <h1 class="font-bold">Neil</h1>
-                  <h1 class="font-bold">A.H.</h1>
-                  <h1 class="font-bold">Ray Gur</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member1') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member2') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member3') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member4') }}</h1>
                 </div>
               </div>
               <div class="w-full flex flex-col items-center gap-2">
-                <h1 class="text-text-primary text-3xl font-extrabold font-mono">
-                  得獎肯定
+                <h1 class="text-text-primary text-3xl font-extrabold">
+                  {{ t('landing.awards') }}
                 </h1>
                 <h1 class="text-xl text-center">
-                  大專校院資訊應用服務創新競賽<br />
-                  鈦坦敏捷開發特別獎 第二名
+                  {{ t('landing.award_desc') }}
                 </h1>
               </div>
               <div class="container mx-auto">
@@ -154,35 +142,37 @@ import { facebookUrl, githubUrl } from '../config'
                   class="justify-items-center grid grid-cols-1 sm:grid-cols-3 gap-5"
                 >
                   <h1
-                    class="text-text-primary text-3xl font-extrabold font-mono sm:col-span-3 gap-6"
+                    class="text-text-primary text-3xl font-extrabold sm:col-span-3 gap-6"
                   >
-                    玩家感想
+                    {{ t('landing.player_feedback') }}
                     <!--可以做成翻頁卡牌一次一個-->
                   </h1>
-                  <h1 class="text-xl text-center">"很好玩很像益智遊戲"</h1>
                   <h1 class="text-xl text-center">
-                    "我從來不知道自由軟體的存在，謝謝你們。"
+                    {{ t('landing.feedback1') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "還蠻好玩的，讓程式變好玩"
+                    {{ t('landing.feedback2') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "以前不喜歡電腦課現在覺得喜歡一點點"
+                    {{ t('landing.feedback3') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "程式真的對新手很友善，讓我學到了很多東西"
+                    {{ t('landing.feedback4') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "感覺做得很好很簡明易懂關卡設計很用心"
+                    {{ t('landing.feedback5') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+                    {{ t('landing.feedback6') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "以前我覺得寫程式很難不過現在覺得很有趣"
+                    {{ t('landing.feedback7') }}
                   </h1>
                   <h1 class="text-xl text-center">
-                    "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+                    {{ t('landing.feedback8') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback9') }}
                   </h1>
                 </div>
               </div>
@@ -192,8 +182,8 @@ import { facebookUrl, githubUrl } from '../config'
             id="contact"
             class="text-text mt-10 flex flex-col items-center"
           >
-            <h1 class="text-text-primary font-extrabold font-mono text-3xl">
-              聯絡我們
+            <h1 class="text-text-primary font-extrabold text-3xl">
+              {{ t('landing.contact_us') }}
             </h1>
             <div
               class="flex flex-row items-center justify-around mt-5 gap-5 mb-5"