Alexandr SaVBaD Waltz
2ea18eb8a6
Refactored i18n configuration, replacing `DEFAULT_LOCALE` with `DEFAULT_LOCALE_FALLBACK` and enhancing environment-based locale validation. Improved cookie persistence for cart and wishlist, ensuring fallback handling for unauthenticated users. Enhancements: - Added `createProjectKey` utility for consistent project key generation. - Reworked cart and wishlist composables (`useOrderOverwrite`, `useWishlistOverwrite`) to decouple product identifier and handle cookies robustly. - Centralized `DEFAULT_LOCALE` logic for better maintainability. - Refined `useOrderSync` and `useWishlistSync` for clean synchronization across auth states. - Updated SCSS in hero and header styles for alignment corrections. Breaking Changes: `DEFAULT_LOCALE` constant removed; replaced with runtime config and fallback logic. Consumers must adapt to `DEFAULT_LOCALE_FALLBACK` and `$appHelpers.DEFAULT_LOCALE`.
82 lines
No EOL
1.6 KiB
Vue
82 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<div class="hero">
|
|
<div class="container">
|
|
<div class="hero__wrapper">
|
|
<h2 class="hero__title">{{ t('home.hero.title') }}</h2>
|
|
<p class="hero__text">{{ t('home.hero.text') }}</p>
|
|
<nuxt-link-locale to="/shop" class="hero__button">{{ t('buttons.shopNow') }}</nuxt-link-locale>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const {t} = useI18n();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hero {
|
|
position: relative;
|
|
background-image: url(/images/heroImage.png);
|
|
background-repeat: no-repeat;
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
background-position: top;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.4)
|
|
}
|
|
|
|
&__wrapper {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-block: 185px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
width: 675px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
&__title {
|
|
color: $white;
|
|
text-align: center;
|
|
font-family: "Playfair Display", sans-serif;
|
|
font-size: 60px;
|
|
font-weight: 700;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
&__text {
|
|
text-align: center;
|
|
color: $white;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__button {
|
|
margin-top: 10px;
|
|
background-color: $white;
|
|
padding: 10px 35px;
|
|
transition: 0.2s;
|
|
|
|
color: #1a1a1a;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.1px;
|
|
|
|
@include hover {
|
|
background-color: #cbcbcb;
|
|
}
|
|
}
|
|
}
|
|
</style> |