mohadese-nm
60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
|
<div class="about-us">
|
|
<div>
|
|
<img src="/images/anahitaLogo.webp" alt="logo" />
|
|
<p>{{ $t("aboutUsDesc") }}</p>
|
|
</div>
|
|
<ul>
|
|
<li v-for="item in items" :key="item">
|
|
<i :class="`isax isax-${item.icon}`" />
|
|
<span>{{ $t(item.title) }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const items = reactive([
|
|
{ icon: "call", title: "aboutUsPhone" },
|
|
{ icon: "location", title: "aboutUsAddress" },
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
footer .about-us {
|
|
@apply flex flex-col gap-6 p-8 font-vazir;
|
|
@apply w-full h-auto bg-zinc-100 rounded-2xl border-2 border-neutral-200;
|
|
@apply sm:w-[32.7rem] sm:h-[31.3rem];
|
|
@apply lg:flex-row lg:w-[57.7rem] lg:h-auto;
|
|
@apply xl:flex-col xl:w-[32.7rem] xl:h-[31.3rem];
|
|
|
|
&>div {
|
|
@apply flex flex-col gap-6;
|
|
|
|
img {
|
|
@apply w-[209px] h-16;
|
|
}
|
|
|
|
p {
|
|
@apply w-auto sm:w-[28.1rem] text-zinc-800 text-lg leading-[1.9rem];
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-4 mt-4;
|
|
|
|
li {
|
|
@apply flex gap-3 h-max;
|
|
|
|
i {
|
|
@apply text-2xl h-[1.9rem];
|
|
}
|
|
|
|
span {
|
|
@apply text-zinc-800 text-base font-medium leading-[1.9rem];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|