fix: 一些语言转换问题 carousel foot，优化组件

components/Carousel.vue

@@ -7,38 +7,34 @@ const { state: pages, next, prev } = useCycleList(carousels.map((_, i) => i), {
   initialValue: 0,
 })
 
-useIntervalFn(() => {
+onMounted(() => {
+  useIntervalFn(() => {
     next()
-}, 2500)
+  }, 3500)
+})
 </script>
 
 <template>
+  <div class="relative h-500px w-full overflow-hidden md:h-600px xl:h-700px">
     <AViews
       v-model="pages"
+      h-full
+      class="[&>.a-views-wrapper]:h-full"
     >
-    <AView v-for="(item, i) in carousels" :key="i" :value="i">
+      <AView v-for="(item, i) in carousels" :key="i" :value="i" h-full>
-      <div class="relative h-full max-h-700px min-h-500px w-full flex items-center justify-center bg-transparent">
+        <img :src="item.img" style="object-fit: cover;height:100%;width: 100%;">
-        <!-- <div class="absolute absolute z-10 text-shadow">
-          <h2 class="text-h2 text-start text-amber-700 dark:text-white">
-            {{ $t(item.title) }}
-          </h2>
-          <p class="text-h3 text-start">
-            {{ $t(item.description) }}
-          </p>
-          <NuxtLink :href="item.link.href">
-            <ABtn class="text-xl">
-              {{ $t(item.link.name) }}
-            </ABtn>
-          </NuxtLink>
-        </div> -->
-        <div class="absolute left-0 top-0 z-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none;" />
-        <img :src="item.img">
-      </div>
-      <!-- <ACard
-        :title="item.title"
-        class="h-300px shadow-none"
-        :text="item.description"
-      /> -->
       </AView>
     </AViews>
+
+    <div class="absolute top-0 z-10 h-full w-full flex items-center justify-center text-shadow">
+      <Typography
+        text-color="white"
+        :topic="$t(carousels[pages].title)" :description="$t(carousels[pages].description)" :link="{
+          ...carousels[pages].link,
+          name: $t(carousels[pages].link.name),
+        }"
+      />
+    </div>
+    <div class="absolute left-0 top-0 z-1 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 65%, hsl(var(--a-body-bg-c))); pointer-events: none; pointer-events: none;" />
+  </div>
 </template>

components/Footer.vue

@@ -8,7 +8,7 @@ const footer = useFoot()
   <Divider />
   <div class="grid-row p-20 pt-30 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
     <div
-      v-for="(col, i) in footer"
+      v-for="(col, i) in footer.links"
       :key="i"
       class="w-full flex flex-col items-center gap-8"
     >
@@ -17,13 +17,23 @@ const footer = useFoot()
       </h5>
 
       <NuxtLink v-for="(item, i) in col.child" :key="i" class="font-bold" :href="item.link.href">
-        {{ item.link.name }}
+        {{ $t(item.link.name) }}
       </NuxtLink>
     </div>
   </div>
-  <div my-10 flex items-center justify-center gap-4>
+  <div my-10 flex flex-col items-center justify-center gap-4>
+    <div flex items-center gap-4>
       <BrandLogo />
-    © Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
       <DarkToggle />
     </div>
+    <p>
+      {{ $t(footer.copyright) }}
+    </p>
+    <p>
+      {{ $t(footer.release) }}
+    </p>
+    <p v-for="(record, i) in footer.record" :key="i">
+      {{ $t(record) }}
+    </p>
+  </div>
 </template>

