💄 Optimized header & landing page

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>
 

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>

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

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",

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">
+    <section class="content-section flex flex-col items-center justify-center text-center px-4">
-      <v-col cols="12" md="4" class="flex justify-start">
+      <img
-        <div class="flex flex-col items-start">
+        v-motion="{
-          <h1 class="text-4xl font-bold">{{ t("brandName") }}</h1>
+          initial: {
-          <p class="text-lg mt-3 max-w-2/3">
+            y: 100,
-            {{ t("indexIntroduce") }}
+            opacity: 0,
-          </p>
+          },
-          <p class="text-grey mt-2">
+          enter: {
-            {{ t("indexProductListHint") }}
+            y: 0,
-            <v-icon icon="mdi-arrow-right" size="16" class="mb-0.5" />
+            opacity: 1,
-          </p>
+          },
-        </div>
+        }"
-      </v-col>
+        :src="Logo"
-      <v-col cols="12" md="8">
+        alt="Company Logo"
-        <v-card>
+        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>
+      </div>
-    </v-row>
+    </section>
+
     <v-row class="content-section">
-      <v-col cols="12" md="8">
+      <v-col cols="12" md="6">
-        <v-card class="h-[500px]">
+        <v-card>
-          <activity-list class="carousel-section" />
+          <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>
+          <h2 class="text-4xl font-bold">
-          <p class="text-lg mt-3 max-w-2/3">
+            We<br />
-            {{ t("indexActivitiesCaption") }}
+            ❤️ 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>

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>