From e4111dc06ee0a05a0894fb43219490e652b6bd98 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Mon, 17 Mar 2025 22:23:40 +0800
Subject: [PATCH] :lipstick: Optimized header & landing page

---
 components/PostItem.vue |  2 +-
 layouts/default.vue     | 15 +++++--
 nuxt.config.ts          |  2 +-
 package.json            |  1 +
 pages/index.vue         | 98 +++++++++++++++++++++++++++++------------
 pages/posts/[id].vue    |  2 +-
 6 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/components/PostItem.vue b/components/PostItem.vue
index e5a6385..ea85cf9 100644
--- a/components/PostItem.vue
+++ b/components/PostItem.vue
@@ -31,7 +31,7 @@
         />
       </div>
 
-      <article v-if="post.type == 'story' || props.forceShowContent" class="text-base prose max-w-none">
+      <article v-if="(post.type == 'story' || props.forceShowContent) && post.body?.content" class="text-base prose max-w-none">
         <m-d-c :value="post.body?.content"></m-d-c>
       </article>
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 934622c..751869c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar flat color="primary">
+  <v-app-bar app flat color="surface" class="app-bar-blur">
     <v-container fluid class="mx-auto d-flex align-center justify-center pr-8">
       <v-app-bar-nav-icon @click="openDrawer = !openDrawer" />
 
@@ -22,7 +22,7 @@
     </v-container>
   </v-app-bar>
 
-  <v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
+  <v-navigation-drawer v-model="openDrawer" location="left" width="300" temporary order="-1">
     <v-list density="compact" nav color="primary">
       <v-list-item title="Knowledge Base" prepend-icon="mdi-library" to="/docs" exact />
       <v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
@@ -48,9 +48,16 @@
 </template>
 
 <script setup lang="ts">
-import Logo from "../assets/logo-w-shadow.png"
-
 const { t } = useI18n()
 
 const openDrawer = ref(false)
 </script>
