marzban-dev
68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Highlight = {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
// state
|
|
|
|
const highlights = ref<Highlight[]>([
|
|
{
|
|
icon: "/img/heymlz/footer-support.gif",
|
|
title: "خدمات مشتری",
|
|
description: "پشتیبانی ویژه، راهحلی پایدار برای شما",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-send.gif",
|
|
title: "ارسال سریع و مطمئن",
|
|
description: "پردازش محصولات با سرعت بالا و ارسال مطمئن",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-share.gif",
|
|
title: "معرفی به دوستان",
|
|
description: "ما را به دوستان خود معرفی کنید",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-security.gif",
|
|
title: "پرداخت امن",
|
|
description: "پرداخت شما بهصورت امن پردازش میشود",
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full border-t-[0.5px] border-slate-200">
|
|
<div class="w-full py-[3rem] lg:py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4">
|
|
<template
|
|
v-for="(highlight, index) in highlights"
|
|
:key="index"
|
|
>
|
|
<div class="flex flex-col-center gap-[.75rem] px-5">
|
|
<div class="size-[70px] md:size-[100px] flex-center">
|
|
<NuxtImg
|
|
:src="highlight.icon"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div class="w-full flex-col-center gap-[.25rem]">
|
|
<span class="typo-sub-h-sm lg:typo-sub-h-md text-black text-center">
|
|
{{ highlight.title }}
|
|
</span>
|
|
<p class="text-slate-500 typo-p-xs lg:typo-p-sm mt-1 text-center">
|
|
{{ highlight.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped></style>
|