44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<template>
|
|
<div class="customer-services">
|
|
<h2>{{ $t("customer-services") }}</h2>
|
|
<ul>
|
|
<li v-for="(service, i) in services" :key="i">
|
|
<a :href="service.url">
|
|
<span>{{ $t(service.title) }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const services = reactive([
|
|
{ url: "/contact-us", title: "contactUs" },
|
|
{ url: "/about-us", title: "aboutUs" },
|
|
{ url: "/search", title: "shop" },
|
|
{ url: "/blog", title: "media" },
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
footer .customer-services {
|
|
@apply flex flex-col gap-4 w-max font-vazir items-center sm:items-start;
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-xl font-bold leading-[1.9rem];
|
|
}
|
|
|
|
ul {
|
|
@apply flex gap-4 sm:flex-col justify-between sm:gap-2;
|
|
|
|
li {
|
|
a {
|
|
span {
|
|
@apply text-stone-500 text-[0.9em] leading-[1.9rem] hover:text-primary-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|