更新页面，样式等

components/DarkToggle.vue

@@ -15,7 +15,10 @@ function toggleDark() {
 </script>
 
 <template>
-  <button class="!outline-none" @click="toggleDark">
+  <ABtn
+    variant="text"
+    @click="toggleDark"
+  >
     <div class="i-carbon-sun dark:i-carbon-moon" />
-  </button>
+  </ABtn>
 </template>

components/Footer.vue

@@ -32,9 +32,10 @@ const footer = useFoot()
     </div>
   </div>
   <div my-10 flex flex-col items-center justify-center gap-4>
-    <div flex items-center gap-4>
+    <BrandLogo />
-      <BrandLogo />
+    <div>
       <DarkToggle />
+      <LangSwitch />
     </div>
     <p class="text-center">
       {{ $t(footer.copyright) }}

components/LangSwitch.vue

@@ -0,0 +1,27 @@
+<script setup>
+const { locale, locales, setLocale } = useI18n()
+
+const switchLocalePath = useSwitchLocalePath()
+const availableLocales = computed(() => {
+  // @ts-expect-error
+  return (locales.value).filter(i => i.code !== locale.value)
+})
+
+const flag = {
+  en: 'i-flag-gb-4x3',
+  zh: 'i-flag-cn-4x3',
+}
+</script>
+
+<template>
+  <LocaleNuxtLink
+    v-for="l in availableLocales" :key="l.code" :to="switchLocalePath(l.code)"
+  >
+    <ABtn
+      variant="text"
+    >
+      <span :class="flag[l.code]" />
+    <!-- {{ flag[locale.code] }} -->
+    </ABtn>
+  </LocaleNuxtLink>
+</template>

components/header/header.vue

@@ -1,11 +1,12 @@
 <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">
+  <header class="bg-header/10 h-100px w-full flex justify-between px-5 md:px-30 sm:px-20 xl:px-60" lg="absolute z-100 top-0">
     <LocaleNuxtLink href="/" class="w-35 flex flex-shrink-0 items-center gap-5">
       <BrandLogo />
     </LocaleNuxtLink>
-    <nav h-full flex-grow items-end>
+    <div class="h-100px flex flex-grow items-center justify-end">
       <HeaderNav />
-    </nav>
+      <HeaderMobileNav />
+    </div>
     <!-- <div w-20 flex justify-center> -->
     <!-- <ABtn variant="text">
         login

components/header/mobile-nav.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useNav } from '~/config/use-nav'
+
+const isDrawerShown = ref(false)
+
+const navs = useNav()
+
+const { locale, locales, setLocale } = useI18n()
+
+const switchLocalePath = useSwitchLocalePath()
+const availableLocales = computed(() => {
+  // @ts-expect-error
+  return (locales.value).filter(i => i.code !== locale.value)
+})
+
+const flag: any = {
+  en: 'i-flag-gb-4x3',
+  zh: 'i-flag-cn-4x3',
+}
+
+// const flag: any = {
+//   en: 'En',
+//   zh: '中',
+// }
+</script>
+
+<template>
+  <ADrawer
+    v-model="isDrawerShown"
+    class="!w-80%"
+  >
+    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="ml-3px block w-full shadow-transparent transition-all" :href="nav.href" active-class="active-nav ">
+      <ABtn v-if="!nav.child" variant="text" class="w-full text-xl [&_.a-btn-content]:(w-full justify-start px-2)">
+        <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
+      </ABtn>
+
+      <div v-if="nav.child" variant="text" class="text w-full p-5">
+        <div class="rounded bg-black/10 py-5">
+          <div style="color: hsla(var(--a-base-c), 0.87); " class="px-5 py-2 font-bold opacity-70">
+            {{ $t(nav.title) }}
+          </div>
+
+          <div class="grid-row gap-1 sm:grid-cols-2">
+            <LocaleNuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="w-full overflow-hidden rounded py-1 hover:(bg-primary/20)" active-class="bg-primary/20">
+              <AListItem
+                class="[--a-spacing:1] max-w-300px"
+                :title="$t(item.title)"
+                :subtitle="item.subtitle && $t(item.subtitle)"
+              >
+                <template #prepend>
+                  <AAvatar
+                    class="shrink-0 rounded-lg"
+                    :icon="item.icon"
+                  />
+                </template>
+              </AListItem>
+            </LocaleNuxtLink>
+          </div>
+        </div>
+      </div>
+    </LocaleNuxtLink>
+  </ADrawer>
+
+  <ABtn
+    class="block text-xl lg:hidden"
+    icon-only
+    color="white"
+    variant="light"
+    icon="i-material-symbols-view-headline"
+    @click="isDrawerShown = true"
+  />
+</template>
+
+<style scoped>
+.active-nav{
+  box-shadow: -3px 0px 0px 0px lightblue;
+}
+</style>

