chore: 翻译适配，主题适配

app.vue

@@ -3,6 +3,9 @@ import { appName } from './constants'
 
 useHead({
   title: appName,
+  bodyAttrs: {
+    class: 'scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px scrollbar scrollbar-rounded',
+  },
 })
 </script>
 

components/Carousel.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useCarousel } from '~/config/pages/home/use-carousel'
 
-const { state: pages, next, prev } = useCycleList(Array(4).fill('').map((_, i) => i), {
-  initialValue: 1,
-})
 const carousels = useCarousel()
 
+const { state: pages, next, prev } = useCycleList(carousels.map((_, i) => i), {
+  initialValue: 0,
+})
+
 useIntervalFn(() => {
   next()
 }, 2500)
@@ -17,18 +18,20 @@ useIntervalFn(() => {
   >
     <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-white text-shadow">
+        <div class="absolute absolute z-10 hidden text-shadow">
-          <h2 class="text-h2 text-start text-white">
+          <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>
-          <ABtn class="text-xl">
+          <NuxtLink :href="item.link.href">
-            {{ $t(item.entry) }}
+            <ABtn class="text-xl">
-          </ABtn>
+              {{ $t(item.link.name) }}
+            </ABtn>
+          </NuxtLink>
         </div>
-        <div class="absolute left-0 top-0 h-full w-full" style="background-image: linear-gradient(0deg,hsl(var(--a-body-bg-c)),transparent 75%, hsl(var(--a-body-bg-c)) 99%);" />
+        <div class="absolute left-0 top-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)));" />
         <img :src="item.img">
       </div>
       <!-- <ACard

components/brand/logo.vue

@@ -1,5 +1,5 @@
 <template>
   <div inline-flex>
-    <img inline-block h-38 w-38 src="/topverse.svg">
+    <img inline-block h-38 w-38 src="/topverse.black.svg">
   </div>
 </template>

components/header/nav.vue

@@ -5,36 +5,33 @@ const navs = useNav()
 </script>
 
 <template>
-  <nav
+  <nav>
-    :class="{
-      hidden: y > 10,
-    }"
-  >
     <NuxtLink v-for="(nav, i) in navs" :key="i" class="mx-2 border-primary p-1 pb-5 transition-all" :to="nav.href" active-class="border-b-3px">
-      <ABtn variant="text" color="white">
+      <ABtn variant="text">
-        <AMenu v-if="nav.child" color="white" trigger="hover" z-1000 mt-5 placement="bottom">
+        <AMenu v-if="nav.child" style="--un-bg-opacity:0.5;--a-spacing:2" class="backdrop-blur-md" z-1000 mt-5 placement="bottom">
           <AList
             :items="nav.child"
             avatar-append
-            class="[--a-list-item-gap:1rem]"
+            class="[--a-list-item-gap:1rem] [--a-spacing:1] !m-0 divide-y"
           >
-            <NuxtLink v-for="(item, index) in nav.child" :key="index" :href="item.href" class="mx-2 my-1 max-w-250px overflow-hidden rounded py-2 hover:bg-light-50/5" active-class="bg-light-50/5">
+            <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
+                class="[--a-spacing:1] max-w-300px"
                 :title="$t(item.title)"
-                :subtitle="$(item.subtitle)"
+                :subtitle="item.subtitle && $t(item.subtitle)"
-                :icon="item.icon"
+              >
-              />
+                <template #prepend>
+                  <AAvatar
+                    class="shrink-0"
+                    :icon="item.icon"
+                  />
+                </template>
+              </AListItem>
             </NuxtLink>
           </AList>
         </AMenu>
-        <span>{{ $t(nav.title) }}</span>
+        <span style="color: hsla(var(--a-base-c), 0.87); " class="font-bold">{{ $t(nav.title) }}</span>
       </ABtn>
     </NuxtLink>
   </nav>
 </template>
-
-<style scoped>
-.a-btn-content{
-  --uno:text-white;
-}
-</style>

config/pages/home/use-carousel.ts

@@ -1,28 +1,13 @@
 export function useCarousel() {
   return [
     {
-      title: 'home.carousel.one.topic',
+      title: 'home.carousel.topic[0]',
-      description: 'home.carousel.one.description',
+      description: 'home.carousel.description[0]',
-      entry: 'home.carousel.one.entry',
+      link: {
+        name: 'home.carousel.link[0]',
+        href: '#',
+      },
       img: '/imgs/1 (1).jpg',
     },
-    {
-      title: 'home.carousel.two.topic',
-      description: 'home.carousel.two.description',
-      entry: 'home.carousel.two.entry',
-      img: '/imgs/1 (2).jpg',
-    },
-    {
-      title: 'home.carousel.three.topic',
-      description: 'home.carousel.three.description',
-      entry: 'home.carousel.three.entry',
-      img: '/imgs/1 (3).jpg',
-    },
-    {
-      title: 'home.carousel.four.topic',
-      description: 'home.carousel.four.description',
-      entry: 'home.carousel.four.entry',
-      img: '/imgs/1 (4).jpg',
-    },
   ]
 }

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

@@ -0,0 +1,37 @@
+export function useSectionFive() {
+  return {
+    title: 'home.sectionFive.title',
+    topic: 'home.sectionFive.topic',
+    description: 'home.sectionFive.description',
+    link: {
+      name: 'home.sectionFive.link',
+      href: '#',
+    },
+    content: [
+      {
+        topic: 'home.sectionFive.content.topic[0]',
+        description: 'home.sectionFive.content.description[0]',
+      },
+      {
+        topic: 'home.sectionFive.content.topic[1]',
+        description: 'home.sectionFive.content.description[1]',
+      },
+      {
+        topic: 'home.sectionFive.content.topic[2]',
+        description: 'home.sectionFive.content.description[2]',
+      },
+      {
+        topic: 'home.sectionFive.content.topic[3]',
+        description: 'home.sectionFive.content.description[3]',
+      },
+      {
+        topic: 'home.sectionFive.content.topic[4]',
+        description: 'home.sectionFive.content.description[4]',
+      },
+      {
+        topic: 'home.sectionFive.content.topic[5]',
+        description: 'home.sectionFive.content.description[5]',
+      },
+    ],
+  }
+}

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

@@ -0,0 +1,12 @@
+export function useSectionFour() {
+  return {
+    img: '/imgs/1 (1).jpg',
+    title: 'home.sectionFour.title',
+    topic: 'home.sectionFour.topic',
+    description: 'home.sectionFour.description',
+    link: {
+      name: 'home.sectionFour.link',
+      href: '#',
+    },
+  }
+}

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

@@ -4,19 +4,19 @@ export function useSectionOne() {
     description: 'home.sectionOne.description',
     content: [
       {
-        title: 'home.sectionOne.one.title',
+        title: 'home.sectionOne.content.title[0]',
-        subtext: 'home.sectionOne.one.subtext',
+        subtext: 'home.sectionOne.content.subtext[0]',
-        description: 'home.sectionOne.one.description',
+        description: 'home.sectionOne.content.description[0]',
       },
       {
-        title: 'home.sectionOne.two.title',
+        title: 'home.sectionOne.content.title[1]',
-        subtext: 'home.sectionOne.two.subtext',
+        subtext: 'home.sectionOne.content.subtext[1]',
-        description: 'home.sectionOne.two.description',
+        description: 'home.sectionOne.content.description[1]',
       },
       {
-        title: 'home.sectionOne.three.title',
+        title: 'home.sectionOne.content.title[2]',
-        subtext: 'home.sectionOne.three.subtext',
+        subtext: 'home.sectionOne.content.subtext[2]',
-        description: 'home.sectionOne.three.description',
+        description: 'home.sectionOne.content.description[2]',
       },
     ],
   }

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

@@ -0,0 +1,49 @@
+export function useSectionSix() {
+  return {
+    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.topic[0]',
+        link: {
+          name: 'home.sectionSix.content.link[0]',
+          href: '#',
+        },
+        img: '/imgs/1 (4).jpg',
+      },
+      {
+        title: 'home.sectionSix.content.title[1]',
+        topic: 'home.sectionSix.content.topic[1]',
+        description: 'home.sectionSix.content.topic[1]',
+        link: {
+          name: 'home.sectionSix.content.link[1]',
+          href: '#',
+        },
+        img: '/imgs/1 (1).jpg',
+      },
+      {
+        title: 'home.sectionSix.content.title[2]',
+        topic: 'home.sectionSix.content.topic[2]',
+        description: 'home.sectionSix.content.topic[2]',
+        link: {
+          name: 'home.sectionSix.content.link[2]',
+          href: '#',
+        },
+        img: '/imgs/1 (2).jpg',
+      },
+      {
+        title: 'home.sectionSix.content.title[3]',
+        topic: 'home.sectionSix.content.topic[3]',
+        description: 'home.sectionSix.content.topic[3]',
+        link: {
+          name: 'home.sectionSix.content.link[3]',
+          href: '#',
+        },
+        img: '/imgs/1 (3).jpg',
+      },
+
+    ],
+  }
+}

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