components/ImageHover.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+$defineProps<{
+  img: string
+  topic: string
+  href: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+  >
+    <img :src="img" class="h-full w-full" style="object-fit: cover;">
+    <div class="mask-img opacity-0 group-hover:opacity-100">
+      <div class="text-h6 w-full">
+        <p :title="$t(topic)" class="w-90% truncate text-white">
+          {{ $t(topic) }}
+        </p>
+      </div>
+      <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
+    </div>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.mask-img{
+    --uno:'absolute bottom-0 left-0 z-1 flex h-50px w-full items-center justify-center border-t-2px border-dark-50/10 bg-black/15 p-2 px-10 backdrop-blur-md transition ';
+    box-shadow: 0 -5px 25px rgba(0,0,0,0.4);
+  }
+</style>

components/Typography.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+$defineProps<{
+  img: string
+  title?: string
+  topic?: string
+  description?: string
+  link?: {
+    href: string
+    name: string
+  }
+  textColor?: 'white' | 'black'
+}>()
+</script>
+
+<template>
+  <div class="text-center">
+    <p v-if="title" class="text-title" :class="`text-${textColor}`" drop-shadow>
+      {{ title }}
+    </p>
+    <h2 v-if="topic" class="text-h2" :class="`text-${textColor}`" drop-shadow>
+      {{ topic }}
+    </h2>
+    <p v-if="description" :class="`text-${textColor}`" text-h6 pb-5 drop-shadow>
+      {{
+        description
+      }}
+    </p>
+    <NuxtLink v-if="link" :href="link?.href">
+      <ABtn>
+        {{ link?.name }}
+      </ABtn>
+    </NuxtLink>
+  </div>
+</template>

components/header/nav.vue

@@ -12,7 +12,7 @@ const navs = useNav()
           <AList
             :items="nav.child"
             avatar-append
-            class="[--a-list-item-gap:1rem] [--a-spacing:1] border-3px border-light-50/20 !m-0 divide-y divide-dark-50/10 dark:divide-light-50/10"
+            class="[--a-list-item-gap:1rem] [--a-spacing:1] border-1px border-light-50/20 !m-0 divide-y divide-dark-50/10 dark:(border-dark-50/20 divide-light-50/10)"
           >
             <NuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="overflow-hidden py-1 hover:(bg-primary/20)" active-class="bg-primary/20">
               <AListItem

components/section/Banner.vue

@@ -29,23 +29,8 @@ function getMask() {
     relative h-380px md:h-400px xl:h-450px
   >
     <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${img}');-webkit-mask-image:${getMask()}`" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
+    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
-      <p v-if="title" class="text-title" drop-shadow>
+      <Typography :title="title" :topic="topic" :description="description" :link="link" />
-        {{ title }}
-      </p>
-      <h2 v-if="topic" class="text-h2" text-white drop-shadow>
-        {{ topic }}
-      </h2>
-      <p v-if="description" text-h6 pb-5 drop-shadow>
-        {{
-          description
-        }}
-      </p>
-      <NuxtLink v-if="link" :href="link?.href">
-        <ABtn>
-          {{ link?.name }}
-        </ABtn>
-      </NuxtLink>
     </Section>
   </Section>
 </template>

components/section/GradientCard.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+$defineProps<{
+  topic: string
+  content: {
+    title: string
+    subtext: string
+    description: string
+  }[]
+}>()
+
+const colors = [
+  'text-gradient-pink',
+  'text-gradient-blue',
+  'text-gradient-green',
+  'text-gradient-rose',
+  'text-gradient-purple',
+  'text-gradient-yello',
+]
+</script>
+
+<template>
+  <Section>
+    <Typography :topic="$t(topic)" />
+    <div class="grid-row gap-0 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
+      <div
+        v-for="(col, i) in content"
+        :key="i"
+        class="h-full w-full flex flex-col items-center justify-center"
+      >
+        <h2 :title="$t(col.title)" class="text-h2 w-full text-center text-7xl font-bold text-transparent" :class="colors[i]">
+          {{ $t(col.title) }}
+        </h2>
+      </div>
+      <div
+        v-for="(col, i) in content"
+        :key="i"
+        class="h-full w-full flex flex-col items-center justify-center"
+      >
+        <h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 break-words">
+          {{ $t(col.subtext) }}
+        </h5>
+      </div>
+      <div
+        v-for="(col, i) in content"
+        :key="i"
+        class="h-full w-full flex flex-col items-center justify-center"
+      >
+        <p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
+          {{ $t(col.description) }}
+        </p>
+      </div>
+    </div>
+  </Section>
+</template>

config/pages/home/use-carousel.ts

@@ -7,8 +7,16 @@ export function useCarousel() {
         name: 'home.carousel.link[0]',
         href: '#',
       },
-
       img: '/imgs/Home.Creatorverse.jpg',
     },
+    {
+      title: 'home.carousel.topic[1]',
+      description: 'home.carousel.description[1]',
+      link: {
+        name: 'home.carousel.link[1]',
+        href: '#',
+      },
+      img: '/imgs/1 (8).jpg',
+    },
   ]
 }

config/pages/home/use-section-two.ts

