feat: enhance Q&A section with detailed explanations and accordion functionality; update localization for English and Traditional Chinese

i18n/locales/en.json

@@ -17,8 +17,20 @@
     },
     "startusing": "Let's Start!",
     "learnmore": "Learn more",
-    "whydes": "Taiwan news mostly came from China-controlled media or from reporters who uses inappropriate content to farm clicks.",
+    "qanda": {
-    "howdes": "We use web scraping to search for the latest news, and store it into a postgres database."
+      "titles": {
+        "whydes": "Why make this platform?",
+        "howdes": "How does it work?",
+        "supportedLocationNews": "Which news sources from which countries are supported?",
+        "userData": "How we handle user data?",
+        "mobileApp": "Is there a mobile app?"
+      },
+      "whydes": "Taiwan news mostly came from China-controlled / China-official media or from reporters who uses inappropriate content to farm clicks and engragement. Or just made up news by the reporters as the Taiwan's NCC doesn't give a shit about the fake news they are promoting as they think it doesn't matter, this platform is a wake up call to the NCC to start to moderate news media corporations that do fake news.",
+      "howdes": "We use web scraping to search for the latest news, and store it into a postgres database, for people to access, and the crawler is not like the OpenAI or any AI company, we just load the page once, and that's it nothing else on your page.",
+      "supportedLocationNews": "We currently only support news from Taiwan for now, but if you want more, you can contribute to the project by adding more news sources to the python scraping scripts.",
+      "userData": "We handle your account and password in a secure way, with two encryption methods, one during transit to the server (and also SQL injecton), one saving to the database. For other user data, it is currently NOT end-to-end encrypted, like your AI chat history, your stars, and your name & email. In the near future, we will add E2E encryption (and I can also pratice).",
+      "mobileApp": "I will make a application using React Native in the future, but for now, mobile is not supported, but you can still kinda use it, it is just not pleasant."
+    }
   },
   "dailybriefing": "Daily Briefing",
   "Welcome": "Welcome",

i18n/locales/zh-tw.json

@@ -17,8 +17,20 @@
     },
     "startusing": "開始使用!",
     "learnmore": "了解更多",
-    "whydes": "台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。",
+    "qanda": {
-    "howdes": " 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。"
+      "titles": {
+        "whydes": "為什麼要做這個平台？",
+        "howdes": "這個平台是怎麼運作的？",
+        "supportedLocationNews": "這個平台支援哪些國家的新聞？",
+        "userData": "我們如何處理使用者的資料？",
+        "mobileApp": "這個會做手機版嗎？"
+      },
+      "whydes": "台灣的新聞是要痲是來自中國控制/中國官方的媒體，或是來自只想獲得點閱的記者。這個平台是要讓台灣的NCC知道，發布假新聞就應該被調查，而不是放著不管。",
+      "howdes": " 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。",
+      "supportedLocationNews": "We currently only support news from Taiwan for now, but if you want more, you can contribute to the project by adding more news sources to the python scraping scripts.",
+      "userData": "We handle your account and password in a secure way, with two encryption methods, one during transit to the server (and also SQL injecton), one saving to the database. For other user data, it is currently NOT end-to-end encrypted, like your AI chat history, your stars, and your name & email. In the near future, we will add E2E encryption (and I can also pratice).",
+      "mobileApp": "I will make a application using React Native in the future, but for now, mobile is not supported, but you can still kinda use it, it is just not pleasant."
+    }
   },
   "dailybriefing": "今日報導",
   "Welcome": "歡迎",

pages/app/desktop/index.vue

@@ -281,8 +281,14 @@ onMounted(() => {
 });
 
 watchEffect((cleanupFn) => {
-  const timer = setTimeout(() => (progress.value = 100), 500);
+  const tier = setTimeout(() => (progress.value = 10), 200);
+  const timer = setTimeout(() => (progress.value = 30), 500);
+  const timmer = setTimeout(() => (progress.value = 70), 1000);
+  const timmmer = setTimeout(() => (progress.value = 100), 1600);
+  cleanupFn(() => clearTimeout(tier));
   cleanupFn(() => clearTimeout(timer));
+  cleanupFn(() => clearTimeout(timmer));
+  cleanupFn(() => clearTimeout(timmmer));
 });
 </script>
 <template>

pages/home.vue

@@ -21,24 +21,32 @@ const messages = [
   "BlindSpec",
 ];
 
-const defaultValue = "item-1";
 
 const accordionItems = [
   {
-    value: "item-1",
+    value: "i1",
-    title: "Is it accessible?",
+    title: t("home.qanda.titles.whydes"),
-    content: "Yes. It adheres to the WAI-ARIA design pattern.",
+    content: t("home.qanda.whydes"),
   },
   {
-    value: "item-2",
+    value: "i2",
-    title: "Is it unstyled?",
+    title: t("home.qanda.titles.howdes"),
-    content:
+    content: t("home.qanda.howdes"),
-      "Yes. It's unstyled by default, giving you freedom over the look and feel.",
   },
   {
-    value: "item-3",
+    value: "i3",
-    title: "Can it be animated?",
+    title: t("home.qanda.titles.supportedLocationNews"),
-    content: "Yes! You can use the transition prop to configure the animation.",
+    content: t("home.qanda.supportedLocationNews"),
+  },
+  {
+    value: "i4",
+    title: t("home.qanda.titles.userData"),
+    content: t("home.qanda.userData"),
+  },
+  {
+    value: "i5",
+    title: t("home.qanda.titles.mobileApp"),
+    content: t("home.qanda.mobileApp"),
   },
 ];
 
@@ -99,21 +107,8 @@ onMounted(() => {
     </div>
     <div class="h-screen"></div>
     <div id="learnmore"></div>
-    <div class="flex flex-row flex-wrap justify-center gap-x-10 gap-y-3">
+    <div class="">
-      <div
+      <div class=""></div>
-        class="flex flex-col justify-center items-center align-middle bg-[#C9C9C9]/60 rounded-xl shadow-lg p-5 m-5 w-[300px] h-[200px]"
-      >
-        <h1 class="text-8xl mt-0">🤔</h1>
-        <h2 class="text-xl font-bold">Why?</h2>
-        <span class="text-sm">{{ t("home.whydes") }}</span>
-      </div>
-      <div
-        class="flex flex-col justify-center items-center align-middle bg-[#C9C9C9]/60 rounded-xl shadow-lg p-5 m-5 w-[300px] h-[200px]"
-      >
-        <h1 class="text-8xl mt-0">🧐</h1>
-        <h2 class="text-xl font-bold">How?</h2>
-        <span class="text-sm">{{ t("home.howdes") }}</span>
-      </div>
     </div>
     <br />
     <div class="justify-center align-center text-center w-full flex">
@@ -125,7 +120,6 @@ onMounted(() => {
           type="single"
           class="align-center justify-center m-auto"
           collapsible
-          :default-value="defaultValue"
         >
           <AccordionItem
             v-for="item in accordionItems"