mohadese namavar
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div class="social-networks">
|
|
<h2>{{ $t("followUs") }}</h2>
|
|
<ul>
|
|
<li v-for="({url, icon}, i) in socials" :key="i">
|
|
<a :href="url" target="_blank">
|
|
<img :src="`/icons/${icon}.svg`" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const socials = reactive([
|
|
{ url: "/", icon: "linkedin" },
|
|
{ url: "/", icon: "telegram" },
|
|
{ url: "/", icon: "whatsapp" },
|
|
{ url: "/", icon: "instagram" },
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
footer .social-networks {
|
|
@apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
|
|
@apply flex flex-col items-center justify-between px-6;
|
|
@apply w-full h-auto gap-4 py-4;
|
|
@apply lg:w-[57.7rem] lg:h-[4.5rem] md:flex-row;
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-lg font-medium font-vazir leading-[1.9rem];
|
|
}
|
|
|
|
ul {
|
|
@apply flex gap-2;
|
|
|
|
li {
|
|
@apply w-max h-max;
|
|
a {
|
|
@apply w-10 h-10 bg-[#B2B2B2] hover:bg-[#43E97B] rounded-full flex items-center justify-center;
|
|
img {
|
|
@apply h-6 w-6 object-scale-down;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|