From 9f81b0a012bde946c44541a17c626857c33c5c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Thu, 1 Jun 2023 15:36:34 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E4=BC=98=E5=8C=963D=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AFTOPOLAND=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Footer.vue                  |  4 +-
 components/ImageHover.vue              | 10 ++--
 components/ImageLoading.vue            | 18 +++----
 components/LocaleNuxtLink.vue          | 11 +++-
 components/Typography.vue              | 14 ++---
 components/header/header.vue           |  4 +-
 components/header/nav.vue              |  6 +--
 config/pages/home/use-section-three.ts |  6 +--
 config/use-foot.ts                     |  4 --
 content/en/bar-symphony.md             | 19 -------
 content/en/changannostalgia.md         | 19 -------
 content/en/creatorpartyverse.md        | 19 +------
 content/en/holowater.md                | 17 ------
 content/en/terms-of-use.md             | 20 +------
 content/zh/bar-symphony.md             | 22 +-------
 content/zh/changannostalgia.md         | 19 +------
 content/zh/creatorpartyverse.md        | 20 +------
 content/zh/holowater.md                | 19 +------
 content/zh/terms-of-use.md             | 16 +-----
 nuxt.config.ts                         |  8 +--
 pages/index.vue                        | 22 ++++----
 pages/land.vue                         | 75 +++++++++++++++++++++++++-
 pages/release/[id].vue                 |  2 +-
 tsconfig.json                          |  2 +-
 uno.config.ts                          | 12 ++---
 25 files changed, 141 insertions(+), 247 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 6275fbe..1e2e0f9 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -5,8 +5,8 @@ const footer = useFoot()
 </script>
 
 <template>
-  <Divider />
-  <div class="grid-row p-20 pt-30 lg:(grid-cols-3) grid-cols-2  md:(px-30) xl:px-60">
+  <!-- <Divider /> -->
+  <div class="grid-row grid-cols-2 p-20 pt-30 lg:(grid-cols-3) md:(px-30) xl:px-60">
     <div
       v-for="(col, i) in footer.links"
       :key="i"
