Update translation

public/locales/en/translation.json

@@ -21,5 +21,22 @@
         "Privacy": "Privacy",
         "SourceCode": "Source Code",
         "GoBack": "Go Back"
+    },
+    "landing": {
+        "heading": "PRIVACY APP OF YOUR DREAMS",
+        "description": "Poke is a free software youtube front-end, search engine, translator, map app and even more!!1!! Watch silly videos, search stuff on the internet and do all of that and more anonymously in this all-in-one privacy app!!!1! :3",
+        "why": "Why Choose Poke?",
+        "Card1Title": "No Tracking and Ads",
+        "Card1Description": " Poke Has no Trackers or ads - we dont and we wont see the vids ur watching :3",
+        "Card2Title": "Very Fast",
+        "Card2Description": " Poke is really ligthweight (both on server and client :3) so you can still use it on poor connections :3",
+        "Card3Title": "Downloader",
+        "Card3Description": "You wouldnt download a car - welp i would :D u can download videos from poke for 0$!",
+        "Card4Title": "Web Search",
+        "Card4Description": "u can search the interwebs for anything that u wan!! (ik wha ur gonna search :p) ",
+        "Card5Title": "DRM Free",
+        "Card5Description": " Poke comes without digital restrictions management - poke is free software :3",
+        "Card6Title": "Games Included",
+        "Card6Description": " U can play funnie games on poke! "
     }
 }

public/locales/jp/translation.json

@@ -21,5 +21,22 @@
         "Privacy": "プライバシー",
         "SourceCode": "ソースコード",
         "GoBack": "戻る"
+    },
+    "landing": {
+        "heading": "あなたの夢のプライバシーアプリ",
+        "description": "Pokeは、無料のソフトウェアyoutubeフロントエンド、検索エンジン、翻訳者、マップアプリなどです!!1!! サイレント動画を見ると、インターネット上のものを検索し、このオールインワンのプライバシーアプリで、そのすべてを匿名で行います!",
+        "why": "ポケモンを選ぶ理由?",
+        "Card1Title": "追跡および広告無し",
+        "Card1Description": " ポークはトラッカーや広告はありません - 私たちは、あなたが見ているビデオを見ることができません",
+        "Card2Title": "非常に高速",
+        "Card2Description": " Poke は本当に軽量です (サーバーとクライアントの :3) ので、接続が悪いままに使用できます。 :3",
+        "Card3Title": "ダウンロード",
+        "Card3Description": "あなたは車をダウンロードしたい - よく私は:D u は 0$ のポケモンからビデオをダウンロードすることができます!",
+        "Card4Title": "ウェブ検索",
+        "Card4Description": "U wan の web を検索できます。!",
+        "Card5Title": "DRMの 無料",
+        "Card5Description": " ポケモンはデジタル制限管理なしで来ます - ポケモンはフリーソフトウェアです:3",
+        "Card6Title": "含まれているゲーム",
+        "Card6Description": "楽しく遊べます! "
     }
 }

src/pages/index.astro

@@ -2,6 +2,10 @@
 // Layout
 import Layout from "@layouts/Default.astro";
 
+// i18n
+import i18next, { t } from "i18next";
+import { Trans, HeadHrefLangs } from "astro-i18next/components";
+
 // Components
 import { Image } from 'astro:assets';
 
@@ -15,8 +19,8 @@ import Chan from '@assets/chan/v2.png'
 <Layout Title="Poke" Description="▶▶ Poke - The privacy app of your dreams!">
     <video playsinline autoplay muted loop class="landing-background" src="/flurry-background.webm" type="video/webm"/>
     <div class="landing">
-        <h1>PRIVACY APP OF YOUR DREAMS</h1>
+        <h1>{t("landing.heading")}</h1>
-        <p style="max-width: 800px;">Poke is a free software youtube front-end, search engine, translator, map app and even more!!1!! Watch silly videos, search stuff on the internet and do all of that and more anonymously in this all-in-one privacy app!!!1! :3</p>
+        <p style="max-width: 800px;">{t("landing.description")}</p>
 
         <div style="display: flex; gap: 12px;">
             <Image src={WebScreenshot} alt="Web screenshot"/>
@@ -25,49 +29,49 @@ import Chan from '@assets/chan/v2.png'
         </div> 
 
         <!-- Icons are from Iconoir -->
