marzban-dev
64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Highlight = {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
|
|
// state
|
|
|
|
const highlights = ref<Highlight[]>([
|
|
{
|
|
icon: "/img/footer-support.svg",
|
|
title: "خدمات مشتری",
|
|
description: "پشتیبانی استثنایی، راهحلهای پایدار برای شما"
|
|
},
|
|
{
|
|
icon: "/img/footer-send.svg",
|
|
title: "ارسال سریع و رایگان",
|
|
description: "ارسال رایگان برای سفارشهای بالای ۱۵۰ دلار"
|
|
},
|
|
{
|
|
icon: "/img/footer-share.svg",
|
|
title: "معرفی به دوستان",
|
|
description: "ما را به دوستان خود معرفی کنید"
|
|
},
|
|
{
|
|
icon: "/img/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-12 xs:gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-1 xs: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-md text-black text-center">
|
|
{{ highlight.title }}
|
|
</span>
|
|
<p class="text-slate-500 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>
|