chore: foot translator

components/Footer.vue

@@ -1,9 +1,29 @@
+<script setup>
+import { useFoot } from '~/config/use-foot'
+
+const footer = useFoot()
+</script>
+
 <template>
-  <div class="grid-row py-10 lg:(grid-cols-3) md:(grid-cols-2)">
+  <Divider />
+  <div class="grid-row p-20 py-10 lg:(grid-cols-3) md:(grid-cols-2 px-30) xl:px-60">
     <div
-      v-for="col in 3"
+      v-for="(col, i) in footer"
-      :key="col"
+      :key="i"
-      class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+      class="w-full flex flex-col items-center gap-4"
-    />
+    >
+      <h5 text-title opacity-60>
+        {{ $t(col.title) }}
+      </h5>
+
+      <NuxtLink v-for="(item, i) in col.child" :key="i" class="font-bold" :href="item.link.href">
+        {{ item.link.name }}
+      </NuxtLink>
+    </div>
+  </div>
+  <div my-10 mt-20 flex items-center justify-center gap-4>
+    <BrandLogo />
+    © Copyright 2022 - 2023 LandVault · Wam Group · All rights reserved
+    <DarkToggle />
   </div>
 </template>

components/brand/logo.vue

@@ -1,5 +1,42 @@
+<script setup>
+const color = useColorMode()
+</script>
+
 <template>
-  <div inline-flex>
+  <div inline-flex :class="color.value === 'dark' ? 'text-white' : 'text-black'">
-    <img inline-block h-38 w-38 src="/topverse.black.svg">
+    <svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 749.65 91.19">
+      <path fill="currentColor" d="M80.84,7.07V22.23H48V72.75H32.84V22.23H0V7.07Z" />
+      <path
+        fill="currentColor"
+        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
+        fill="currentColor"
+        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
+        fill="currentColor" d="M261.11,7.07h16.68l26.77,51.84L331.34,7.07H348L304.56,91.19Z"
+      />
+      <path
+        fill="currentColor"
+        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
+        fill="currentColor"
+        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
+        fill="currentColor"
+        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
+        fill="currentColor"
+        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
+        fill="currentColor"
+        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>
   </div>
 </template>

components/header/nav.vue

@@ -8,11 +8,11 @@ const navs = useNav()
   <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">
-        <AMenu v-if="nav.child" style="--un-bg-opacity:0.5;--a-spacing:2" class="backdrop-blur-md" z-1000 mt-5 placement="bottom">
+        <AMenu v-if="nav.child" style="--un-bg-opacity:0.6;--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] [--a-spacing:1] !m-0 divide-y"
+            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"
           >
             <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
@@ -22,7 +22,7 @@ const navs = useNav()
               >
                 <template #prepend>
                   <AAvatar
-                    class="shrink-0"
+                    class="shrink-0 rounded-lg"
                     :icon="item.icon"
                   />
                 </template>

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

@@ -0,0 +1,49 @@
+export function useSectionEight() {
+  return {
+    topic: 'home.sectionEight.topic',
+    description: 'home.sectionEight.description',
+    content: [
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+      {
+        title: 'home.sectionEight.content.title[0]',
+        description: 'home.sectionEight.content.topic[0]',
+        icon: 'i-solar-airbuds-left-bold-duotone',
+      },
+
+    ],
+  }
+}

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

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

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

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

config/use-foot.ts

@@ -0,0 +1,77 @@
+export function useFoot() {
+  const { locale } = useI18n()
+
+  const path = locale.value === 'zh' ? '/' : `/${locale.value}`
+
+  return [
+    {
+      title: 'foot.group1.name',
+      child: [
+        {
+          link: {
+            name: 'foot.group1.link1',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group1.link2',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group1.link3',
+            href: '#',
+          },
+        },
+      ],
+    },
+    {
+      title: 'foot.group2.name',
+      child: [
+        {
+          link: {
+            name: 'foot.group2.link1',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group2.link2',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group2.link3',
+            href: '#',
+          },
+        },
+      ],
+    },
+    {
+      title: 'foot.group3.name',
+      child: [
+        {
+          link: {
+            name: 'foot.group3.link1',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group3.link2',
+            href: '#',
+          },
+        },
+        {
+          link: {
+            name: 'foot.group3.link3',
+            href: '#',
+          },
+        },
+      ],
+    },
+  ]
+}

nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     // '@nuxtjs/strapi',
     '@vue-macros/nuxt',
+    '@nuxt/content',
     '@nuxtjs/color-mode',
     '@vite-pwa/nuxt',
     '@nuxt/devtools',

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@anu-vue/nuxt": "^0.13.1",
     "@jiaminghi/color": "^1.1.3",
+    "sass": "^1.62.1",
     "swiper": "^9.2.4",
     "vue-tsc": "^1.2.0"
   },
@@ -22,6 +23,7 @@
     "@antfu/eslint-config": "^0.38.4",
     "@iconify-json/carbon": "^1.1.16",
     "@iconify-json/twemoji": "^1.1.11",
+    "@nuxt/content": "^2.6.0",
     "@nuxt/devtools": "^0.4.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "8.0.0-beta.11",

pages/index.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { useSectionEight } from '~/config/pages/home/use-section-eight'
 import { useSectionFive } from '~/config/pages/home/use-section-five'
 import { useSectionFour } from '~/config/pages/home/use-section-four'
+import { useSectionNine } from '~/config/pages/home/use-section-nine'
 import { useSectionOne } from '~/config/pages/home/use-section-one'
+import { useSectionSeven } from '~/config/pages/home/use-section-seven'
 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'
@@ -12,6 +15,9 @@ const sectionThree = useSectionThree()
 const sectionFour = useSectionFour()
 const sectionFive = useSectionFive()
 const sectionSix = useSectionSix()
+const sectionSeven = useSectionSeven()
+const sectionEight = useSectionEight()
+const sectionNine = useSectionNine()
 </script>
 
 <template>
@@ -22,20 +28,19 @@ const sectionSix = useSectionSix()
     <h2 class="text-h2" :title="$t(sectionOne.topic)">
       {{ $t(sectionOne.topic) }}
     </h2>
-    <div class="grid-row md:(grid-cols-2)" :class="`lg:grid-cols-${sectionOne.content.length}`">
+    <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-h3 break-words from-pink-500 to-violet-500 bg-gradient-to-r bg-clip-text font-bold text-transparent">
+        <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>
-        <Divider />
         <p :title="$t(col.description)" class="text-h6 mt-1 break-words !line-clamp-3">
           {{ $t(col.description) }}
         </p>
@@ -44,7 +49,7 @@ const sectionSix = useSectionSix()
   </Section>
 
   <!-- Section Two -->
-  <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)">
+  <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>
@@ -62,7 +67,7 @@ const sectionSix = useSectionSix()
   </Section>
 
   <!-- Section Three -->
-  <Section text-center>
+  <Section text-center class="section-three">
     <p class="text-title">
       {{ $t(sectionThree.title) }}
     </p>
@@ -82,7 +87,7 @@ const sectionSix = useSectionSix()
           class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <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="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 }}
@@ -100,7 +105,7 @@ const sectionSix = useSectionSix()
           class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <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="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 }}
@@ -118,7 +123,7 @@ const sectionSix = useSectionSix()
           class="group relative w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
         >
           <img :src="content.img">
-          <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="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 }}
@@ -164,11 +169,11 @@ const sectionSix = useSectionSix()
     <h2 class="text-h2 text-start text-white">
       {{ $t(sectionFive.topic) }}
     </h2>
-    <p class="text-h6 mb-10 text-start">
+    <p class="text-h6 mb-20 text-start">
       {{ $t(sectionFive.description) }}
     </p>
 
-    <div class="grid-row gap-12 pb-20 lg:(grid-cols-3) md:(grid-cols-2)">
+    <div class="grid-row gap-26 pb-10 lg:(grid-cols-3) md:(grid-cols-2)">
       <div
         v-for="(content, i) in sectionFive.content"
         :key="i"
@@ -177,7 +182,7 @@ const sectionSix = useSectionSix()
         <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">
+        <p text-h7 class="break-words text-start !line-clamp-3">
           {{ content.description }}
         </p>
       </div>
