Update faq section to be a bit better

src/i18n/en.json

@@ -12,11 +12,13 @@
   "menu.welcome": "Welcome to Alu",
   "menu.search": "Search the web...",
 
+  "faq.title": "Frequently Asked Questions",
+
   "faq.whatIsAProxy": "What is a proxy?",
   "faq.whatIsAProxy.answer": "A proxy is a method of making your internet traffic anonymous by sending your request to a server (proxy), having that make the request, and then send it back to you! This allows for a much larger level of security, as well as bypassing website restrictions in public spaces and censorship.",
 
-  "faq.whyIsAluSoSlow": "Why is Alu so slow?",
+  "faq.noBareClients": "What does \"there are no bare clients\" mean?",
-  "faq.whyIsAluSoSlow.answer": "This could be for a number of reasons, but it is most likely due to the proxy you are using. If you are far away from where Alu is hosted, it will take longer for the request to be sent and received. If the proxy you are using is congested with traffic, it will also be slower.",
+  "faq.noBareClients.answer": "There are a couple reasons this particular error happens, but it's most commonly an issue with the proxy failing to load. Please reload the page, and if the problem persists, make a GitHub issue!",
 
   "faq.contributeToAlu": "How can I contribute to Alu?",
   "faq.contributeToAlu.answer.segment1": "Spreading the word of Alu is a great start, but if you really enjoy Alu, and want private links, consider supporting me through Patreon!",

src/i18n/jp.json

@@ -12,11 +12,13 @@
   "menu.welcome": "アルーにようこそ",
   "menu.search": "ウェブを検索する...",
 
+  "faq.title": "よくある質問",
+
   "faq.whatIsAProxy": "プロキシとは何ですか？",
   "faq.whatIsAProxy.answer": "プロキシは、ウェブサイトにアクセスするための中継サーバーです。プロキシを使用すると、ウェブサイトにアクセスする際に自分のIPアドレスを隠すことができます。",
 
-  "faq.whyIsAluSoSlow": "なぜアルーは遅いのですか？",
+  "faq.noBareClients": "「there are no bare clients.」とはどういう意味ですか?",
-  "faq.whyIsAluSoSlow.answer": "アルーは、プロキシを使用してウェブサイトにアクセスするため、ウェブサイトの読み込みに時間がかかることがあります。また、アルーはまだ開発中のため、パフォーマンスが低いことがあります。",
+  "faq.noBareClients.answer": "このエラーはやや一般的で、通常はプロキシのロードに失敗したことを意味します。ページをリロードするか、GitHub に問題を作成してください。",
 
   "faq.contributeToAlu": "アルーの発展にどのように貢献できますか?",
   "faq.contributeToAlu.answer.segment1": "アルーの言葉を広めることは素晴らしいスタートですが、Alu が本当に好きで、プライベート リンクが必要な場合は、Patreon を通じて私をサポートすることを検討してください。",

src/pages/[lang]/index.astro

