From 8cccb4bed0513cad00d921e13707c3f4f4c6091f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 17 Apr 2025 00:32:45 +0330
Subject: [PATCH] responsived and added new contact us gif

---
 frontend/pages/contact-us.vue | 107 +++++++++++++++++++++++-----------
 1 file changed, 72 insertions(+), 35 deletions(-)

diff --git a/frontend/pages/contact-us.vue b/frontend/pages/contact-us.vue
index eed0722..7f47c7c 100644
--- a/frontend/pages/contact-us.vue
+++ b/frontend/pages/contact-us.vue
@@ -53,18 +53,15 @@ const contactWays = ref([
 <template>
     <div class="w-full container flex flex-col">
         <div class="w-full flex-center py-[5rem]">
-            <div
-                class="flex flex-col items-center gap-[1.5rem] text-black w-full"
-            >
-                <h1 class="typo-h-3">ارتباط با ما</h1>
-                <p>
-                    ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر
-                    سوالی که ممکن است داشته باشید تماس بگیرید.
+            <div class="flex flex-col items-center gap-3 text-black w-full">
+                <h1 class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">ارتباط با ما</h1>
+                <p class="text-slate-500 text-center max-w-[750px] max-lg:text-sm leading-[175%]">
+                    ما اینجا هستیم تا کمک کنیم. برای پشتیبانی، بازخورد یا هر سوالی که ممکن است داشته باشید تماس بگیرید.
                 </p>
             </div>
         </div>
-        <div class="w-full flex items-start justify-between">
-            <div class="w-8/12 flex flex-col items-start gap-16">
+        <div class="w-full flex flex-col-reverse max-lg:-mt-14 lg:flex-row items-start justify-between">
+            <div class="w-full lg:w-8/12 flex flex-col items-start gap-10">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-[.6rem] w-full">
                     <div class="flex flex-col items-start w-full">
                         <Input
@@ -73,10 +70,16 @@ const contactWays = ref([
                         />
                     </div>
                     <div class="flex flex-col items-start w-full">
-                        <Input class="w-full" placeholder="پست الکترونیکی" />
+                        <Input
+                            class="w-full"
+                            placeholder="پست الکترونیکی"
+                        />
                     </div>
                     <div class="flex flex-col items-start w-full">
-                        <Input class="w-full" placeholder="شماره تلفن" />
+                        <Input
+                            class="w-full"
+                            placeholder="شماره تلفن"
+                        />
                     </div>
                     <div class="flex flex-col items-start w-full relative">
                         <Select
@@ -85,55 +88,89 @@ const contactWays = ref([
                             placeholder="نوع درخواست"
                         />
                     </div>
-                    <div
-                        class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]"
-                    >
+                    <div class="flex flex-col items-start col-span-1 md:col-span-2 h-[10rem] max-h-[12rem]">
                         <textarea
                             placeholder="پیغام شما"
-                            class="w-full flex items-center resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400"
+                            class="w-full flex items-center resize-none bg-slate-50 border-slate-200 hover:border-black focus:border-black h-[10rem] max-h-[12rem] text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-3.5 selection:bg-slate-100 rounded-100 outline-none flex-1 !text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
                         ></textarea>
                     </div>
                 </div>
-                <div
-                    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 w-full"
-                >
+
+                <div class="w-full flex-center pb-10 border-b border-slate-200">
+                    <!-- @click="handleSubmit"
+                    :loading="createTicketIsPending || uploadAttachmentIsPending" -->
+                    <Button
+                        class="rounded-full w-[14rem] h-11"
+                        size="md"
+                    >
+                        <!-- <Icon
+                            v-if="createTicketIsPending"
+                            :name="createTicketIsPending ? 'svg-spinners:3-dots-bounce' : 'bi:send'"
+                        /> -->
+                        <span>ارسال پیغام</span>
+                    </Button>
+                </div>
+
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-full max-lg:gap-10">
                     <div
                         v-for="(way, index) in contactWays"
                         :key="index"
-                        class="flex flex-col gap-3"
+                        class="flex flex-col max-lg:items-center gap-3"
                     >
-                        <span class="text-slate-500 typo-p-md">
+                        <span class="text-slate-500 max-lg:text-sm">
                             {{ way.title }}
                         </span>
                         <div
                             v-for="(link, index) in way.ways"
+                            :key="index"
                             class="flex flex-col"
                         >
-                            <a :href="link.path" class="text-black underline">{{
-                                link.title
-                            }}</a>
+                            <a
+                                :href="link.path"
+                                class="text-black underline max-lg:text-xs lg:text-sm"
+                                >{{ link.title }}</a
+                            >
                         </div>
                     </div>
-                    <div class="flex flex-col gap-3">
-                        <span class="text-slate-500 typo-p-md">
-                            شبکه های اجتماعی
-                        </span>
+                    <div class="flex flex-col max-lg:items-center gap-3">
+                        <span class="text-slate-500 typo-p-md"> شبکه های اجتماعی </span>
                         <div class="flex items-center gap-3">
-                            <a href="#" class="">
-                                <Icon name="bi:telegram" size="20" />
+                            <a
+                                href="#"
+                                class=""
+                            >
+                                <Icon
+                                    name="bi:telegram"
+                                    class="lg:text-lg"
+                                />
                             </a>
-                            <a href="#" class="">
-                                <Icon name="bi:instagram" size="20" />
+                            <a
+                                href="#"
+                                class=""
+                            >
+                                <Icon
+                                    name="bi:instagram"
+                                    class="lg:text-lg"
+                                />
                             </a>
-                            <a href="#" class="">
-                                <Icon name="bi:twitter-x" size="20" />
+                            <a
+                                href="#"
+                                class=""
+                            >
+                                <Icon
+                                    name="bi:twitter-x"
+                                    class="lg:text-lg"
+                                />
                             </a>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="w-4/12 h-full flex-center">
-                <NuxtImg src="/logo.png" class="size-2/3 -mt-5" />
+            <div class="w-full lg:w-4/12 h-full flex-center">
+                <NuxtImg
+                    src="/img/heymlz/contact-us.gif"
+                    class="size-2/3 -mt-5 lg:scale-150 drop-shadow-2xl"
+                />
             </div>
         </div>
     </div>