From 4fbc131de290a0a542160c56b9795767fc6eee24 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:22:19 +0330
Subject: [PATCH] updated style

---
 .../components/global/ServiceHighlights.vue   | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/components/global/ServiceHighlights.vue b/frontend/components/global/ServiceHighlights.vue
index ea8e905..e94ea1f 100644
--- a/frontend/components/global/ServiceHighlights.vue
+++ b/frontend/components/global/ServiceHighlights.vue
@@ -13,48 +13,57 @@ const highlights = ref<Highlight[]>([
     {
         icon: "/img/footer-support.svg",
         title: "خدمات مشتری",
-        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما"
+        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
     },
     {
         icon: "/img/footer-send.svg",
         title: "ارسال سریع و رایگان",
-        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار"
+        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
     },
     {
         icon: "/img/footer-share.svg",
         title: "معرفی به دوستان",
-        description: "ما را به دوستان خود معرفی کنید"
+        description: "ما را به دوستان خود معرفی کنید",
     },
     {
         icon: "/img/footer-security.svg",
         title: "پرداخت امن",
-        description: "پرداخت شما به‌صورت امن پردازش می‌شود"
-    }
+        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">
+        <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="" />
+                    <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">
+                        <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-sm mt-1 text-center">
+                        <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"-->
-<!--                />-->
+                <!--                <div-->
+                <!--                    class="w-[1px] h-[5rem] bg-slate-200"-->
+                <!--                    v-if="index + 1 != highlights.length"-->
+                <!--                />-->
             </template>
         </div>
     </section>