+
+<style lang="css" scoped>
+.app-bar-blur {
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100%);
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 87f5ee6..3b5badc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -151,7 +151,7 @@ export default defineNuxtConfig({
     "@pinia/nuxt",
     "@nuxtjs/i18n",
     "nuxt-schema-org",
-    "nuxt-gtag",
+    "@vueuse/motion/nuxt",
     (_options, nuxt) => {
       nuxt.hooks.hook("vite:extendConfig", (config) => {
         // @ts-expect-error
diff --git a/package.json b/package.json
index 8882515..0748bac 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@nuxtjs/i18n": "^8.5.6",
     "@nuxtjs/sitemap": "^6.1.5",
     "@pinia/nuxt": "^0.5.5",
+    "@vueuse/motion": "^3.0.3",
     "feed": "^4.2.2",
     "nuxt": "^3.16.0",
     "nuxt-gtag": "^2.1.0",
diff --git a/pages/index.vue b/pages/index.vue
index ce7c953..9b05ff8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,39 +1,71 @@
 <template>
   <v-container class="flex flex-col my-2 px-12 gap-[4rem]">
-    <v-row class="content-section">
-      <v-col cols="12" md="4" class="flex justify-start">
-        <div class="flex flex-col items-start">
-          <h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
-          <p class="text-lg mt-3 max-w-2/3">
-            {{ t("indexIntroduce") }}
-          </p>
-          <p class="text-grey mt-2">
-            {{ t("indexProductListHint") }}
-            <v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
-          </p>
-        </div>
-      </v-col>
-      <v-col cols="12" md="8">
-        <v-card>
+    <section class="content-section flex flex-col items-center justify-center text-center px-4">
+      <img
+        v-motion="{
+          initial: {
+            y: 100,
+            opacity: 0,
+          },
+          enter: {
+            y: 0,
+            opacity: 1,
+          },
+        }"
+        :src="Logo"
+        alt="Company Logo"
+        class="w-32 h-32 mb-4"
+      />
+      <h1 class="text-4xl font-bold">Welcome to {{ t("brandName") }}</h1>
+      <p class="mt-2 text-lg">Building cool, open-source, and elegant apps for human.</p>
+      <v-btn class="mt-4" color="primary" prepend-icon="mdi-arrow-down" href="#products">{{ t("learnMore") }}</v-btn>
+    </section>
+
+    <section class="content-section py-16" id="products">
+      <div class="container mx-auto text-center">
+        <h2 class="text-3xl font-bold">Our Projects</h2>
+        <p>Take a peek of our works.</p>
+        <v-card class="mt-12">
           <product-carousel class="carousel-section" :products="products as any[]" />
         </v-card>
-      </v-col>
-    </v-row>
+      </div>
+    </section>
+
     <v-row class="content-section">
-      <v-col cols="12" md="8">
-        <v-card class="h-[500px]">
-          <activity-list class="carousel-section" />
+      <v-col cols="12" md="6">
+        <v-card>
+          <v-list>
+            <v-list-item
+              title="GitHub"
+              subtitle="The place hosts most of our public projects' code"
+              prepend-icon="mdi-github"
+              href="https://github.com/Solsynth"
+              target="_blank"
+            />
+            <v-list-item
+              lines="two"
+              title="Solsynth Code Repository"
+              subtitle="Our self-hosted git server, may contains some unpublished projects' code"
+              prepend-icon="mdi-git"
+              href="https://git.solsynth.dev/explore"
+              target="_blank"
+            />
+          </v-list>
         </v-card>
       </v-col>
-      <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">
+      <v-col cols="12" md="6" class="flex justify-end" order="first" order-md="last">
         <div class="text-right flex flex-col items-end">
-          <h2 class="text-4xl font-bold">{{ t("indexActivities") }}</h2>
-          <p class="text-lg mt-3 max-w-2/3">
-            {{ t("indexActivitiesCaption") }}
+          <h2 class="text-4xl font-bold">
+            We<br />
+            ❤️ Open-source
+          </h2>
+          <p class="text-md mt-3 max-w-2/3">
+            No software can run without the support of open source software, and our software is no exception.
+            Therefore, we feel it is important to contribute to open source as well.
           </p>
           <p class="text-grey mt-2">
             <v-icon icon="mdi-arrow-left" size="16" class="mb-0.5" />
-            {{ t("indexActivitiesHint") }}
+            Check out our GitHub
           </p>
         </div>
       </v-col>
@@ -42,6 +74,8 @@
 </template>
 
 <script setup lang="ts">
+import Logo from "../assets/logo-w-shadow.png"
+
 import { getLocale } from "~/utils/locale"
 
 const { t } = useI18n()
@@ -61,13 +95,16 @@ useSeoMeta({
 })
 
 const { data: products } = await useAsyncData("products", () => {
-  return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
+  return queryContent("/products")
+    .where({ _locale: getLocale(), archived: { $ne: true } })
+    .limit(5)
+    .find()
 })
 </script>
 
 <style scoped>
 .carousel-section {
-  height: 96rem;
+  height: 120rem;
 }
 
 .content-section {
@@ -76,3 +113,10 @@ const { data: products } = await useAsyncData("products", () => {
   place-items: center;
 }
 </style>
+
+<style>
+body,
+html {
+  scroll-behavior: smooth;
+}
+</style>
diff --git a/pages/posts/[id].vue b/pages/posts/[id].vue
index 3917a2a..1fc63e7 100644
--- a/pages/posts/[id].vue
+++ b/pages/posts/[id].vue
@@ -25,7 +25,7 @@
       />
     </v-card>
 
-    <article class="text-base prose xl:text-lg mx-auto">
+    <article v-if="post.body?.content" class="text-base prose xl:text-lg mx-auto">
       <m-d-c :value="post.body?.content"></m-d-c>
     </article>