Alexandr SaVBaD Waltz
556354a44d
Revamped the theming system with new SCSS variables for consistent styling across light and dark themes. Replaced static color values with dynamic variables for maintainability and improved theme adaptability. Updated components and layouts to use the new variables. - Moved theme plugin logic for optimized handling of theme cookies and attributes. - Enhanced `useThemes` composable for simplified client-side updates and SSR support. - Replaced redundant SCSS color definitions with centralized variables. - Improved page structure by introducing `ui-title` for reusable section headers. - Unified transitions and border-radius for consistent design language. Breaking Changes: Theming system restructured—migrate to `$main`, `$primary`, and related variables for SCSS colors. Remove usage of `--color-*` variables in templates and styles.
133 lines
No EOL
3.4 KiB
Vue
133 lines
No EOL
3.4 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-conditions">{{ 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/return-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: #000;
|
|
|
|
&__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 {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: 6.7px;
|
|
font-family: 'Playfair Display', sans-serif;
|
|
|
|
@include hover {
|
|
text-shadow: 0 0 5px #fff;
|
|
}
|
|
}
|
|
|
|
&__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: $link_primary;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
& p, a {
|
|
color: $link_secondary;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
|
|
@include hover {
|
|
color: $link_secondary_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bottom {
|
|
& p {
|
|
color: $link_secondary;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
}
|
|
}
|
|
</style> |