chore: foot translator
This commit is contained in:
parent
c03692e0e2
commit
94ec1aaee0
|
|
@ -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"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
v-for="(col, i) in footer"
|
||||
:key="i"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,42 @@
|
|||
<script setup>
|
||||
const color = useColorMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div inline-flex>
|
||||
<img inline-block h-38 w-38 src="/topverse.black.svg">
|
||||
<div inline-flex :class="color.value === 'dark' ? 'text-white' : 'text-black'">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
||||
],
|
||||
}
|
||||
}
|
||||
|
|
@ -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: '#',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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: '#',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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: '#',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ export default defineNuxtConfig({
|
|||
'@nuxtjs/i18n',
|
||||
// '@nuxtjs/strapi',
|
||||
'@vue-macros/nuxt',
|
||||
'@nuxt/content',
|
||||
'@nuxtjs/color-mode',
|
||||
'@vite-pwa/nuxt',
|
||||
'@nuxt/devtools',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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="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="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 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="h-full w-full flex flex-col items-center justify-center md:items-start">
|
||||
<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 }}
|
||||
</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">
|
||||
{{ item.link.name }}
|
||||
<ABtn variant="light" class="group">
|
||||
{{ 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"
|
||||
:key="col"
|
||||
class="h-10 w-full rounded-lg bg-primary bg-opacity-35"
|
||||
/>
|
||||
v-for="(content, i) in sectionEight.content"
|
||||
:key="i"
|
||||
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>
|
||||
|
|
|
|||
1964
pnpm-lock.yaml
1964
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -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(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue