feat: added download page. (#596)

src/app/oia/page.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+
+import { Image } from "~/components/ui/Image"
+import { useTranslation } from "~/lib/i18n/client"
+
+async function OIAPage() {
+  const { t } = useTranslation("site")
+
+  useEffect(() => {
+    document.body.style.backgroundColor = "#fb9148"
+    return () => {
+      document.body.style.backgroundColor = ""
+    }
+  }, [])
+
+  const download = useCallback(() => {
+    const result = confirm(
+      t(
+        "The app is currently under review, please stay tuned. Do you want to join the early access program?",
+      )!,
+    )
+    const dcLink = "https://discord.gg/uK2yAtWw2s"
+    if (result) {
+      window.open(dcLink)
+    }
+  }, [])
+
+  const goBack = useCallback(() => {
+    window.history.back()
+  }, [])
+
+  return (
+    <div className="relative h-screen w-screen bg-accent max-w-4xl m-auto">
+      <Image
+        fill
+        className="object-cover absolute h-full w-full"
+        src="/assets/download-preview.png"
+        alt="Download Preview"
+      />
+      <div className="absolute top-5 w-full text-xs text-center text-[white]">
+        {t("Pull down to open the app")}
+      </div>
+      <button
+        className="absolute left-1/2 transform -translate-x-1/2 bottom-[15%] text-accent px-4 py-2 rounded-[25px] w-[56.5%] bg-[white]"
+        onClick={download}
+      >
+        {t("Download")}
+      </button>
+      <button
+        className="absolute left-1/2 transform -translate-x-1/2 translate-y-[150%] bottom-[15%] text-[white] px-4 py-2 rounded-[25px] w-[56.5%]"
+        onClick={goBack}
+      >
+        {t("Cancel Download")}
+      </button>
+    </div>
+  )
+}
+
+export default OIAPage

src/lib/i18n/locales/en/site.json

@@ -1,4 +1,5 @@
 {
   "load more": "There are {{count}} more {{name}}, click to load more",
-  "signed and stored on the blockchain": "Ownership of this {{name}} data is guaranteed by blockchain and smart contracts to the creator alone."
+  "signed and stored on the blockchain": "Ownership of this {{name}} data is guaranteed by blockchain and smart contracts to the creator alone.",
+  "Cancel Download": "Cancel"
 }

src/lib/i18n/locales/ja/site.json

@@ -5,6 +5,10 @@
   "Tags": "タグ",
   "load more": "まだ{{count}}件の{{name}}があります。",
   "signed and stored on the blockchain": "{{name}}は、創作者によって署名され、ブロックチェーンに安全に保存されています。",
+  "Download": "ダウンロード",
+  "Cancel Download": "ダウンロードをキャンセル",
+  "Pull down to open the app": "ダウンロード済みですか？アプリを開くために引き下げてく",
+  "The app is currently under review, please stay tuned. Do you want to join the early access program?": "アプリは現在レビュー中です。お待ちください。アーリーアクセスプログラムに参加しますか？",
   "Write a comment on the blockchain": "ブロックチェーンでコメントする",
   "Open in App": "アプリで開く",
   "powered by": "<span>このサイトは　</span><name/><span> によって作動します</span>"

src/lib/i18n/locales/zh-TW/site.json

@@ -16,6 +16,10 @@
   "Subscribe to RSS": "訂閱 RSS",
   "Search on this site": "在這個網站上搜尋",
   "404 - Whoops, this page is gone.": "404 - 哎呀，這個頁面不見了。",
+  "Download": "立即下載",
+  "Cancel Download": "取消下載",
+  "Pull down to open the app": "已下載？下拉開啟應用程式",
+  "The app is currently under review, please stay tuned. Do you want to join the early access program?": "應用程式目前正在審核中，請靜候佳音。您想參加早期體驗計劃嗎？",
   "Back to Home": "回到首頁",
   "All Posts": "所有文章",
   "Open in App": "在 App 中開啟",

src/lib/i18n/locales/zh/site.json

@@ -17,6 +17,10 @@
   "Subscribe to RSS": "订阅 RSS",
   "Search on this site": "在本站搜索",
   "404 - Whoops, this page is gone.": "404 - 哎呀，这个页面不见了。",
+  "Download": "立即下载",
+  "Cancel Download": "取消下载",
+  "Pull down to open the app": "已下载？下拉打开应用",
+  "The app is currently under review, please stay tuned. Do you want to join the early access program?": "应用正在审核中，敬请期待。是否加入内测计划？",
   "Back to Home": "返回主页",
   "All Posts": "所有文章",
   "Open in App": "在 App 中打开",