From 0255151e1c7556b1946d07085599ae13e6e4b434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E9=91=AB?= <1219654535@qq.com>
Date: Wed, 2 Aug 2023 15:53:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=A7=A3=E5=86=B3=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=95=B4=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/pages/solutions/use-aigc.ts          |  87 +++++++++++++++
 config/pages/solutions/use-digital-twin.ts  |  87 +++++++++++++++
 config/pages/solutions/use-mixed-reality.ts |  87 +++++++++++++++
 config/pages/solutions/use-web3.ts          |  82 ++++++++++++++
 pages/solutions/aigc.vue                    |  46 ++------
 pages/solutions/digital-twin.vue            | 114 ++++++--------------
 pages/solutions/mixed-reality.vue           |  44 +-------
 pages/solutions/web3.vue                    |  46 ++------
 8 files changed, 392 insertions(+), 201 deletions(-)
 create mode 100644 config/pages/solutions/use-aigc.ts
 create mode 100644 config/pages/solutions/use-digital-twin.ts
 create mode 100644 config/pages/solutions/use-mixed-reality.ts

diff --git a/config/pages/solutions/use-aigc.ts b/config/pages/solutions/use-aigc.ts
new file mode 100644
index 0000000..b84377d
--- /dev/null
+++ b/config/pages/solutions/use-aigc.ts
@@ -0,0 +1,87 @@
+export function useAIGC() {
+  return {
+    head: {
+      img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+      topic: 'Never Drink Alone：The Bar Symphony',
+      title: 'Metaverse Space Design',
+      description: 'Award-Winning Project',
+    },
+    feature: {
+      topic: 'home.sectionOne.topic',
+      description: 'home.sectionOne.description',
+      content: [
+        {
+          title: 'home.sectionOne.content.title[0]',
+          subtext: 'home.sectionOne.content.subtext[0]',
+          description: 'home.sectionOne.content.description[0]',
+        },
+        {
+          title: 'home.sectionOne.content.title[1]',
+          subtext: 'home.sectionOne.content.subtext[1]',
+          description: 'home.sectionOne.content.description[1]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+      ],
+    },
+    solutions: {
+      topic: 'home.sectionSix.topic',
+      description: 'home.sectionSix.description',
+      content: [
+        {
+          title: 'home.sectionSix.content.title[0]',
+          topic: 'home.sectionSix.content.topic[0]',
+          description: 'home.sectionSix.content.description[0]',
+          link: {
+            name: 'home.sectionSix.content.link[0]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+          errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[1]',
+          topic: 'home.sectionSix.content.topic[1]',
+          description: 'home.sectionSix.content.description[1]',
+          link: {
+            name: 'home.sectionSix.content.link[1]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/Circulus.gif',
+          errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[2]',
+          topic: 'home.sectionSix.content.topic[2]',
+          description: 'home.sectionSix.content.description[2]',
+          link: {
+            name: 'home.sectionSix.content.link[2]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+          errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[3]',
+          topic: 'home.sectionSix.content.topic[3]',
+          description: 'home.sectionSix.content.description[3]',
+          link: {
+            name: 'home.sectionSix.content.link[3]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/AIGC.gif',
+          errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
+        },
+
+      ],
+    },
+  }
+}
diff --git a/config/pages/solutions/use-digital-twin.ts b/config/pages/solutions/use-digital-twin.ts
new file mode 100644
index 0000000..0c46649
--- /dev/null
+++ b/config/pages/solutions/use-digital-twin.ts
@@ -0,0 +1,87 @@
+export function useDigitalTwin() {
+  return {
+    head: {
+      img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+      topic: 'Never Drink Alone：The Bar Symphony',
+      title: 'Metaverse Space Design',
+      description: 'Award-Winning Project',
+    },
+    feature: {
+      topic: 'home.sectionOne.topic',
+      description: 'home.sectionOne.description',
+      content: [
+        {
+          title: 'home.sectionOne.content.title[0]',
+          subtext: 'home.sectionOne.content.subtext[0]',
+          description: 'home.sectionOne.content.description[0]',
+        },
+        {
+          title: 'home.sectionOne.content.title[1]',
+          subtext: 'home.sectionOne.content.subtext[1]',
+          description: 'home.sectionOne.content.description[1]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+      ],
+    },
+    solutions: {
+      topic: 'home.sectionSix.topic',
+      description: 'home.sectionSix.description',
+      content: [
+        {
+          title: 'home.sectionSix.content.title[0]',
+          topic: 'home.sectionSix.content.topic[0]',
+          description: 'home.sectionSix.content.description[0]',
+          link: {
+            name: 'home.sectionSix.content.link[0]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+          errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[1]',
+          topic: 'home.sectionSix.content.topic[1]',
+          description: 'home.sectionSix.content.description[1]',
+          link: {
+            name: 'home.sectionSix.content.link[1]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/Circulus.gif',
+          errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[2]',
+          topic: 'home.sectionSix.content.topic[2]',
+          description: 'home.sectionSix.content.description[2]',
+          link: {
+            name: 'home.sectionSix.content.link[2]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+          errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[3]',
+          topic: 'home.sectionSix.content.topic[3]',
+          description: 'home.sectionSix.content.description[3]',
+          link: {
+            name: 'home.sectionSix.content.link[3]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/AIGC.gif',
+          errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
+        },
+
+      ],
+    },
+  }
+}
diff --git a/config/pages/solutions/use-mixed-reality.ts b/config/pages/solutions/use-mixed-reality.ts
new file mode 100644
index 0000000..9504783
--- /dev/null
+++ b/config/pages/solutions/use-mixed-reality.ts
@@ -0,0 +1,87 @@
+export function useMixedReality() {
+  return {
+    head: {
+      img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+      topic: 'Never Drink Alone：The Bar Symphony',
+      title: 'Metaverse Space Design',
+      description: 'Award-Winning Project',
+    },
+    // feature: {
+    //   topic: 'home.sectionOne.topic',
+    //   description: 'home.sectionOne.description',
+    //   content: [
+    //     {
+    //       title: 'home.sectionOne.content.title[0]',
+    //       subtext: 'home.sectionOne.content.subtext[0]',
+    //       description: 'home.sectionOne.content.description[0]',
+    //     },
+    //     {
+    //       title: 'home.sectionOne.content.title[1]',
+    //       subtext: 'home.sectionOne.content.subtext[1]',
+    //       description: 'home.sectionOne.content.description[1]',
+    //     },
+    //     {
+    //       title: 'home.sectionOne.content.title[2]',
+    //       subtext: 'home.sectionOne.content.subtext[2]',
+    //       description: 'home.sectionOne.content.description[2]',
+    //     },
+    //     {
+    //       title: 'home.sectionOne.content.title[2]',
+    //       subtext: 'home.sectionOne.content.subtext[2]',
+    //       description: 'home.sectionOne.content.description[2]',
+    //     },
+    //   ],
+    // },
+    solutions: {
+      topic: 'home.sectionSix.topic',
+      description: 'home.sectionSix.description',
+      content: [
+        {
+          title: 'home.sectionSix.content.title[0]',
+          topic: 'home.sectionSix.content.topic[0]',
+          description: 'home.sectionSix.content.description[0]',
+          link: {
+            name: 'home.sectionSix.content.link[0]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+          errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[1]',
+          topic: 'home.sectionSix.content.topic[1]',
+          description: 'home.sectionSix.content.description[1]',
+          link: {
+            name: 'home.sectionSix.content.link[1]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/Circulus.gif',
+          errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[2]',
+          topic: 'home.sectionSix.content.topic[2]',
+          description: 'home.sectionSix.content.description[2]',
+          link: {
+            name: 'home.sectionSix.content.link[2]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+          errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[3]',
+          topic: 'home.sectionSix.content.topic[3]',
+          description: 'home.sectionSix.content.description[3]',
+          link: {
+            name: 'home.sectionSix.content.link[3]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/AIGC.gif',
+          errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
+        },
+
+      ],
+    },
+  }
+}
diff --git a/config/pages/solutions/use-web3.ts b/config/pages/solutions/use-web3.ts
index e73c053..4f3bcaa 100644
--- a/config/pages/solutions/use-web3.ts
+++ b/config/pages/solutions/use-web3.ts
@@ -1,5 +1,87 @@
 export function useWeb3() {
   return {
+    head: {
+      img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
+      topic: 'Never Drink Alone：The Bar Symphony',
+      title: 'Metaverse Space Design',
+      description: 'Award-Winning Project',
+    },
+    feature: {
+      topic: 'home.sectionOne.topic',
+      description: 'home.sectionOne.description',
+      content: [
+        {
+          title: 'home.sectionOne.content.title[0]',
+          subtext: 'home.sectionOne.content.subtext[0]',
+          description: 'home.sectionOne.content.description[0]',
+        },
+        {
+          title: 'home.sectionOne.content.title[1]',
+          subtext: 'home.sectionOne.content.subtext[1]',
+          description: 'home.sectionOne.content.description[1]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+        {
+          title: 'home.sectionOne.content.title[2]',
+          subtext: 'home.sectionOne.content.subtext[2]',
+          description: 'home.sectionOne.content.description[2]',
+        },
+      ],
+    },
+    solutions: {
+      topic: 'home.sectionSix.topic',
+      description: 'home.sectionSix.description',
+      content: [
+        {
+          title: 'home.sectionSix.content.title[0]',
+          topic: 'home.sectionSix.content.topic[0]',
+          description: 'home.sectionSix.content.description[0]',
+          link: {
+            name: 'home.sectionSix.content.link[0]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+          errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[1]',
+          topic: 'home.sectionSix.content.topic[1]',
+          description: 'home.sectionSix.content.description[1]',
+          link: {
+            name: 'home.sectionSix.content.link[1]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/Circulus.gif',
+          errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[2]',
+          topic: 'home.sectionSix.content.topic[2]',
+          description: 'home.sectionSix.content.description[2]',
+          link: {
+            name: 'home.sectionSix.content.link[2]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+          errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
+        },
+        {
+          title: 'home.sectionSix.content.title[3]',
+          topic: 'home.sectionSix.content.topic[3]',
+          description: 'home.sectionSix.content.description[3]',
+          link: {
+            name: 'home.sectionSix.content.link[3]',
+            href: '#',
+          },
+          img: '/imgs/Home-Solutions&Services/AIGC.gif',
+          errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
+        },
 
+      ],
+    },
   }
 }
diff --git a/pages/solutions/aigc.vue b/pages/solutions/aigc.vue
index 80f63de..9ad5ea0 100644
--- a/pages/solutions/aigc.vue
+++ b/pages/solutions/aigc.vue
@@ -1,51 +1,17 @@
 <script setup lang="ts">
-import { useSectionSix } from '~/config/pages/home/use-section-six'
+import { useAIGC } from '~/config/pages/solutions/use-aigc'
 
-const sectionOne = {
-  topic: 'home.sectionOne.topic',
-  description: 'home.sectionOne.description',
-  content: [
-    {
-      title: 'home.sectionOne.content.title[0]',
-      subtext: 'home.sectionOne.content.subtext[0]',
-      description: 'home.sectionOne.content.description[0]',
-    },
-    {
-      title: 'home.sectionOne.content.title[1]',
-      subtext: 'home.sectionOne.content.subtext[1]',
-      description: 'home.sectionOne.content.description[1]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-  ],
-}
-
-const data = {
-  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
-  topic: 'Never Drink Alone：The Bar Symphony',
-  title: 'Metaverse Space Design',
-  description: 'Award-Winning Project',
-}
-
-const sectionSix = useSectionSix()
+const content = useAIGC()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
+  <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
 
   <Section>
-    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+    <Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.description) " />
 
-    <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 v-for="(item, i) in content.solutions.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" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
diff --git a/pages/solutions/digital-twin.vue b/pages/solutions/digital-twin.vue
index 5d21d68..5cae041 100644
--- a/pages/solutions/digital-twin.vue
+++ b/pages/solutions/digital-twin.vue
@@ -1,94 +1,44 @@
 <script setup lang="ts">
-import { useSectionThree } from '~/config/pages/home/use-section-three'
+import { useDigitalTwin } from '~/config/pages/solutions/use-digital-twin'
 
-const sectionOne = {
-  topic: 'home.sectionOne.topic',
-  description: 'home.sectionOne.description',
-  content: [
-    {
-      title: 'home.sectionOne.content.title[0]',
-      subtext: 'home.sectionOne.content.subtext[0]',
-      description: 'home.sectionOne.content.description[0]',
-    },
-    {
-      title: 'home.sectionOne.content.title[1]',
-      subtext: 'home.sectionOne.content.subtext[1]',
-      description: 'home.sectionOne.content.description[1]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-  ],
-}
-
-const data = {
-  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
-  topic: 'Never Drink Alone：The Bar Symphony',
-  title: 'Metaverse Space Design',
-  description: 'Award-Winning Project',
-}
-
-const sectionThree = useSectionThree()
-const sectionThreeEl = ref(null)
-const sectionThreeVis = useElementVisibility(sectionThreeEl)
+const content = useDigitalTwin()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
+  <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
 
-  <!-- Section Three -->
-  <Section text-center class="section-three">
-    <Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
+  <Section>
+    <Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.description) " />
 
-    <div ref="sectionThreeEl">
-      <div
-        class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
-      >
-        <ImageHover
-          v-for="(content, i) in sectionThree.contentPrimary"
-          :key="i"
-          :href="content.href" :img="content.img" :topic="content.topic"
-          class="min-h-200px"
-          :class="[`animated-delay-${i * 100}ms`, {
-            'animated animated-fade-in-up animated-faster': sectionThreeVis,
-          }]"
-        />
+    <div v-for="(item, i) in content.solutions.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" :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>
-      <div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
-        <ImageHover
-          v-for="(content, i) in sectionThree.contentSecondary"
-          :key="i"
-          :href="content.href" :img="content.img" :topic="content.topic"
-          class="min-h-200px"
-          :class="[`animated-delay-${i * 100}ms`, {
-            'animated animated-fade-in-up animated-faster': sectionThreeVis,
-          }]"
-        />
-      </div>
-      <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
-        <ImageHover
-          v-for="(content, i) in sectionThree.contentThird"
-          :key="i"
-          :href="content.href" :img="content.img" :topic="content.topic"
-          class="min-h-200px"
-          :class="[`animated-delay-${i * 100}ms`, {
-            'animated animated-fade-in-up': sectionThreeVis,
-          }]"
-        />
+
+      <div class="w-55% flex-grow">
+        <div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
+          <p class="text-title">
+            {{ $t(item.title) }}
+          </p>
+          <h4 class="text-h4 font-bold">
+            {{ $t(item.topic) }}
+          </h4>
+          <p class="text-h6 text-center md:text-left">
+            {{ $t(item.description) }}
+          </p>
+          <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" />
+              </ABtn>
+            </LocaleNuxtLink>
+          </div>
+        </div>
       </div>
     </div>
-    <LocaleNuxtLink :href="sectionThree.link.href">
-      <ABtn variant="light">
-        {{ $t(sectionThree.link.name) }}
-      </ABtn>
-    </LocaleNuxtLink>
   </Section>
 </template>
diff --git a/pages/solutions/mixed-reality.vue b/pages/solutions/mixed-reality.vue
index 166571a..8e8bc60 100644
--- a/pages/solutions/mixed-reality.vue
+++ b/pages/solutions/mixed-reality.vue
@@ -1,50 +1,16 @@
 <script setup lang="ts">
-import { useSectionSix } from '~/config/pages/home/use-section-six'
+import { useMixedReality } from '~/config/pages/solutions/use-mixed-reality'
 
-const sectionOne = {
-  topic: 'home.sectionOne.topic',
-  description: 'home.sectionOne.description',
-  content: [
-    {
-      title: 'home.sectionOne.content.title[0]',
-      subtext: 'home.sectionOne.content.subtext[0]',
-      description: 'home.sectionOne.content.description[0]',
-    },
-    {
-      title: 'home.sectionOne.content.title[1]',
-      subtext: 'home.sectionOne.content.subtext[1]',
-      description: 'home.sectionOne.content.description[1]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-  ],
-}
-
-const data = {
-  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
-  topic: 'Never Drink Alone：The Bar Symphony',
-  title: 'Metaverse Space Design',
-  description: 'Award-Winning Project',
-}
-
-const sectionSix = useSectionSix()
+const mixedReality = useMixedReality()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionBanner :img="mixedReality.head?.img" :title="mixedReality.head?.title" :topic="mixedReality.head?.topic" :description="mixedReality.head?.description" font-bold text-white />
 
   <Section>
-    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+    <Typography :topic=" $t(mixedReality.solutions.topic) " :description=" $t(mixedReality.solutions.description) " />
 
-    <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 v-for="(item, i) in mixedReality.solutions.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" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />
diff --git a/pages/solutions/web3.vue b/pages/solutions/web3.vue
index 80f63de..7a64cd0 100644
--- a/pages/solutions/web3.vue
+++ b/pages/solutions/web3.vue
@@ -1,51 +1,17 @@
 <script setup lang="ts">
-import { useSectionSix } from '~/config/pages/home/use-section-six'
+import { useWeb3 } from '~/config/pages/solutions/use-web3'
 
-const sectionOne = {
-  topic: 'home.sectionOne.topic',
-  description: 'home.sectionOne.description',
-  content: [
-    {
-      title: 'home.sectionOne.content.title[0]',
-      subtext: 'home.sectionOne.content.subtext[0]',
-      description: 'home.sectionOne.content.description[0]',
-    },
-    {
-      title: 'home.sectionOne.content.title[1]',
-      subtext: 'home.sectionOne.content.subtext[1]',
-      description: 'home.sectionOne.content.description[1]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-    {
-      title: 'home.sectionOne.content.title[2]',
-      subtext: 'home.sectionOne.content.subtext[2]',
-      description: 'home.sectionOne.content.description[2]',
-    },
-  ],
-}
-
-const data = {
-  img: '/imgs/Project/Metaverse-Build/MusicVenue.jpg',
-  topic: 'Never Drink Alone：The Bar Symphony',
-  title: 'Metaverse Space Design',
-  description: 'Award-Winning Project',
-}
-
-const sectionSix = useSectionSix()
+const content = useWeb3()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
+  <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
 
   <Section>
-    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
+    <Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.description) " />
 
-    <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 v-for="(item, i) in content.solutions.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" :err-src="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy" />