diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index fde5836..0000000
--- a/.eslintrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": [
-    "@antfu",
-    "@unocss"
-  ],
-  "rules": {
-    "@typescript-eslint/ban-ts-comment":"off"
-  }
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7839ae1..06bf150 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,51 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "i18n-ally.localesPaths": [
     "locales"
+  ],
+  // Enable the ESlint flat config support
+  // (remove this if your ESLint extension above v3.0.5)
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro"
   ]
 }
diff --git a/components/Footer.vue b/components/Footer.vue
index 89447dc..1fa5cab 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -6,7 +6,7 @@ const footer = useFoot()
 
 <template>
   <!-- <Divider /> -->
-  <div class="grid-row grid-cols-2 p-20 pt-30 lg:(grid-cols-3) md:(px-30) xl:px-60">
+  <div class="grid 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/header/mobile-nav.vue b/components/header/mobile-nav.vue
index cb5681a..2fe953b 100644
--- a/components/header/mobile-nav.vue
+++ b/components/header/mobile-nav.vue
@@ -45,7 +45,7 @@ const flag: any = {
             {{ $t(nav.title) }}
           </div>
 
-          <div class="grid-row gap-1 sm:grid-cols-2">
+          <div class="grid 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"
diff --git a/components/section/GradientCard.vue b/components/section/GradientCard.vue
index 8c1f65e..a1924f2 100644
--- a/components/section/GradientCard.vue
+++ b/components/section/GradientCard.vue
@@ -21,7 +21,7 @@ const colors = [
 <template>
   <Section>
     <Typography :topic="$t(topic)" />
-    <div class="grid-row gap-10 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
+    <div class="grid gap-10 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
       <div
         v-for="(col, i) in content"
         :key="i"
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..e7eb400
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,6 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  unocss: true,
+  vue: true,
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d194747..80ede9e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,7 +16,7 @@ export default defineNuxtConfig({
     '@vue-macros/nuxt',
     '@nuxt/content',
     '@nuxtjs/color-mode',
-    '@vite-pwa/nuxt',
+    // '@vite-pwa/nuxt',
     // '@aceforth/nuxt-optimized-images',
     // '@vueuse/components',
     // '@nuxt/image',
@@ -160,7 +160,7 @@ export default defineNuxtConfig({
     },
   },
 
-  pwa,
+  // pwa,
 
   devtools: {
     enabled: true,
diff --git a/package.json b/package.json
index 24969c4..f157ba2 100644
--- a/package.json
+++ b/package.json
@@ -12,37 +12,34 @@
     "start:generate": "serve .output/public"
   },
   "dependencies": {
-    "@anu-vue/nuxt": "^0.13.1",
+    "@anu-vue/nuxt": "^0.15.2",
     "@jiaminghi/color": "^1.1.3",
-    "@vueuse/components": "^10.1.2",
+    "@vueuse/components": "^10.9.0",
     "lingo3d-vue": "1.0.118",
-    "sass": "^1.62.1",
-    "swiper": "^9.2.4",
+    "sass": "^1.77.2",
+    "swiper": "^11.1.3",
     "unity-webgl": "^3.4.2",
-    "vue-tsc": "^2.0.7",
+    "vue-tsc": "^2.0.19",
     "vue-unity-webgl": "^1.2.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.4",
     "@iconify-json/carbon": "^1.1.16",
     "@iconify-json/twemoji": "^1.1.11",
     "@nuxt/content": "^2.6.0",
-    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/color-mode": "^3.4.0",
     "@nuxtjs/i18n": "8.3.1",
-    "@nuxtjs/strapi": "^1.9.1",
-    "@pinia/nuxt": "^0.4.8",
+    "@pinia/nuxt": "^0.5.1",
     "@unocss/nuxt": "0.60.3",
-    "@vite-pwa/nuxt": "^0.0.7",
-    "@vue-macros/nuxt": "^1.2.8",
+    "@vue-macros/nuxt": "^1.9.33",
     "@vueuse/nuxt": "^9.13.0",
-    "consola": "^3.0.1",
-    "eslint": "^8.38.0",
     "nuxt": "^3.11.2",
-    "pinia": "^2.0.34",
-    "serve": "14.2.0",
+    "pinia": "^2.1.7",
     "typescript": "^4.9.5",
-    "unocss-preset-extra": "^0.5.2",
-    "unocss-preset-scrollbar": "^0.2.1",
-    "unocss-preset-scrollbar-hide": "^1.0.1"
+    "unocss-preset-extra": "^0.5.3",
+    "unocss-preset-scrollbar": "^0.3.1",
+    "unocss-preset-scrollbar-hide": "^1.0.1",
+    "@antfu/eslint-config": "^2.18.1",
+    "eslint": "9.2.0",
+    "@unocss/eslint-plugin": "^0.60.2"
   }
 }
diff --git a/pages/community/vamx/index.vue b/pages/community/vamx/index.vue
index 542d7ab..3d0eef6 100644
--- a/pages/community/vamx/index.vue
+++ b/pages/community/vamx/index.vue
@@ -46,7 +46,7 @@ const status = [
           > -->
 
         <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-          <div class="grid grid-rows-2 gap-y-3">
+          <div class="grid grids-2 gap-y-3">
             <ACheckbox
               v-for="tag in tags"
               :key="tag.value"
@@ -88,7 +88,7 @@ const status = [
           > -->
 
           <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
+            <div class="grid grids-2 gap-y-3">
               <ACheckbox
                 v-for="tag in tags"
                 :key="tag.value"
@@ -115,7 +115,7 @@ const status = [
         </ACard>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 gap-4 grid w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in list"
diff --git a/pages/community/vamx/join.vue b/pages/community/vamx/join.vue
index d94264e..60d4dd0 100644
--- a/pages/community/vamx/join.vue
+++ b/pages/community/vamx/join.vue
@@ -23,7 +23,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           > -->
 
         <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-          <div class="grid grid-rows-2 gap-y-3">
+          <div class="grid grids-2 gap-y-3">
             <ACheckbox
               v-for="tag in tags"
               :key="tag.value"
@@ -64,7 +64,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           > -->
 
           <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
+            <div class="grid grids-2 gap-y-3">
               <ACheckbox
                 v-for="tag in tags"
                 :key="tag.value"
diff --git a/pages/community/vamx/news.vue b/pages/community/vamx/news.vue
index 5128a71..dca0559 100644
--- a/pages/community/vamx/news.vue
+++ b/pages/community/vamx/news.vue
@@ -91,7 +91,7 @@ const status = [
         </ACard>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid w-full gap-4 pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in list"
diff --git a/pages/community/vamx/structure.vue b/pages/community/vamx/structure.vue
index 2b6f04f..c726dcd 100644
--- a/pages/community/vamx/structure.vue
+++ b/pages/community/vamx/structure.vue
@@ -23,7 +23,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           > -->
 
         <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-          <div class="grid grid-rows-2 gap-y-3">
+          <div class="grid grids-2 gap-y-3">
             <ACheckbox
               v-for="tag in tags"
               :key="tag.value"
@@ -64,7 +64,7 @@ const { data } = await useAsyncData(`content-${path}`, () => {
           > -->
 
           <div class="a-card-body divide-y-1 divide-dark-50/10 a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
+            <div class="grid grids-2 gap-y-3">
               <ACheckbox
                 v-for="tag in tags"
                 :key="tag.value"
diff --git a/pages/index.vue b/pages/index.vue
index 6e79191..696ba0a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -62,7 +62,7 @@ const sectionNine = useSectionNine()
 
     <div ref="sectionThreeEl">
       <div
-        class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
+        class="grid py-10 gap-4 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
       >
         <ImageHover
           v-for="(content, i) in sectionThree.contentPrimary"
@@ -74,7 +74,7 @@ const sectionNine = useSectionNine()
           }]"
         />
       </div>
-      <div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
+      <div class="grid gap-4 pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
         <ImageHover
           v-for="(content, i) in sectionThree.contentSecondary"
           :key="i"
@@ -85,7 +85,7 @@ const sectionNine = useSectionNine()
           }]"
         />
       </div>
-      <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
+      <div class="grid gap-4 pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
         <ImageHover
           v-for="(content, i) in sectionThree.contentThird"
           :key="i"
@@ -115,7 +115,7 @@ const sectionNine = useSectionNine()
   <!-- Section Five -->
   <Section class="bg-gradient-blue text-white">
     <Typography :title=" $t(sectionFive.title) " :topic=" $t(sectionFive.topic) " :description=" $t(sectionFive.description) " class="pb-20 text-start" />
-    <div class="grid-row gap-26 pb-10 lg:(grid-cols-3) md:(grid-cols-2)">
+    <div class="grid gap-26 pb-10 lg:(grid-cols-3) md:(grid-cols-2)">
       <div
         v-for="(content, i) in sectionFive.content"
         :key="i"
@@ -171,7 +171,7 @@ const sectionNine = useSectionNine()
 
   <!-- Section Eight -->
   <Section>
-    <div class="grid-row grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
+    <div class="grid grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
       <div
         v-for="(content, i) in sectionEight.content"
         :key="i"
@@ -187,7 +187,7 @@ const sectionNine = useSectionNine()
       </div>
     </div>
 
-    <!-- <div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
+    <!-- <div class="grid rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
       <ATypography
         class="text-white"
         title="Awesome mobile"
diff --git a/pages/release/index.vue b/pages/release/index.vue
index 3f70a38..18ad1cd 100644
--- a/pages/release/index.vue
+++ b/pages/release/index.vue
@@ -33,7 +33,7 @@ const list = computed(() => {
           > -->
 
         <div class="a-card-body a-card-spacer">
-          <div class="grid grid-rows-2 gap-y-3">
+          <div class="grid grids-2 gap-y-3">
             <ACheckbox
               v-for="tag in tags"
               :key="tag.value"
@@ -63,7 +63,7 @@ const list = computed(() => {
           > -->
 
           <div class="a-card-body a-card-spacer">
-            <div class="grid grid-rows-2 gap-y-3">
+            <div class="grid grids-2 gap-y-3">
               <ACheckbox
                 v-for="tag in tags"
                 :key="tag.value"
@@ -78,7 +78,7 @@ const list = computed(() => {
         </ACard>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid gap-4 w-full pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in list"
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 35884d5..2e4fc14 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -2,7 +2,7 @@
   <NuxtPage />
 
   <!-- <Section>
-    <div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
+    <div class="grid rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
       <ATypography
         class="text-white"
         title="联系我们"
diff --git a/pages/solutions/aigc.vue b/pages/solutions/aigc.vue
index 4463c4c..3d636d5 100644
--- a/pages/solutions/aigc.vue
+++ b/pages/solutions/aigc.vue
@@ -9,7 +9,7 @@ const content = useAIGC()
   <!-- <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" /> -->
 
   <Section>
-    <div class="grid-row grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
+    <div class="grid grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
       <div
         v-for="(item, i) in content.feature.content"
         :key="i"
@@ -41,7 +41,7 @@ const content = useAIGC()
         </div>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in content.solutions.content"
diff --git a/pages/solutions/digital-twin.vue b/pages/solutions/digital-twin.vue
index e1e2437..1094dd8 100644
--- a/pages/solutions/digital-twin.vue
+++ b/pages/solutions/digital-twin.vue
@@ -9,7 +9,7 @@ const content = useDigitalTwin()
   <!-- <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" /> -->
 
   <Section>
-    <div class="grid-row grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
+    <div class="grid grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
       <div
         v-for="(item, i) in content.feature.content"
         :key="i"
@@ -41,7 +41,7 @@ const content = useDigitalTwin()
         </div>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in content.solutions.content"
diff --git a/pages/solutions/mixed-reality.vue b/pages/solutions/mixed-reality.vue
index 254feec..7964c65 100644
--- a/pages/solutions/mixed-reality.vue
+++ b/pages/solutions/mixed-reality.vue
@@ -9,7 +9,7 @@ const content = useMixedReality()
   <!-- <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" /> -->
 
   <Section>
-    <div class="grid-row grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
+    <div class="grid grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
       <div
         v-for="(item, i) in content.feature.content"
         :key="i"
@@ -41,7 +41,7 @@ const content = useMixedReality()
         </div>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in content.solutions.content"
diff --git a/pages/solutions/web3.vue b/pages/solutions/web3.vue
index 4257084..b8ef7dc 100644
--- a/pages/solutions/web3.vue
+++ b/pages/solutions/web3.vue
@@ -9,7 +9,7 @@ const content = useWeb3()
   <!-- <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" /> -->
 
   <Section>
-    <div class="grid-row grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
+    <div class="grid grid-cols-2 gap-20 pb-20 lg:(grid-cols-4)">
       <div
         v-for="(item, i) in content.feature.content"
         :key="i"
@@ -41,7 +41,7 @@ const content = useWeb3()
         </div>
       </div>
 
-      <div class="3xl:grid-cols-4 grid-row flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
+      <div class="3xl:grid-cols-4 grid flex-grow pb-10 2xl:grid-cols-3 lg:grid-cols-2">
         <!-- 👉 2nd card -->
         <Card
           v-for="(item, i) in content.solutions.content"
diff --git a/uno.config.ts b/uno.config.ts
index 3278869..6502936 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -10,7 +10,7 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import { presetAnu, presetIconExtraProperties } from 'anu-vue'
+import { presetAnu,  presetIconExtraProperties } from 'anu-vue'
 import { presetExtra } from 'unocss-preset-extra'
 import { presetScrollbar } from 'unocss-preset-scrollbar'
 import { presetScrollbarHide } from 'unocss-preset-scrollbar-hide'
@@ -104,10 +104,10 @@ export default defineConfig({
     presetAnu(),
     // default theme preset
     presetThemeDefault({
-      shortcutOverrides: {
-        'a-btn': 'ring-3 ring-primary',
-        'a-base-input-root': 'ring-3',
-      },
+      // shortcutOverrides: {
+        // 'a-btn': 'ring-3 ring-primary',
+        // 'a-base-input-root': 'ring-3',
+      // },
     }),
     presetUno(),
     presetMini(),