fix more in ui

Hetari · Sep 6, 2024 · 1024643 · 1024643
1 parent ea72b9e
commit 1024643
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/components/Link.vue b/src/components/Link.vue
@@ -7,20 +7,45 @@
     <a @click="gotoSection(url)" :href="url" class="group">
       <p
         class="font-fancy -translate-y-0 transition-all duration-300 ease-in-out"
-        :class="
-          i18n.global.locale == 'en'
-            ? 'group-hover:translate-y-[-100%]'
-            : 'group-hover:translate-y-[-120%]'
-        "
+        :class="`${i18n.global.locale == 'en' ? 'group-hover:translate-y-[-100%]' : 'group-hover:translate-y-[-120%]'} ${icon ? 'flex' : ''}`"
       >
+        <svg
+          v-if="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          role="img"
+          class="-scale-x-100 fill-current"
+          :class="{ '!scale-x-100': i18n.global.locale == 'ar' }"
+        >
+          <path
+            d="M7.82834 17.2929L10.1213 19.586L8.70709 21.0001L4 16.2929L8.7071 11.5858L10.1213 13L7.82844 15.2929L18 15.2928L17.9999 3H19.9999L20 16.2928C20 16.8451 19.5523 17.2928 19 17.2928L7.82834 17.2929Z"
+          ></path>
+        </svg>
         {{ label }}
       </p>
       <p
         class="font-fancy transition-all duration-300 ease-in-out group-hover:translate-y-[-100%]"
         :class="{
           'translate-y-[1ch]': i18n.global.locale == 'ar',
+          flex: icon,
         }"
       >
+        <svg
+          v-if="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          role="img"
+          class="-scale-x-100 fill-current"
+          :class="{ '!scale-x-100': i18n.global.locale == 'ar' }"
+        >
+          <path
+            d="M7.82834 17.2929L10.1213 19.586L8.70709 21.0001L4 16.2929L8.7071 11.5858L10.1213 13L7.82844 15.2929L18 15.2928L17.9999 3H19.9999L20 16.2928C20 16.8451 19.5523 17.2928 19 17.2928L7.82834 17.2929Z"
+          ></path>
+        </svg>
         {{ label }}
       </p>
     </a>
@@ -48,5 +73,9 @@
       type: String,
       required: true,
     },
+    icon: {
+      type: Boolean,
+      default: false,
+    },
   });
 </script>
diff --git a/src/components/sections/Contact.vue b/src/components/sections/Contact.vue
@@ -56,10 +56,13 @@
         </div>
 
         <div class="heading-6 w-fit text-flax-smoke-500">
-          <p class="w-full font-bold uppercase">For further inquiries</p>
+          <p class="w-full !font-title font-bold uppercase">
+            For further inquiries
+          </p>
           <Link
             class="h-6 text-right font-medium lowercase tracking-wider text-flax-smoke-300"
-            label="⮡ hetari4all@gmail"
+            label="hetari4all@gmail"
+            :icon="true"
             url="mailto:hetari4all@gmail"
           />
         </div>