Egor fureunoir Gorbunov
cc11da01f9
Updated the SVG logo file in storefront to replace evibes branding with schon. Includes enhanced styling and additional view properties for resolution compatibility.
104 lines
No EOL
2.5 KiB
Vue
104 lines
No EOL
2.5 KiB
Vue
<template>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__wrapper">
|
|
<div class="footer__column">
|
|
<nuxt-link-locale to="/">
|
|
<nuxt-img
|
|
format="webp"
|
|
width="150px"
|
|
densities="x1"
|
|
src="/images/schon-big.png"
|
|
alt="logo"
|
|
loading="lazy"
|
|
class="header__logo"
|
|
/>
|
|
</nuxt-link-locale>
|
|
<p>{{ t('footer.address') }} <a :href="`https://www.google.com/maps/search/?api=1&query=${encodedCompanyAddress}`" target="_blank" rel="noopener noreferrer">{{ companyInfo?.companyAddress }}</a></p>
|
|
<p>{{ t('footer.email') }} <a :href="'mailto:' + companyInfo?.emailFrom">{{ companyInfo?.emailFrom }}</a></p>
|
|
<p>{{ t('footer.phone') }} <a :href="'tel:' + companyInfo?.companyPhoneNumber">{{ companyInfo?.companyPhoneNumber }}</a></p>
|
|
</div>
|
|
<div class="footer__column">
|
|
<nuxt-link-locale class="footer__link" to="/contact">{{ t('contact.title') }}</nuxt-link-locale>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer__bottom">
|
|
<p>©2025 {{ companyInfo?.companyName }}. All Rights Reserved</p>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const companyStore = useCompanyStore();
|
|
const { t } = useI18n();
|
|
|
|
const companyInfo = computed(() => companyStore.companyInfo);
|
|
|
|
const encodedCompanyAddress = computed(() => {
|
|
return companyInfo.value?.companyAddress ? encodeURIComponent(companyInfo.value?.companyAddress) : '';
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footer {
|
|
margin-top: 100px;
|
|
background-color: $accentDark;
|
|
|
|
&__bottom {
|
|
background-color: $accent;
|
|
padding-block: 10px;
|
|
|
|
& p {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
&__wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding-block: 35px;
|
|
}
|
|
|
|
&__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
& p {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: $white;
|
|
|
|
& span {
|
|
font-weight: 400;
|
|
}
|
|
|
|
& a {
|
|
transition: 0.2s;
|
|
font-weight: 400;
|
|
color: $white;
|
|
|
|
@include hover {
|
|
color: #d9d9d9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__link {
|
|
transition: 0.2s;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: $white;
|
|
|
|
@include hover {
|
|
color: #d9d9d9;
|
|
}
|
|
}
|
|
}
|
|
</style> |