chore: 解决方案数据整合

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',
+        },
+
+      ],
+    },
+  }
+}

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',
+        },
+
+      ],
+    },
+  }
+}

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',
+        },
+
+      ],
+    },
+  }
+}

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',
+        },
 
+      ],
+    },
   }
 }

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 = {
+const content = useAIGC()
-  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()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <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" />

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 = {
+const content = useDigitalTwin()
-  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)
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <SectionGradientCard :content="content.feature.content" :topic="content.feature.topic" />
 
-  <!-- Section Three -->
+  <Section>
-  <Section text-center class="section-three">
+    <Typography :topic=" $t(content.solutions.topic) " :description=" $t(content.solutions.description) " />
-    <Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
 
-    <div ref="sectionThreeEl">
+    <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
+      <div class="w-45% flex-grow">
-        class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`"
+        <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" />
-        <ImageHover
+          <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
-          v-for="(content, i) in sectionThree.contentPrimary"
+        </div>
-          :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-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
+
-        <ImageHover
+      <div class="w-55% flex-grow">
-          v-for="(content, i) in sectionThree.contentSecondary"
+        <div class="h-full w-full flex flex-col items-center justify-center px-2 md:(items-start px-16)">
-          :key="i"
+          <p class="text-title">
-          :href="content.href" :img="content.img" :topic="content.topic"
+            {{ $t(item.title) }}
-          class="min-h-200px"
+          </p>
-          :class="[`animated-delay-${i * 100}ms`, {
+          <h4 class="text-h4 font-bold">
-            'animated animated-fade-in-up animated-faster': sectionThreeVis,
+            {{ $t(item.topic) }}
-          }]"
+          </h4>
-        />
+          <p class="text-h6 text-center md:text-left">
-      </div>
+            {{ $t(item.description) }}
-      <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
+          </p>
-        <ImageHover
+          <div v-if="item.link" class="w-full py-10 text-center md:text-left">
-          v-for="(content, i) in sectionThree.contentThird"
+            <LocaleNuxtLink :href="item.link.href">
-          :key="i"
+              <ABtn variant="light" class="group">
-          :href="content.href" :img="content.img" :topic="content.topic"
+                {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
-          class="min-h-200px"
+              </ABtn>
-          :class="[`animated-delay-${i * 100}ms`, {
+            </LocaleNuxtLink>
-            'animated animated-fade-in-up': sectionThreeVis,
+          </div>
-          }]"
+        </div>
-        />
       </div>
     </div>
-    <LocaleNuxtLink :href="sectionThree.link.href">
-      <ABtn variant="light">
-        {{ $t(sectionThree.link.name) }}
-      </ABtn>
-    </LocaleNuxtLink>
   </Section>
 </template>

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 = {
+const mixedReality = useMixedReality()
-  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()
 </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" />

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 = {
+const content = useWeb3()
-  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()
 </script>
 
 <template>
-  <SectionBanner :img="data?.img" :title="data?.title" :topic="data?.topic" :description="data?.description" font-bold text-white />
+  <SectionBanner :img="content.head?.img" :title="content.head?.title" :topic="content.head?.topic" :description="content.head?.description" font-bold text-white />
-  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
+  <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" />