@@ -3,56 +3,58 @@ export function useSectionThree() {
     title: 'home.sectionThree.title',
     topic: 'home.sectionThree.topic',
     description: 'home.sectionThree.description',
-    entry: 'home.sectionThree.entry',
+    link: {
-    contentFirst: [
+      name: 'home.sectionThree.link',
+      href: '#',
+    },
+    contentPrimary: [
       {
-        topic: 'home.sectionThree.contentFirst.topic1',
+        topic: 'home.sectionThree.contentPrimary.topic[0]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (2).jpg',
         href: '#',
       },
       {
-        topic: 'home.sectionThree.contentFirst.topic2',
+        topic: 'home.sectionThree.contentPrimary.topic[1]',
         img: '/imgs/1 (1).jpg',
         href: '#',
       },
     ],
     contentSecondary: [
+
       {
-        topic: 'home.sectionThree.contentSecondary.topic1',
+        topic: 'home.sectionThree.contentSecondary.topic[0]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (5).jpg',
+        href: '#',
+      }, {
+        topic: 'home.sectionThree.contentSecondary.topic[1]',
+        img: '/imgs/1 (3).jpg',
         href: '#',
       },
       {
-        topic: 'home.sectionThree.contentSecondary.topic2',
+        topic: 'home.sectionThree.contentSecondary.topic[2]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (4).jpg',
-        href: '#',
-      },
-      {
-        topic: 'home.sectionThree.contentSecondary.topic3',
-        img: '/imgs/1 (1).jpg',
         href: '#',
       },
 
     ],
     contentThird: [
       {
-        topic: 'home.sectionThree.contentThird.topic1',
+        topic: 'home.sectionThree.contentThird.topic[0]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (9).jpg',
+        href: '#',
+      }, {
+        topic: 'home.sectionThree.contentThird.topic[1]',
+        img: '/imgs/1 (6).jpg',
         href: '#',
       },
       {
-        topic: 'home.sectionThree.contentThird.topic2',
+        topic: 'home.sectionThree.contentThird.topic[2]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (7).jpg',
         href: '#',
       },
       {
-        topic: 'home.sectionThree.contentThird.topic3',
+        topic: 'home.sectionThree.contentThird.topic[3]',
-        img: '/imgs/1 (1).jpg',
+        img: '/imgs/1 (8).jpg',
-        href: '#',
-      },
-      {
-        topic: 'home.sectionThree.contentThird.topic4',
-        img: '/imgs/1 (1).jpg',
         href: '#',
       },
 

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

@@ -5,37 +5,37 @@ export function useSectionTwo() {
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[0]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[1]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[2]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[3]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[4]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[5]',
       },
       {
         img: 'https://landvault.io/assets/logos/paypal.svg',
         href: '#',
-        title: 'paypal',
+        title: 'home.sectionTwo.content.title[6]',
       },
     ],
   }

config/use-nav.ts

@@ -10,10 +10,14 @@ interface NavMenu {
 }
 
 export function useNav(): NavMenu[] {
+  const { locale } = useI18n()
+
+  const path = locale.value === 'zh' ? '/' : `/${locale.value}`
+
   return [
     {
       title: 'nav.home',
-      href: '/',
+      href: `${path}`,
     },
     {
       title: 'nav.solutions.t',
@@ -21,23 +25,22 @@ export function useNav(): NavMenu[] {
         {
           title: 'nav.solutions.child.land.t',
           subtitle: 'nav.solutions.child.land.description',
-          href: '/land',
+          href: `${path}/land`,
           icon: 'i-solar-accumulator-bold-duotone',
           iconColor: 'red',
         },
         {
           title: 'nav.solutions.child.land.t',
           subtitle: 'nav.solutions.child.land.description',
-          href: '/landa',
+          href: `${path}/landa`,
-          icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
+          icon: 'i-solar-airbuds-case-open-line-duotone',
           iconColor: 'amber',
-          // avatarProps: { icon: 'i-solar-airbuds-case-open-line-duotone' },
         },
       ],
     },
     {
       title: 'nav.test',
-      href: '/test',
+      href: `${path}/test`,
     },
   ]
 }

layouts/default.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-const el = ref<HTMLElement | null>(null)
-const { y } = useScroll(el)
 </script>
 
 <template>
-  <main :ref="el" class="h-screen w-screen overflow-auto scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-6px scrollbar scrollbar-rounded">
+  <Header />
-    <Header
+  <slot />
-      :class="{
+  <Footer />
-        hidden: !!y,
-      }"
-    />
-    <slot />
-    <Footer />
-  </main>
 </template>