components/header/nav.vue

@@ -23,8 +23,8 @@ const flag: any = {
 </script>
 
 <template>
-  <nav class="flex flex-wrap justify-end">
+  <nav class="hidden flex-wrap lg:flex">
-    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 mb-5 p-1 pb-5 shadow-transparent transition-all" :href="nav.href" active-class="active-nav">
+    <LocaleNuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 p-1 shadow-transparent transition-all" :href="nav.href" active-class="active-nav">
       <ABtn variant="text">
         <AMenu v-if="nav.child" style="--un-bg-opacity:0.98;--a-spacing:2" class="" z-1000 mt-5 placement="bottom">
           <AList
@@ -51,21 +51,10 @@ const flag: any = {
         <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
       </ABtn>
     </LocaleNuxtLink>
-    <LocaleNuxtLink
-      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[l.code]" />
-        <!-- {{ flag[locale.code] }} -->
-      </ABtn>
-    </LocaleNuxtLink>
   </nav>
 </template>
 
-<style>
+<style scoped>
 .active-nav{
   box-shadow: 0 3px 0px 0px lightblue;
 }

config/pages/community/news/use-news-article.ts

@@ -0,0 +1,26 @@
+export function useNewsArticle() {
+  return [
+    {
+      title: 'MetaFold',
+      author: 'Xin LU, Zeyuan Meng, Guanyu Shi, Jieni Zhang',
+      profession: 'UCL Bartlett RC9 Project',
+      img: '/imgs/Community/Project/metafold/001.png',
+      tags: ['Project'],
+      href: '/community/project/metafold',
+      level: 2,
+      avatar: '/imgs/Community/Avatar/bartlett.png',
+      createTime: '2020/6/5',
+    },
+    {
+      title: 'CeARamics',
+      author: 'Jiaxiang Luo, Sarah Aldaboos, Efthymia Mastrokalou, Rahaf Aldabous',
+      profession: 'UCL Bartlett RC9 Project',
+      img: '/imgs/Community/Project/cearamics/001.png',
+      tags: ['Project'],
+      href: '/community/project/cearamics',
+      level: 2,
+      avatar: '/imgs/Community/Avatar/bartlett.png',
+      createTime: '2020/6/5',
+    },
+  ]
+}

config/pages/community/news/use-news-tag.ts

@@ -0,0 +1,16 @@
+export function useNewsTag() {
+  return [
+    {
+      label: 'community.vamx.sider.condition[0]',
+      value: 'Publication',
+    },
+    {
+      label: 'community.vamx.sider.condition[1]',
+      value: 'Project',
+    },
+    {
+      label: 'community.vamx.sider.condition[2]',
+      value: 'Research',
+    },
+  ]
+}

content/zh/community/join.md

@@ -0,0 +1,40 @@
+---
+img: "/imgs/Project/Metaverse-Build/MusicVenue.jpg"
+topic: "在全球最大元宇宙平台DCL进行一次“创作者聚会”！"
+title: "虚拟空间设计"
+description: "TOPVERSE原创元宇宙建筑——《创作者聚会（Creator Party-verse）》参与全球元宇宙建筑竞赛Parcel Creatorverse获奖"
+author: "Greyson"
+resume: "TOPVERSE® Lab 创始人"
+publish: "07/10/2022"
+---
+《创作者聚会（Creator Party-verse）》作为 TOPVERSE 奇点拓界® 参与全球元宇宙建筑设计竞赛PARCEL Creatorverse的2件获奖作品中其中一件，由Decentraland及其官方认可的数字藏品及虚拟地产交易平台Parcel进行联动推送报道，并由其首席运营官Kelly Kim进行配音讲解。该建筑同时于2022年9月25至28日部署在新加坡TOKEN 2049系列子活动MUA 2049上，获得了多家Web 3.0多家头部媒体关注及推送，并由全球最大元宇宙平台Decentraland进行官方报道。  
+  
+  ![Img](/imgs/News/PARCELCreatorverse/AwardImage.jpg)
+
+  **TOKEN 2049 & MUA 2049**  
+
+  备受瞩目的TOKEN 2049从 9 月 28 日到 9 月 29 日于新加坡举行，这是目前亚洲最大的线下 web3 活动，有 250 多家参展商和近 10,000 名与会者。此外，亚洲加密货币周（Asian Crypto Week）在 2022 年 9 月 26 日至 10 月 2 日期间举办为期一周的各种独立组织围绕 TOKEN2049 的子活动，包括各种加密货币行业相关的聚会、研讨会、社交酒会、派对和一级方程式赛车。  
+  
+  TOKEN2049 是首屈一指的加密货币活动，每年在新加坡和伦敦举办，领先的 Web3 公司的创始人和高管在这里分享他们对市场的看法。TOKEN 2049关注全球发展，同时对生态系统及其巨大机遇采取独特而广阔的视角。  
+  
+  而今年，TOKEN 2049新加坡峰会分为主舞台（STAGE 1）、WEMADE舞台以及Trust EVM舞台，涵盖了数字藏品、元宇宙、DeFi、全球经济、Web 3.0、去中心化社群等多个领域的话题及研讨会。  
+
+   ![Img](/imgs/News/PARCELCreatorverse/20221003225946.jpg)
+
+  其中，位于元宇宙平台Decentraland的MUA 2049，由全球最为知名的元宇宙建筑师去中心化社群MUA DAO（Metaverse Union of Architect，元宇宙建筑师联盟）牵头，集合了二十多家头部Web 3.0赛道的合作伙伴共同加入，吸引了众多头部智能合约平台方、GameFi项目方、DID项目方及数百名元宇宙 Web 3.0 意见领袖（KOL）的参与。  
+
+  ![Img](/imgs/News/PARCELCreatorverse/20221003230015.jpg)
+
+  元宇宙建筑师联盟 (MUA)是一个去中心化的自治组织（DAO），其使命是帮助全球数百万专业人士打破桎梏，克服加密世界的高门槛，创建最大的虚拟现实建筑师公会，提供大量优秀的元宇宙建设者，实现的最终愿景是聚集越来越多的房地产相关资源和流量，作为有影响力的元界房地产的基础设施，连接现实和未来世界。目前，MUA DAO在全球范围内已经拥有超过2000名元宇宙建筑师入驻，包括各大知名事务所以及来自全球顶尖院校的建筑师。  
+
+   ![Img](/imgs/News/PARCELCreatorverse/20221003230309.jpg)
+
+  在此次MUA 2049的元宇宙主场地上，一共有五座元宇宙建筑入选作为主场馆：《赛博宇宙夜店（The Cyberverse Night Club）》以科幻与后现代风格诠释元宇宙建筑；《BYOB酒吧（BYOB Bar）》则运用了动态和光效的变化；《爱情与死亡酒吧（The Love and Death Bar）》充斥着朋克与动感；《海盗天堂（Pirate Paradise）》则用复古来展现神秘。  
+
+  ![Img](/imgs/News/PARCELCreatorverse/20221003230258.jpg)
+
+  由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。
+
+
+:model-content{src='/model/house/scene.gltf'}
+ 

content/zh/community/structure.md

@@ -0,0 +1,40 @@
+---
+img: "/imgs/Project/Metaverse-Build/MusicVenue.jpg"
+topic: "在全球最大元宇宙平台DCL进行一次“创作者聚会”！"
+title: "虚拟空间设计"
+description: "TOPVERSE原创元宇宙建筑——《创作者聚会（Creator Party-verse）》参与全球元宇宙建筑竞赛Parcel Creatorverse获奖"
+author: "Greyson"
+resume: "TOPVERSE® Lab 创始人"
+publish: "07/10/2022"
+---
+《创作者聚会（Creator Party-verse）》作为 TOPVERSE 奇点拓界® 参与全球元宇宙建筑设计竞赛PARCEL Creatorverse的2件获奖作品中其中一件，由Decentraland及其官方认可的数字藏品及虚拟地产交易平台Parcel进行联动推送报道，并由其首席运营官Kelly Kim进行配音讲解。该建筑同时于2022年9月25至28日部署在新加坡TOKEN 2049系列子活动MUA 2049上，获得了多家Web 3.0多家头部媒体关注及推送，并由全球最大元宇宙平台Decentraland进行官方报道。  
+  
+  ![Img](/imgs/News/PARCELCreatorverse/AwardImage.jpg)
+
+  **TOKEN 2049 & MUA 2049**  
+
+  备受瞩目的TOKEN 2049从 9 月 28 日到 9 月 29 日于新加坡举行，这是目前亚洲最大的线下 web3 活动，有 250 多家参展商和近 10,000 名与会者。此外，亚洲加密货币周（Asian Crypto Week）在 2022 年 9 月 26 日至 10 月 2 日期间举办为期一周的各种独立组织围绕 TOKEN2049 的子活动，包括各种加密货币行业相关的聚会、研讨会、社交酒会、派对和一级方程式赛车。  
+  
+  TOKEN2049 是首屈一指的加密货币活动，每年在新加坡和伦敦举办，领先的 Web3 公司的创始人和高管在这里分享他们对市场的看法。TOKEN 2049关注全球发展，同时对生态系统及其巨大机遇采取独特而广阔的视角。  
+  
+  而今年，TOKEN 2049新加坡峰会分为主舞台（STAGE 1）、WEMADE舞台以及Trust EVM舞台，涵盖了数字藏品、元宇宙、DeFi、全球经济、Web 3.0、去中心化社群等多个领域的话题及研讨会。  
+
+   ![Img](/imgs/News/PARCELCreatorverse/20221003225946.jpg)
+
+  其中，位于元宇宙平台Decentraland的MUA 2049，由全球最为知名的元宇宙建筑师去中心化社群MUA DAO（Metaverse Union of Architect，元宇宙建筑师联盟）牵头，集合了二十多家头部Web 3.0赛道的合作伙伴共同加入，吸引了众多头部智能合约平台方、GameFi项目方、DID项目方及数百名元宇宙 Web 3.0 意见领袖（KOL）的参与。  
+
+  ![Img](/imgs/News/PARCELCreatorverse/20221003230015.jpg)
+
+  元宇宙建筑师联盟 (MUA)是一个去中心化的自治组织（DAO），其使命是帮助全球数百万专业人士打破桎梏，克服加密世界的高门槛，创建最大的虚拟现实建筑师公会，提供大量优秀的元宇宙建设者，实现的最终愿景是聚集越来越多的房地产相关资源和流量，作为有影响力的元界房地产的基础设施，连接现实和未来世界。目前，MUA DAO在全球范围内已经拥有超过2000名元宇宙建筑师入驻，包括各大知名事务所以及来自全球顶尖院校的建筑师。  
+
+   ![Img](/imgs/News/PARCELCreatorverse/20221003230309.jpg)
+
+  在此次MUA 2049的元宇宙主场地上，一共有五座元宇宙建筑入选作为主场馆：《赛博宇宙夜店（The Cyberverse Night Club）》以科幻与后现代风格诠释元宇宙建筑；《BYOB酒吧（BYOB Bar）》则运用了动态和光效的变化；《爱情与死亡酒吧（The Love and Death Bar）》充斥着朋克与动感；《海盗天堂（Pirate Paradise）》则用复古来展现神秘。  
+
+  ![Img](/imgs/News/PARCELCreatorverse/20221003230258.jpg)
+
+  由TOPVERSE设计的元宇宙建筑《创作者聚会（Creator Party-verse）》作为Web 3.0资讯平台深潮TECH FLOW、全球交易量最大（以美元计算）且拥有近2千万全球用户的加密货币交易平台KUCOIN、以及P2E平台FitR三家赛道头部项目方的主阵地，与全球的Web 3.0去中心化网络平台用户一同进行TOKEN2049的元宇宙盛宴。
+
+
+:model-content{src='/model/house/scene.gltf'}
+ 

locales/en-UK.json

@@ -183,9 +183,25 @@
     "vamx": {
       "sider": {
         "title": "Community Content",
+        "description": "",
         "condition": [
           "Publication", "Project", "Research"
         ]
+      },
+      "news": {
+        "title": "Community News",
+        "description": "",
+        "condition": [
+          "Publication", "Project", "Research"
+        ]
+      },
+      "join": {
+        "title": "Join us",
+        "description": ""
+      },
+      "structure": {
+        "title": "Structure",
+        "description": ""
       }
     }
   },

locales/zh-CN.json

@@ -176,9 +176,25 @@
     "vamx": {
       "sider": {
         "title": "社区内容",
+        "description": "",
         "condition": [
           "学术论文", "实践项目", "学术研究"
         ]
+      },
+      "news": {
+        "title": "社区动态",
+        "description": "",
+        "condition": [
+          "Publication", "Project", "Research"
+        ]
+      },
+      "join": {
+        "title": "加入我们",
+        "description": ""
+      },
+      "structure": {
+        "title": "组织结构",
+        "description": ""
       }
     }
   },

