feat(web): implemented the index page

src/routes/index.tsx

@@ -1,9 +1,70 @@
-import type { Component, JSX } from 'solid-js';
+import type { Component } from 'solid-js';
+import cc from '../assets/images/by-nc.svg';
+import illustrator from '../assets/images/illustrator.png';
+import svgfiles from '../assets/images/svgfiles.png';
+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';
+// TODO: add the import assertion
+import { icons, iconsToDo } from '../constants.json';
 
-const Index: Component = (): JSX.Element => (
+/**
+ * The index page.
+ * @returns The component.
+ */
+const Index: Component = () => (
   <main class="min-h-[calc(100vh-40px-98px)]">
+    <Hero />
+    <Features />
+    <FeatureDetail heading={`${icons} SVG Icons`} image={illustrator}>
+      <p class="font-light leading-relaxed py-2">
+        The Launchpad Icons provide {icons} 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={svgfiles}>
+      <p class="font-light leading-relaxed py-2">
+        Launchpad Icons do not 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={cc}>
+      <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{' '}
+        <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">
-      TODO: Add the content here.
+      <WideAnchorButton url="docs">Learn more</WideAnchorButton>
     </section>
   </main>
 );