marzban-dev
73 lines
2.4 KiB
Vue
73 lines
2.4 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.svg",
|
|
title: "خدمات مشتری",
|
|
description: "پشتیبانی استثنایی، راهحلهای پایدار برای شما",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-send.svg",
|
|
title: "ارسال سریع و رایگان",
|
|
description: "ارسال رایگان برای سفارشهای بالای ۱۵۰ دلار",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-share.svg",
|
|
title: "معرفی به دوستان",
|
|
description: "ما را به دوستان خود معرفی کنید",
|
|
},
|
|
{
|
|
icon: "/img/heymlz/footer-security.svg",
|
|
title: "پرداخت امن",
|
|
description: "پرداخت شما بهصورت امن پردازش میشود",
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full border-t-[0.5px] border-slate-200">
|
|
<div
|
|
class="w-full 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">
|
|
<img
|
|
:src="highlight.icon"
|
|
class="size-[70px] md:size-[90px]"
|
|
alt=""
|
|
/>
|
|
|
|
<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>
|
|
|
|
<!-- <div-->
|
|
<!-- class="w-[1px] h-[5rem] bg-slate-200"-->
|
|
<!-- v-if="index + 1 != highlights.length"-->
|
|
<!-- />-->
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped></style>
|