pages/community/vamx.vue

@@ -1,90 +1,3 @@
-<script setup>
-import { useCommunityArticle } from '~/config/pages/community/use-community-article'
-import { useCommunityTag } from '~/config/pages/community/use-community-tag'
-
-const items = useCommunityArticle()
-const tags = useCommunityTag()
-const data = ref([])
-
-const list = computed(() => {
-  if (!data.value.length)
-    return items
-
-  return items.filter((i) => {
-    return i.tags.some(j => data.value.includes(j))
-  })
-})
-
-const status = [
-  {
-    color: 'bg-green',
-    text: 'level[0]',
-  },
-  {
-    color: 'bg-amber',
-    text: 'level[1]',
-  },
-  {
-    color: 'bg-rose',
-    text: 'level[2]',
-  },
-]
-</script>
-
 <template>
-  <div class="mt-10 md:mt-20">
+  <NuxtPage />
-    <Section class="flex flex-col gap-4 md:flex-row">
-      <div>
-        <ACard
-          shadow="none"
-          :title="$t('community.vamx.sider.title')"
-          :subtitle="$t('filtrate.discription')"
-          class="w-full md:w-300px"
-        >
-          <!-- <img
-            src="/images/demo/minimal-1.jpg"
-            alt="girl"
-          > -->
-
-          <div class="a-card-body a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
-              <ACheckbox
-                v-for="tag in tags"
-                :key="tag.value"
-                v-model="data"
-                :value="tag.value"
-                :label="$t(tag.label)"
-              />
-            </div>
-
-            <!-- <ABtn>Read more</ABtn> -->
-          </div>
-        </ACard>
-      </div>
-
-      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
-        <!-- 👉 2nd card -->
-        <Card
-          v-for="(item, i) in list"
-          :key="i"
-          :class="[`animated-delay-${i * 100}ms`]"
-          :title="item.title"
-          :href="item.href"
-          :description="item.subtitle"
-          :img="item.img"
-          :avatar="item.avatar"
-          :author="item.author"
-          :profession="item.profession"
-          :create-time="item.createTime"
-        >
-          <template #footer>
-            <div class="flex flex-shrink-0 items-center gap-2">
-              <div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
-              {{ $t(status[item.level].text) }}
-            </div>
-          </template>
-        </Card>
-      </div>
-    </Section>
-  </div>
 </template>

