steam version

Author: MakinoharaShoko

app/[locale]/components/TopVisual/TopVisual.tsx

@@ -7,11 +7,13 @@ import styles from './TopVisual.module.css'
 import Image from 'next/image'
 import {useEffect, useState} from 'react'
 import useRedirect from '@/hooks/useRedirect'
+import {RiSteamFill} from 'react-icons/ri'
 
 const TopVisual = () => {
   const t = useTranslations('home')
   const locale = useLocale()
   const {docsRedirect} = useRedirect()
+  const webgalTerreSteamUrl = 'https://store.steampowered.com/app/2978410/WebGAL_Terre_Steam_Edition/'
 
   const topVisualImagesData = [
     {
@@ -60,6 +62,9 @@ const TopVisual = () => {
             <Button large>
               <Link href={`/${locale}/download/`}>{t('nowDownload')}</Link>
             </Button>
+            <Button large>
+              <Link href={webgalTerreSteamUrl} target={'_blank'}><RiSteamFill />{t('steam')}</Link>
+            </Button>
             <Button large>
               <Link href={docsRedirect('/')} target={'_blank'}>{t('viewDocument')}</Link>
             </Button>

app/[locale]/download/Download.module.css

@@ -51,6 +51,13 @@
     margin-top: 8px;
 }
 
+.steam-widget {
+    width: 100%;
+    max-width: 646px;
+    height: 190px;
+    border: 0;
+}
+
 .release-note {
     @apply px-4 py-2 font-light;
 }

app/[locale]/download/components/DownloadWebgalTerre.tsx

@@ -12,6 +12,7 @@ const DownloadWebgalTerre = () => {
 
   const webgalTerreUrl = 'https://github.com/OpenWebGAL/WebGAL_Terre/releases'
   const webgalTerreApiUrl = 'https://api.github.com/repos/OpenWebGAL/WebGAL_Terre/releases/latest'
+  const webgalTerreSteamWidgetUrl = 'https://store.steampowered.com/widget/2978410/'
 
   const t = useTranslations('download')
   const locale = useLocale()
@@ -69,6 +70,7 @@ const DownloadWebgalTerre = () => {
           }
         </div>
       </div>
+      <iframe title='WebGAL Terre Steam' src={webgalTerreSteamWidgetUrl} className={styles['steam-widget']} loading='lazy' />
       <div className={styles['card-button-gourp']}>
         <Button terre>
           <Link href={webgalTerreAssets?.releaseUrl ?? webgalTerreUrl} target={'_blank'}><RiGithubFill />{t('gitHubReleases')}</Link>

locales/en.json

@@ -30,6 +30,7 @@
     "title-l2": "who needs coding?",
     "subTitle": "Without writing any code, WebGAL will help you create fully functional visual novels with beautiful UI.",
     "nowDownload": "Download",
+    "steam": "Steam Edition",
     "viewDocument": "View help documentation",
     "sponsor": "Sponsor"
   },

locales/ja.json

@@ -30,6 +30,7 @@
     "title-l2": "ビジュアルノベルを作成！",
     "subTitle": "WebGALを使えば、コードを一切書かずに、高機能で美しいインターフェースのビジュアルノベルゲームを作成できます。",
     "nowDownload": "今すぐダウンロード",
+    "steam": "Steam 版",
     "viewDocument": "ヘルプドキュメントを見る",
     "sponsor": "スポンサー"
   },

locales/zh-cn.json

@@ -30,6 +30,7 @@
     "title-l2": "何须会编程？",
     "subTitle": "无需编写任何代码，WebGAL 将帮助你制作出功能完备、界面美观的视觉小说游戏。",
     "nowDownload": "立即下载",
+    "steam": "Steam 版",
     "viewDocument": "查看帮助文档",
     "sponsor": "赞助 WebGAL"
   },