@@ -194,14 +199,14 @@ const sectionSix = useSectionSix()
     </p>
 
     <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
-      <div class="w-50% flex-grow">
+      <div class="w-45% flex-grow">
-        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
+        <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
           <img :src="item.img">
         </div>
       </div>
 
-      <div class="w-50% flex-grow">
+      <div class="w-55% flex-grow">
-        <div class="h-full w-full flex flex-col items-center justify-center md:items-start">
+        <div class="h-full w-full flex flex-col items-center justify-center px-16 md:items-start">
           <p class="text-title">
             {{ item.title }}
           </p>
@@ -211,10 +216,10 @@ const sectionSix = useSectionSix()
           <p class="text-h6 md:text-left">
             {{ item.description }}
           </p>
-          <div w-full py-2 text-center>
+          <div w-full py-10>
             <NuxtLink :href="item.link.href">
-              <ABtn variant="text">
+              <ABtn variant="light" class="group">
-                {{ item.link.name }}
+                {{ item.link.name }} <div i-solar-arrow-right-linear class="transition-all group-hover:px-4" />
               </ABtn>
             </NuxtLink>
           </div>
@@ -227,27 +232,38 @@ const sectionSix = useSectionSix()
   <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('${sectionSeven.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>
       <p class="text-title">
-        {{ $t('home.sectionSeven.title') }}
+        {{ $t(sectionSeven.title) }}
       </p>
       <h2 class="text-h2">
-        {{ $t('home.sectionSeven.topic') }}
+        {{ $t(sectionSeven.topic) }}
       </h2>
     </Section>
   </Section>
+
+  <!-- Section Eight -->
   <Section>
-    <div class="grid-row pb-20 lg:(grid-cols-4) md:(grid-cols-2)">
+    <div class="grid-row gap-20 pb-20 lg:(grid-cols-4) md:(grid-cols-2)">
       <div
-        v-for="col in 8"
+        v-for="(content, i) in sectionEight.content"
-        :key="col"
+        :key="i"
-        class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
+        class="w-full"
-      />
+      >
+        <div :class="content.icon" class="h-60px w-full" />
+        <h4 text-h4 class="break-words font-bold !line-clamp-2">
+          {{ content.title }}
+        </h4>
+        <p text-h7 class="break-words text-center !line-clamp-3">
+          {{ content.description }}
+        </p>
+      </div>
     </div>
 
-    <div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 shadow-lg lg:(grid-cols-2) md:(grid-cols-2)">
+    <!-- <div class="grid-row rounded-lg from-violet-500 to-fuchsia-500 bg-gradient-to-r p-5 text-white shadow-lg lg:(grid-cols-2)">
       <ATypography
+        class="text-white"
         title="Awesome mobile"
         subtitle="Biscuit liquorice apple pie candy canes"
         :text="['Donut jelly beans cake lollipop sweet biscuit. Pie apple pie powder apple pie gummi bears. Jelly apple pie croissant candy canes liquorice halvah.', 'text-sm']"
@@ -261,20 +277,30 @@ const sectionSix = useSectionSix()
           <span>I am agreed to terms and conditions</span>
         </ACheckbox>
       </div>
-    </div>
+    </div> -->
   </Section>
   <Divider />
 
+  <!-- Section Nine -->
   <Section my-10 from-green-500 to-lime-300 bg-gradient-to-r>
     <p class="text-title text-start">
-      {{ $t('home.sectionFive.title') }}
+      {{ $t(sectionNine.title) }}
     </p>
     <h2 class="text-h2 text-start">
-      {{ $t('home.sectionFive.topic') }}
+      {{ $t(sectionNine.topic) }}
     </h2>
     <p class="text-h6 mb-10 text-start">
-      {{ $t('home.sectionFive.description') }}
+      {{ $t(sectionNine.description) }}
     </p>
   </Section>
   <Divider />
 </template>
+
+<style scoped lang="scss">
+.section-three{
+  .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>

uno.config.ts

@@ -32,6 +32,7 @@ export default defineConfig({
   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',
   ],
   presets: [
     presetAnu(),