adding clickable phone number

components/_Header.vue

@@ -20,11 +20,12 @@
 						<li class="nav-item"><a :href="localePath('/#about')" class="nav-link">{{ $t('About') }}</a></li>
 						<li class="nav-item"><a :href="localePath('/#services')" class="nav-link">{{ $t('Services') }}</a></li>
 						<li class="nav-item"><a :href="localePath('/#works')" class="nav-link">{{ $t('Works') }}</a></li>
+
 					</ul>
 
 					<ul class="navbar-nav nav nav-pills ms-auto justify-content-end order-md-3 text-center mt-3 mt-md-0">
 						<li class="nav-item mb-3 mb-md-0">
-							<a :href="localePath('/#contact')" class="btn btn-sm btn-primary px-4">{{ $t('contactus') }}</a>
+							<a :href="localePath('/contact')" class="btn btn-sm btn-primary px-4">{{ $t('contactus') }}</a>
 						</li>
 						<li class="nav-item mb-3 mb-md-0 mx-md-3">
                             <nuxt-link href="#" class="btn btn-sm btn-light px-2" v-if="$i18n.locale !== 'en'" :to="`${switchLocalePath('en')}`">English</nuxt-link>

components/sections/Contact.vue

@@ -20,13 +20,28 @@
 									<h3 class="fw-bold">{{ $t('orsimplyusethese') }}</h3>
 									<div class="contact-info ps-4">
 										<h6 class="mt-4"><i class="bi bi-phone"></i> {{ $t('phonenumber') }}:</h6>
-										<a @click="trackPhoneNumberClick">+966 56 664 2220</a>
-										<!-- <a dir="ltr" href="tel:+966-566642220">+966 56 664 2220</a> -->
+										<a 
+											dir="ltr" 
+											href="tel:+966566642220" 
+											@click="trackPhoneNumberClick"
+											class="text-decoration-none text-dark">
+											+966 56 664 2220
+										</a>
 										<h6 class="mt-4"><i class="bi bi-envelope"></i> {{ $t('emailaddress') }}:</h6>
-										<a  dir="ltr" href="mailto:[email protected]">[email protected]</a>
+										<a 
+											dir="ltr" 
+											href="mailto:[email protected]" 
+											class="text-decoration-none text-dark">
+											[email protected]
+										</a>
 										<h6 class="mt-4"><i class="bi bi-globe"></i> {{ $t('address') }}:</h6>
-                                        <p v-html="$t('address_details')"></p>
-										<iframe class="w-100" src="https://snazzymaps.com/embed/281438" height="300px" style="border: none"></iframe>
+										<p v-html="$t('address_details')"></p>
+										<iframe 
+											class="w-100" 
+											src="https://snazzymaps.com/embed/281438" 
+											height="300px" 
+											style="border: none">
+										</iframe>
 									</div>
 								</div>
 							</div>
@@ -56,6 +71,5 @@
 </script>
 
 <style>
+/* Add your custom styles here */
 </style>
-
-

lang/ar-SA.js

@@ -48,5 +48,6 @@ export default {
 	citiesreached: 'مدينة نخدم عملائنا فيها',
 	countries: 'دول',
 	pageUnderMaintenance: 'عذراً، الصفحة تحت الصيانة',
-	pageUnderMaintenanceDescription: 'الرجاء المحاولة لاحقاً'
+	pageUnderMaintenanceDescription: 'الرجاء المحاولة لاحقاً',
+   contacts:'تواصل معنا'
   }

lang/en-US.js

@@ -49,5 +49,6 @@ export default {
 	citiesreached: 'Cities Reached',
 	countries: 'Countries',
 	pageUnderMaintenance: 'Sorry, the page is under maintenance',
-	pageUnderMaintenanceDescription: 'Please, try again later.'
+	pageUnderMaintenanceDescription: 'Please, try again later.',
+  contacts:'Contact Us'
   }

pages/contact.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>