diff --git a/public/img/png/promo-slider-1.png b/public/img/png/promo-slider-1.png deleted file mode 100644 index 0d2e48d2..00000000 Binary files a/public/img/png/promo-slider-1.png and /dev/null differ diff --git a/public/img/png/promo-slider-2.png b/public/img/png/promo-slider-2.png deleted file mode 100644 index 8d49a968..00000000 Binary files a/public/img/png/promo-slider-2.png and /dev/null differ diff --git a/public/img/png/promo-slider-3.png b/public/img/png/promo-slider-3.png deleted file mode 100644 index f5eacde6..00000000 Binary files a/public/img/png/promo-slider-3.png and /dev/null differ diff --git a/public/img/webp/promo-slider-1_2.webp b/public/img/webp/promo-slider-1_2.webp new file mode 100644 index 00000000..85059619 Binary files /dev/null and b/public/img/webp/promo-slider-1_2.webp differ diff --git a/public/img/webp/promo-slider-2_1.webp b/public/img/webp/promo-slider-2_1.webp new file mode 100644 index 00000000..650dd151 Binary files /dev/null and b/public/img/webp/promo-slider-2_1.webp differ diff --git a/public/img/webp/promo-slider-2_2.webp b/public/img/webp/promo-slider-2_2.webp new file mode 100644 index 00000000..a8f8d835 Binary files /dev/null and b/public/img/webp/promo-slider-2_2.webp differ diff --git a/public/img/webp/promo-slider-3_1.webp b/public/img/webp/promo-slider-3_1.webp new file mode 100644 index 00000000..d10544a8 Binary files /dev/null and b/public/img/webp/promo-slider-3_1.webp differ diff --git a/public/img/webp/promo-slider-3_2.webp b/public/img/webp/promo-slider-3_2.webp new file mode 100644 index 00000000..5505578a Binary files /dev/null and b/public/img/webp/promo-slider-3_2.webp differ diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss index 076d284f..d031888f 100644 --- a/src/app/styles/variables.scss +++ b/src/app/styles/variables.scss @@ -42,6 +42,7 @@ --extra-bold-font: 700 2.1875rem 'Cerapro', sans-serif; // 35px --black-font: 900 2.1875rem 'Cerapro', sans-serif; // 35px --extra-black-font: 900 2.5rem 'Cerapro', sans-serif; // 40px + --super-large-font: 900 4.4rem 'Cerapro', sans-serif; // 70px body.light { // colors diff --git a/src/entities/PromocodeSlider/view/PromoCodeSliderView.ts b/src/entities/PromocodeSlider/view/PromoCodeSliderView.ts index d7d0edd7..0c4224b9 100644 --- a/src/entities/PromocodeSlider/view/PromoCodeSliderView.ts +++ b/src/entities/PromocodeSlider/view/PromoCodeSliderView.ts @@ -126,24 +126,23 @@ class PromoCodeSliderView { return this.slider; } - private async createSliderSlideContent(index: number, slideWrapper: HTMLDivElement): Promise { + private async createSliderSlideContent(index: number): Promise { const slide = createBaseElement({ cssClasses: [styles.sliderContent], tag: 'div', }); - - const { description, img, title } = this.createSliderSlideInfo(index); + slide.classList.add(styles[PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].style]); + const { description, title } = this.createSliderSlideInfo(index); slide.append( title, description, this.createPromoCodeSpan(PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].promoCode), ); - slideWrapper.append(img); observeStore(selectCurrentLanguage, () => { - title.textContent = PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].title; - description.textContent = PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].description; + title.innerHTML = PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].title; + description.innerHTML = PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].description; }); if (PROMO_SLIDER_CONTENT[index].en.date.end === null && getStore().getState().isUserLoggedIn) { @@ -160,17 +159,8 @@ class PromoCodeSliderView { private createSliderSlideInfo(index: number): { description: HTMLParagraphElement; - img: HTMLImageElement; title: HTMLHeadingElement; } { - const img = createBaseElement({ - attributes: { - src: PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].img, - }, - cssClasses: [styles.sliderImage], - tag: 'img', - }); - const title = createBaseElement({ cssClasses: [styles.sliderTitle], innerContent: PROMO_SLIDER_CONTENT[index][getStore().getState().currentLanguage].title, @@ -183,7 +173,7 @@ class PromoCodeSliderView { tag: 'p', }); - return { description, img, title }; + return { description, title }; } private createSliderWrapper(): HTMLDivElement { @@ -197,7 +187,7 @@ class PromoCodeSliderView { cssClasses: ['swiper-slide', styles.sliderSlide], tag: 'div', }); - this.createSliderSlideContent(index, slideWrapper) + this.createSliderSlideContent(index) .then((slide) => slideWrapper.append(slide)) .catch(showErrorMessage); diff --git a/src/entities/PromocodeSlider/view/promoCodeSliderView.module.scss b/src/entities/PromocodeSlider/view/promoCodeSliderView.module.scss index c94263d5..a2b55ee9 100644 --- a/src/entities/PromocodeSlider/view/promoCodeSliderView.module.scss +++ b/src/entities/PromocodeSlider/view/promoCodeSliderView.module.scss @@ -11,38 +11,24 @@ .sliderTitle { margin-bottom: var(--tiny-offset); - max-width: 55%; - font: var(--extra-black-font); + max-width: 80%; + font: var(--super-large-font); letter-spacing: var(--one); color: var(--steam-green-800); @media (max-width: 768px) { max-width: 100%; - font: var(--black-font); } -} -.sliderImage { - position: absolute; - right: var(--medium-offset); - top: 55%; - width: 40%; - height: auto; - transform: translateY(-45%); - - @media (max-width: 950px) { - width: 35%; - } - - @media (max-width: 768px) { - display: none; + @media (max-width: 600px) { + font: var(--black-font); } } .sliderDescription { margin-bottom: var(--extra-small-offset); max-width: 55%; - font: var(--black-font); + font: var(--medium-font); letter-spacing: var(--one); color: var(--noble-gray-800); @@ -78,12 +64,14 @@ .currentPromoCode { font: var(--medium-font); letter-spacing: var(--one); - color: var(--steam-green-400); + color: var(--steam-green-800); background-color: transparent; pointer-events: none; } .paginationWrapper { + position: absolute; + right: 0; z-index: 2; display: flex; margin: 0 auto; @@ -124,3 +112,64 @@ letter-spacing: var(--one); color: var(--noble-gray-800); } + +.birthday { + height: 100%; + background-image: linear-gradient(to right, var(--white) 0%, var(--white) 20%, transparent 100%), + url('/img/webp/promo-slider-2_1.webp'); + background-position: right center; + background-size: auto 100%; + background-repeat: no-repeat; + + @media (max-width: 768px) { + background-image: linear-gradient(to right, var(--white) 0%, var(--white) 50%, transparent 100%), + url('/img/webp/promo-slider-2_2.webp'); + } +} + +.succulent { + height: 100%; + background-image: linear-gradient(to right, var(--white) 0%, var(--white) 20%, transparent 100%), + url('/img/webp/promo-slider-3_1.webp'); + background-position: right center; + background-size: auto 100%; + background-repeat: no-repeat; + + @media (max-width: 768px) { + background-image: linear-gradient(to right, var(--white) 0%, var(--white) 50%, transparent 100%), + url('/img/webp/promo-slider-3_2.webp'); + } +} + +.garden { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + background-image: radial-gradient(circle at center, var(--white) 40%, transparent 40.1%), + url('/img/webp/promo-slider-1_2.webp'); + background-position: + center center, + right center; + background-size: cover, cover; + background-repeat: no-repeat; + + h3, + p { + text-align: center; + } + + input { + width: 11rem; + } + + @media (max-width: 768px) { + background-image: radial-gradient(circle at center, var(--white) 55%, transparent 55.1%), + url('/img/webp/promo-slider-1_2.webp'); + } +} + +.sliderSlide { + height: auto; +} diff --git a/src/shared/constants/promo.ts b/src/shared/constants/promo.ts index d4d06bd0..84e21f0e 100644 --- a/src/shared/constants/promo.ts +++ b/src/shared/constants/promo.ts @@ -5,20 +5,20 @@ const PROMO_SLIDER_CONTENT = [ end: '2024-06-30', start: '2024-06-01', }, - description: 'Everything for garden and vegetable garden with 10% discount', - img: './img/png/promo-slider-1.png', + description: `Everything for garden and
plants care with 10% discount
`, promoCode: 'SUMMER-SALE-10', - title: 'Summer sale!', + style: 'garden', + title: `SUMMER
SALE`, }, ru: { date: { end: '2024-06-30', start: '2024-06-01', }, - description: 'Все для сада и огорода со скидкой в 10%', - img: './img/png/promo-slider-1.png', + description: `Все для сада и ухода за
растениями со скидкой в 10%
`, promoCode: 'SUMMER-SALE-10', - title: 'Летняя распродажа!', + style: 'garden', + title: `ЛЕТНЯЯ
АКЦИЯ`, }, }, { @@ -27,20 +27,20 @@ const PROMO_SLIDER_CONTENT = [ end: null, start: 'The promotion is valid 3 days before and 3 days after your birthday', }, - description: 'For your birthday 10% discount off the entire cart', - img: './img/png/promo-slider-2.png', + description: 'For your birthday 10% discount
off the entire cart', promoCode: 'HAPPY-BIRTHDAY-10', - title: 'Happy birthday!', + style: 'birthday', + title: `BIRTHDAY
PRESENT`, }, ru: { date: { end: null, start: 'Акция действует 3 дня до и 3 дня после дня рождения', }, - description: 'В честь вашего дня рождения скидка 10% от общей суммы товаров', - img: './img/png/promo-slider-2.png', + description: 'В честь вашего дня рождения скидка 10%
от общей суммы товаров', promoCode: 'HAPPY-BIRTHDAY-10', - title: 'С днем рождения!', + style: 'birthday', + title: `ПОДАРОК
ИМЕНИННИКУ`, }, }, { @@ -49,20 +49,20 @@ const PROMO_SLIDER_CONTENT = [ end: '2024-06-15', start: '2024-06-01', }, - description: 'For all products from the Succulents category', - img: './img/png/promo-slider-3.png', + description: 'For all products from the
Succulents category', promoCode: 'SUCCULENT-SALE-15', - title: 'Succulents for everyone!', + style: 'succulent', + title: `SUCCULENTS
FOR EVERYONE!`, }, ru: { date: { end: '2024-06-15', start: '2024-06-01', }, - description: 'На все товары из категории Суккуленты', - img: './img/png/promo-slider-3.png', + description: 'На все товары из
категории Суккуленты', promoCode: 'SUCCULENT-SALE-15', - title: 'Каждому по суккуленту!', + style: 'succulent', + title: `КАЖДОМУ ПО
СУККУЛЕНТУ!`, }, }, ]; diff --git a/src/widgets/Blog/view/blogWidgetView.module.scss b/src/widgets/Blog/view/blogWidgetView.module.scss index 707d0887..208364fc 100644 --- a/src/widgets/Blog/view/blogWidgetView.module.scss +++ b/src/widgets/Blog/view/blogWidgetView.module.scss @@ -27,6 +27,10 @@ @media (max-width: 768px) { display: flex; flex-direction: column; + + div { + height: auto; + } } }