-        <h1 style="margin-left: auto;margin-right: auto;text-align: center;margin-bottom: -1em;margin-top: 1em;"> Why Choose Poke Lol? </h1>
+        <h1 style="margin-left: auto;margin-right: auto;text-align: center;margin-bottom: -1em;margin-top: 1em;"> {t("landing.why")} </h1>
         <div class="new-feature-set">
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #ea6d6d;" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M19.5 16L17.0248 12.6038" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 17.5V14" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M4.5 16L6.96895 12.6124" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M3 8C6.6 16 17.4 16 21 8" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
-              <h2>No Tracking and Ads</h2>
+              <h2>{t("landing.Card1Title")}</h2>
             </div>
-            <p> Poke Has no Trackers or ads - we dont and we wont see the vids ur watching :3</p>
+            <p>{t("landing.Card1Description")}</p>
           </div>
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #6d8cea;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M15 7C16.1046 7 17 6.10457 17 5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5C13 6.10457 13.8954 7 15 7Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12.6133 8.26691L9.30505 12.4021L13.4403 16.5374L11.3727 21.0861" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M6.4104 9.5075L9.79728 6.19931L12.6132 8.26692L15.508 11.5752H19.2297" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M8.89152 15.7103L7.65095 16.5374H4.34277" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
-              <h2>Very Fast</h2>
+              <h2>{t("landing.Card2Title")}</h2>
             </div>
-            <p> Poke is really ligthweight (both on server and client :3) so you can still use it on poor connections :3</p>
+            <p>{t("landing.Card2Description")}</p>
           </div>
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #519355;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M12 8V16M12 16L15.5 12.5M12 16L8.5 12.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
-              <h2>Downloader</h2>
+              <h2>{t("landing.Card3Title")}</h2>
             </div>
-            <p>You wouldnt download a car - welp i would :D u can download videos from poke for 0$!</p>
+            <p>{t("landing.Card3Description")}</p>
           </div>
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #ea6ddc;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M21 12V10C21 7.23858 18.7614 5 16 5H8C5.23858 5 3 7.23858 3 10V10C3 12.7614 5.23858 15 8 15H12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M20.1241 19.1185C20.6654 18.5758 21 17.827 21 17C21 15.3431 19.6569 14 18 14C16.3431 14 15 15.3431 15 17C15 18.6569 16.3431 20 18 20C18.8299 20 19.581 19.663 20.1241 19.1185ZM20.1241 19.1185L22 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
-              <h2>Web Search</h2>
+              <h2>{t("landing.Card4Title")}</h2>
             </div>
-            <p>u can search the interwebs for anything that u wan!! (ik wha ur gonna search :p) </p>
+            <p>{t("landing.Card4Description")}</p>
           </div>
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #b7a358;" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" style="--darkreader-inline-color: #e8e6e3;" data-darkreader-inline-color=""><path d="M4.62323 5.24841C2.99408 7.02743 2 9.39765 2 12C2 17.5229 6.47715 22 12 22C14.5361 22 16.8517 21.0559 18.6146 19.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M21.3021 15.6775C21.7525 14.5392 22 13.2985 22 12C22 6.47715 17.5228 2 12 2C10.7687 2 9.58934 2.22255 8.5 2.62961" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M9 15C9.64448 15.8593 10.8428 16.3494 12 16.391C13.1141 16.431 14.1901 16.0554 14.6973 15.1933" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M12 16.391V18.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M9.5 9.5C9.5 10.6811 10.3525 11.1647 11.3862 11.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M15 8.5C14.315 7.81501 13.1087 7.33855 12 7.30872V5.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path><path d="M3 3L21 21" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: #ffffff;" data-darkreader-inline-stroke=""></path></svg>
-              <h2>DRM Free</h2>
+              <h2>{t("landing.Card5Title")}</h2>
             </div>
-            <p> Poke comes without digital restrictions management - poke is free software :3</p>
+            <p>{t("landing.Card5Description")}</p>
           </div>
           <div class="feature-set">
             <div class="feature-set-title">
               <?xml version="1.0" encoding="UTF-8"?><svg style="background: #886dea;" width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M17.5 17.5C20 21 23.9486 18.4151 23 15C21.5753 9.87113 20.8001 7.01556 20.3969 5.50793C20.1597 4.62136 19.3562 4 18.4384 4L5.56155 4C4.64382 4 3.844 4.62481 3.62085 5.515C2.7815 8.86349 2.0326 11.8016 1.14415 15C0.195501 18.4151 4.14415 21 6.64415 17.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 4V6C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6L8 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 16C17.1046 16 18 15.1046 18 14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14C14 15.1046 14.8954 16 16 16Z" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-              <h2>Games Included</h2>
+              <h2>{t("landing.Card6Title")}</h2>
             </div>
-            <p> U can play funnie games on poke! </p>
+            <p>{t("landing.Card6Description")}</p>
           </div>
         </div>