feat(node:web): implemented the pricing page

nodePackages/web/src/assets/texts/pricing.en.md

@@ -0,0 +1,36 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+## FAQ
+
+### All plans appear to be free; is this true?
+
+Yes, all plans are free. We offer the
+<span translate="no">LaunchPad Icons</span>
+under a
+[<span translate="no"><abbr>CC</abbr> BY-NC 4.0</span>](https://creativecommons.org/licenses/by-nc/4.0/)
+license, which allows unlimited use with some restrictions, such as
+non-commercial use.
+
+### I want to contribute to this project. Is there a paid plan?
+
+For now, we don't plan to offer a paid plan. That is not to say that we
+don't need money, but we would welcome
+[your contribution to the project](https://github.com/kurone-kito/launchpad-icons)
+more than money.
+
+### However, I need to gain the technical skills to contribute. Is there anything I can do?
+
+For example,
+[bug reports and feature requests](https://github.com/kurone-kito/launchpad-icons/issues)
+are valuable contributions to this project. Even if you lack technical
+skills, introducing this project to others is also a great contribution.
+Here is a special tip for you on the most efficient way to promote this
+project. Please enter the VRChat world, which uses the
+<span translate="no">Launchpad Icons</span>, take many pictures, and share
+them on your SNS using the hashtag
+**<span translate="no">#LaunchpadIcons</span>**.
+
+### I'd love to support this project with some quick money
+
+Ok, ok. I lost. Please support me on my
+[<span translate="no">Amazon(JP)</span> wish list](https://www.amazon.co.jp/hz/wishlist/ls/27C22EN4MOBL8).

nodePackages/web/src/assets/texts/pricing.ja.md

@@ -0,0 +1,38 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+## よくある質問
+
+### すべてのプランが無料に見えます。本当ですか？
+
+はい。<span translate="no">LaunchPad Icons</span> は
+[<span translate="no"><abbr>CC</abbr> BY-NC 4.0</span>](https://creativecommons.org/licenses/by-nc/4.0/)
+ライセンスで提供しております。出典明記、および非商用利用の条件下で、
+無制限に利用できます。
+
+### このプロジェクトに貢献したいです。有料プランはありますか？
+
+今のところ、有料プランを提供する予定はありません。
+お金が要らないと言うわけではありませんが、お金よりも
+[プロジェクトへの貢献](https://github.com/kurone-kito/launchpad-icons)
+を歓迎します。
+
+### しかし、貢献するためには技術的なスキルが要るでしょう。私にできることは？
+
+例えば、
+[バグレポートや機能リクエスト](https://github.com/kurone-kito/launchpad-icons/issues)
+などでも、このプロジェクトへの貴重な貢献でしょう。
+たとえ技術的なスキルがなくても、このプロジェクトを他の人に紹介することも、
+また素晴らしい貢献です。
+
+ここでこのプロジェクトを宣伝する最も効率的な方法について、
+あなたに特別なヒントを差し上げます。
+<span translate="no">LaunchPad Icons</span> を使っている
+VRChat のワールドを見つけたら、写真をたくさん撮って、ハッシュタグ
+**<span translate="no">#LaunchpadIcons</span>**
+を付けて SNS でシェアしてください。
+
+### このプロジェクトを手っ取り早くお金で支援したいです
+
+🐱 しょうがないにゃあ、いいよ。  
+[<span translate="no">Amazon</span> のほしい物リスト](https://www.amazon.co.jp/hz/wishlist/ls/27C22EN4MOBL8)
+で支援してください。

nodePackages/web/src/i18n/en.ts

@@ -32,6 +32,7 @@ const en: Resources = {
   planPro1: 'All features from the Basic plan',
   planPro2: 'Awareness as a professional user',
   pricing: 'Pricing',
+  pricingTitle: 'Pricing',
   sampleWorld: 'Sample VRChat world',
   subscribe: "It's the thought that counts",
   subscribed: 'Default plan',

nodePackages/web/src/i18n/ja.ts

@@ -32,6 +32,7 @@ const ja: Resources = {
   planPro1: 'Basicプランの全機能',
   planPro2: 'プロユーザーとしての自覚',
   pricing: '価格とFAQ',
+  pricingTitle: '価格',
   sampleWorld: 'サンプルワールドに行く',
   subscribe: '気持ちだけいただきます',
   subscribed: '既定のプラン',

nodePackages/web/src/i18n/types.ts

@@ -32,6 +32,7 @@ export type ResourcesKeys =
   | 'planPro1'
   | 'planPro2'
   | 'pricing'
+  | 'pricingTitle'
   | 'sampleWorld'
   | 'subscribe'
   | 'subscribed'

nodePackages/web/src/routes/[[language]]/pricing.tsx

@@ -1,14 +1,37 @@
 import type { Component } from 'solid-js';
+import { onMount } from 'solid-js';
+import { themeChange } from 'theme-change';
+import { html as en } from '../../assets/texts/pricing.en.md';
+import { html as ja } from '../../assets/texts/pricing.ja.md';
+import { Head } from '../../components/organisms/Head.js';
+import { PricingTable } from '../../components/organisms/PricingTable';
+import { DefaultTemplate } from '../../components/templates/DefaultTemplate';
+import {
+  createI18NText,
+  useLanguage,
+  useTranslator,
+} from '../../modules/createI18N';
+
+const mdTranslator = createI18NText({ en, ja } as const);
 
 /**
- * The explore page.
+ * The pricing page.
  * @returns The component.
  */
-const Pricing: Component = () => (
-  <article class="article-container">
-    <h2>Pricing page</h2>
-    <p>TODO: Add the content here.</p>
-  </article>
-);
+const Pricing: Component = () => {
+  onMount(() => themeChange(false));
+  const md = mdTranslator(useLanguage());
+  const t = useTranslator();
+  return (
+    <DefaultTemplate>
+      <article class="article-container">
+        <Head prev="./explore" pagePath="pricing" title={t('pricingTitle')} />
+        <h2 class="heading-root pt-10">{t('pricingTitle')}</h2>
+        <PricingTable />
+        <section class="prose-article prose-anchor" innerHTML={md('text')} />
+      </article>
+    </DefaultTemplate>
+  );
+};
 
 export default Pricing;