chore: 翻译适配，主题适配

2023-05-04 00:47:08 +08:00 · 2023-05-04 00:47:08 +08:00 · b5b00c5986
parent 7e81611ec1
commit b5b00c5986
17 changed files with 313 additions and 241 deletions
--- a/app.vue
+++ b/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>

--- a/components/Carousel.vue
+++ b/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">
-          <h2 class="text-h2 text-start text-white">
+        <div class="absolute absolute z-10 hidden 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>
-          <ABtn class="text-xl">
-            {{ $t(item.entry) }}
-          </ABtn>
+          <NuxtLink :href="item.link.href">
+            <ABtn class="text-xl">
+              {{ $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
--- a/components/brand/logo.vue
+++ b/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>
--- a/components/header/nav.vue
+++ b/components/header/nav.vue
@ -5,36 +5,33 @@ const navs = useNav()
 </script>

 <template>
-  <nav
-    :class="{
-      hidden: y > 10,
-    }"
-  >
+  <nav>
    <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">
-        <AMenu v-if="nav.child" color="white" trigger="hover" z-1000 mt-5 placement="bottom">
+      <ABtn variant="text">
+        <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)"
-                :icon="item.icon"
-              />
+                :subtitle="item.subtitle && $t(item.subtitle)"
+              >
+                <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>
--- a/config/pages/home/use-carousel.ts
+++ b/config/pages/home/use-carousel.ts
@ -1,28 +1,13 @@
 export function useCarousel() {
  return [
    {
-      title: 'home.carousel.one.topic',
-      description: 'home.carousel.one.description',
-      entry: 'home.carousel.one.entry',
+      title: 'home.carousel.topic[0]',
+      description: 'home.carousel.description[0]',
+      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',
-    },
  ]
 }
--- a/config/pages/home/use-section-five.ts
+++ b/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]',
+      },
+    ],
+  }
+}
--- a/config/pages/home/use-section-four.ts
+++ b/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: '#',
+    },
+  }
+}
--- a/config/pages/home/use-section-one.ts
+++ b/config/pages/home/use-section-one.ts
@ -4,19 +4,19 @@ export function useSectionOne() {
    description: 'home.sectionOne.description',
    content: [
      {
-        title: 'home.sectionOne.one.title',
-        subtext: 'home.sectionOne.one.subtext',
-        description: 'home.sectionOne.one.description',
+        title: 'home.sectionOne.content.title[0]',
+        subtext: 'home.sectionOne.content.subtext[0]',
+        description: 'home.sectionOne.content.description[0]',
      },
      {
-        title: 'home.sectionOne.two.title',
-        subtext: 'home.sectionOne.two.subtext',
-        description: 'home.sectionOne.two.description',
+        title: 'home.sectionOne.content.title[1]',
+        subtext: 'home.sectionOne.content.subtext[1]',
+        description: 'home.sectionOne.content.description[1]',
      },
      {
-        title: 'home.sectionOne.three.title',
-        subtext: 'home.sectionOne.three.subtext',
-        description: 'home.sectionOne.three.description',
+        title: 'home.sectionOne.content.title[2]',
+        subtext: 'home.sectionOne.content.subtext[2]',
+        description: 'home.sectionOne.content.description[2]',
      },
    ],
  }