diff --git a/components/ImageHover.vue b/components/ImageHover.vue
index f712e82..a840fc1 100644
--- a/components/ImageHover.vue
+++ b/components/ImageHover.vue
@@ -7,12 +7,12 @@ $defineProps<{
 </script>
 
 <template>
-  <NuxtLink
+  <LocaleNuxtLink
     :href="href"
-    class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+    class="group h-min-200px relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
   >
     <!-- <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" /> -->
-    <ImageLoading  :src="img" class="h-full w-full" />
+    <ImageLoading :src="img" class="h-full w-full transition-all group-hover:(scale-110 blur)" />
     <div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
       <div class="text-h6 flex-grow">
         <p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">
@@ -21,12 +21,12 @@ $defineProps<{
       </div>
       <div i-solar-arrow-right-linear mx-2 stroke-3 font-bold text-white />
     </div>
-  </NuxtLink>
+  </LocaleNuxtLink>
 </template>
 
 <style scoped>
 .mask-img{
-    --uno:'absolute bottom-0 left-0 z-1 flex w-full items-center justify-center border-t-2px border-dark-50/10 p-2 px-10 backdrop-blur-md transition ';
+    --uno:'absolute bottom-0 left-0 z-1 flex w-full items-center justify-center border-t-2px border-dark-50/10 p-2 px-10  transition ';
     box-shadow: 0 -5px 25px rgba(0,0,0,0.4);
   }
 </style>
diff --git a/components/ImageLoading.vue b/components/ImageLoading.vue
index 68f42c4..5f18dfc 100644
--- a/components/ImageLoading.vue
+++ b/components/ImageLoading.vue
@@ -1,25 +1,21 @@
 <script setup lang="ts">
-
-
 import { useImage } from '@vueuse/core'
 
 const props = $defineProps<{
-  src:string
-  errSrc?:string
+  src: string
+  errSrc?: string
 }>()
-// const isGIF = 
+// const isGIF =
 const avatarUrl = props.src
-const { isLoading,error } = useImage({ src: avatarUrl })
+const { isLoading, error } = useImage({ src: avatarUrl })
 </script>
 
 <template>
-  <div v-if="isLoading" class="animate-pulse w-full h-full bg-slate/10  flex items-center justify-center">
-    <div class="i-line-md-loading-twotone-loop"/>
+  <div v-if="isLoading" class="h-full w-full flex animate-pulse items-center justify-center bg-slate/10">
+    <div class="i-line-md-loading-twotone-loop" />
   </div>
   <!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
     Error
   </div> -->
-  <img v-else :src="error?errSrc:avatarUrl" style="object-fit: cover;">
-  
+  <img v-else :src="error ? errSrc : avatarUrl" style="object-fit: cover;">
 </template>
- 
\ No newline at end of file
diff --git a/components/LocaleNuxtLink.vue b/components/LocaleNuxtLink.vue
index c862aac..00e12a4 100644
--- a/components/LocaleNuxtLink.vue
+++ b/components/LocaleNuxtLink.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
-$defineProps<{
+const props = $defineProps<{
   href?: string
 }>()
 
 const localePath = useLocalePath()
+
+const { locale, locales, setLocale, defaultDirection } = useI18n()
+
+function getPath() {
+  return locale.value === 'zh' ? props.href : `/en${props.href}`
+}
 </script>
 
 <template>
-  <NuxtLink :href="href && localePath(href)">
+  <NuxtLink :href="getPath()">
+    <!-- <NuxtLink :href="href && localePath(href)"> -->
     <slot />
   </NuxtLink>
 </template>
diff --git a/components/Typography.vue b/components/Typography.vue
index 55f5134..94a1a06 100644
--- a/components/Typography.vue
+++ b/components/Typography.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 $defineProps<{
   title?: string
-  titleClass?:string
+  titleClass?: string
   topic?: string
   topicClass?: string
   description?: string
@@ -15,22 +15,22 @@ $defineProps<{
 </script>
 
 <template>
-  <div class="text-center ">
-    <p v-if="title" class="text-title" :class="[`text-${textColor}`,titleClass]" drop-shadow>
+  <div class="text-center">
+    <p v-if="title" class="text-title" :class="[`text-${textColor}`, titleClass]" drop-shadow>
       {{ title }}
     </p>
-    <h2 v-if="topic" class="md:text-h2 text-h4 font-bold" :class="[`text-${textColor}`,topicClass]" drop-shadow>
+    <h2 v-if="topic" class="md:text-h2 text-h4 font-bold" :class="[`text-${textColor}`, topicClass]" drop-shadow>
       {{ topic }}
     </h2>
-    <p v-if="description" :class="[`text-${textColor}`,descriptionClass]" text-h6 pb-5 drop-shadow>
+    <p v-if="description" :class="[`text-${textColor}`, descriptionClass]" text-h6 pb-5 drop-shadow>
       {{
         description
       }}
     </p>
-    <NuxtLink v-if="link" :href="link?.href">
+    <LocaleNuxtLink v-if="link" :href="link?.href">
       <ABtn variant="light" class="group" color="white" icon="i-solar-arrow-right-linear transition-all group-hover:px-4">
         {{ link?.name }}
       </ABtn>
-    </NuxtLink>
+    </LocaleNuxtLink>
   </div>
 </template>
diff --git a/components/header/header.vue b/components/header/header.vue
index e4c08c1..8f97e78 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -1,8 +1,8 @@
 <template>
   <header class="bg-header/10 min-h-[100px]" z-100 w-full flex flex-col items-start justify-start px-5 md="items-center flex-row justify-around px-15 absolute z-100 top-0">
-    <NuxtLink to="/" class="w-35 flex items-center gap-5">
+    <LocaleNuxtLink href="/" class="w-35 flex items-center gap-5">
       <BrandLogo />
-    </NuxtLink>
+    </LocaleNuxtLink>
     <nav h-full flex items-center>
       <HeaderNav />
     </nav>
diff --git a/components/header/nav.vue b/components/header/nav.vue
index f1dfd1e..38d8edc 100644
--- a/components/header/nav.vue
+++ b/components/header/nav.vue
@@ -24,7 +24,7 @@ const flag: any = {
 
 <template>
   <nav class="flex flex-wrap">
-    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class=" mx-2 border-primary p-1 pb-5 transition-all" :href="nav.href" active-class="border-b-3px">
+    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :href="nav.href" active-class="border-b-3px">
       <ABtn variant="text">
         <AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--a-spacing:2" class="" z-1000 mt-5 placement="bottom">
           <AList
@@ -52,13 +52,13 @@ const flag: any = {
       </ABtn>
     </LocaleNuxtLink>
     <LocaleNuxtLink
-      v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)"
+      v-for="l in availableLocales" :key="l.code" :to="switchLocalePath(l.code)"
       class="mx-2 border-primary p-1 pb-5 transition-all"
     >
       <ABtn
         variant="text"
       >
-        <span :class="flag[locale.code]" />
+        <span :class="flag[l.code]" />
         <!-- {{ flag[locale.code] }} -->
       </ABtn>
     </LocaleNuxtLink>
diff --git a/config/pages/home/use-section-three.ts b/config/pages/home/use-section-three.ts
index ec26acd..9141b87 100644
--- a/config/pages/home/use-section-three.ts
+++ b/config/pages/home/use-section-three.ts
@@ -11,12 +11,12 @@ export function useSectionThree() {
       {
         topic: 'home.sectionThree.contentPrimary.topic[0]',
         img: '/imgs/Home-Stories/ParcelCreatorverse.jpg',
-        href: 'release/creatorpartyverse',
+        href: '/release/creatorpartyverse',
       },
       {
         topic: 'home.sectionThree.contentPrimary.topic[1]',
         img: '/imgs/Home-Stories/HoloWater.jpg',
-        href: 'release/holowater',
+        href: '/release/holowater',
       },
     ],
     contentSecondary: [
@@ -24,7 +24,7 @@ export function useSectionThree() {
       {
         topic: 'home.sectionThree.contentSecondary.topic[0]',
         img: '/imgs/Home-Stories/NeverDrinkAlone.jpg',
-        href: 'release/bar-symphony',
+        href: '/release/bar-symphony',
       }, {
         topic: 'home.sectionThree.contentSecondary.topic[1]',
         img: '/imgs/Home-Stories/RIBAChangan.jpg',
diff --git a/config/use-foot.ts b/config/use-foot.ts
index ae5b20c..c840ec8 100644
--- a/config/use-foot.ts
+++ b/config/use-foot.ts
@@ -1,8 +1,4 @@
 export function useFoot() {
-  const { locale } = useI18n()
-
-  const path = locale.value === 'zh' ? '/' : `/${locale.value}`
-
   return {
     copyright: 'foot.copyright',
     release: 'foot.release',
diff --git a/content/en/bar-symphony.md b/content/en/bar-symphony.md
index 13eb9d3..b072ad7 100644
--- a/content/en/bar-symphony.md
+++ b/content/en/bar-symphony.md
@@ -37,23 +37,4 @@ publish: "07/10/2022"
 
 
 :model-content{src='/model/house/scene.gltf'}
-
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
  
-
-
diff --git a/content/en/changannostalgia.md b/content/en/changannostalgia.md
index 9ec61ee..b716130 100644
--- a/content/en/changannostalgia.md
+++ b/content/en/changannostalgia.md
@@ -29,23 +29,4 @@ Publish: "07/10/2022"
 
 </p>
 此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
-
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
  
-
-
diff --git a/content/en/creatorpartyverse.md b/content/en/creatorpartyverse.md
index d65f5b9..287be0f 100644
--- a/content/en/creatorpartyverse.md
+++ b/content/en/creatorpartyverse.md
@@ -8,21 +8,4 @@ resume: "TOPVERSE® Lab 创始人"
 publish: "07/10/2022"
 ---
 
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-🧪 Working in Progress
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
- 
-
+ 
\ No newline at end of file
diff --git a/content/en/holowater.md b/content/en/holowater.md
index bf1be4a..92d06cf 100644
--- a/content/en/holowater.md
+++ b/content/en/holowater.md
@@ -7,23 +7,6 @@ author: "Greyson"
 resume: "TOPVERSE® Lab 创始人"
 publish: "07/10/2022"
 ---
-
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-🧪 Working in Progress
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
  
 
 ```bash
diff --git a/content/en/terms-of-use.md b/content/en/terms-of-use.md
index 7fd08f7..19ffcf3 100644
--- a/content/en/terms-of-use.md
+++ b/content/en/terms-of-use.md
@@ -116,22 +116,4 @@ These Terms and any dispute or claim arising out of or in connection with them o
 ===
 
 Email: pr@topverse.world
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
- 
-
-
+ 
\ No newline at end of file
diff --git a/content/zh/bar-symphony.md b/content/zh/bar-symphony.md
index a7b3662..86fc703 100644
--- a/content/zh/bar-symphony.md
+++ b/content/zh/bar-symphony.md
@@ -31,24 +31,4 @@ publish: "07/10/2022"
 此外，我们为这个独一无二的元宇宙酒吧特别设计了一个NPC酒保-Hermit，是一个静坐隐士的形象，红蓝两色的能量环在进行着规则的上下运动。希望人们在追求热烈而亲密的社交的同时，能够同时保有自己内心的一片宁静。
 
 :model-content{src='/model/house/scene.gltf'}
-
-
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
- 
-
-
+ 
\ No newline at end of file
diff --git a/content/zh/changannostalgia.md b/content/zh/changannostalgia.md
index b47c2f5..0f809b4 100644
--- a/content/zh/changannostalgia.md
+++ b/content/zh/changannostalgia.md
@@ -10,21 +10,4 @@ Publish: "07/10/2022"
 
 ![Img](/imgs/News/BarSymphony/20230524175132.jpg)
 
-
-
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-
-
-
+ 
diff --git a/content/zh/creatorpartyverse.md b/content/zh/creatorpartyverse.md
index 32b1b5e..1fa6643 100644
--- a/content/zh/creatorpartyverse.md
+++ b/content/zh/creatorpartyverse.md
@@ -36,22 +36,4 @@ publish: "07/10/2022"
   由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。
 
 
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
- 
-
-
+ 
\ No newline at end of file
diff --git a/content/zh/holowater.md b/content/zh/holowater.md
index 34d43a1..5ce7f34 100644
--- a/content/zh/holowater.md
+++ b/content/zh/holowater.md
@@ -70,21 +70,4 @@ PC端平台含污水处理站数据采集和显示支撑系统，全方位采集
 用数字孪生技术对污水处理厂的施工方法、结构和工艺流程进行可视化展示，可以清晰地看明白污水处理厂的全貌，点击交互还可以看到箱体上层、工艺管线、暖通、自控电器、箱体下层、基坑等具体结构。该应用场景可以极大地提升水务工作站工业项目的可视化及信息的直观程度。通过数字孪生集成水务工作站信息可以极大降低管理成本，缩短预警反应时间，为水务处理工业的信息分析及后续工艺流程的更新升级提供更为宏观的数据基础。 
 
 ![Img](/imgs/News/HoloWater/20230524163506.jpg)
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
-<p align="center">
-<br>
-<a href="https://topverse.netlify.app/">🖥 Online Preview</a>
-<br><br>
- 
-
+ 
\ No newline at end of file
diff --git a/content/zh/terms-of-use.md b/content/zh/terms-of-use.md
index 1b9a60f..1a7046e 100644
--- a/content/zh/terms-of-use.md
+++ b/content/zh/terms-of-use.md
@@ -100,18 +100,4 @@ TOPVERSE®禁止未经授权的指向本网站的超文本链接，以及擅自
  
 如对本网站存在任何疑问或建议，请通过pr@topverse.world与我们联系，我们将在15个工作日内进行处理。 
 
-
-<p align="center">
-<img src="./public/topverse.svg" width="600"/>
-</p>
-
-<h2 align="center">
-</h2><br>
-
-<pre align="center">
-
-</pre>
-
- 
-
-
+ 
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b6a7b11..0e0a270 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,8 +4,8 @@ import { appDescription } from './constants/index'
 import { hex2hsl } from './utils/colors'
 
 export default defineNuxtConfig({
-  ssr:false,
-  
+  ssr: false,
+
   modules: [
     '@vueuse/nuxt',
     '@anu-vue/nuxt',
@@ -22,13 +22,13 @@ export default defineNuxtConfig({
     // '@nuxt/image-edge',
     '@nuxt/devtools',
   ],
-  
+
   // content: {
   //   experimental: {
   //     clientDB: true
   //   }
   // },
-  image:{
+  image: {
     // provider:"static"
   },
   // optimizedImages: {
diff --git a/pages/index.vue b/pages/index.vue
index aa66458..42f0875 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,7 @@ const sectionNine = useSectionNine()
 </script>
 
 <template>
-  <Carousel class="mb-5" />
+  <Carousel class="mb-25" />
   <Divider />
   <!-- Section One -->
   <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
@@ -42,7 +42,7 @@ const sectionNine = useSectionNine()
         <a
           v-for="(img, j) in item.imgs"
           :key="j"
-          class="h-100px md:h-200px w-full flex justify-center"
+          class="h-100px w-full flex justify-center md:h-200px"
           :class="[`animated-delay-${j * 100}ms`, {
             'animated animated-fade-in-up animated-faster': sectionTwoVis,
           }]"
@@ -50,7 +50,7 @@ const sectionNine = useSectionNine()
           :title="$t(img.title)"
         >
           <!-- <NuxtImg :src="img.img" height="200" fit="cover" loading="lazy"/> -->
-          <ImageLoading :src="img.img" height="200" fit="cover" loading="lazy"/>
+          <ImageLoading :src="img.img" height="200" fit="cover" loading="lazy" />
         </a>
       </div>
     </div>
@@ -135,7 +135,7 @@ const sectionNine = useSectionNine()
     <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
       <div class="w-45% flex-grow">
         <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
-          <ImageLoading quality="20" :src="item.img" :errSrc="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/>
+          <ImageLoading quality="20" :src="item.img" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
           <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
         </div>
       </div>
@@ -148,10 +148,10 @@ const sectionNine = useSectionNine()
           <h4 class="text-h4 font-bold">
             {{ $t(item.topic) }}
           </h4>
-          <p class="text-h6 md:text-left">
+          <p class="text-h6 text-center md:text-left">
             {{ $t(item.description) }}
           </p>
-          <div v-if="item.link" w-full py-10>
+          <div v-if="item.link" class="w-full py-10 text-center md:text-left">
             <LocaleNuxtLink :href="item.link.href">
               <ABtn variant="light" class="group">
                 {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
@@ -174,8 +174,8 @@ const sectionNine = useSectionNine()
         :key="i"
         class="w-full text-center"
       >
-        <div :class="content.icon" h-60px w-full />
-        <h4 text-h4 font-bold>
+        <div :class="content.icon" mb-5 h-60px w-full />
+        <h4 text-h4 mb-1 font-bold>
           {{ $t(content.title) }}
         </h4>
         <p text-h7>
@@ -202,15 +202,15 @@ const sectionNine = useSectionNine()
       </div>
     </div> -->
   </Section>
-  <Divider />
+  <!-- <Divider /> -->
 
   <!-- Section Nine -->
   <Section class="my-10 flex bg-gradient-pink">
     <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
 
-      <ModelContent src="/model/house/Night-City.gltf" :width="300" />
+    <ModelContent src="/model/house/Night-City.gltf" :width="300" />
   </Section>
-  <Divider />
+  <!-- <Divider /> -->
 </template>
 
 <style scoped lang="scss">
diff --git a/pages/land.vue b/pages/land.vue
index 101965a..0f16957 100644
--- a/pages/land.vue
+++ b/pages/land.vue
@@ -28,7 +28,78 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="h-screen w-screen">
-    <canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" />
+  <div flex flex-col items-center justify-center pt-30>
+    <Typography title="在线体验" topic="3D场景实时交互" description="鼠标移动到画面中，点击即可进入到场景内部，巴拉巴拉巴拉巴拉" />
+
+    <div class="relative mt-20 h-600px w-1000px border-5px border-stone rounded shadow md:h-800px md:w-1500px">
+      <div class="absolute w-full flex items-center justify-between pb-3 -translate-y-full">
+        <div class="flex gap-4">
+          <!-- 👉 Sales -->
+          <div class="flex items-center gap-x-3">
+            <AAvatar
+              icon="i-emojione-monotone-letter-w"
+              color="success"
+              class="rounded-lg text-[1.25rem]"
+            />
+            <ATypography
+              :title="['键盘W键', 'text-sm font-normal !text-medium-emphasis']"
+              :subtitle="['前进', 'font-semibold !text-high-emphasis']"
+            />
+          </div>
+
+          <!-- 👉 Revenue -->
+          <div class="flex items-center gap-x-3">
+            <AAvatar
+              icon="i-emojione-monotone-letter-a"
+              class="rounded-lg text-[1.25rem]"
+            />
+            <ATypography
+              :title="['键盘A键', 'text-sm !text-medium-emphasis font-normal']"
+              :subtitle="['左走', 'font-semibold !text-high-emphasis']"
+            />
+          </div>
+
+          <!-- 👉 Customer -->
+          <div class="flex items-center gap-x-3">
+            <AAvatar
+              icon="i-emojione-monotone-letter-s"
+              color="info"
+              class="rounded-lg text-[1.25rem]"
+            />
+            <ATypography
+              :title="['键盘S键', 'text-sm !text-medium-emphasis font-normal']"
+              :subtitle="['右走', 'font-semibold !text-high-emphasis']"
+            />
+          </div>
+
+          <!-- 👉 Returns -->
+          <div class="flex items-center gap-x-3">
+            <AAvatar
+              icon="i-emojione-monotone-letter-d"
+              color="danger"
+              class="rounded-lg text-[1.25rem]"
+            />
+            <ATypography
+              :title="['键盘D键', 'text-sm !text-medium-emphasis font-normal']"
+              :subtitle="['后退', 'font-semibold !text-high-emphasis']"
+            />
+          </div>
+        </div>
+        <div>
+          <div class="flex items-center gap-x-3">
+            <AAvatar
+              icon="i-ic-baseline-mouse"
+              color="orange"
+              class="rounded-lg text-[1.25rem]"
+            />
+            <ATypography
+              :title="['鼠标拖动', 'text-sm !text-medium-emphasis font-normal']"
+              :subtitle="['转换视角', 'font-semibold !text-high-emphasis']"
+            />
+          </div>
+        </div>
+      </div>
+      <canvas id="canvas" ref="canvasRef" style="width: 100%; height: 100%" class="rounded-sm" />
+    </div>
   </div>
 </template>
diff --git a/pages/release/[id].vue b/pages/release/[id].vue
index a5d734b..07bcaa3 100644
--- a/pages/release/[id].vue
+++ b/pages/release/[id].vue
@@ -14,7 +14,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
   <main class="m-auto prose xl:max-w-900px">
     <ContentRenderer v-if="data" :value="data" />
   </main>
-  <div class="m-auto mb-20 flex flex-col text-right text-right prose xl:max-w-900px">
+  <div class="m-auto my-30 flex flex-col text-right text-right prose xl:max-w-900px">
     <span class="text-lg font-bold">
       {{ data?.author }}
     </span>
diff --git a/tsconfig.json b/tsconfig.json
index 9203f58..d971363 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     "strict": true,
-    "types": ["anu-vue/volar","@nuxt/types", "@nuxt/image"]
+    "types": ["anu-vue/volar", "@nuxt/types", "@nuxt/image"]
   }
 }
diff --git a/uno.config.ts b/uno.config.ts
index c7fd0d6..e903ee2 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -22,12 +22,12 @@ export default defineConfig({
     'text-title': ' font-bold opacity-90 uppercase break-words',
     'text-body': 'text-base  tracking-normal break-words',
     'text-description': 'text-md text-stone break-words',
-    'text-h2': 'line-clamp-2 text-5xl leading-20 break-words font-bold',
-    'text-h3': 'line-clamp-2 text-4xl leading-13 break-words',
-    'text-h4': 'line-clamp-2 text-2xl leading-10 break-words',
-    'text-h5': 'line-clamp-3 text-xl leading-8 break-words',
-    'text-h6': 'line-clamp-3 text-lg leading-6 break-words',
-    'text-h7': 'line-clamp-3 text-base break-words',
+    'text-h2': ' text-5xl leading-16 break-words font-bold',
+    'text-h3': ' text-4xl leading-13 break-words',
+    'text-h4': ' text-2xl leading-10 break-words',
+    'text-h5': ' text-xl leading-8 break-words',
+    'text-h6': ' text-lg leading-6 break-words',
+    'text-h7': ' text-base break-words',
     'bg-gradient-pink': 'from-pink to-violet bg-gradient-to-r ',
     'bg-gradient-blue': 'from-sky to-indigo bg-gradient-to-r ',
     'bg-gradient-green': 'from-lime to-green bg-gradient-to-r ',