✨ Landing about page

app/pages/index.vue

@@ -8,8 +8,12 @@
         that interesting.
       </p>
       <n-space justify="center">
-        <n-button type="primary" size="large" round tag="a" href="#products">Explore around</n-button>
-        <n-button type="default" size="large" round>About us</n-button>
+        <n-button type="primary" size="large" round tag="a" href="#products"
+          >Explore around</n-button
+        >
+        <n-button type="default" size="large" round tag="a" href="#about"
+          >About us</n-button
+        >
       </n-space>
     </div>
     <div id="products" class="pb-56">
@@ -45,11 +49,29 @@
                     "
                     class="absolute left-0 right-0 top-1/2 bottom-0"
                   />
-                  <div class="absolute left-0 right-0 top-0 px-4 pt-4 flex justify-end gap-2.5">
-                    <n-button v-if="product.repo" circle color="white" size="small" tag="a" :href="product.repo" target="_blank">
+                  <div
+                    class="absolute left-0 right-0 top-0 px-4 pt-4 flex justify-end gap-2.5"
+                  >
+                    <n-button
+                      v-if="product.repo"
+                      circle
+                      color="white"
+                      size="small"
+                      tag="a"
+                      :href="product.repo"
+                      target="_blank"
+                    >
                       <n-icon><code-round /></n-icon>
                     </n-button>
-                    <n-button v-if="product.url" circle color="white" size="small" tag="a" :href="product.url" target="_blank">
+                    <n-button
+                      v-if="product.url"
+                      circle
+                      color="white"
+                      size="small"
+                      tag="a"
+                      :href="product.url"
+                      target="_blank"
+                    >
                       <n-icon><launch-round /></n-icon>
                     </n-button>
                   </div>
@@ -85,6 +107,66 @@
         </n-grid>
       </client-only>
     </div>
+    <div id="about" class="pb-56">
+      <client-only>
+        <n-grid cols="1 m:2 l:2" responsive="screen" x-gap="32" y-gap="16">
+          <n-gi>
+            <div
+              class="flex justify-center text-left h-full py-8 px-4 flex flex-col"
+            >
+              <h2 class="text-3xl font-bold mb-3">About us</h2>
+              <p class="text-lg mb-1">
+                Our aim is not making a profit.
+                <i class="text-xs">At least not yet.</i>
+              </p>
+              <p class="text-lg">
+                Instead we hope we can spread the love to the world and make
+                everyone enjoy the fun of the Internet and the world.
+              </p>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="flex h-full justify-center flex-col text-right">
+              <h2 class="text-3xl font-bold mb-3">Team members</h2>
+              <p class="text-lg">
+                Say hi to our lovely members... uh, seems there is only me.
+              </p>
+              <div class="flex justify-end gap-4 my-4">
+                <div class="flex flex-col items-end text-right">
+                  <n-avatar
+                    src="https://fs.solian.app/api/files/200ee92546244ed1a6a02202f5ca9cc9"
+                    :size="100"
+                    class="mb-2"
+                  />
+                  <div class="flex gap-1">
+                    <p>LittleSheep</p>
+                    <n-button
+                      text
+                      tag="a"
+                      size="small"
+                      href="https://id.solian.app/@littlesheep"
+                      target="_blank"
+                      class="mt-0.5"
+                    >
+                      <n-icon>
+                        <info-outlined />
+                      </n-icon>
+                    </n-button>
+                  </div>
+                  <p class="text-xs opacity-75 max-w-sm">
+                    Founder, CEO, CTO, Senior Developer, Marketing Engineer,
+                    Customer Service Engineer, DevOps, Database Administrator,
+                    Product Manager, UI/UX Designer, QA Engineer, Mobile
+                    Developer, Security Engineer, Technical Writer, Project
+                    Manager, Community Manager, Software Architect
+                  </p>
+                </div>
+              </div>
+            </div>
+          </n-gi>
+        </n-grid>
+      </client-only>
+    </div>
   </main>
 </template>
 
@@ -97,9 +179,10 @@ import {
   NCarousel,
   NCarouselItem,
   NIcon,
+  NAvatar,
   useThemeVars,
 } from "naive-ui";
-import { LaunchRound, CodeRound } from "@vicons/material";
+import { LaunchRound, CodeRound, InfoOutlined } from "@vicons/material";
 import Typed from "typed.js";
 
 const route = useRoute();