85 lines
No EOL
1.8 KiB
Vue
85 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<div class="ad">
|
|
<div class="container">
|
|
<div class="ad__wrapper">
|
|
<div class="ad__block">
|
|
<h2 class="ad__title">{{ t('home.ad.title') }}</h2>
|
|
<p class="ad__subtext">{{ t('home.ad.text1') }}</p>
|
|
<p class="ad__text">{{ t('home.ad.text2') }}</p>
|
|
<nuxt-link-locale to="/shop" class="ad__button">{{ t('buttons.shopTheSale') }}</nuxt-link-locale>
|
|
</div>
|
|
<nuxt-img
|
|
format="webp"
|
|
densities="x1"
|
|
src="/images/saleImage.png"
|
|
alt="ad"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const {t} = useI18n();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ad {
|
|
&__wrapper {
|
|
background: linear-gradient(to bottom, rgba(26, 26, 26, 1) 0%,rgba(31, 41, 55, 1) 100%);
|
|
border-radius: 8px;
|
|
padding: 32px 32px 32px 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
&__title {
|
|
margin-bottom: 10px;
|
|
color: $white;
|
|
font-family: "Playfair Display", sans-serif;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__subtext {
|
|
color: $white;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__text {
|
|
color: #d1d5db;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
&__button {
|
|
margin-top: 20px;
|
|
width: fit-content;
|
|
background-color: $white;
|
|
padding: 15px 35px;
|
|
transition: 0.2s;
|
|
|
|
text-transform: uppercase;
|
|
color: #1a1a1a;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.1px;
|
|
|
|
@include hover {
|
|
background-color: #cbcbcb;
|
|
}
|
|
}
|
|
}
|
|
</style> |