feat(web): implemented the pages

src/routes/docs.tsx

@@ -1,14 +1,22 @@
 import type { Component } from 'solid-js';
+import { texts } from '../dynamic.json';
 
 /**
  * The documents page.
  * @returns The component.
  */
 const Docs: Component = () => (
-  <main class="article-container">
-    <h2>Docs page</h2>
-    <p>TODO: Add the content here.</p>
-  </main>
+  <>
+    <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={texts.gettingStarted}
+    />
+    <article
+      class="prose-anchor prose-article"
+      innerHTML={texts.manuallyInstallation}
+    />
+  </>
 );
 
 export default Docs;

src/routes/explore.tsx

@@ -1,14 +1,31 @@
 import type { Component } from 'solid-js';
+import { For } from 'solid-js';
+import { IconItem } from '../components/atoms/IconItem.js';
+import { icons } from '../dynamic.json';
 
 /**
  * The explore page.
  * @returns The component.
  */
 const Explore: Component = () => (
-  <main class="article-container">
-    <h2>Explore page</h2>
-    <p>TODO: Add the content here.</p>
-  </main>
+  <>
+    <article class="article-container">
+      <h2 class="heading-root">Icons explorer</h2>
+      <p class="text-lg font-light py-4 dark:text-neutral-300">
+        The Launchpad Icons provide&nbsp;
+        <strong class="font-bold">{icons.length} icons</strong>. The&nbsp;
+        <marker class="border-2 border-primary-500 rounded-md p-0.5 dark:border-primary-400">
+          highlighted
+        </marker>
+        &nbsp;icons are those added in the latest version.
+      </p>
+      <div class="py-4 gap-x-2 gap-y-2 lg:gap-x-4 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-9">
+        <For each={icons} fallback={<div>Loading...</div>}>
+          {(name) => <IconItem name={name} />}
+        </For>
+      </div>
+    </article>
+  </>
 );
 
 export default Explore;

src/routes/index.tsx

@@ -1,10 +1,78 @@
-import type { Component, JSX } from 'solid-js';
+import type { Component } from 'solid-js';
+import { FeatureDetail } from '../components/atoms/FeatureDetail.js';
+import { Hero } from '../components/atoms/Hero.js';
+import { WideAnchorButton } from '../components/atoms/WideAnchorButton.js';
+import { Features } from '../components/molecules/Features.js';
+import { TextAnchor } from '../components/molecules/TextAnchor.js';
+import { iconsToDo, vccUrl, vpmUrl } from '../constants.json';
+import { icons } from '../dynamic.json';
 
-const Index: Component = (): JSX.Element => (
-  <main class="article-container">
-    <h2>Top page</h2>
-    <p>TODO: Add the content here.</p>
-  </main>
+/** The URL to add to VCC. */
+const encodedVccUrl = `${vccUrl}${encodeURIComponent(vpmUrl)}`;
+
+/** The number of icons. */
+const iconsLength = icons.length;
+
+/**
+ * The index page.
+ * @returns The component.
+ */
+const Index: Component = () => (
+  <>
+    <Hero addToVccLink={encodedVccUrl} />
+    <Features iconsLength={iconsLength} />
+    <FeatureDetail
+      heading={<>{iconsLength} SVG icons</>}
+      image="images/illustrator.png"
+    >
+      <p class="font-light leading-relaxed py-2">
+        The Launchpad Icons provide {iconsLength} &nbsp;icons that look&nbsp;
+        <strong class="font-bold">like VRChat icons</strong>, and we plan to
+        have more than {iconsToDo} in the future.
+      </p>
+      <p class="font-light leading-relaxed py-2">
+        All included icons have been redesigned in Adobe Illustrator and
+        exported as <strong class="font-bold">SVG</strong>. Since they are in
+        vector format, they can be displayed beautifully even when significantly
+        enlarged.
+      </p>
+    </FeatureDetail>
+    <FeatureDetail heading="Includes raw SVG files" image="images/svgfiles.png">
+      <p class="font-light leading-relaxed py-2">
+        Launchpad Icons don't contain any logic and provide&nbsp;
+        <strong class="font-bold">raw SVG files</strong>. It means that they can
+        be easily adapted for use in&nbsp;
+        <strong class="font-bold">general Unity apps, not just VRChat</strong>.
+      </p>
+      <p class="font-light leading-relaxed py-2">
+        Launchpad Icons bundles them only as a <em>unitypackage</em> to import
+        via VRChat Creator Companion, but we plan to offer it as an NPM package
+        for ease of use on the web.
+      </p>
+    </FeatureDetail>
+    <FeatureDetail heading="Free & OSS" image="images/by-nc.svg">
+      <p class="font-light leading-relaxed py-2">
+        Launchpad Icons is provided <strong class="font-bold">FREE</strong> of
+        charge under the&nbsp;
+        <TextAnchor url="https://creativecommons.org/licenses/by-nc/4.0/">
+          Creative Commons 4.0 International (
+          <strong class="font-bold">BY-NC</strong>) license
+        </TextAnchor>
+        . You can use it without restriction for non-commercial purposes,
+        provided the copyright notice is displayed.
+      </p>
+      <p class="font-light leading-relaxed py-2">
+        We also release it as open-source software. Welcome your&nbsp;
+        <TextAnchor url="https://github.com/kurone-kito/launchpad-icons">
+          contributions
+        </TextAnchor>
+        &nbsp;to make it better!
+      </p>
+    </FeatureDetail>
+    <section class="mx-auto p-12 md:p-20 lg:container">
+      <WideAnchorButton url="docs">Getting started</WideAnchorButton>
+    </section>
+  </>
 );
 
 export default Index;

src/routes/pricing.tsx

@@ -1,14 +1,42 @@
 import type { Component } from 'solid-js';
+import { PricingCard } from '../components/atoms/PricingCard.js';
+import { texts } from '../dynamic.json';
 
 /**
  * The explore page.
  * @returns The component.
  */
 const Pricing: Component = () => (
-  <main class="article-container">
-    <h2>Pricing page</h2>
-    <p>TODO: Add the content here.</p>
-  </main>
+  <section class="article-container">
+    <h2 class="heading-root">Pricing</h2>
+    <div class="grid gap-8 pb-8 md:grid-cols-2 lg:grid-cols-3">
+      <PricingCard
+        title="Free"
+        subscribe="Already subscribed"
+        features={[
+          'Unrestricted use under CC BY-NC 4.0 license',
+          'Community based support',
+        ]}
+      />
+      <PricingCard
+        title="Basic"
+        subscribe="It's the thought that counts"
+        features={[
+          'All features from the Free plan',
+          'Willingness to make more use of the Launchpad Icons',
+        ]}
+      />
+      <PricingCard
+        title="Pro"
+        subscribe="It's the thought that counts"
+        features={[
+          'All features from the Basic plan',
+          'Awareness as a professional user',
+        ]}
+      />
+    </div>
+    <article class="prose-anchor prose-article" innerHTML={texts.pricing} />
+  </section>
 );
 
 export default Pricing;