marzban-dev
64 lines
2.0 KiB
Vue
64 lines
2.0 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 flex-center py-[5rem] gap-[1.25rem] container">
|
|
<template v-for="(highlight, index) in highlights" :key="index">
|
|
<div class="flex flex-col-center gap-[.75rem] w-1/4 px-5">
|
|
|
|
<img :src="highlight.icon" class="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>
|