From 1bd444ad9eff6ed3f923ba5418537ea56499abc3 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 26 Dec 2024 20:50:47 +0330
Subject: [PATCH] new changes

---
 .../components/global/ServiceHighlights.vue   | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 frontend/components/global/ServiceHighlights.vue

diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
new file mode 100644
index 0000000..7ea8f5b
--- /dev/null
+++ b/frontend/components/global/ServiceHighlights.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// types
+
+type Highlight = {
+    icon: string;
+    title: string;
+    description: string;
+};
+
+// state
+
+const highlights = ref<Highlight[]>([
+    {
+        icon: "ci:headset",
+        title: "خدمات مشتری",
+        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار",
+    },
+    {
+        icon: "ci:delivery",
+        title: "ارسال سریع و رایگان",
+        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
+    },
+    {
+        icon: "ci:users",
+        title: "معرفی به دوستان",
+        description: "دوستان خود را معرفی کنید و هر دو ۱۵٪ تخفیف بگیرید",
+    },
+    {
+        icon: "ci:shield-done",
+        title: "پرداخت امن",
+        description: "اطلاعات پرداخت شما به‌صورت امن پردازش می‌شود",
+    },
+]);
+</script>
+
+<template>
+    <section 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">
+                <div class="size-[1.5rem] flex-center">
+                    <Icon :name="highlight.icon" />
+                </div>
+                <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-md text-center">
+                        {{ highlight.description }}
+                    </p>
+                </div>
+            </div>
+
+            <div
+                class="w-[1px] h-[5rem] bg-slate-200"
+                v-if="index + 1 != highlights.length"
+            />
+        </template>
+    </section>
+</template>
+
+<style scoped></style>