pages/community/vamx/index.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { useCommunityArticle } from '~/config/pages/community/use-community-article'
+import { useCommunityTag } from '~/config/pages/community/use-community-tag'
+
+const items = useCommunityArticle()
+const tags = useCommunityTag()
+const data = ref([])
+
+const list = computed(() => {
+  if (!data.value.length)
+    return items
+
+  return items.filter((i) => {
+    return i.tags.some(j => data.value.includes(j))
+  })
+})
+
+const status = [
+  {
+    color: 'bg-green',
+    text: 'level[0]',
+  },
+  {
+    color: 'bg-amber',
+    text: 'level[1]',
+  },
+  {
+    color: 'bg-rose',
+    text: 'level[2]',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="fixed bottom-16 right-6 md:hidden"
+  >
+    <ABtn
+      class="text-xl"
+      icon-only
+      icon="i-material-symbols-view-headline"
+    >
+      <ATooltip
+        trigger="click"
+        class="[&_.a-tooltip]-bg-transparent"
+      >
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.sider.title')"
+          :subtitle="$t('filtrate.discription')"
+          class="w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+                class="mx-auto"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </ATooltip>
+    </ABtn>
+  </div>
+  <div class="mt-0 lg:mt-20">
+    <Section class="flex flex-col gap-4 md:flex-row">
+      <div>
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.sider.title')"
+          :subtitle="$t('filtrate.discription')"
+          class="hidden w-full md:block md:w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </div>
+
+      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+        <!-- 👉 2nd card -->
+        <Card
+          v-for="(item, i) in list"
+          :key="i"
+          :class="[`animated-delay-${i * 100}ms`]"
+          :title="item.title"
+          :href="item.href"
+          :description="item.subtitle"
+          :img="item.img"
+          :avatar="item.avatar"
+          :author="item.author"
+          :profession="item.profession"
+          :create-time="item.createTime"
+        >
+          <template #footer>
+            <div class="flex flex-shrink-0 items-center gap-2">
+              <div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
+              {{ $t(status[item.level].text) }}
+            </div>
+          </template>
+        </Card>
+      </div>
+    </Section>
+  </div>
+</template>

pages/community/vamx/join.vue

@@ -0,0 +1,109 @@
+<script setup>
+const { locale } = useI18n()
+
+const path = `/${locale.value}/community/join`
+
+const { data } = await useAsyncData(`content-${path}`, () => {
+  return queryContent().where({ _path: path }).findOne()
+})
+</script>
+
+<template>
+  <div
+    class="fixed bottom-16 right-6 md:hidden"
+  >
+    <ABtn
+      class="text-xl"
+      icon-only
+      icon="i-material-symbols-view-headline"
+    >
+      <ATooltip
+        trigger="click"
+        class="[&_.a-tooltip]-bg-transparent"
+      >
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.join.title')"
+          :subtitle="$t('community.vamx.join.discription')"
+          class="w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </ATooltip>
+    </ABtn>
+  </div>
+  <div class="mt-10 md:mt-20">
+    <Section class="flex flex-col gap-4 md:flex-row">
+      <div>
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.join.title')"
+          :subtitle="$t('community.vamx.join.discription')"
+          class="hidden w-full md:block md:w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </div>
+
+      <div class="w-full">
+        <ContentRenderer v-if="data" :value="data" />
+      </div>
+    </Section>
+  </div>
+</template>

pages/community/vamx/news.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { useNewsArticle } from '~/config/pages/community/news/use-news-article'
+import { useNewsTag } from '~/config/pages/community/news/use-news-tag'
+
+const items = useNewsArticle()
+const tags = useNewsTag()
+const data = ref([])
+
+const list = computed(() => {
+  if (!data.value.length)
+    return items
+
+  return items.filter((i) => {
+    return i.tags.some(j => data.value.includes(j))
+  })
+})
+
+const status = [
+  {
+    color: 'bg-green',
+    text: 'level[0]',
+  },
+  {
+    color: 'bg-amber',
+    text: 'level[1]',
+  },
+  {
+    color: 'bg-rose',
+    text: 'level[2]',
+  },
+]
+</script>
+
+<template>
+  <div
+    class="fixed bottom-16 right-6 md:hidden"
+  >
+    <ABtn
+      class="text-xl"
+      icon-only
+      icon="i-material-symbols-view-headline"
+    >
+      <ATooltip
+        trigger="click"
+        class="[&_.a-tooltip]-bg-transparent"
+      >
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.news.title')"
+          :subtitle="$t('community.vamx.news.discription')"
+          class="w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </ATooltip>
+    </ABtn>
+  </div>
+  <div class="mt-0 md:mt-20">
+    <Section class="flex flex-col gap-4 md:flex-row">
+      <div>
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.news.title')"
+          :subtitle="$t('community.vamx.news.discription')"
+          class="hidden w-full md:block md:w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/structure" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.structure.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </div>
+
+      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+        <!-- 👉 2nd card -->
+        <Card
+          v-for="(item, i) in list"
+          :key="i"
+          :class="[`animated-delay-${i * 100}ms`]"
+          :title="item.title"
+          :href="item.href"
+          :description="item.subtitle"
+          :img="item.img"
+          :avatar="item.avatar"
+          :author="item.author"
+          :profession="item.profession"
+          :create-time="item.createTime"
+        >
+          <template #footer>
+            <div class="flex flex-shrink-0 items-center gap-2">
+              <div class="h-10px w-10px rounded-full" :class="status[item.level].color" />
+              {{ $t(status[item.level].text) }}
+            </div>
+          </template>
+        </Card>
+      </div>
+    </Section>
+  </div>
+</template>

pages/community/vamx/structure.vue

@@ -0,0 +1,109 @@
+<script setup>
+const { locale } = useI18n()
+
+const path = `/${locale.value}/community/join`
+
+const { data } = await useAsyncData(`content-${path}`, () => {
+  return queryContent().where({ _path: path }).findOne()
+})
+</script>
+
+<template>
+  <div
+    class="fixed bottom-16 right-6 md:hidden"
+  >
+    <ABtn
+      class="text-xl"
+      icon-only
+      icon="i-material-symbols-view-headline"
+    >
+      <ATooltip
+        trigger="click"
+        class="[&_.a-tooltip]-bg-transparent"
+      >
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.structure.title')"
+          :subtitle="$t('community.vamx.structure.discription')"
+          class="w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </ATooltip>
+    </ABtn>
+  </div>
+  <div class="mt-10 md:mt-20">
+    <Section class="flex flex-col gap-4 md:flex-row">
+      <div>
+        <ACard
+          shadow="none"
+          :title="$t('community.vamx.structure.title')"
+          :subtitle="$t('community.vamx.structure.discription')"
+          class="hidden w-full md:block md:w-300px"
+        >
+          <!-- <img
+            src="/images/demo/minimal-1.jpg"
+            alt="girl"
+          > -->
+
+          <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
+            <div class="grid grid-rows-2 gap-y-3">
+              <ACheckbox
+                v-for="tag in tags"
+                :key="tag.value"
+                v-model="data"
+                :value="tag.value"
+                :label="$t(tag.label)"
+              />
+            </div>
+
+            <!-- <ABtn>Read more</ABtn> -->
+            <LocaleNuxtLink href="/community/vamx" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.sider.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/news" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.news.title') }}
+            </LocaleNuxtLink>
+
+            <LocaleNuxtLink href="/community/vamx/join" class="block p-2 font-bold hover:opacity-80">
+              {{ $t('community.vamx.join.title') }}
+            </LocaleNuxtLink>
+          </div>
+        </ACard>
+      </div>
+
+      <div class="w-full">
+        <ContentRenderer v-if="data" :value="data" />
+      </div>
+    </Section>
+  </div>
+</template>

pages/release/index.vue

@@ -19,7 +19,7 @@ const list = computed(() => {
 </script>
 
 <template>
-  <div class="mt-10 md:mt-20">
+  <div class="mt-0 lg:mt-20">
     <Section class="flex flex-col gap-4 md:flex-row">
       <div>
         <ACard