From 96c06d9337027817270df2c67da68bd11559353e Mon Sep 17 00:00:00 2001
From: huxin <1219654535@qq.com>
Date: Sun, 7 May 2023 01:39:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=80=E4=BA=9B=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E9=97=AE=E9=A2=98=20carousel=20foot=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Carousel.vue              |  58 +++++-----
 components/Footer.vue                |  22 ++--
 components/ImageHover.vue            |  31 ++++++
 components/Typography.vue            |  34 ++++++
 components/header/nav.vue            |   2 +-
 components/{ => section}/Banner.vue  |  19 +---
 components/section/GradientCard.vue  |  54 ++++++++++
 components/{ => section}/Section.vue |   0
 config/pages/home/use-carousel.ts    |  10 +-
 config/pages/home/use-section-two.ts |   1 +
 config/use-foot.ts                   | 129 ++++++++++++-----------
 locales/en-UK.json                   |  33 ++++--
 locales/zh-CN.json                   |  39 ++++---
 pages/index.vue                      | 152 ++++++---------------------
 uno.config.ts                        |  36 +++++--
 15 files changed, 345 insertions(+), 275 deletions(-)
 create mode 100644 components/ImageHover.vue
 create mode 100644 components/Typography.vue
 rename components/{ => section}/Banner.vue (64%)
 create mode 100644 components/section/GradientCard.vue
 rename components/{ => section}/Section.vue (100%)

diff --git a/components/Carousel.vue b/components/Carousel.vue
index a479c9a..a3860fc 100644
--- a/components/Carousel.vue
+++ b/components/Carousel.vue
@@ -7,38 +7,34 @@ const { state: pages, next, prev } = useCycleList(carousels.map((_, i) => i), {
   initialValue: 0,
 })
 
-useIntervalFn(() => {
-  next()
-}, 2500)
+onMounted(() => {
+  useIntervalFn(() => {
+    next()
+  }, 3500)
+})
 </script>
 
 <template>
-  <AViews
-    v-model="pages"
-  >
-    <AView v-for="(item, i) in carousels" :key="i" :value="i">
-      <div class="relative h-full max-h-700px min-h-500px w-full flex items-center justify-center bg-transparent">
-        <!-- <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="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" h-full>
+        <img :src="item.img" style="object-fit: cover;height:100%;width: 100%;">
+      </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>
diff --git a/components/Footer.vue b/components/Footer.vue
index fc9c1be..0656069 100644
--- a/components/Footer.vue
+++ b/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>
-    <BrandLogo />
-    © Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
-    <DarkToggle />
+  <div my-10 flex flex-col items-center justify-center gap-4>
+    <div flex items-center gap-4>
+      <BrandLogo />
+      <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>
diff --git a/components/ImageHover.vue b/components/ImageHover.vue
new file mode 100644
index 0000000..973b092
--- /dev/null
+++ b/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>
diff --git a/components/Typography.vue b/components/Typography.vue
new file mode 100644
index 0000000..71a4753
--- /dev/null
+++ b/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>
diff --git a/components/header/nav.vue b/components/header/nav.vue
index 771919b..0627fc2 100644
--- a/components/header/nav.vue
+++ b/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
diff --git a/components/Banner.vue b/components/section/Banner.vue
similarity index 64%
rename from components/Banner.vue
rename to components/section/Banner.vue
index b79e91d..7551a6e 100644
--- a/components/Banner.vue
+++ b/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>
-      <p v-if="title" class="text-title" drop-shadow>
-        {{ 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 absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
+      <Typography :title="title" :topic="topic" :description="description" :link="link" />
     </Section>
   </Section>
 </template>
diff --git a/components/section/GradientCard.vue b/components/section/GradientCard.vue
new file mode 100644
index 0000000..bdc5b2c
--- /dev/null
+++ b/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>
diff --git a/components/Section.vue b/components/section/Section.vue
similarity index 100%
rename from components/Section.vue
rename to components/section/Section.vue
diff --git a/config/pages/home/use-carousel.ts b/config/pages/home/use-carousel.ts
index c597eea..b8d1ddd 100644
--- a/config/pages/home/use-carousel.ts
+++ b/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',
+    },
   ]
 }