--- a/config/pages/home/use-section-six.ts
+++ b/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',
+      },
+
+    ],
+  }
+}
--- a/config/pages/home/use-section-three.ts
+++ b/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',
-    contentFirst: [
+    link: {
+      name: 'home.sectionThree.link',
+      href: '#',
+    },
+    contentPrimary: [
      {
-        topic: 'home.sectionThree.contentFirst.topic1',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentPrimary.topic[0]',
+        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',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentSecondary.topic[0]',
+        img: '/imgs/1 (5).jpg',
+        href: '#',
+      }, {
+        topic: 'home.sectionThree.contentSecondary.topic[1]',
+        img: '/imgs/1 (3).jpg',
        href: '#',
      },
      {
-        topic: 'home.sectionThree.contentSecondary.topic2',
-        img: '/imgs/1 (1).jpg',
-        href: '#',
-      },
-      {
-        topic: 'home.sectionThree.contentSecondary.topic3',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentSecondary.topic[2]',
+        img: '/imgs/1 (4).jpg',
        href: '#',
      },

    ],
    contentThird: [
      {
-        topic: 'home.sectionThree.contentThird.topic1',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentThird.topic[0]',
+        img: '/imgs/1 (9).jpg',
+        href: '#',
+      }, {
+        topic: 'home.sectionThree.contentThird.topic[1]',
+        img: '/imgs/1 (6).jpg',
        href: '#',
      },
      {
-        topic: 'home.sectionThree.contentThird.topic2',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentThird.topic[2]',
+        img: '/imgs/1 (7).jpg',
        href: '#',
      },
      {
-        topic: 'home.sectionThree.contentThird.topic3',
-        img: '/imgs/1 (1).jpg',
-        href: '#',
-      },
-      {
-        topic: 'home.sectionThree.contentThird.topic4',
-        img: '/imgs/1 (1).jpg',
+        topic: 'home.sectionThree.contentThird.topic[3]',
+        img: '/imgs/1 (8).jpg',
        href: '#',
      },

--- a/config/pages/home/use-section-two.ts
+++ b/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]',
      },
    ],
  }
--- a/config/use-nav.ts
+++ b/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',
-          icon: 'i-solar-airbuds-case-open-line-duotone text-amber',
+          href: `${path}/landa`,
+          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`,
    },
  ]
 }
--- a/layouts/default.vue
+++ b/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
-      :class="{
-        hidden: !!y,
-      }"
-    />
-    <slot />
-    <Footer />
-  </main>
+  <Header />
+  <slot />
+  <Footer />
 </template>
--- a/locales/en-UK.json
+++ b/locales/en-UK.json
@ -1,6 +1,6 @@
 {
  "nav": {
-    "test":"Community",
+    "test": "Community",
    "home": "Home",
    "solutions": {
      "t": "Solutions",
@ -15,49 +15,37 @@
    "learn": "learn",
    "check": "check app",
    "touch": "get in touch"
-    
+
  },
  "scrolldown": "Scroll down to learn more",
-  
+
  "home": {
-    "carousel":{
-      "one":{
-        "topic":"Never Drink Alone",
-        "description":"The Bar Symphony in Decentraland",
-        "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"
-      }
+    "carousel": {
+      "topic": ["Never Drink Alone", "Metaverse Congress Hall"],
+      "description": ["The Bar Symphony in Decentraland", "One should never ignore the power of nature"],
+      "link": ["Details", "Details"]
    },
    "sectionOne": {
      "topic": "Your End-To-End Metaverse Developers",
-      "one":{
-        "title":"80+",
-        "subtext":"Metaverse Experts & Engineers",
-        "description":"Architects, Developers, Producers, amd more"
-      },
-      "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"
+      "content": {
+        "title": ["80+", "20+", "2 Million+"],
+        "subtext": ["Metaverse Experts & Engineers", "Completed Builds & Inventions", "Square Meters Developed"],
+        "description": ["We have been developing in metaverse since 2021", "Architects, Developers, Producers, amd more", "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",
--- a/pages/index.vue
+++ b/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 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
-            <div class="w-full text-h4">
-              <p :title="content.topic" class="w-90% truncate">
+          <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="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 />
+            <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 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
-            <div class="w-full text-h4">
-              <p :title="content.topic" class="w-90% truncate">
+          <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="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 />
+            <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 z-10 w-full flex items-center justify-center stroke-3 p-2 px-10">
-            <div class="w-full text-h4">
-              <p :title="content.topic" class="w-90% truncate">
+          <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="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 />
+            <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);" />
-    <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-white text-shadow>
+    <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-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>
-        {{ $t('home.sectionFour.entry') }}
-      </ABtn>
+      <NuxtLink :href="sectionFour.link.href">
+        <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">
-      {{ $t('home.sectionFive.topic') }}
+    <h2 class="text-h2 text-start text-white">
+      {{ $t(sectionFive.topic) }}
    </h2>
-    <p class="mb-10 text-h6 text-start">
-      {{ $t('home.sectionFive.description') }}
+    <p class="text-h6 mb-10 text-start">
+      {{ $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"
-        :key="col"
-        class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
-      />
+        v-for="(content, i) in sectionFive.content"
+        :key="i"
+        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>
--- a/public/topverse.black.svg
+++ b/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>
--- a/styles/ui.css
+++ b/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';
 }