40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<template>
|
|
<section class="bg-white py-8 dark:bg-surface">
|
|
<div class="mx-auto max-w-[1200px] px-6 xl:px-8">
|
|
<div
|
|
class="rounded-2xl bg-[#001f3f] px-3 py-5 dark:bg-[#0f172a] sm:px-6 sm:py-7 xl:px-10 xl:py-8"
|
|
>
|
|
<div class="grid grid-cols-4 gap-2 lg:gap-4">
|
|
<div
|
|
v-for="item in items"
|
|
:key="item.label"
|
|
class="flex flex-col items-center gap-1.5 text-center lg:flex-row lg:items-center lg:gap-3 lg:text-right"
|
|
>
|
|
<div
|
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-brand-500/80 text-brand-500 lg:h-11 lg:w-11"
|
|
>
|
|
<AppIcon :name="item.icon" size="sm" class="lg:hidden" />
|
|
<AppIcon :name="item.icon" size="md" class="hidden lg:block" />
|
|
</div>
|
|
<p class="text-[10px] font-bold leading-4 text-white lg:text-sm lg:leading-6">
|
|
{{ item.label }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import AppIcon from '@/components/ui/AppIcon.vue';
|
|
import type { AppIconName } from '@/types/icons';
|
|
|
|
const items: { label: string; icon: AppIconName }[] = [
|
|
{ label: 'پشتیبانی ۲۴/۷', icon: 'headphones' },
|
|
{ label: 'پرداخت امن', icon: 'circle-check' },
|
|
{ label: 'تخفیفهای ویژه', icon: 'badge-percent' },
|
|
{ label: 'رزرو سریع و آسان', icon: 'clock' },
|
|
];
|
|
</script>
|