@@ -1,6 +1,7 @@
 export function useSectionTwo() {
   return {
     title: 'home.sectionTwo.title',
+    description: 'home.sectionTwo.description',
     content: [
       {
         img: '/imgs/Partners/MUA.png',

config/use-foot.ts

@@ -3,75 +3,80 @@ export function useFoot() {
 
   const path = locale.value === 'zh' ? '/' : `/${locale.value}`
 
-  return [
+  return {
+    copyright: 'foot.copyright',
+    release: 'foot.release',
+    record: ['foot.record[0]', 'foot.record[1]'],
+    links: [
       {
-      title: 'foot.group1.name',
+        title: 'foot.links[0].group',
         child: [
           {
             link: {
-            name: 'foot.group1.link1',
+              name: 'foot.links[0].link[0]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group1.link2',
+              name: 'foot.links[0].link[1]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group1.link3',
+              name: 'foot.links[0].link[2]',
               href: '#',
             },
           },
         ],
       },
       {
-      title: 'foot.group2.name',
+        title: 'foot.links[1].group',
         child: [
           {
             link: {
-            name: 'foot.group2.link1',
+              name: 'foot.links[1].link[0]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group2.link2',
+              name: 'foot.links[1].link[1]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group2.link3',
+              name: 'foot.links[1].link[2]',
               href: '#',
             },
           },
         ],
       },
       {
-      title: 'foot.group3.name',
+        title: 'foot.links[2].group',
         child: [
           {
             link: {
-            name: 'foot.group3.link1',
+              name: 'foot.links[2].link[0]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group3.link2',
+              name: 'foot.links[2].link[1]',
               href: '#',
             },
           },
           {
             link: {
-            name: 'foot.group3.link3',
+              name: 'foot.links[2].link[2]',
               href: '#',
             },
           },
         ],
       },
-  ]
+    ],
+  }
 }

locales/en-UK.json

@@ -2,11 +2,11 @@
   "nav": {
     "news": "News",
     "home": "Home",
-    "event":{
+    "event": {
-      "t":"Events",
+      "t": "Events",
-      "child":{
+      "child": {
-        "act":["AaaO!","TOPO Land"],
+        "act": ["AaaO!", "TOPO Land"],
-        "description":["Architecture as an Object", "Topverse Meta Island"]
+        "description": ["Architecture as an Object", "Topverse Meta Island"]
       }
     },
 
@@ -14,8 +14,8 @@
       "t": "Solutions",
       "child": {
         "land": {
-          "service":["Web 3.0","Digital Twins","Mixed Reality"],
+          "service": ["Web 3.0", "Digital Twins", "Mixed Reality"],
-          "description": ["The quick brown fox jumps over the lazy dog.","IRL World in Digital","Immersive Creations"]
+          "description": ["The quick brown fox jumps over the lazy dog.", "IRL World in Digital", "Immersive Creations"]
         }
       }
     },
@@ -62,7 +62,7 @@
       "title": "SHOWCASE",
       "topic": "Success Stories",
       "description": "See how TOPVERSE® brings the virtual world into reality",
-      "contentPrimary":{
+      "contentPrimary": {
         "topic": [
           "Spotlight: Music Venue",
           "Parcel Creatorverse Spotlight: Meeting Venue"
@@ -91,5 +91,20 @@
       "topic": "DIVE INTO THE NEW WORLD WITH TOPVERSE® LAB",
       "description": ""
     }
+  },
+  "foot": {
+    "copyright": "© Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved",
+    "release": "增值电信业务经营许可证：合字B2-20090007",
+    "record": ["京ICP备10036305号-7", "京公网安备11010802022657号"],
+    "links": [
+      {
+        "group": "testname",
+        "link": ["test", "test2", "test3"]
+      },
+      {
+        "group": "testname2",
+        "link": ["test", "test2", "test3"]
+      }
+    ]
   }
 }

locales/zh-CN.json

@@ -2,11 +2,11 @@
   "nav": {
     "news": "最新动态",
     "home": "首页",
-    "event":{
+    "event": {
-      "t":"项目发起",
+      "t": "项目发起",
-      "child":{
+      "child": {
-        "act":["AaaO!","TOPO Land"],
+        "act": ["AaaO!", "TOPO Land"],
-        "description":["未建成建筑系列", "TOPO元界岛"]
+        "description": ["未建成建筑系列", "TOPO元界岛"]
       }
     },
 
@@ -14,8 +14,8 @@
       "t": "解决方案",
       "child": {
         "land": {
-          "service":["Web 3.0","数字孪生","混合现实"],
+          "service": ["Web 3.0", "数字孪生", "混合现实"],
-          "description": ["区块链及元宇宙空间板块","智慧城市及工业元宇宙解决方案","虚拟、混合现实内容开发"]
+          "description": ["区块链及元宇宙空间板块", "智慧城市及工业元宇宙解决方案", "虚拟、混合现实内容开发"]
         }
       }
     },
@@ -27,14 +27,14 @@
   },
   "scrolldown": "Scroll down to learn more",
   "home": {
-    "carousel":{
+    "carousel": {
-      "one":{
+      "one": {
-        "topic":"Never Drink Alone 元宇宙酒吧",
+        "topic": "Never Drink Alone 元宇宙酒吧",
-        "description":"The Bar Symphony: 在元宇宙中找到共鸣"
+        "description": "The Bar Symphony: 在元宇宙中找到共鸣"
       },
-      "two":{
+      "two": {
-        "topic":"",
+        "topic": "",
-        "description":""
+        "description": ""
       }
     },
     "sectionOne": {
@@ -76,4 +76,3 @@
     }
   }
 }
-

pages/index.vue

@@ -24,35 +24,12 @@ const sectionNine = useSectionNine()
   <Carousel class="mb-5" />
   <Divider />
   <!-- Section One -->
-  <Section>
+  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
-    <h2 class="text-h2" :title="$t(sectionOne.topic)">
-      {{ $t(sectionOne.topic) }}
-    </h2>
-    <div class="grid-row pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionOne.content.length}`">
-      <div
-        v-for="(col, i) in sectionOne.content"
-        :key="i"
-        class="w-full overflow-hidden text-center"
-      >
-        <h2 :title="$t(col.title)" class="text-h2 break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text text-7xl font-bold text-transparent">
-          {{ $t(col.title) }}
-        </h2>
-        <Divider />
-        <h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 break-words">
-          {{ $t(col.subtext) }}
-        </h5>
-        <p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
-          {{ $t(col.description) }}
-        </p>
-      </div>
-    </div>
-  </Section>
 
   <!-- Section Two -->
   <Section class="border-b-2 border-dark/40 border-b-solid from-dark/30 bg-gradient-to-t dark:(border-light-50/10 from-light/5)">
-    <p class="text-title">
+    <Typography :title=" $t(sectionTwo.title) " :description=" $t(sectionTwo.description) " />
-      {{ $t(sectionTwo.title) }}
+
-    </p>
     <div class="grid-row grid-cols-2 py-10 md:grid-cols-3" :class="`lg:grid-cols-${sectionTwo.content.length}`">
       <NuxtLink
         v-for="(content, i) in sectionTwo.content"
@@ -68,70 +45,29 @@ const sectionNine = useSectionNine()
 
   <!-- Section Three -->
   <Section text-center class="section-three">
-    <p class="text-title">
+    <Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
-      {{ $t(sectionThree.title) }}
-    </p>
-    <h2 class="text-h2">
-      {{ $t(sectionThree.topic) }}
-    </h2>
-    <p class="text-h6">
-      {{ $t(sectionThree.description) }}
-    </p>
 
     <div>
       <div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`">
-        <NuxtLink
+        <ImageHover
           v-for="(content, i) in sectionThree.contentPrimary"
           :key="i"
-          :href="content.href"
+          :href="content.href" :img="content.img" :topic="content.topic"
-          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+        />
-        >
-          <img :src="content.img">
-          <div class="mask-img opacity-0 group-hover:opacity-100">
-            <div class="text-h4 w-full">
-              <p :title="content.topic" class="w-90% truncate text-white">
-                {{ content.topic }}
-              </p>
-            </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
-          </div>
-        </NuxtLink>
       </div>
       <div class="grid-row pb-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentSecondary.length}`">
-        <NuxtLink
+        <ImageHover
           v-for="(content, i) in sectionThree.contentSecondary"
           :key="i"
-          :href="content.href"
+          :href="content.href" :img="content.img" :topic="content.topic"
-          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+        />
-        >
-          <img :src="content.img">
-          <div class="mask-img opacity-0 group-hover:opacity-100">
-            <div class="text-h4 w-full">
-              <p :title="content.topic" class="w-90% truncate text-white">
-                {{ content.topic }}
-              </p>
-            </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
-          </div>
-        </NuxtLink>
       </div>
       <div class="grid-row pb-20 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentThird.length}`">
-        <NuxtLink
+        <ImageHover
           v-for="(content, i) in sectionThree.contentThird"
           :key="i"
-          :href="content.href"
+          :href="content.href" :img="content.img" :topic="content.topic"
-          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
+        />
-        >
-          <img :src="content.img">
-          <div class="mask-img opacity-0 group-hover:opacity-100">
-            <div class="text-h4 w-full">
-              <p :title="content.topic" class="w-90% truncate text-white">
-                {{ content.topic }}
-              </p>
-            </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
-          </div>
-        </NuxtLink>
       </div>
     </div>
     <NuxtLink :href="sectionThree.link.href">
@@ -140,7 +76,7 @@ const sectionNine = useSectionNine()
   </Section>
 
   <!-- Section Four -->
-  <Banner
+  <SectionBanner
     :img="$t(sectionFour.img)" :topic="$t(sectionFour.topic)" :description="$t(sectionFour.description)" :link="{
       href: sectionFour.link.href,
       name: $t(sectionFour.link.name),
@@ -148,17 +84,8 @@ const sectionNine = useSectionNine()
   />
 
   <!-- Section Five -->
-  <Section class="from-violet-500 to-fuchsia-500 text-white dark:(from-violet-600 to-fuchsia-600)" bg-gradient-to-r>
+  <Section class="bg-gradient-blue text-white">
-    <p class="text-title text-start">
+    <Typography :title=" $t(sectionFive.title) " :topic=" $t(sectionFive.topic) " :description=" $t(sectionFive.description) " class="pb-20 text-start" />
-      {{ $t(sectionFive.title) }}
-    </p>
-    <h2 class="text-h2 text-start text-white">
-      {{ $t(sectionFive.topic) }}
-    </h2>
-    <p class="text-h6 mb-20 text-start">
-      {{ $t(sectionFive.description) }}
-    </p>
-
     <div class="grid-row gap-26 pb-10 lg:(grid-cols-3) md:(grid-cols-2)">
       <div
         v-for="(content, i) in sectionFive.content"
@@ -166,10 +93,10 @@ const sectionNine = useSectionNine()
         class="w-full"
       >
         <h4 text-h4 class="break-words text-start font-bold text-white !line-clamp-2">
-          {{ content.topic }}
+          {{ $t(content.topic) }}
         </h4>
         <p text-h7 class="break-words text-start !line-clamp-3">
-          {{ content.description }}
+          {{ $t(content.description) }}
         </p>
       </div>
     </div>
@@ -177,12 +104,7 @@ const sectionNine = useSectionNine()
 
   <!-- Section Six -->
   <Section>
-    <h2 class="text-h2">
+    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.description) " />
-      {{ $t(sectionSix.topic) }}
-    </h2>
-    <p class="text-h6">
-      {{ $t(sectionSix.description) }}
-    </p>
 
     <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
       <div class="w-45% flex-grow">
@@ -194,18 +116,18 @@ const sectionNine = useSectionNine()
       <div class="w-55% flex-grow">
         <div class="h-full w-full flex flex-col items-center justify-center px-16 md:items-start">
           <p class="text-title">
-            {{ item.title }}
+            {{ $t(item.title) }}
           </p>
           <h4 class="text-h4 font-bold">
-            {{ item.topic }}
+            {{ $t(item.topic) }}
           </h4>
           <p class="text-h6 md:text-left">
-            {{ item.description }}
+            {{ $t(item.description) }}
           </p>
-          <div w-full py-10>
+          <div v-if="item.link" w-full py-10>
             <NuxtLink :href="item.link.href">
               <ABtn variant="light" class="group">
-                {{ item.link.name }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
+                {{ $t(item.link.name) }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
               </ABtn>
             </NuxtLink>
           </div>
@@ -215,7 +137,7 @@ const sectionNine = useSectionNine()
   </Section>
 
   <!-- Section Seven -->
-  <Banner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />
+  <SectionBanner :img="$t(sectionSeven.img)" :title="$t(sectionSeven.title)" :topic="$t(sectionSeven.topic)" mask="bottom" />
 
   <!-- Section Eight -->
   <Section>
@@ -223,14 +145,14 @@ const sectionNine = useSectionNine()
       <div
         v-for="(content, i) in sectionEight.content"
         :key="i"
-        class="w-full"
+        class="w-full text-center"
       >
-        <div :class="content.icon" class="h-60px w-full" />
+        <div :class="content.icon" h-60px w-full />
-        <h4 text-h4 class="break-words font-bold !line-clamp-2">
+        <h4 text-h4 font-bold>
-          {{ content.title }}
+          {{ $t(content.title) }}
         </h4>
-        <p text-h7 class="break-words text-center !line-clamp-3">
+        <p text-h7>
-          {{ content.description }}
+          {{ $t(content.description) }}
         </p>
       </div>
     </div>
@@ -256,16 +178,8 @@ const sectionNine = useSectionNine()
   <Divider />
 
   <!-- Section Nine -->
-  <Section my-10 from-green-500 to-lime-300 bg-gradient-to-r>
+  <Section class="bg-gradient-green my-10">
-    <p class="text-title text-start">
+    <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
-      {{ $t(sectionNine.title) }}
-    </p>
-    <h2 class="text-h2 text-start">
-      {{ $t(sectionNine.topic) }}
-    </h2>
-    <p class="text-h6 mb-10 text-start">
-      {{ $t(sectionNine.description) }}
-    </p>
   </Section>
   <Divider />
 </template>

uno.config.ts

@@ -19,20 +19,38 @@ import { presetThemeDefault } from '@anu-vue/preset-theme-default'
 export default defineConfig({
   include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
   shortcuts: {
-    'text-title': 'text font-bold opacity-90 text-center uppercase',
+    'text-title': ' font-bold opacity-90 uppercase break-words',
-    'text-body': 'text-base text-center  tracking-normal',
+    'text-body': 'text-base  tracking-normal break-words',
-    'text-description': 'text-md text-stone text-center',
+    'text-description': 'text-md text-stone break-words',
-    'text-h2': 'line-clamp-2 text-5xl text-center leading-20 font-bold',
+    'text-h2': 'line-clamp-2 text-5xl leading-20 break-words font-bold',
-    'text-h3': 'line-clamp-2 text-4xl text-center leading-13',
+    'text-h3': 'line-clamp-2 text-4xl leading-13 break-words',
-    'text-h4': 'line-clamp-2 text-2xl text-center leading-10',
+    'text-h4': 'line-clamp-2 text-2xl leading-10 break-words',
-    'text-h5': 'line-clamp-2 text-xl text-center leading-8',
+    'text-h5': 'line-clamp-3 text-xl leading-8 break-words',
-    'text-h6': 'line-clamp-2 text-lg text-center leading-6',
+    'text-h6': 'line-clamp-3 text-lg leading-6 break-words',
-    'text-h7': 'line-clamp-3 text text-center',
+    'text-h7': 'line-clamp-3 text-base break-words',
+    'bg-gradient-pink': 'from-pink to-violet bg-gradient-to-r ',
+    'bg-gradient-blue': 'from-sky to-indigo bg-gradient-to-r ',
+    'bg-gradient-green': 'from-lime to-green bg-gradient-to-r ',
+    'bg-gradient-purple': 'from-purple to-fuchsia bg-gradient-to-r ',
+    'bg-gradient-rose': 'from-orange to-rose bg-gradient-to-r ',
+    'bg-gradient-yellow': 'from-yellow to-amber bg-gradient-to-r ',
+    'text-gradient-pink': 'from-pink to-violet bg-gradient-to-r bg-clip-text ',
+    'text-gradient-blue': 'from-blue to-indigo bg-gradient-to-r bg-clip-text ',
+    'text-gradient-green': 'from-lime to-green bg-gradient-to-r bg-clip-text ',
+    'text-gradient-purple': 'from-purple to-fuchsia bg-gradient-to-r bg-clip-text ',
+    'text-gradient-rose': 'from-orange to-rose bg-gradient-to-r bg-clip-text ',
+    'text-gradient-yellow': 'from-yellow to-amber bg-gradient-to-r bg-clip-text ',
   },
   safelist: [
     ...Array(10).fill('').map((_, i) => `grid-cols-${i + 1}`),
     ...Array(10).fill('').map((_, i) => `lg:grid-cols-${i + 1}`),
     'i-solar-airbuds-left-bold-duotone',
+    'text-gradient-pink',
+    'text-gradient-blue',
+    'text-gradient-green',
+    'text-gradient-rose',
+    'text-gradient-purple',
+    'text-gradient-yello',
   ],
   presets: [
     presetAnu(),