feat(node:web): implemented the pricing page

kurone-kito · Jul 15, 2024 · 41ebf9b · 41ebf9b
1 parent a603f55
commit 41ebf9b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/nodePackages/web/src/assets/texts/pricing.md b/nodePackages/web/src/assets/texts/pricing.md
@@ -0,0 +1,33 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+## FAQ
+
+### All plans appear to be free; is this true?
+
+Yes, all plans are free. We offer the Launchpad Icons under a
+[CC BY-NC 4.0](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
+[Amazon(JP) wish list](https://www.amazon.co.jp/hz/wishlist/ls/27C22EN4MOBL8).
diff --git a/nodePackages/web/src/routes/pricing.tsx b/nodePackages/web/src/routes/pricing.tsx
@@ -1,13 +1,46 @@
 import type { Component } from 'solid-js';
+import { html as pricing } from '../assets/texts/pricing.md';
+import { Head } from '../components/atoms/Head.js';
+import { PricingCard } from '../components/atoms/PricingCard.js';
+
+/** The title of the document. */
+const TITLE = 'Pricing';
 
 /**
  * The explore page.
  * @returns The component.
  */
 const Pricing: Component = () => (
   <article class="article-container">
-    <h2>Pricing page</h2>
-    <p>TODO: Add the content here.</p>
+    <Head prev="./explore" title={TITLE} />
+    <h2 class="heading-root">{TITLE}</h2>
+    <div class="grid gap-8 pb-8 md:grid-cols-2 lg:grid-cols-3">
+      <PricingCard
+        features={[
+          'Unrestricted use under CC BY-NC 4.0 license',
+          'Community based support',
+        ]}
+        heading="Free"
+        subscribe="Already subscribed"
+      />
+      <PricingCard
+        features={[
+          'All features from the Free plan',
+          'Willingness to make more use of the Launchpad Icons',
+        ]}
+        heading="Basic"
+        subscribe="It's the thought that counts"
+      />
+      <PricingCard
+        features={[
+          'All features from the Basic plan',
+          'Awareness as a professional user',
+        ]}
+        heading="Pro"
+        subscribe="It's the thought that counts"
+      />
+    </div>
+    <section class="prose-article prose-anchor" innerHTML={pricing} />
   </article>
 );