From f9da506668ae5feae93f1f3c94b34a31e364844a Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 8 Apr 2025 23:29:41 +0330
Subject: [PATCH] added mobile style

---
 frontend/pages/profile/index.vue | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index de823c8..4d7a44f 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -165,12 +165,14 @@ const handleSubmit = (withValidation: boolean) => {
 
         <div class="flex flex-col gap-6">
             <div
-                class="w-full flex items-center justify-between border p-6 rounded-xl border-slate-200"
+                class="w-full flex flex-col lg:flex-row items-center max-lg:gap-5 lg:justify-between border p-6 rounded-xl border-slate-200"
             >
-                <div class="flex items-center justify-start gap-5 w-8/12">
+                <div
+                    class="flex items-center justify-start gap-5 w-full lg:w-8/12"
+                >
                     <div class="relative shrink-0 rounded-full flex-center">
                         <Avatar
-                            class="!size-32"
+                            class="!size-20 lg:!size-32"
                             :src="account!.profile_photo"
                             :alt="
                                 account?.first_name && account?.last_name
@@ -188,41 +190,47 @@ const handleSubmit = (withValidation: boolean) => {
                         />
                     </div>
 
-                    <div class="flex flex-col gap-3">
-                        <span class="typo-sub-h-lg"
+                    <div class="flex flex-col gap-2 lg:gap-3">
+                        <span class="typo-sub-h-md lg:typo-sub-h-lg"
                             >{{ account?.first_name }}
                             {{ account?.last_name }}</span
                         >
-                        <span class="typo-sub-h-sm font-light text-slate-600">
+                        <span
+                            class="typo-sub-h-xs lg:typo-sub-h-sm font-light text-slate-600 leading-[200%]"
+                        >
                             با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
                             بایوگرافی درست میکنه :)
                         </span>
                         <div
                             class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
                         >
-                            <div class="rounded-full p-2">
+                            <div class="rounded-full p-1.5 lg:p-2">
                                 <Icon
                                     name="bi:patch-check"
                                     class="**:fill-yellow-400"
                                     size="20"
                                 />
                             </div>
-                            <span class="text-xs text-yellow-500"
+                            <span class="text-[10px] lg:text-xs text-yellow-500"
                                 >جزو ۳ مشتری برتر</span
                             >
                         </div>
                     </div>
                 </div>
 
-                <div class="flex flex-col items-start gap-3 w-4/12">
-                    <span class="typo-sub-h-lg">لقب های شما</span>
+                <div class="flex flex-col items-start gap-3 w-full lg:w-4/12">
+                    <span class="typo-sub-h-md lg:typo-sub-h-lg"
+                        >لقب های شما</span
+                    >
                     <span class="flex w-full flex-wrap gap-2">
                         <span
                             v-for="(alise, index) in alises"
                             :key="index"
-                            class="flex-center bg-slate-50 border border-slate-200 py-2 px-3 w-max rounded-full"
+                            class="flex-center bg-slate-50 border border-slate-200 py-1.5 lg:py-2 px-3 w-max rounded-full"
                         >
-                            <span class="text-xs text-black">{{ alise }}</span>
+                            <span class="text-[10px] lg:text-xs text-black">{{
+                                alise
+                            }}</span>
                         </span>
                     </span>
                 </div>