135 lines
No EOL
3.5 KiB
Vue
135 lines
No EOL
3.5 KiB
Vue
<template>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__wrapper">
|
|
<div class="footer__main">
|
|
<div class="footer__left">
|
|
<nuxt-link-locale to="/" class="footer__logo">
|
|
SCHON
|
|
</nuxt-link-locale>
|
|
<p class="footer__text">{{ t('footer.text') }}</p>
|
|
</div>
|
|
<div class="footer__columns">
|
|
<div class="footer__column">
|
|
<h6>{{ t('footer.shop') }}</h6>
|
|
<nuxt-link-locale to="/shop">{{ t('footer.allProducts') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/catalog">{{ t('footer.catalog') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/brands">{{ t('footer.brands') }}</nuxt-link-locale>
|
|
</div>
|
|
<div class="footer__column">
|
|
<h6>{{ t('footer.help') }}</h6>
|
|
<nuxt-link-locale to="/contact">{{ t('contact.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/privacy-policy">{{ t('docs.policy.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/terms-and-condition">{{ t('docs.terms.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/shipping-information">{{ t('docs.shipping.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/refund-policy">{{ t('docs.return.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/about-us">{{ t('docs.about.title') }}</nuxt-link-locale>
|
|
<nuxt-link-locale to="/docs/faq">{{ t('docs.faq.title') }}</nuxt-link-locale>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer__bottom">
|
|
<p>© {{ actualYear }} Schon. {{ t('footer.rights') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const companyStore = useCompanyStore();
|
|
const { t } = useI18n();
|
|
|
|
const companyInfo = computed(() => companyStore.companyInfo);
|
|
const actualYear = computed(() => new Date().getFullYear());
|
|
|
|
const encodedCompanyAddress = computed(() => {
|
|
return companyInfo.value?.companyAddress ? encodeURIComponent(companyInfo.value?.companyAddress) : '';
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footer {
|
|
background-color: #1a1a1a;
|
|
|
|
&__wrapper {
|
|
padding-block: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 50px;
|
|
}
|
|
|
|
&__main {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
&__logo {
|
|
transition: 0.2s;
|
|
color: $white;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: 6.7px;
|
|
font-family: 'Playfair Display', sans-serif;
|
|
|
|
@include hover {
|
|
text-shadow: 0 0 5px #1a1a1a;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
max-width: 285px;
|
|
color: #d1d5db;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__columns {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 150px;
|
|
}
|
|
|
|
&__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
|
|
& h6 {
|
|
color: $white;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
& p, a {
|
|
transition: 0.2s;
|
|
color: #d1d5db;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
|
|
@include hover {
|
|
color: #acafb4;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bottom {
|
|
& p {
|
|
color: #d1d5db;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
}
|
|
}
|
|
</style> |