feat(web): implemented the pages

src/app.css

@@ -14,4 +14,12 @@
   .nav-icon-button {
     @apply text-black/60 hover:text-black/80 dark:text-white/60 dark:hover:text-white/80;
   }
+
+  .prose-article {
+    @apply article-container leading-loose prose prose-neutral dark:prose-invert prose-h2:text-surface dark:prose-h2:text-neutral-400;
+  }
+
+  .prose-anchor {
+    @apply prose-a:text-primary prose-a:transition prose-a:duration-150 prose-a:ease-in-out hover:prose-a:text-primary-600 focus:prose-a:text-primary-600 active:prose-a:text-primary-700 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-500 dark:focus:prose-a:text-primary-500 dark:active:prose-a:text-primary-600;
+  }
 }

src/assets/texts/gettingStarted.md

@@ -0,0 +1,21 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+### System requirements
+
+- **<span translate="no">VRChat Creator Companion</span>** (Recommended)
+- There is a bundled sample scene created in Unity _2022.3.22f1_;
+  we recommend previewing it using the same version.
+
+### Installation
+
+#### 1. Import the registry via the <span translate="no">VRChat Creator Companion (VCC)</span>
+
+[Add to VCC](vcc://vpm/addRepo?url=https%3A%2F%2Fkurone-kito.github.io%2Fvpm%2Findex.json)
+
+#### 2. Import the package to your project
+
+1. Click on the “Manage Project” button in the VCC
+2. Find the “<span translate="no">LaunchPad Icons</span>” package and
+   click on the “(+) Add package” button
+
+#### 3. Use the package, enjoy :D

src/assets/texts/manuallyInstallation.md

@@ -0,0 +1,21 @@
+<!-- markdownlint-disable MD033 MD041 -->
+
+### Manually installation (not recommended)
+
+#### 1. Download the package
+
+Download the package from the
+[latest release](https://github.com/kurone-kito/launchpad-icons/releases).
+
+#### 2. Manually resolve the dependencies
+
+The package requires the following dependencies:
+
+- [<span translate="no">Unity Vector Graphics (com.unity.vectorgraphics)</span>](https://docs.unity3d.com/Packages/[email protected]/manual/index.html)
+  `>=2.0.0-preview.24`
+
+#### 3. Import the package to your project
+
+1. Open your Unity project
+2. Drag and drop the downloaded package into the Unity Editor
+3. Click on the “Import” button

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).

src/routes/docs.tsx

@@ -1,11 +1,32 @@
 import type { Component } from 'solid-js';
+import { Show } from 'solid-js';
+import { useMd } from '../modules/useMd.js';
 
 /**
  * The documents page.
  * @returns The component.
  */
-const Docs: Component = () => (
-  <main class="article-container">TODO: Add the content here.</main>
-);
+const Docs: Component = () => {
+  const gettingStarted = useMd('gettingStarted');
+  const manuallyInstallation = useMd('manuallyInstallation');
+  return (
+    <>
+      <Show
+        when={gettingStarted()}
+        fallback={<article class="article-container">Loading...</article>}
+      >
+        <h2 class="article-container heading-root pt-10">Getting started</h2>
+        <article
+          class="prose-article prose-a:rounded prose-a:border-2 prose-a:no-underline prose-a:border-neutral-500 dark:prose-a:border-neutral-400 prose-a:px-6 prose-a:pb-[6px] prose-a:my-2 prose-a:pt-2 prose-a:font-medium prose-a:uppercase prose-a:text-neutral-500 dark:prose-a:text-neutral-400 prose-a:transition prose-a:duration-150 prose-a:ease-in-out hover:prose-a:border-neutral-800 hover:prose-a:text-neutral-800 dark:hover:prose-a:border-neutral-200 dark:hover:prose-a:text-neutral-200 focus:prose-a:border-neutral-300 focus:prose-a:text-neutral-200 focus:prose-a:outline-none focus:prose-a:ring-0 active:prose-a:border-neutral-300 active:prose-a:text-neutral-200 dark:prose-a:hover:bg-neutral-600 dark:prose-a:focus:bg-neutral-600"
+          innerHTML={gettingStarted() ?? ''}
+        />
+        <article
+          class="prose-anchor prose-article"
+          innerHTML={manuallyInstallation() ?? ''}
+        />
+      </Show>
+    </>
+  );
+};
 
 export default Docs;