diff --git a/config/pages/home/use-section-two.ts b/config/pages/home/use-section-two.ts
index 1b42d36..6f0da32 100644
--- a/config/pages/home/use-section-two.ts
+++ b/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',
diff --git a/config/use-foot.ts b/config/use-foot.ts
index 9147222..d197360 100644
--- a/config/use-foot.ts
+++ b/config/use-foot.ts
@@ -3,75 +3,80 @@ export function useFoot() {
 
   const path = locale.value === 'zh' ? '/' : `/${locale.value}`
 
-  return [
-    {
-      title: 'foot.group1.name',
-      child: [
-        {
-          link: {
-            name: 'foot.group1.link1',
-            href: '#',
+  return {
+    copyright: 'foot.copyright',
+    release: 'foot.release',
+    record: ['foot.record[0]', 'foot.record[1]'],
+    links: [
+      {
+        title: 'foot.links[0].group',
+        child: [
+          {
+            link: {
+              name: 'foot.links[0].link[0]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group1.link2',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[0].link[1]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group1.link3',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[0].link[2]',
+              href: '#',
+            },
           },
-        },
-      ],
-    },
-    {
-      title: 'foot.group2.name',
-      child: [
-        {
-          link: {
-            name: 'foot.group2.link1',
-            href: '#',
+        ],
+      },
+      {
+        title: 'foot.links[1].group',
+        child: [
+          {
+            link: {
+              name: 'foot.links[1].link[0]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group2.link2',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[1].link[1]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group2.link3',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[1].link[2]',
+              href: '#',
+            },
           },
-        },
-      ],
-    },
-    {
-      title: 'foot.group3.name',
-      child: [
-        {
-          link: {
-            name: 'foot.group3.link1',
-            href: '#',
+        ],
+      },
+      {
+        title: 'foot.links[2].group',
+        child: [
+          {
+            link: {
+              name: 'foot.links[2].link[0]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group3.link2',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[2].link[1]',
+              href: '#',
+            },
           },
-        },
-        {
-          link: {
-            name: 'foot.group3.link3',
-            href: '#',
+          {
+            link: {
+              name: 'foot.links[2].link[2]',
+              href: '#',
+            },
           },
-        },
-      ],
-    },
-  ]
+        ],
+      },
+    ],
+  }
 }
diff --git a/locales/en-UK.json b/locales/en-UK.json
index 1963301..f7b8d37 100644
--- a/locales/en-UK.json
+++ b/locales/en-UK.json
@@ -2,11 +2,11 @@
   "nav": {
     "news": "News",
     "home": "Home",
-    "event":{
-      "t":"Events",
-      "child":{
-        "act":["AaaO!","TOPO Land"],
-        "description":["Architecture as an Object", "Topverse Meta Island"]
+    "event": {
+      "t": "Events",
+      "child": {
+        "act": ["AaaO!", "TOPO Land"],
+        "description": ["Architecture as an Object", "Topverse Meta Island"]
       }
     },
 
@@ -14,8 +14,8 @@
       "t": "Solutions",
       "child": {
         "land": {
-          "service":["Web 3.0","Digital Twins","Mixed Reality"],
-          "description": ["The quick brown fox jumps over the lazy dog.","IRL World in Digital","Immersive Creations"]
+          "service": ["Web 3.0", "Digital Twins", "Mixed Reality"],
+          "description": ["The quick brown fox jumps over the lazy dog.", "IRL World in Digital", "Immersive Creations"]
         }
       }
     },
@@ -58,11 +58,11 @@
 
     },
     "sectionThree": {
-     
+
       "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"]
+      }
+    ]
   }
 }
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 36a8a85..5b3ef57 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -2,11 +2,11 @@
   "nav": {
     "news": "最新动态",
     "home": "首页",
-    "event":{
-      "t":"项目发起",
-      "child":{
-        "act":["AaaO!","TOPO Land"],
-        "description":["未建成建筑系列", "TOPO元界岛"]
+    "event": {
+      "t": "项目发起",
+      "child": {
+        "act": ["AaaO!", "TOPO Land"],
+        "description": ["未建成建筑系列", "TOPO元界岛"]
       }
     },
 
@@ -14,12 +14,12 @@
       "t": "解决方案",
       "child": {
         "land": {
-          "service":["Web 3.0","数字孪生","混合现实"],
-          "description": ["区块链及元宇宙空间板块","智慧城市及工业元宇宙解决方案","虚拟、混合现实内容开发"]
+          "service": ["Web 3.0", "数字孪生", "混合现实"],
+          "description": ["区块链及元宇宙空间板块", "智慧城市及工业元宇宙解决方案", "虚拟、混合现实内容开发"]
         }
       }
     },
-    
+
     "portfolio": "portfolio",
     "learn": "learn",
     "check": "check app",
@@ -27,14 +27,14 @@
   },
   "scrolldown": "Scroll down to learn more",
   "home": {
-    "carousel":{
-      "one":{
-        "topic":"Never Drink Alone 元宇宙酒吧",
-        "description":"The Bar Symphony: 在元宇宙中找到共鸣"
+    "carousel": {
+      "one": {
+        "topic": "Never Drink Alone 元宇宙酒吧",
+        "description": "The Bar Symphony: 在元宇宙中找到共鸣"
       },
-      "two":{
-        "topic":"",
-        "description":""
+      "two": {
+        "topic": "",
+        "description": ""
       }
     },
     "sectionOne": {
@@ -43,11 +43,11 @@
         "title": ["80+", "20+", "近200万"],
         "subtext": ["工程师及技术专家", "落地项目及技术专利", "平方米落地开发量"],
         "description": [
-          "建筑师、代码工程师、交互设计师及更多领域交叉", 
-          "自2021年起深耕混合现实体验、虚拟地产及Web 3.0开发", 
+          "建筑师、代码工程师、交互设计师及更多领域交叉",
+          "自2021年起深耕混合现实体验、虚拟地产及Web 3.0开发",
           "打通现实世界与虚拟世界的体验，以虚赋实"]
-  
-        }
+
+      }
     },
     "sectionTwo": {
       "title": "合作伙伴"
@@ -76,4 +76,3 @@
     }
   }
 }
-
diff --git a/pages/index.vue b/pages/index.vue
index d3fc579..46a7a92 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,35 +24,12 @@ const sectionNine = useSectionNine()
   <Carousel class="mb-5" />
   <Divider />
   <!-- Section One -->
-  <Section>
-    <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>
+  <SectionGradientCard :content="sectionOne.content" :topic="sectionOne.topic" />
 
   <!-- 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">
-      {{ $t(sectionTwo.title) }}
-    </p>
+    <Typography :title=" $t(sectionTwo.title) " :description=" $t(sectionTwo.description) " />
+
     <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">
-      {{ $t(sectionThree.title) }}
-    </p>
-    <h2 class="text-h2">
-      {{ $t(sectionThree.topic) }}
-    </h2>
-    <p class="text-h6">
-      {{ $t(sectionThree.description) }}
-    </p>
+    <Typography :title=" $t(sectionThree.title) " :topic=" $t(sectionThree.topic) " :description=" $t(sectionThree.description) " />
 
     <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"
-          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>
+          :href="content.href" :img="content.img" :topic="content.topic"
+        />
       </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"
-          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>
+          :href="content.href" :img="content.img" :topic="content.topic"
+        />
       </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"
-          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>
+          :href="content.href" :img="content.img" :topic="content.topic"
+        />
       </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>
-    <p class="text-title 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>
-
+  <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
         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">
-      {{ $t(sectionSix.topic) }}
-    </h2>
-    <p class="text-h6">
-      {{ $t(sectionSix.description) }}
-    </p>
+    <Typography :topic=" $t(sectionSix.topic) " :description=" $t(sectionSix.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 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" />
-        <h4 text-h4 class="break-words font-bold !line-clamp-2">
-          {{ content.title }}
+        <div :class="content.icon" h-60px w-full />
+        <h4 text-h4 font-bold>
+          {{ $t(content.title) }}
         </h4>
-        <p text-h7 class="break-words text-center !line-clamp-3">
-          {{ content.description }}
+        <p text-h7>
+          {{ $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>
-    <p class="text-title 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 class="bg-gradient-green my-10">
+    <Typography :title="$t(sectionNine.title)" :topic=" $t(sectionNine.topic)" :description=" $t(sectionNine.description)" class="text-start" />
   </Section>
   <Divider />
 </template>
diff --git a/uno.config.ts b/uno.config.ts
index 08da508..b14ed2e 100644
--- a/uno.config.ts
+++ b/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-body': 'text-base text-center  tracking-normal',
-    'text-description': 'text-md text-stone text-center',
-    'text-h2': 'line-clamp-2 text-5xl text-center leading-20 font-bold',
-    'text-h3': 'line-clamp-2 text-4xl text-center leading-13',
-    'text-h4': 'line-clamp-2 text-2xl text-center leading-10',
-    'text-h5': 'line-clamp-2 text-xl text-center leading-8',
-    'text-h6': 'line-clamp-2 text-lg text-center leading-6',
-    'text-h7': 'line-clamp-3 text text-center',
+    'text-title': ' font-bold opacity-90 uppercase break-words',
+    'text-body': 'text-base  tracking-normal break-words',
+    'text-description': 'text-md text-stone break-words',
+    'text-h2': 'line-clamp-2 text-5xl leading-20 break-words font-bold',
+    'text-h3': 'line-clamp-2 text-4xl leading-13 break-words',
+    'text-h4': 'line-clamp-2 text-2xl leading-10 break-words',
+    'text-h5': 'line-clamp-3 text-xl leading-8 break-words',
+    'text-h6': 'line-clamp-3 text-lg leading-6 break-words',
+    '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(),