@@ -15,58 +15,62 @@ export function getStaticPaths() {
 <Layout title={t("pages.home")}>
   <main id="main-content">
     <h1 class="title-text">{t("menu.welcome")}</h1>
-    <div class="form-wrapper">
+    <section id="proxy-input">
-      <form class="url-input-form" id="url-input-form">
+      <div class="form-wrapper">
-        <Input
+        <form class="url-input-form" id="url-input-form">
-          className="url-input"
+          <Input
-          inputName="url"
+            className="url-input"
-          height="50px"
+            inputName="url"
-          placeholder={t("menu.search")}
+            height="50px"
-          defaultStyles={false}
+            placeholder={t("menu.search")}
-          transition:persist
+            defaultStyles={false}
-        />
+            transition:persist
-        <div id="search-suggestions"></div>
+          />
-        <div id="loading-content">Loading...</div>
+          <div id="search-suggestions"></div>
-      </form>
+          <div id="loading-content">Loading...</div>
-      <div id="top-bar">
+        </form>
-        <div class="top-bar-left">
+        <div id="top-bar">
-          <button id="close-button">Close</button>
+          <div class="top-bar-left">
-          <div class="nav-container">
+            <button id="close-button">Close</button>
-            <img id="nav-backwards" src="/img/nav/backwards.svg" alt="Backwards Arrow">
+            <div class="nav-container">
-            <img id="nav-forwards" src="/img/nav/forwards.svg" alt="Forwards Arrow">
+              <img id="nav-backwards" src="/img/nav/backwards.svg" alt="Backwards Arrow">
-            <img id="nav-share" src="/img/nav/share.svg" alt="Share Page">
+              <img id="nav-forwards" src="/img/nav/forwards.svg" alt="Forwards Arrow">
+              <img id="nav-share" src="/img/nav/share.svg" alt="Share Page">
+            </div>
+          </div>
+          <div class="top-bar-right">
+            <img id="proxied-favicon" alt="favicon" />
+            <span id="url-text"></span>
           </div>
         </div>
-        <div class="top-bar-right">
+        <iframe title="proxy-iframe" id="proxy-frame"></iframe>
-          <img id="proxied-favicon" alt="favicon" />
+      </div>
-          <span id="url-text"></span>
+    </section>
+    <section id="faq">
+      <h2 class="faq-title">{t("faq.title")}</h2>
+      <div class="faq-section">
+        <div class="faq-card">
+          <h2>{t("faq.whatIsAProxy")}</h2>
+          <p>{t("faq.whatIsAProxy.answer")}</p>
+        </div>
+        <div class="faq-card">
+          <h2>{t("faq.contributeToAlu")}</h2>
+          <p>
+            {t("faq.contributeToAlu.answer.segment1")}
+            <Link
+              href="https://www.patreon.com/wearr"
+              newTab
+              content={t("faq.contributeToAlu.answer.patreonLinkText")}
+            />
+            {t("faq.contributeToAlu.answer.segment2")}
+          </p>
+        </div>
+        <div class="faq-card faq-large">
+          <h2>{t("faq.noBareClients")}</h2>
+          <p>{t("faq.noBareClients.answer")}</p>
         </div>
       </div>
-      <iframe title="proxy-iframe" id="proxy-frame"></iframe>
+    </section>
-    </div>
-
-    <div class="faq-section">
-      <div class="faq-card">
-        <h2>{t("faq.whatIsAProxy")}</h2>
-        <p>{t("faq.whatIsAProxy.answer")}</p>
-      </div>
-      <div class="faq-card">
-        <h2>{t("faq.whyIsAluSoSlow")}</h2>
-        <p>{t("faq.whyIsAluSoSlow.answer")}</p>
-      </div>
-      <div class="faq-card faq-large">
-        <h2>{t("faq.contributeToAlu")}</h2>
-        <p>
-          {t("faq.contributeToAlu.answer.segment1")}
-          <Link
-            href="https://www.patreon.com/wearr"
-            newTab
-            content={t("faq.contributeToAlu.answer.patreonLinkText")}
-          />
-          {t("faq.contributeToAlu.answer.segment2")}
-        </p>
-      </div>
-    </div>
   </main>
   <ProxyRegistrar />
   <script>
@@ -220,13 +224,20 @@ export function getStaticPaths() {
     transition: 250ms ease-in-out;
     text-align: center;
   }
+
+  .faq-title {
+    color: var(--text-color);
+    width: 90%;
+    margin: 0 auto;
+    margin-top: 30px;
+  }
+
   .faq-section {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
-    margin: 0 auto;
+    margin: 20px auto 0;
     width: 90%;
-    margin-top: 40px;
   }
 
   .faq-card {

src/pages/[lang]/settings.astro

@@ -396,6 +396,7 @@ export function getStaticPaths() {
     #current-content {
       transition: opacity 250ms ease-in-out;
       margin-left: 20px;
+      height: 400px;
     }
     .settings-container {
       display: flex;