locales/en-UK.json

@@ -1,6 +1,6 @@
 {
   "nav": {
-    "test":"Community",
+    "test": "Community",
     "home": "Home",
     "solutions": {
       "t": "Solutions",
@@ -20,44 +20,32 @@
   "scrolldown": "Scroll down to learn more",
 
   "home": {
-    "carousel":{
+    "carousel": {
-      "one":{
+      "topic": ["Never Drink Alone", "Metaverse Congress Hall"],
-        "topic":"Never Drink Alone",
+      "description": ["The Bar Symphony in Decentraland", "One should never ignore the power of nature"],
-        "description":"The Bar Symphony in Decentraland",
+      "link": ["Details", "Details"]
-        "entry":"Details"
-      },
-      "two":{
-        "topic":"Metaverse Congress Hall",
-        "description":"One should never ignore the power of nature",
-        "entry":"Details"
-      },
-      "three":{
-        "topic":"Metaverse Congress Hall",
-        "description":"One should never ignore the power of nature",
-        "entry":"Details"
-      }
     },
     "sectionOne": {
       "topic": "Your End-To-End Metaverse Developers",
-      "one":{
+      "content": {
-        "title":"80+",
+        "title": ["80+", "20+", "2 Million+"],
-        "subtext":"Metaverse Experts & Engineers",
+        "subtext": ["Metaverse Experts & Engineers", "Completed Builds & Inventions", "Square Meters Developed"],
-        "description":"Architects, Developers, Producers, amd more"
+        "description": ["We have been developing in metaverse since 2021", "Architects, Developers, Producers, amd more", "in both virtual and IRL scales"]
-      },
-      "two":{
-        "title":"20+",
-        "subtext":"Completed Builds & Inventions",
-        "description":"We have been developing in metaverse since 2021"
-      },
-      "three":{
-        "title":"2 Million+",
-        "subtext":"Square Meters Developed",
-        "description":"in both virtual and IRL scales"
       }
-  
     },
     "sectionTwo": {
-      "title": "some of our clients"
+      "title": "some of our clients",
+      "content": {
+        "title": [
+          "pay",
+          "pay",
+          "pay",
+          "pay",
+          "pay",
+          "pay",
+          "pay"
+        ]
+      }
     },
     "sectionThree": {
       "title": "OUR PREVIOUS WORK",

pages/index.vue

@@ -1,57 +1,17 @@
 <script setup lang="ts">
+import { useSectionFive } from '~/config/pages/home/use-section-five'
+import { useSectionFour } from '~/config/pages/home/use-section-four'
 import { useSectionOne } from '~/config/pages/home/use-section-one'
+import { useSectionSix } from '~/config/pages/home/use-section-six'
 import { useSectionThree } from '~/config/pages/home/use-section-three'
 import { useSectionTwo } from '~/config/pages/home/use-section-two'
 
-const imgs = [
-  {
-    img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
-    title: 'land concierge',
-    topic: 'Rent or buy land in minutes',
-    description: 'Browse the best location and price for your project through our Metaverse Discovery tool, and rent Land from us, with or without crypto.',
-    link: {
-      href: '#',
-      name: 'Learn more about the metaverse',
-    },
-  },
-  {
-
-    img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
-    title: 'land concierge',
-    topic: 'Rent or buy land in minutes',
-    description: 'Browse the best location and price for your project through our Metaverse Discovery tool, and rent Land from us, with or without crypto.',
-    link: {
-      href: '#',
-      name: 'Learn more about the metaverse',
-    },
-  },
-  {
-
-    img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
-    title: 'land concierge',
-    topic: 'Rent or buy land in minutes',
-    description: 'Browse the best location and price for your project through our Metaverse Discovery tool, and rent Land from us, with or without crypto.',
-    link: {
-      href: '#',
-      name: 'Learn more about the metaverse',
-    },
-  },
-  {
-
-    img: 'https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9tYXAuanBn?w=581&h=358&fit=crop&fm=webp&s=1eeea55d816b6b9fb182d2a469db110c',
-    title: 'land concierge',
-    topic: 'Rent or buy land in minutes',
-    description: 'Browse the best location and price for your project through our Metaverse Discovery tool, and rent Land from us, with or without crypto.',
-    link: {
-      href: '#',
-      name: 'Learn more about the metaverse',
-    },
-  },
-]
-
 const sectionOne = useSectionOne()
 const sectionTwo = useSectionTwo()
 const sectionThree = useSectionThree()
+const sectionFour = useSectionFour()
+const sectionFive = useSectionFive()
+const sectionSix = useSectionSix()
 </script>
 
 <template>
@@ -68,15 +28,15 @@ const sectionThree = useSectionThree()
         :key="i"
         class="w-full overflow-hidden text-center"
       >
-        <h2 :title="$t(col.title)" class="break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text text-h3 font-bold text-transparent">
+        <h2 :title="$t(col.title)" class="text-h3 break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text font-bold text-transparent">
           {{ $t(col.title) }}
         </h2>
         <Divider />
-        <h5 :title="$t(col.subtext)" class="mt-3 break-words text-h4 text-h5">
+        <h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 break-words">
           {{ $t(col.subtext) }}
         </h5>
         <Divider />
-        <p :title="$t(col.description)" class="mt-1 break-words text-h6 !line-clamp-3">
+        <p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
           {{ $t(col.description) }}
         </p>
       </div>
@@ -84,7 +44,7 @@ const sectionThree = useSectionThree()
   </Section>
 
   <!-- Section Two -->
-  <Section class="border-b-2 border-light-50/10 border-b-solid from-light/5 bg-gradient-to-t">
+  <Section class="border-b-2 border-dark-50/20 border-b-solid from-dark/10 bg-gradient-to-t dark:(border-light-50/10 from-light/5)">
     <p class="text-title">
       {{ $t(sectionTwo.title) }}
     </p>
@@ -114,22 +74,21 @@ const sectionThree = useSectionThree()
     </p>
 
     <div>
-      <div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentFirst.length}`">
+      <div class="grid-row py-10 md:(grid-cols-2)" :class="`lg:grid-cols-${sectionThree.contentPrimary.length}`">
         <NuxtLink
-          v-for="(content, i) in sectionThree.contentFirst"
+          v-for="(content, i) in sectionThree.contentPrimary"
           :key="i"
           :href="content.href"
-          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 left-0 z-1 hidden h-50px w-full items-center justify-center bg-black/15 p-2 px-10 backdrop-blur-md transition group-hover:(flex)">
-          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="text-h4 w-full">
-            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate text-white">
-              <p :title="content.topic" class="w-90% truncate">
                 {{ content.topic }}
               </p>
             </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold />
+            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
           </div>
         </NuxtLink>
       </div>
@@ -138,17 +97,16 @@ const sectionThree = useSectionThree()
           v-for="(content, i) in sectionThree.contentSecondary"
           :key="i"
           :href="content.href"
-          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 left-0 z-1 hidden h-50px w-full items-center justify-center bg-black/15 p-2 px-10 backdrop-blur-md transition group-hover:(flex)">
-          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="text-h4 w-full">
-            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate text-white">
-              <p :title="content.topic" class="w-90% truncate">
                 {{ content.topic }}
               </p>
             </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold />
+            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
           </div>
         </NuxtLink>
       </div>
@@ -157,71 +115,87 @@ const sectionThree = useSectionThree()
           v-for="(content, i) in sectionThree.contentThird"
           :key="i"
           :href="content.href"
-          class="relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35"
+          class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <div class="absolute left-0 top-0 z-1 h-full w-full from-transparent to-dark-800 bg-gradient-to-b" />
+          <div class="absolute bottom-0 left-0 z-1 hidden h-50px w-full items-center justify-center bg-black/15 p-2 px-10 backdrop-blur-md transition group-hover:(flex)">
-          <div class="absolute bottom-0 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
+            <div class="text-h4 w-full">
-            <div class="w-full text-h4">
+              <p :title="content.topic" class="w-90% truncate text-white">
-              <p :title="content.topic" class="w-90% truncate">
                 {{ content.topic }}
               </p>
             </div>
-            <div i-solar-arrow-right-linear stroke-3 font-bold />
+            <div i-solar-arrow-right-linear stroke-3 font-bold text-white />
           </div>
         </NuxtLink>
       </div>
     </div>
-    <ABtn>{{ $t(sectionThree.entry) }}</ABtn>
+    <NuxtLink :href="sectionThree.link.href">
+      <ABtn>{{ $t(sectionThree.link.name) }}</ABtn>
+    </NuxtLink>
   </Section>
+
+  <!-- Section Four -->
   <Section
     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(https://landvault.io/img/asset/YXNzZXRzL2ltYWdlcy9vdGhlcnNpZGUuanBn?w=1920&h=480&fit=crop&fm=webp&s=a53969e9e8ddeda15dab9b724a6af3f6);-webkit-mask-image:linear-gradient(0deg, transparent, #000);" />
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${sectionFour.img}');-webkit-mask-image:linear-gradient(0deg, transparent, #000);`" />
-    <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>
       <h2 class="text-h2">
-        {{ $t('home.sectionFour.topic') }}
+        {{ $t(sectionFour.topic) }}
       </h2>
-      <p pb-5 text-h6>
+      <p text-h6 pb-5>
         {{
-          $t('home.sectionFour.description')
+          $t(sectionFour.description)
         }}
       </p>
-      <ABtn>
+      <NuxtLink :href="sectionFour.link.href">
-        {{ $t('home.sectionFour.entry') }}
+        <ABtn>
-      </ABtn>
+          {{ $t(sectionFour.link.name) }}
+        </ABtn>
+      </NuxtLink>
     </Section>
   </Section>
-  <Section from-violet-500 to-fuchsia-500 bg-gradient-to-r>
+
+  <!-- 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('home.sectionFive.title') }}
+      {{ $t(sectionFive.title) }}
     </p>
-    <h2 class="text-h2 text-start">
+    <h2 class="text-h2 text-start text-white">
-      {{ $t('home.sectionFive.topic') }}
+      {{ $t(sectionFive.topic) }}
     </h2>
-    <p class="mb-10 text-h6 text-start">
+    <p class="text-h6 mb-10 text-start">
-      {{ $t('home.sectionFive.description') }}
+      {{ $t(sectionFive.description) }}
     </p>
 
-    <div class="grid-row pb-20 lg:(grid-cols-3) md:(grid-cols-2)">
+    <div class="grid-row gap-12 pb-20 lg:(grid-cols-3) md:(grid-cols-2)">
       <div
-        v-for="col in 6"
+        v-for="(content, i) in sectionFive.content"
-        :key="col"
+        :key="i"
-        class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+        class="w-full"
-      />
+      >
+        <h4 text-h4 class="break-words text-start font-bold text-white !line-clamp-2">
+          {{ content.topic }}
+        </h4>
+        <p text-h5 class="break-words text-start !line-clamp-3">
+          {{ content.description }}
+        </p>
+      </div>
     </div>
   </Section>
+
+  <!-- Section Six -->
   <Section>
     <h2 class="text-h2">
-      {{ $t('home.sectionSix.topic') }}
+      {{ $t(sectionSix.topic) }}
     </h2>
     <p class="text-h6">
-      {{ $t('home.sectionSix.description') }}
+      {{ $t(sectionSix.description) }}
     </p>
 
-    <div v-for="(item, i) in imgs" :key="i" class="flex flex-wrap gap-4 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
+    <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-50% flex-grow">
-        <div class="relative h-full w-full flex items-center justify-center overflow-hidden rounded-xl shadow-lg" style="mask-image:linear-gradient(0deg, transparent, #000);">
+        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
           <img :src="item.img">
         </div>
       </div>
@@ -231,10 +205,10 @@ const sectionThree = useSectionThree()
           <p class="text-title">
             {{ item.title }}
           </p>
-          <h4 class="text-h4">
+          <h4 class="text-h4 font-bold">
             {{ item.topic }}
           </h4>
-          <p class="text-h6 text-stone-300 text-shadow-lg md:text-left">
+          <p class="text-h6 md:text-left">
             {{ item.description }}
           </p>
           <div w-full py-2 text-center>
@@ -248,6 +222,8 @@ const sectionThree = useSectionThree()
       </div>
     </div>
   </Section>
+
+  <!-- Section Seven -->
   <Section
     relative h-380px md:h-400px xl:h-450px
   >
@@ -296,7 +272,7 @@ const sectionThree = useSectionThree()
     <h2 class="text-h2 text-start">
       {{ $t('home.sectionFive.topic') }}
     </h2>
-    <p class="mb-10 text-h6 text-start">
+    <p class="text-h6 mb-10 text-start">
       {{ $t('home.sectionFive.description') }}
     </p>
   </Section>

public/topverse.black.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 749.65 91.19">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #000;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M80.84,7.07V22.23H48V72.75H32.84V22.23H0V7.07Z" />
+  <path class="cls-1"
+    d="M106.56,7.07H147q20.21,0,20.21,20.21V52.54q0,20.21-20.21,20.21H106.56q-20.22,0-20.21-20.21V27.28Q86.35,7.07,106.56,7.07ZM147,22.23H106.56q-5.06,0-5.06,5.05V52.54q0,5.06,5.06,5.05H147c3.36,0,5.05-1.68,5.05-5.05V27.28C152,23.91,150.34,22.23,147,22.23Z" />
+  <path class="cls-1"
+    d="M194.12,22.23V72.75H179V7.07h60.63q20.21,0,20.21,20.21T239.59,47.49H204.22V32.33h35.37q5.06,0,5-5t-5-5.05Z" />
+  <path class="cls-1" d="M261.11,7.07h16.68l26.77,51.84L331.34,7.07H348L304.56,91.19Z" />
+  <path class="cls-1"
+    d="M369.64,57.59h60.63V72.75H369.64q-20.2,0-20.21-20.21V27.28q0-20.21,20.21-20.21h60.63V22.23H369.64q-5.06,0-5.05,5.05V52.54Q364.59,57.6,369.64,57.59Zm40.42-25.26V47.49H374.69V32.33Z" />
+  <path class="cls-1"
+    d="M457.25,22.23V72.75H442.09V7.07h60.63q20.22,0,20.21,20.21T502.72,47.49h-3.84l25.26,25.26H502.72L462.3,32.33h40.42q5.05,0,5-5t-5-5.05Z" />
+  <path class="cls-1"
+    d="M592.2,72.75H531.57V57.59H592.2q5.06,0,5-5.05t-5-5H551.78q-20.21,0-20.21-20.21T551.78,7.07h60.63V22.23H551.78q-5.06,0-5,5.05t5,5H592.2q20.2,0,20.21,20.21T592.2,72.75Z" />
+  <path class="cls-1"
+    d="M642.73,57.59h60.63V72.75H642.73q-20.22,0-20.21-20.21V27.28q0-20.21,20.21-20.21h60.63V22.23H642.73q-5.06,0-5.06,5.05V52.54Q637.67,57.6,642.73,57.59Zm40.42-25.26V47.49H647.78V32.33Z" />
+  <path class="cls-1"
+    d="M730.5,38.29A18.44,18.44,0,0,1,717,32.68a18.45,18.45,0,0,1-5.62-13.53A18.45,18.45,0,0,1,717,5.61a19.13,19.13,0,0,1,27.07,0,18.45,18.45,0,0,1,5.61,13.54A18.44,18.44,0,0,1,744,32.68,18.48,18.48,0,0,1,730.5,38.29ZM729,8.84q9.72,0,9.72,7.36c0,3.06-1.26,5.18-3.77,6.33l4.83,6,.06-.06a12.76,12.76,0,0,0,3.89-9.36,12.77,12.77,0,0,0-3.89-9.37,13.23,13.23,0,0,0-18.74,0,12.76,12.76,0,0,0-3.88,9.37,12.75,12.75,0,0,0,3.88,9.36,13.26,13.26,0,0,0,17.71.95H734l-4.91-5.9H729v5.9h-5.89V8.84Zm0,5.89v2.94c2.55,0,3.83-.49,3.83-1.47S731.58,14.73,729,14.73Z" />
+</svg>

styles/ui.css

@@ -4,5 +4,5 @@
 }
 
 .a-btn{
-  --uno:'shadow-primary/80 ease-in-out transition-transform hover:scale-105 active:scale-98';
+  --uno:'shadow-primary/80 ease-in-out transition-transform active:scale-98';
 }