setup main block

app/src/views/LandingPage.vue

@@ -21,7 +21,7 @@ const scrollToSection = (sectionId) => {
     <div class="h-screen w-screen absolute top-0 left-0">
       <!-- game header -->
       <div
-        class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
+        class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
       >
         <div class="flex flex-row items-center gap-3">
           <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
@@ -89,239 +89,234 @@ const scrollToSection = (sectionId) => {
         </div>
       </div>
 
-      <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-y-auto">
+      <!-- main content -->
-        <div
+      <main class="w-full h-[94vh] overflow-y-auto">
-          class="w-full h-full grid grid-cols-3 justify-items-center items-center"
+        <div class="h-1/2 m-3 px-10">
-        >
+          <div class="w-full h-full flex flex-col justify-around items-center">
-          <h1
+            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit ml-20"
+              Linux
-            style="font-size: 14vh"
-          >
-            Linux
-          </h1>
-          <img src="../img/icon_totem.svg" class="h-[30vh] inline-flex mr-12" />
-          <h1
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit mr-20"
-            style="font-size: 14vh"
-          >
-            Odyssey
-          </h1>
-        </div>
-        <section
-          id="intro"
-          class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
-        >
-          <h1
-            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 互動教學網站。
-          </h1>
-        </section>
-        <section
-          id="feature"
-          class="text-text p-15 grid grid-rows-3 gap-10 items-center pt-10"
-        >
-          <div
-            class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
-          >
-            <img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
-            <h1
-              class="text-text-primary p-5 font-extrabold font-mono col-span-2"
-              style="font-size: 3.5vh"
-            >
-              初學者也能立即上手
             </h1>
-            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+            <img src="../img/icon_totem.svg" class="h-[30vh]" />
-              我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
+            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
-              學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
+              Odyssey
-              環境。
             </h1>
           </div>
-          <div
+          <section
-            class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
+            id="intro"
+            class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
           >
             <h1
-              class="text-text-primary p-5 font-extrabold font-mono col-span-2"
+              class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
-              style="font-size: 3.5vh"
+              style="font-size: 2.5vh"
             >
-              遊戲般的學習體驗
+              程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
+              程式教育卻往往忽略背後「開發環境」的重要性，
+              使得許多學生在過程中充滿挫折。
+              「開發環境」是寫程式、執行程式過程所需要的一切工具。
+              而這些工具需要在終端機輸入指令來使用。
+              大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
+              作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
             </h1>
-            <img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
+          </section>
-            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+          <section
-              Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
+            id="feature"
-              透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
+            class="text-text p-15 grid grid-rows-3 gap-10 items-center pt-10"
-              一邊掌握 Linux 指令的運用。
-            </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"
           >
-            <img src="../img/icon_settings.svg" class="h-[18vh] row-span-2" />
+            <div
-            <h1
+              class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
-              class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
-              style="font-size: 3.5vh"
             >
-              真實的 Linux 操作之旅
+              <img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
-            </h1>
+              <h1
-            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                class="text-text-primary p-5 font-extrabold font-mono col-span-2"
-              Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
+                style="font-size: 3.5vh"
-              每一個指令都是在真實的 Linux 環境中執行，
-              讓學習者能夠真正深入軟體開發的世界。
-            </h1>
-          </div>
-        </section>
-        <section
-          id="start"
-          class="text-text p-20 grid grid-cols-3 gap-10 justify-items-center"
-        >
-          <iframe
-            width="1000"
-            height="562"
-            src="https://www.youtube.com/embed/XzvfmUf1QP8?si=QxnKJMNjsm27fGGF"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen
-            class="col-span-3 pb-10 mb-3"
-          ></iframe>
-          <RouterLink
-            title="StartGame"
-            id="StartGame"
-            to="/register"
-            class="w-1/2 h-[10vh] bg-text-primary p-2 transition ease-in-out delay-130 hover:-translate-y-1 hover:scale-150 hover:bg-indigo-500 duration-300 col-span-3"
-          >
-            <div class="bg-black p-2 w-full">
-              <div
-                class="text-text p-2 w-full text-center"
-                style="font-size: 2.5vh"
               >
-                準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
+                初學者也能立即上手
+              </h1>
+              <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
+                學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
+                環境。
+              </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"
+                style="font-size: 3.5vh"
+              >
+                遊戲般的學習體驗
+              </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 指令的運用。
+              </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"
+            >
+              <img src="../img/icon_settings.svg" class="h-[18vh] row-span-2" />
+              <h1
+                class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
+                style="font-size: 3.5vh"
+              >
+                真實的 Linux 操作之旅
+              </h1>
+              <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
+                每一個指令都是在真實的 Linux 環境中執行，
+                讓學習者能夠真正深入軟體開發的世界。
+              </h1>
+            </div>
+          </section>
+          <section
+            id="start"
+            class="text-text p-20 grid grid-cols-3 gap-10 justify-items-center"
+          >
+            <iframe
+              width="1000"
+              height="562"
+              src="https://www.youtube.com/embed/XzvfmUf1QP8?si=QxnKJMNjsm27fGGF"
+              title="YouTube video player"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowfullscreen
+              class="col-span-3 pb-10 mb-3"
+            ></iframe>
+            <RouterLink
+              title="StartGame"
+              id="StartGame"
+              to="/register"
+              class="w-1/2 h-[10vh] bg-text-primary p-2 transition ease-in-out delay-130 hover:-translate-y-1 hover:scale-150 hover:bg-indigo-500 duration-300 col-span-3"
+            >
+              <div class="bg-black p-2 w-full">
+                <div
+                  class="text-text p-2 w-full text-center"
+                  style="font-size: 2.5vh"
+                >
+                  準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
+                </div>
+              </div>
+            </RouterLink>
+          </section>
+          <section
+            id="info"
+            class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
+          >
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+              style="font-size: 3.5vh"
+            >
+              團隊介紹
+            </h1>
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+              國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
+              互動式終端機教學網站
+            </h1>
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+              Indieveloper
+            </h1>
+            <div class="p-3 col-span-3">
+              <div class="grid grid-cols-4 gap-3 justify-items-center">
+                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
+                <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
               </div>
             </div>
-          </RouterLink>
+            <h1
-        </section>
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-        <section
+              style="font-size: 3.5vh"
-          id="info"
+            >
-          class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
+              得獎肯定
-        >
+            </h1>
-          <h1
+            <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+              大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
-            style="font-size: 3.5vh"
+            </h1>
-          >
-            團隊介紹
-          </h1>
-          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-            國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
-            互動式終端機教學網站
-          </h1>
-          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-            Indieveloper
-          </h1>
-          <div class="p-3 col-span-3">
-            <div class="grid grid-cols-4 gap-3 justify-items-center">
-              <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
-              <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
-              <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
-              <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
-            </div>
-          </div>
-          <h1
-            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-            style="font-size: 3.5vh"
-          >
-            得獎肯定
-          </h1>
-          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
-            大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
-          </h1>
 
-          <h1
+            <h1
-            class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
-            style="font-size: 3.5vh"
+              style="font-size: 3.5vh"
+            >
+              玩家感想
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "很好玩很像益智遊戲"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "我從來不知道自由軟體的存在，謝謝你們。"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "還蠻好玩的，讓程式變好玩"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前不喜歡電腦課現在覺得喜歡一點點"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "程式真的對新手很友善，讓我學到了很多東西"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "感覺做得很好很簡明易懂關卡設計很用心"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前我覺得寫程式很難不過現在覺得很有趣"
+            </h1>
+            <h1 class="text-text p-3" style="font-size: 2.5vh">
+              "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+            </h1>
+          </section>
+          <section
+            id="contact"
+            class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
           >
-            玩家感想
+            <h1
-          </h1>
+              class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+              style="font-size: 3.5vh"
-            "很好玩很像益智遊戲"
+            >
-          </h1>
+              聯絡我們
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            </h1>
-            "我從來不知道自由軟體的存在，謝謝你們。"
+            <a
-          </h1>
+              title="facebookUrl"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+              :href="facebookUrl"
-            "還蠻好玩的，讓程式變好玩"
+              target="_blank"
-          </h1>
+              class="h-10 w-10"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            >
-            "以前不喜歡電腦課現在覺得喜歡一點點"
+              <font-awesome-icon
-          </h1>
+                :icon="['fab', 'facebook']"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+                class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-            "程式真的對新手很友善，讓我學到了很多東西"
+              />
-          </h1>
+            </a>
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            <a
-            "感覺做得很好很簡明易懂關卡設計很用心"
+              title="GitHubUrl"
-          </h1>
+              :href="GitHubUrl"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+              target="_blank"
-            "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+              class="h-10 w-10"
-          </h1>
+            >
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+              <font-awesome-icon
-            "以前我覺得寫程式很難不過現在覺得很有趣"
+                :icon="['fab', 'github']"
-          </h1>
+                class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-          <h1 class="text-text p-3" style="font-size: 2.5vh">
+              />
-            "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+            </a>
-          </h1>
+            <div title="EmailAddress" class="h-10 w-10">
-        </section>
+              <font-awesome-icon
-        <section
+                :icon="['fas', 'envelope']"
-          id="contact"
+                class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-          class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
+              />
-        >
+            </div>
-          <h1
+            <h1 class="font-semibold" style="font-size: 2.5vh">Facebook</h1>
-            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+            <h1 class="font-semibold" style="font-size: 2.5vh">GitHub</h1>
-            style="font-size: 3.5vh"
+            <h1 class="font-semibold" style="font-size: 2.5vh">Email</h1>
-          >
+            <h1 style="font-size: 2.5vh">Linux Odyssey</h1>
-            聯絡我們
+            <h1 style="font-size: 2.5vh">linux-odyssey/linux-odyssey</h1>
-          </h1>
+            <h1 style="font-size: 2.5vh">team@linuxodyssey.xyz</h1>
-          <a
+          </section>
-            title="facebookUrl"
+        </div>
-            :href="facebookUrl"
+      </main>
-            target="_blank"
-            class="h-10 w-10"
-          >
-            <font-awesome-icon
-              :icon="['fab', 'facebook']"
-              class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-            />
-          </a>
-          <a
-            title="GitHubUrl"
-            :href="GitHubUrl"
-            target="_blank"
-            class="h-10 w-10"
-          >
-            <font-awesome-icon
-              :icon="['fab', 'github']"
-              class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-            />
-          </a>
-          <div title="EmailAddress" class="h-10 w-10">
-            <font-awesome-icon
-              :icon="['fas', 'envelope']"
-              class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
-            />
-          </div>
-          <h1 class="font-semibold" style="font-size: 2.5vh">Facebook</h1>
-          <h1 class="font-semibold" style="font-size: 2.5vh">GitHub</h1>
-          <h1 class="font-semibold" style="font-size: 2.5vh">Email</h1>
-          <h1 style="font-size: 2.5vh">Linux Odyssey</h1>
-          <h1 style="font-size: 2.5vh">linux-odyssey/linux-odyssey</h1>
-          <h1 style="font-size: 2.5vh">team@linuxodyssey.xyz</h1>
-        </section>
-      </div>
     </div>
   </div>
 </template>