diff --git a/src/images/header/Logo.png b/src/images/header/Logo.png new file mode 100644 index 000000000..25b543f45 Binary files /dev/null and b/src/images/header/Logo.png differ diff --git a/src/images/header/mobile/1.webp b/src/images/header/mobile/1.webp new file mode 100644 index 000000000..c94f5ff4a Binary files /dev/null and b/src/images/header/mobile/1.webp differ diff --git a/src/images/header/mobile/one.webp b/src/images/header/mobile/one.webp new file mode 100644 index 000000000..14a072752 Binary files /dev/null and b/src/images/header/mobile/one.webp differ diff --git a/src/images/header/mobile/three.webp b/src/images/header/mobile/three.webp new file mode 100644 index 000000000..2edaeeb45 Binary files /dev/null and b/src/images/header/mobile/three.webp differ diff --git a/src/images/header/mobile/two-2.webp b/src/images/header/mobile/two-2.webp new file mode 100644 index 000000000..3edd11687 Binary files /dev/null and b/src/images/header/mobile/two-2.webp differ diff --git a/src/images/header/mobile/two.webp b/src/images/header/mobile/two.webp new file mode 100644 index 000000000..2234092c4 Binary files /dev/null and b/src/images/header/mobile/two.webp differ diff --git a/src/images/icons/dropdown-arrow.svg b/src/images/icons/dropdown-arrow.svg new file mode 100644 index 000000000..004ca6b89 --- /dev/null +++ b/src/images/icons/dropdown-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 000000000..61cb0d549 --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/footer/face.svg b/src/images/icons/footer/face.svg new file mode 100644 index 000000000..c5ce92014 --- /dev/null +++ b/src/images/icons/footer/face.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/reddit.svg b/src/images/icons/footer/reddit.svg new file mode 100644 index 000000000..2ec597384 --- /dev/null +++ b/src/images/icons/footer/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/twit.svg b/src/images/icons/footer/twit.svg new file mode 100644 index 000000000..cd292e387 --- /dev/null +++ b/src/images/icons/footer/twit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/x.svg b/src/images/icons/footer/x.svg new file mode 100644 index 000000000..13881721d --- /dev/null +++ b/src/images/icons/footer/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/footer/youtube.svg b/src/images/icons/footer/youtube.svg new file mode 100644 index 000000000..bdc8d8ce2 --- /dev/null +++ b/src/images/icons/footer/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header/back.svg b/src/images/icons/header/back.svg new file mode 100644 index 000000000..c71015d3b --- /dev/null +++ b/src/images/icons/header/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header/burger-menu.svg b/src/images/icons/header/burger-menu.svg new file mode 100644 index 000000000..8506fd7fc --- /dev/null +++ b/src/images/icons/header/burger-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/header/button-play.svg b/src/images/icons/header/button-play.svg new file mode 100644 index 000000000..d83543fc4 --- /dev/null +++ b/src/images/icons/header/button-play.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/header/close.svg b/src/images/icons/header/close.svg new file mode 100644 index 000000000..e7a10092b --- /dev/null +++ b/src/images/icons/header/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/main/Vector.png b/src/images/icons/main/Vector.png new file mode 100644 index 000000000..7a89f1de6 Binary files /dev/null and b/src/images/icons/main/Vector.png differ diff --git a/src/images/icons/main/arrow-up-hover.svg b/src/images/icons/main/arrow-up-hover.svg new file mode 100644 index 000000000..23aded6cb --- /dev/null +++ b/src/images/icons/main/arrow-up-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/main/arrow-up.svg b/src/images/icons/main/arrow-up.svg new file mode 100644 index 000000000..40da6f4c0 --- /dev/null +++ b/src/images/icons/main/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/main/batterries.svg b/src/images/icons/main/batterries.svg new file mode 100644 index 000000000..a037109af --- /dev/null +++ b/src/images/icons/main/batterries.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/main/compatible.svg b/src/images/icons/main/compatible.svg new file mode 100644 index 000000000..3d64d90f8 --- /dev/null +++ b/src/images/icons/main/compatible.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/main/connection.svg b/src/images/icons/main/connection.svg new file mode 100644 index 000000000..8183d536f --- /dev/null +++ b/src/images/icons/main/connection.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/main/control.svg b/src/images/icons/main/control.svg new file mode 100644 index 000000000..b0ae17628 --- /dev/null +++ b/src/images/icons/main/control.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/main/education-icon.svg b/src/images/icons/main/education-icon.svg new file mode 100644 index 000000000..675467291 --- /dev/null +++ b/src/images/icons/main/education-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/icons/main/ellipse.svg b/src/images/icons/main/ellipse.svg new file mode 100644 index 000000000..4b03291f2 --- /dev/null +++ b/src/images/icons/main/ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/main/estate-icon.svg b/src/images/icons/main/estate-icon.svg new file mode 100644 index 000000000..d96adb647 --- /dev/null +++ b/src/images/icons/main/estate-icon.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/main/fitnes-icon.svg b/src/images/icons/main/fitnes-icon.svg new file mode 100644 index 000000000..93790d0f0 --- /dev/null +++ b/src/images/icons/main/fitnes-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/main/gaming-icon.svg b/src/images/icons/main/gaming-icon.svg new file mode 100644 index 000000000..c00f79180 --- /dev/null +++ b/src/images/icons/main/gaming-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/main/minus.svg b/src/images/icons/main/minus.svg new file mode 100644 index 000000000..64bcddc71 --- /dev/null +++ b/src/images/icons/main/minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/main/network-icon.svg b/src/images/icons/main/network-icon.svg new file mode 100644 index 000000000..19528aeb8 --- /dev/null +++ b/src/images/icons/main/network-icon.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/main/plus.svg b/src/images/icons/main/plus.svg new file mode 100644 index 000000000..d3b606354 --- /dev/null +++ b/src/images/icons/main/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/main/sensor.svg b/src/images/icons/main/sensor.svg new file mode 100644 index 000000000..ef522dfa8 --- /dev/null +++ b/src/images/icons/main/sensor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/main/sensors.svg b/src/images/icons/main/sensors.svg new file mode 100644 index 000000000..1b62826b1 --- /dev/null +++ b/src/images/icons/main/sensors.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/main/2.png b/src/images/main/2.png new file mode 100644 index 000000000..8873168df Binary files /dev/null and b/src/images/main/2.png differ diff --git a/src/images/main/3.png b/src/images/main/3.png new file mode 100644 index 000000000..db9c9daf8 Binary files /dev/null and b/src/images/main/3.png differ diff --git a/src/images/main/about.png b/src/images/main/about.png new file mode 100644 index 000000000..704147b7b Binary files /dev/null and b/src/images/main/about.png differ diff --git a/src/images/main/about.webp b/src/images/main/about.webp new file mode 100644 index 000000000..9f3d5ae46 Binary files /dev/null and b/src/images/main/about.webp differ diff --git a/src/images/main/image.webp b/src/images/main/image.webp new file mode 100644 index 000000000..e23235048 Binary files /dev/null and b/src/images/main/image.webp differ diff --git a/src/images/main/slide-four.webp b/src/images/main/slide-four.webp new file mode 100644 index 000000000..f74d55fae Binary files /dev/null and b/src/images/main/slide-four.webp differ diff --git a/src/images/main/slide-one.webp b/src/images/main/slide-one.webp new file mode 100644 index 000000000..1f9fb1f48 Binary files /dev/null and b/src/images/main/slide-one.webp differ diff --git a/src/images/main/slide-three.webp b/src/images/main/slide-three.webp new file mode 100644 index 000000000..1003d352d Binary files /dev/null and b/src/images/main/slide-three.webp differ diff --git a/src/images/main/slide-two.webp b/src/images/main/slide-two.webp new file mode 100644 index 000000000..4c76bc241 Binary files /dev/null and b/src/images/main/slide-two.webp differ diff --git a/src/images/main/specs.webp b/src/images/main/specs.webp new file mode 100644 index 000000000..b29f1a39c Binary files /dev/null and b/src/images/main/specs.webp differ diff --git a/src/scripts/aboutSwiper.js b/src/scripts/aboutSwiper.js new file mode 100644 index 000000000..f3604e3c9 --- /dev/null +++ b/src/scripts/aboutSwiper.js @@ -0,0 +1,50 @@ +import Swiper from 'swiper/bundle'; +import 'swiper/css/bundle'; + +export const aboutSwiper = new Swiper('.aboutSwiper', { + direction: 'horizontal', + loop: false, + navigation: { + nextEl: '.aboutSwiper__button-next', + prevEl: '.aboutSwiper__button-prev', + }, + pagination: { + el: '.aboutSwiper__pagination-bullets', + type: 'bullets', + clickable: true, + }, + paginationFraction: { + el: '.about__pagination-fraction', + type: 'fraction', + renderFraction: function (currentClass, totalClass) { + return ( + '' + + '/' + + '' + ); + }, + }, + scrollbar: { + el: '.aboutSwiper__scrollbar', + }, + autoplay: { + delay: 3000, + }, +}); + +const fractionEl = document.querySelector('.about__pagination-fraction'); + +function updateFraction() { + fractionEl.innerHTML = ` + ${aboutSwiper.realIndex + 1} + / + ${aboutSwiper.slides.length} + `; +} + +updateFraction(); +aboutSwiper.on('slideChange', updateFraction); diff --git a/src/scripts/constants.js b/src/scripts/constants.js new file mode 100644 index 000000000..1de91972c --- /dev/null +++ b/src/scripts/constants.js @@ -0,0 +1,3 @@ +export const pattern = /^[A-Za-z0-9._%+-]+@[^\s@]+\.[^\s@]+$/; + +export const phone = /^\+?\d{10,15}$/; diff --git a/src/scripts/faq.js b/src/scripts/faq.js new file mode 100644 index 000000000..14d4adb41 --- /dev/null +++ b/src/scripts/faq.js @@ -0,0 +1,13 @@ +const questions = document.querySelectorAll('.faq__question'); + +questions.forEach((q) => { + const answer = q.querySelector('.faq__answer-container'); + + q.addEventListener('click', () => { + if (answer.style.maxHeight) { + answer.style.maxHeight = null; + } else { + answer.style.maxHeight = `${answer.scrollHeight}px`; + } + }); +}); diff --git a/src/scripts/form.js b/src/scripts/form.js new file mode 100644 index 000000000..dd22427cf --- /dev/null +++ b/src/scripts/form.js @@ -0,0 +1,63 @@ +import { pattern } from './constants'; +import { phone } from './constants'; + +const form = document.querySelector('.form'); +const inputs = document.querySelectorAll('.form__input'); +const textarea = document.querySelector('.form__textarea'); +const button = document.querySelector('.form__button'); + +const emailValidation = (email) => pattern.test(email); + +const fields = Array.from(inputs).map((input) => ({ + input, + span: document.querySelector(`.form__span-${input.name}`), +})); + +const toggleButtonState = () => { + const allFilled = fields.every(({ input }) => input.value.trim() !== ''); + button.disabled = !allFilled; +}; + +fields.forEach(({ input, span }) => { + input.addEventListener('input', () => { + if (span.classList.contains('form__input--error')) { + span.textContent = `${input.name[0].toUpperCase()}${input.name.slice(1)}*`; + span.classList.remove('form__input--error'); + input.classList.remove('form__input--error'); + } + + toggleButtonState(); + }); +}); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + let isValid = true; + + fields.forEach(({ input, span }) => { + const value = input.value.trim(); + function setError(input, span, message) { + span.textContent = message; + span.classList.add('form__input--error'); + input.classList.add('form__input--error'); + return false; + } + + if (!value) { + isValid = setError(input, span, `Please, fill your ${input.name}*`); + } else if (input.name === 'email' && !emailValidation(value)) { + isValid = setError(input, span, 'Incorrect format your email*'); + } else if (input.name === 'phone' && !phone.test(value)) { + isValid = setError(input, span, 'Incorrect format your number phone*'); + } + }); + + if (!isValid) return; + + fields.forEach(({ input }) => input.value = ''); + textarea.value = ''; + button.disabled = true; + + // here can add form submission logic + //... +}); diff --git a/src/scripts/language.js b/src/scripts/language.js new file mode 100644 index 000000000..5e9b42708 --- /dev/null +++ b/src/scripts/language.js @@ -0,0 +1,45 @@ +const langButton = document.querySelector('.top-bar__lang-button'); + +const langList = document.querySelector('.top-bar__lang-list'); +const asideLangList = document.querySelector('.language__list'); + +const langItems = document.querySelectorAll('.dropdown__item'); +const asideLangItems = document.querySelectorAll('.language__item'); + +const setActiveLangItem = (collection, language, className) => { + collection.forEach((item) => { + const dataLang = item.getAttribute('data-lang'); + + if (language === dataLang) { + item.classList.add(`${className}`); + } else { + item.classList.remove(`${className}`); + } + }); +}; + +const setListener = (element) => { + element.addEventListener('click', (event) => { + const li = event.target.closest('li'); + if (!li) { + return; + } + + if (!li.closest('aside')) { + langList.classList.toggle('dropdown--open'); + } + + const language = li.getAttribute('data-lang'); + + setActiveLangItem(langItems, language, 'dropdown__item--active'); + setActiveLangItem(asideLangItems, language, 'language__item--active'); + langButton.textContent = language; + }); +}; + +langButton.addEventListener('click', () => { + langList.classList.toggle('dropdown--open'); +}); + +setListener(langList); +setListener(asideLangList); diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..b25b30de9 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,8 @@ 'use strict'; +import { swiper } from './swiper'; +import { aboutSwiper } from './aboutSwiper'; +import './video'; +import './faq'; +import './language'; +import './form'; +import './specs'; diff --git a/src/scripts/specs.js b/src/scripts/specs.js new file mode 100644 index 000000000..eecd642b8 --- /dev/null +++ b/src/scripts/specs.js @@ -0,0 +1,25 @@ +const buttons = document.querySelectorAll('.specs__button'); +const container = document.querySelector('.specs__content'); +const infoBlocks = document.querySelectorAll('.specs__info'); + +container.addEventListener('click', (event) => { + const button = event.target.closest('.specs__button'); + + if (!button) { + return; + } + + const isActive = button.classList.contains('specs__button--active'); + const dataInfo = button.getAttribute('data-info'); + const infoBlock = document.querySelector(`.specs__info--${dataInfo}`); + + buttons.forEach((buttonEl) => + buttonEl.classList.remove('specs__button--active'), + ); + infoBlocks.forEach((block) => block.classList.remove('specs__info--active')); + + if (!isActive) { + button.classList.add('specs__button--active'); + infoBlock.classList.add('specs__info--active'); + } +}); diff --git a/src/scripts/swiper.js b/src/scripts/swiper.js new file mode 100644 index 000000000..689d65fe6 --- /dev/null +++ b/src/scripts/swiper.js @@ -0,0 +1,17 @@ +import Swiper from 'swiper/bundle'; +import 'swiper/css/bundle'; + +export const swiper = new Swiper('.swiper', { + direction: 'horizontal', + loop: false, + navigation: { + nextEl: '.swiper__button-next', + prevEl: '.swiper__button-prev', + }, + pagination: { + el: '.swiper__pagination', + }, + autoplay: { + delay: 3000, + }, +}); diff --git a/src/scripts/video.js b/src/scripts/video.js new file mode 100644 index 000000000..addf76a33 --- /dev/null +++ b/src/scripts/video.js @@ -0,0 +1,15 @@ +const closeButton = document.querySelector('.video__close'); +const playButtons = document.querySelectorAll('.play-video__link'); +const videoPage = document.querySelector('.page__video'); +const iframe = document.querySelector('.video__iframe'); + +closeButton.addEventListener('click', () => { + videoPage.style.display = 'none'; + iframe.src = iframe.src; +}); + +playButtons.forEach((playButton) => { + playButton.addEventListener('click', () => { + videoPage.style.display = 'block'; + }); +}); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..511984ba6 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,13 @@ +@use 'utils/index' as *; + h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/aside/_index.scss b/src/styles/aside/_index.scss new file mode 100644 index 000000000..e0f31469a --- /dev/null +++ b/src/styles/aside/_index.scss @@ -0,0 +1,5 @@ +@forward 'video/video'; +@forward 'menu/menu'; +@forward 'language/language'; +@forward 'help/help'; +@forward 'faq/faq'; diff --git a/src/styles/aside/faq/_faq.scss b/src/styles/aside/faq/_faq.scss new file mode 100644 index 000000000..0d005a35e --- /dev/null +++ b/src/styles/aside/faq/_faq.scss @@ -0,0 +1,86 @@ +@use '../../utils/index' as *; + +.faq { + height: 100vh; + background-color: $bg-aside-main; + overflow: scroll; + + &__container { + height: 100vh; + padding-top: 20px; + overflow: auto; + background-color: $bg-aside; + + @include padding-inline; + + @include on-tablet { + padding-top: 34px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + height: auto; + background-color: transparent; + } + } + + &__wrapper { + @include on-desktop { + grid-column: 2 / span 10; + background-color: $bg-aside; + padding: 60px 90px; + } + } + + &__title { + margin-bottom: 30px; + color: $white; + + & span { + font-weight: 400; + color: $bg-button; + } + } + + &__questions { + display: flex; + flex-direction: column; + gap: 13px; + } + + &__question { + padding: 20px 12px 12px; + border: 1px solid $bg-button; + cursor: pointer; + + transition: all $transition; + } + + &__title-question { + margin-bottom: 18px; + font-weight: 400; + line-height: 150%; + color: $bg-button; + } + + &__answer-container { + max-height: 0; + overflow: hidden; + + transition: max-height $transition; + } + + &__info { + @extend %plain-text; + + color: $bt-disabled-text; + + &--update { + margin-top: 36px; + font-size: 12px; + color: $secondary-text; + } + } +} diff --git a/src/styles/aside/help/_help.scss b/src/styles/aside/help/_help.scss new file mode 100644 index 000000000..197dbe115 --- /dev/null +++ b/src/styles/aside/help/_help.scss @@ -0,0 +1,118 @@ +@use '../../utils/index' as *; + +.help { + height: 100vh; + overflow: auto; + background-color: $bg-aside-main; + + &__container { + height: 100vh; + padding-top: 20px; + padding-bottom: 73px; + background-color: $bg-aside; + + @include padding-inline; + + @include on-tablet { + height: fit-content; + padding-top: 34px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + background-color: transparent; + } + } + + &__text-content { + display: flex; + flex-direction: column; + gap: 30px; + margin-top: 16px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + } + } + + &__wrapper { + @include on-desktop { + grid-column: 2 / span 10; + padding: 60px 90px 75px; + background-color: $bg-aside; + } + + @include on-design { + margin-top: 200px; + } + } + + + &__title { + color: $white; + + span { + font-weight: 400; + color: $bg-button; + } + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__paragraph { + @extend %plain-text; + + color: $bt-disabled-text; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__link { + @extend %plain-text; + + color: $bg-button; + + @include hover(color, $white); + + &--address { + width: fit-content; + font-style: normal; + line-height: 100%; + color: $bt-disabled-text; + } + } + + &__nav { + @include on-tablet { + grid-column: 1 / span 3; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__address { + display: flex; + flex-direction: column; + gap: 8px; + + a:first-child { + margin-bottom: 3px; + } + + @include on-tablet { + grid-column: 4 / span 3; + gap: 25px; + } + } +} diff --git a/src/styles/aside/language/_language.scss b/src/styles/aside/language/_language.scss new file mode 100644 index 000000000..e2bc57f4d --- /dev/null +++ b/src/styles/aside/language/_language.scss @@ -0,0 +1,70 @@ +@use '../../utils/index' as *; + +.language { + height: 100vh; + + background-color: $bg-aside-main; + + &__container { + grid-template-rows: auto 1fr; + row-gap: 0; + + height: 100vh; + + background-color: $bg-aside; + + @include grid-page; + + @include padding-inline; + + @include on-tablet { + height: fit-content; + row-gap: 0; + } + } + + &__top-bar { + grid-column: 1 / span 1; + } + + &__list { + grid-column: 1 / -1; + + margin-inline: -20px; + + @include on-tablet { + margin-top: -17px; + margin-inline: -34px; + } + } + + &__item { + width: 100%; + height: 49px; + + &--active { + background-color: $bg-aside-link; + } + } + + &__link { + @extend %nav-text; + + display: flex; + align-items: center; + + width: 100%; + height: 100%; + padding-left: 20px; + + font-size: 21px; + color: $white; + + @include hover(background-color, $bg-aside-link); + @include hover(color, $bg-button); + + @include on-tablet { + padding-left: 140px; + } + } +} diff --git a/src/styles/aside/menu/_menu.scss b/src/styles/aside/menu/_menu.scss new file mode 100644 index 000000000..cd5bbf464 --- /dev/null +++ b/src/styles/aside/menu/_menu.scss @@ -0,0 +1,35 @@ +@use '../../utils/index' as *; + +.menu { + height: 100vh; + + background-color: $bg-aside-main; + + &__container { + grid-template-rows: auto 1fr; + + height: 100vh; + + row-gap: 24px; + + background-color: $bg-aside; + + @include grid-page; + + @include padding-inline; + + @include on-tablet { + row-gap: 0; + + height: 568px; + } + } + + &__top-bar { + grid-column: 1 / -1; + } + + &__nav { + grid-column: 1 / -1; + } +} diff --git a/src/styles/aside/video/_video.scss b/src/styles/aside/video/_video.scss new file mode 100644 index 000000000..0d95a2176 --- /dev/null +++ b/src/styles/aside/video/_video.scss @@ -0,0 +1,71 @@ +@use '../../utils/index' as *; + +.video { + padding-top: 50px; + background-color: #111111a2; + + @include on-tablet { + padding-top: 70px; + } + + @include on-desktop { + padding-top: 120px; + } + + &__container { + @include padding-inline; + + @include grid-page; + } + + &__close { + display: block; + width: 17px; + height: 17px; + + position: absolute; + right: 17px; + top: 17px; + + background-color: $white; + + -webkit-mask-image: url(../images/icons/header/close.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + -webkit-mask-position: center; + + mask-image: url(../images/icons/header/close.svg); + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + + @include hover(background-color, $bg-button); + } + + &__container-iframe { + position: relative; + + grid-column: 1 / -1; + + aspect-ratio: 560 / 315; + + @include on-tablet { + grid-column: 2 / span 4; + } + + @include on-desktop { + grid-column: 2 / span 10; + } + + @include on-design { + grid-column: 2 / span 14; + } + } + + &__iframe { + width: 100%; + height: 100%; + + border: none; + } +} diff --git a/src/styles/blocks/_index.scss b/src/styles/blocks/_index.scss new file mode 100644 index 000000000..5c9761c78 --- /dev/null +++ b/src/styles/blocks/_index.scss @@ -0,0 +1,9 @@ +@forward 'top-bar/top-bar'; +@forward 'button/botton'; +@forward 'nav/nav'; +@forward 'dropdown/dropdown'; +@forward 'swiper/swiper'; +@forward 'play-video/play-video'; +@forward 'aboutSwiper/aboutSwiper'; +@forward 'form/form'; +@forward 'address/address'; diff --git a/src/styles/blocks/aboutSwiper/_aboutSwiper.scss b/src/styles/blocks/aboutSwiper/_aboutSwiper.scss new file mode 100644 index 000000000..6aab10316 --- /dev/null +++ b/src/styles/blocks/aboutSwiper/_aboutSwiper.scss @@ -0,0 +1,103 @@ +@use '../../utils/index' as *; + +.aboutSwiper { + overflow: hidden; + + &__picture { + width: 100%; + height: 100%; + aspect-ratio: 280 / 189; + object-fit: contain; + + @include on-design { + aspect-ratio: 622 / 290; + } + } + + &__image { + width: 100%; + height: 100%; + aspect-ratio: 280 / 189; + object-fit: contain; + + @include on-design { + aspect-ratio: 622 / 290; + } + } + + &__button-container { + display: none; + justify-content: start; + + @include on-desktop { + display: flex; + gap: 103px; + } + } + + &__button-prev { + @extend %nav-text; + + cursor: pointer; + line-height: 150%; + color: $white; + + &.swiper-button-disabled { + cursor: not-allowed; + color: $bt-disabled-text; + } + } + + &__button-next { + @extend %nav-text; + + line-height: 150%; + color: $white; + cursor: pointer; + text-align: center; + + &.swiper-button-disabled { + cursor: not-allowed; + color: $bt-disabled-text; + } + } + + &__scrollbar { + display: none; + width: 205px; + height: 2px; + margin-top: 10px; + background-color: $bg-pagination; + + & .swiper-scrollbar-drag { + width: 41px; + background-color: $bg-button; + } + + @include on-desktop { + display: block; + } + } + + &__pagination-bullets { + display: flex; + margin-top: 14px; + justify-content: center; + gap: 6px; + color: $bg-button; + + & .swiper-pagination-bullet { + width: 4px; + height: 4px; + background-color: $bg-pagination-more; + } + + & .swiper-pagination-bullet-active { + background-color: $bg-button; + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/address/_address.scss b/src/styles/blocks/address/_address.scss new file mode 100644 index 000000000..eb540b3ab --- /dev/null +++ b/src/styles/blocks/address/_address.scss @@ -0,0 +1,35 @@ +@use '../../utils/index' as *; + +.address { + display: none; + flex-direction: column; + gap: 10px; + font-style: normal; + + &__link { + @extend %secondary-text; + + font-size: 16px; + color: $bt-disabled-text; + cursor: pointer; + + @include hover(color, $bg-button); + } + + &--question { + @include on-tablet { + display: flex; + } + } + + &--footer { + @extend %secondary-text; + + display: flex; + font-size: 13px; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/button/_botton.scss b/src/styles/blocks/button/_botton.scss new file mode 100644 index 000000000..d7aaf0e95 --- /dev/null +++ b/src/styles/blocks/button/_botton.scss @@ -0,0 +1,18 @@ +@use '../../utils/index' as *; + +.button { + @extend %nav-text; + + color: $white; + background-color: $bg-button; + + border-radius: 4px; + cursor: pointer; + + @include hover(box-shadow, 0 0 10px 5px $bg-button); + + &:active { + color: $bg-button; + background-color: $white; + } +} diff --git a/src/styles/blocks/dropdown/dropdown.scss b/src/styles/blocks/dropdown/dropdown.scss new file mode 100644 index 000000000..422f18da0 --- /dev/null +++ b/src/styles/blocks/dropdown/dropdown.scss @@ -0,0 +1,30 @@ +@use '../../utils/index' as *; + +.dropdown { + max-height: 0; + overflow: hidden; + border-radius: 5px; + background-color: $bg-aside; + transition: all $transition; + + &--open { + max-height: 280px; + border: 1px solid $bg-button; + box-shadow: 0 0 10px 2px $bg-button; + } + + &__item { + @extend %nav-text; + + padding: 5px 10px; + cursor: pointer; + color: $white; + + @include hover(background-color, $bg-aside-link); + @include hover(color, $bg-button); + + &--active { + background-color: $bg-aside-link; + } + } +} diff --git a/src/styles/blocks/form/_form.scss b/src/styles/blocks/form/_form.scss new file mode 100644 index 000000000..5e11c9d25 --- /dev/null +++ b/src/styles/blocks/form/_form.scss @@ -0,0 +1,98 @@ +@use '../../utils/index' as *; + +.form { + &__wrraper-input { + display: flex; + flex-direction: column; + gap: 24px; + + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 90px; + } + + @include on-design { + margin-bottom: 50px; + } + } + + &__lable { + @extend %plain-text; + + font-size: 14px; + color: $bt-disabled-text; + + &:focus-within { + color: $bg-button; + } + } + + &__span { + &--error { + color: $error; + border-color: $error; + } + } + + &__input { + @extend %plain-text; + + color: $white; + transition: + border-color $transition, + color $transition; + + @include input-field(20px); + + &:focus { + border-bottom: 1px solid $bg-button; + } + + &:is(:autofill, :-webkit-autofil) { + box-shadow: inset 0 0 0 1000px $bg-dark-main; + -webkit-text-fill-color: $white; + } + + &--error { + color: $error; + border-color: $error; + + &:focus { + border-color: $error; + } + } + } + + &__textarea { + @extend %plain-text; + + color: $white; + resize: none; + + @include input-field(67px); + + &:focus { + border-bottom: 1px solid $bg-button; + } + } + + &__button { + width: 100%; + height: 40px; + + @include on-tablet { + width: 200px; + } + + &:disabled { + background-color: $bg-aside; + color: $br-input; + cursor: not-allowed; + } + } +} diff --git a/src/styles/blocks/nav/_nav.scss b/src/styles/blocks/nav/_nav.scss new file mode 100644 index 000000000..f9b9819d7 --- /dev/null +++ b/src/styles/blocks/nav/_nav.scss @@ -0,0 +1,114 @@ +@use '../../utils/index' as *; + +.nav { + display: flex; + margin: auto; + + &--top-bar { + display: none; + + @include on-desktop { + display: flex; + } + } + + &--menu { + margin: 0; + margin-inline: -20px; + + @include on-tablet { + margin-top: -17px; + margin-inline: -34px; + } + } + + &__list { + display: flex; + gap: 36px; + + &--menu { + flex-direction: column; + gap: 0; + + width: 100%; + } + + &--footer { + flex-direction: column; + gap: 12px; + width: 100%; + + @include on-tablet { + flex-direction: row; + gap: 45px; + } + } + } + + &__item { + &--menu { + height: 49px; + } + } + + &__link { + @extend %nav-text; + + position: relative; + color: $white; + + &::after { + content: ''; + display: block; + position: absolute; + bottom: -5px; + + width: 100%; + height: 2px; + background-color: $bg-button; + + transform: scale(0); + transform-origin: left; + + transition: $transition; + } + + &:hover::after { + transform: scale(1); + } + + &--menu { + @extend %nav-text; + + display: flex; + align-items: center; + + width: 100%; + height: 100%; + + padding-left: 20px; + + font-size: 21px; + + @include on-tablet { + padding-left: 34px; + } + + @include hover(background-color, $bg-aside-link); + + &::after { + display: none; + } + } + + &--footer { + font-size: 13px; + font-weight: 400; + line-height: 150%; + + @include on-tablet { + font-size: 14px; + } + } + } +} diff --git a/src/styles/blocks/play-video/play-video.scss b/src/styles/blocks/play-video/play-video.scss new file mode 100644 index 000000000..a5e70b5a5 --- /dev/null +++ b/src/styles/blocks/play-video/play-video.scss @@ -0,0 +1,32 @@ +@use '../../utils/index' as *; + +.play-video { + width: fit-content; + border-radius: 50px 0 0 50px; + transition: all $transition; + + &:hover { + box-shadow: + 0 0 15px 4px $bg-button, + inset 0 0 15px 4px $bg-button; + } + + &__link { + display: block; + + width: 209px; + height: 66px; + background-color: $bg-button; + + mask-image: url(../images/icons/header/button-play.svg); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url(../images/icons/header/button-play.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + + @include hover(background-color, $white); + } +} diff --git a/src/styles/blocks/swiper/_swiper.scss b/src/styles/blocks/swiper/_swiper.scss new file mode 100644 index 000000000..35a15b441 --- /dev/null +++ b/src/styles/blocks/swiper/_swiper.scss @@ -0,0 +1,72 @@ +@use '../../utils/index' as *; + +.swiper { + &__image { + width: 100%; + height: 100%; + aspect-ratio: 320 / 170; + object-fit: contain; + } + + &__container { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + gap: 10px; + } + } + + &__button-container { + display: flex; + gap: 69px; + justify-content: end; + } + + &__button-prev { + @extend %nav-text; + + width: 69px; + cursor: pointer; + line-height: 150%; + color: $white; + + &.swiper-button-disabled { + cursor: not-allowed; + color: $bt-disabled-text; + } + } + + &__button-next { + @extend %nav-text; + + width: 69px; + line-height: 150%; + color: $white; + cursor: pointer; + text-align: center; + + &.swiper-button-disabled { + cursor: not-allowed; + color: $bt-disabled-text; + } + } + + &__pagination { + display: flex; + justify-content: end; + width: fit-content; + + & .swiper-pagination-bullet { + width: 69px; + height: 2px; + margin-inline: 0 !important; + background-color: $bg-pagination; + } + + & .swiper-pagination-bullet-active { + background-color: $bg-button; + } + } +} diff --git a/src/styles/blocks/top-bar/_top-bar.scss b/src/styles/blocks/top-bar/_top-bar.scss new file mode 100644 index 000000000..e1eef190a --- /dev/null +++ b/src/styles/blocks/top-bar/_top-bar.scss @@ -0,0 +1,155 @@ +@use '../../utils/index' as *; + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 18px 14px; + + @include on-tablet { + padding-block: 31px 53px; + } + + @include on-desktop { + padding-block: 47px 101px; + } + + &--aside, &--faq { + padding: 0; + } + + &--menu { + justify-content: end; + } + + &__logo-link { + cursor: pointer; + width: fit-content; + + @include hover(transform, scale(1.2)); + } + + &__logo { + display: block; + width: 58px; + height: 12px; + + @include on-tablet { + width: 67px; + height: 14px; + } + + @include on-desktop { + width: 78px; + height: 16px; + } + } + + &__lang { + position: relative; + display: none; + margin-right: auto; + margin-left: 35px; + + @include on-desktop { + display: block; + } + } + + &__lang-button { + @extend %nav-text; + + position: relative; + height: 20px; + color: $bg-button; + background-color: transparent; + cursor: pointer; + + &::after { + position: absolute; + display: block; + content: ''; + top: 50%; + left: calc(100% + 4px); + + width: 9px; + height: 6px; + + transition: all $transition; + + background-color: $bg-button; + + mask-image: url('../images/icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url('../images/icons/dropdown-arrow.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + + @include hover(color, $white); + + &:hover::after { + background-color: $white; + } + } + + &__lang-list { + position: absolute; + } + + &__nav-container { + display: flex; + gap: 36px; + } + + &__button { + display: none; + width: 200px; + height: 48px; + line-height: 48px; + text-align: center; + + @include on-desktop { + display: block; + } + } + + &__menu { + display: block; + width: 20px; + height: 20px; + + cursor: pointer; + + background-image: url(../images/icons/header/burger-menu.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + width: 30px; + height: 30px; + } + + @include on-desktop { + display: none; + } + + &--close { + background-image: url(../images/icons/header/close.svg); + + @include on-desktop { + display: block; + } + } + + &--back { + background-image: url(../images/icons/header/back.svg); + } + } +} diff --git a/src/styles/footer/_footer.scss b/src/styles/footer/_footer.scss new file mode 100644 index 000000000..2ce7ac6b0 --- /dev/null +++ b/src/styles/footer/_footer.scss @@ -0,0 +1,110 @@ +@use '../../styles/utils/index' as *; + +.footer { + background-color: $header-gradient-end; + + &__container { + padding-block: 45px 50px; + row-gap: 15px; + @include padding-inline; + @include grid-page; + + @include on-tablet { + row-gap: 0; + padding-block: 21px; + } + + @include on-desktop { + padding-block: 40px; + } + } + + &__link-logo { + grid-column: 1 / -1; + display: block; + width: 69px; + height: 14px; + + @include on-tablet { + grid-column: 1 / span 1; + } + } + + &__logo { + width: 100%; + height: 100%; + object-fit: contain; + + @include hover(transform, scale(1.2)); + } + + &__nav-container { + grid-column: 1 / span 1; + + @include on-tablet { + grid-column: 2 / span 4; + place-self: center center; + } + + @include on-desktop { + grid-column: 5 / span 4; + } + + @include on-design { + grid-column: 7 / span 4; + } + } + + &__contact-container { + grid-column: 2 / span 1; + display: flex; + flex-direction: column; + gap: 26px; + + @include on-tablet { + grid-column: 6 / span 1; + } + + @include on-desktop { + grid-column: 11 / span 2; + } + + @include on-design { + grid-column: 15 / span 2; + } + } + + &__social { + display: flex; + gap: 18px; + + @include on-desktop { + justify-content: end; + } + } + + &__social-link { + width: 18px; + height: 18px; + cursor: pointer; + background-color: $white; + + @include hover(background-color, $bg-button); + + &--face { + @include mask('../images/icons/footer/face.svg'); + } + + &--twit { + @include mask('../images/icons/footer/x.svg'); + } + + &--youtube { + @include mask('../images/icons/footer/youtube.svg'); + } + + &--reddit { + @include mask('../images/icons/footer/reddit.svg'); + } + } +} diff --git a/src/styles/header/_header.scss b/src/styles/header/_header.scss new file mode 100644 index 000000000..f3c38861a --- /dev/null +++ b/src/styles/header/_header.scss @@ -0,0 +1,189 @@ +@use '../utils/index' as *; + +.header { + padding-bottom: 46px; + background: linear-gradient( + 107.56deg, + $header-gradient-start 0, + $header-gradient-end 100% + ); + + @include on-tablet { + padding-bottom: 60px; + } + + @include on-desktop { + padding-bottom: 84px; + } + + @include on-design { + padding-bottom: 107px; + } + + &__container { + @include padding-inline; + + @include grid-page; + } + + &__top { + grid-column: 1 / -1; + } + + &__swiper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / span 3; + } + + @include on-desktop { + grid-column: 6 / span 7; + grid-row: 2; + } + + @include on-design { + grid-column: 7 / span 10; + } + } + + &__title-container { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 3; + grid-row: 2; + } + + @include on-desktop { + grid-column: 1 / span 6; + } + + @include on-design { + grid-column: 1 / span 7; + } + } + + &__title { + margin-bottom: 17px; + color: $white; + } + + &__span-title { + font-weight: 400; + color: $bg-button; + } + + &__title-description { + @extend %plain-text; + + margin-bottom: 8px; + font-weight: 500; + color: $white; + + @include on-tablet { + margin-bottom: 10px; + } + + @include on-desktop { + margin-inline: 92px; + } + } + + &__price { + @extend %price; + + margin-bottom: 16px; + color: $white; + text-align: center; + + @include on-tablet { + margin-bottom: 24px; + text-align: left; + } + + @include on-desktop { + margin-bottom: 20px; + margin-inline: 92px 0; + } + + @include on-design { + margin-bottom: 36px; + } + } + + &__play-video { + @include on-desktop { + margin-inline: 92px 0; + } + } + + &__faq-help { + display: none; + + @include on-desktop { + display: flex; + gap: 39px; + } + } + + &__faq-help-link { + @extend %nav-text; + + line-height: 150%; + color: $white; + + @include hover(color, $bg-button); + } + + &__bottom { + display: none; + align-items: center; + justify-content: space-between; + margin-top: 85px; + + @include on-desktop { + display: flex; + grid-column: 1 / -1; + } + } + + &__more { + @extend %nav-text; + + position: relative; + color: $bg-button; + + @include hover(color, $white); + + &::after { + position: absolute; + bottom: -7px; + left: 50%; + + transform: translateX(-50%); + + content: ''; + + width: 9px; + height: 6px; + + background-color: $bg-button; + transition: background-color $transition; + + mask-image: url('../images/icons/dropdown-arrow.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + + -webkit-mask-image: url('../images/icons/dropdown-arrow.svg'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + + &:hover::after { + background-color: $white; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8b7772d37 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,54 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use 'utils/index' as *; +@use 'aside/index' as *; +@use 'typography' as *; +@use 'fonts' as *; +@use 'blocks/index'; +@use 'header/header' as *; +@use 'footer/footer' as *; +@use 'main/index' as *; + +.page { + position: relative; + scroll-behavior: smooth; + background-color: $bg-dark-main; + + &:has( + .page__menu:target, + .page__language:target, + .page__help:target, + .page__faq:target, + .page__video:target + ) { + overflow: hidden; + } + + &__video { + position: fixed; + display: none; + + width: 100%; + height: 100vh; + + top: 0; + z-index: 5; + } + + &__menu { + @include aside; + } + + &__language { + @include aside; + } + + &__help { + @include aside; + } + + &__faq { + @include aside; + } +} body { background: $c-gray; diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss new file mode 100644 index 000000000..1c8548f7a --- /dev/null +++ b/src/styles/main/_index.scss @@ -0,0 +1,37 @@ +@forward 'more/more'; +@forward 'about/about'; +@forward 'specs/specs'; +@forward 'benefits/benefits'; +@forward 'question/question'; + +@use '../utils/index' as *; + +.main { + background-color: $bg-dark-main; + + &__button { + @extend %nav-text; + + display: block; + position: sticky; + bottom: 20px; + width: 280px; + height: 40px; + margin: auto; + font-size: 14px; + line-height: 40px; + text-align: center; + z-index: 1; + + @include on-desktop { + position: absolute; + left: 50%; + bottom: 19%; + transform: translateX(-50%); + } + + @include on-design { + display: none; + } + } +} diff --git a/src/styles/main/about/_about.scss b/src/styles/main/about/_about.scss new file mode 100644 index 000000000..c176aac22 --- /dev/null +++ b/src/styles/main/about/_about.scss @@ -0,0 +1,206 @@ +@use '../../utils/index' as *; + +.about { + padding-block: 50px; + background: linear-gradient( + 107.56deg, + $header-gradient-start 0, + $header-gradient-end 100% + ); + + &__container { + grid-template-rows: auto; + + @include padding-inline; + + @include grid-page; + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 20px; + line-height: 100%; + color: $white; + + & span { + font-weight: 400; + color: $bg-button; + } + + @include on-tablet { + grid-column: 4 / span 3; + grid-row: 1; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 9 / span 4; + } + + @include on-design { + grid-column: 12 / span 5; + } + } + + &__container-slider { + position: relative; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 3; + grid-row: 1 / span 2; + } + + @include on-desktop { + grid-column: 3 / span 5; + } + + @include on-design { + grid-column: 4 / span 7; + } + } + + &__pagination-fraction { + position: absolute; + width: auto; + top: 0; + left: -58px; + z-index: 10; + text-align: left; + + & span { + @extend %pagination; + + width: 1ch; + color: $bg-button; + } + + &.swiper-pagination-fraction { + @include on-desktop { + position: absolute; + width: auto; + top: 0; + left: -58px; + z-index: 10; + text-align: left; + } + } + } + + &__container-text-button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / span 3; + grid-row: 2 / span 1; + } + + @include on-desktop { + grid-column: 9 / span 4; + } + + @include on-design { + grid-column: 12 / span 5; + } + } + + &__text { + @extend %plain-text; + + margin-block: 20px 55px; + color: $bt-disabled-text; + + @include on-tablet { + margin-block: 30px 21px; + } + } + + &__meet { + grid-column: 1 / -1; + padding-block: 80px 0; + + @include grid-page; + + @include on-desktop { + padding-block: 183px 0; + } + + @include on-design { + padding-block: 175px 0; + } + } + + &__meet-title { + @extend %h3; + + grid-column: 1 / span 2; + margin-block: 11px 22px; + font-size: 21px; + color: $white; + + & span { + font-weight: 400; + color: $bg-button; + } + + @include on-tablet { + margin-block: 11px 32px; + } + + @include on-desktop { + grid-column: 1 / span 5; + } + + @include on-design { + grid-column: 2 / span 5; + } + } + + &__meet-text { + @extend %plain-text; + + grid-column: 1 / span 4; + color: $bt-disabled-text; + + @include on-desktop { + grid-column: 1 / span 5; + } + + @include on-design { + grid-column: 2 / span 6; + } + } + + &__greeting { + @extend %pagination; + + color: $bg-button; + + @include on-design { + grid-column: 2 / span 1; + } + } + + &__container-article-img { + display: none; + + grid-column: 5 / span 2; + grid-row: 1 / span 3; + background-image: url(../images/main/about.webp); + background-repeat: no-repeat; + background-size: auto 100%; + background-position: left; + + @include on-tablet { + display: block; + } + + @include on-desktop { + grid-column: 7 / span 6; + } + + @include on-design { + grid-column: 9 / span 8; + } + } +} diff --git a/src/styles/main/benefits/_benefits.scss b/src/styles/main/benefits/_benefits.scss new file mode 100644 index 000000000..8395afc17 --- /dev/null +++ b/src/styles/main/benefits/_benefits.scss @@ -0,0 +1,127 @@ +@use '../../utils/index' as *; + +.benefits { + background: linear-gradient( + 146.86deg, + $header-gradient-start -0.5%, + $header-gradient-end 99.5% + ); + + &__container { + padding-block: 50px; + + @include padding-inline; + @include grid-page; + + @include on-tablet { + padding-block: 70px; + } + @include on-desktop { + padding-block: 100px 229px; + } + @include on-design { + padding-block: 160px; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 32px; + line-height: 100%; + color: $white; + + @include on-desktop { + margin-bottom: 83px; + font-size: 36px; + text-align: center; + } + + & span { + color: $bg-button; + } + } + + &__article { + grid-column: 1 / -1; + margin-bottom: 20px; + padding: 5px; + border-radius: 5px; + cursor: pointer; + transition: all $transition; + + &:hover { + box-shadow: 0 0 10px 5px $bg-button; + + & p { + line-clamp: none; + -webkit-line-clamp: none; + } + } + + @include on-tablet { + grid-column: span 2; + display: flex; + flex-direction: column; + align-items: center; + } + + @include on-desktop { + grid-column: span 4; + } + + &--compatibility { + @include on-design { + grid-column: 1 / span 4; + } + } + + &--control { + @include on-design { + grid-column: 7 / span 4; + } + } + + &--sensors { + @include on-design { + grid-column: 13 / span 4; + } + } + } + + &__image { + display: none; + margin-bottom: 23px; + + @include on-tablet { + display: block; + } + } + + &__article-title { + margin-bottom: 11px; + color: $white; + + @include on-tablet { + margin-bottom: 27px; + font-size: 15px; + } + + @include on-desktop { + margin-bottom: 17px; + font-family: 16px; + } + } + + &__text { + @extend %plain-text; + + color: $bt-disabled-text; + + @include line-clamp(3); + + @include on-desktop { + line-clamp: none; + -webkit-line-clamp: none; + } + } +} diff --git a/src/styles/main/more/_more.scss b/src/styles/main/more/_more.scss new file mode 100644 index 000000000..ed5b5352b --- /dev/null +++ b/src/styles/main/more/_more.scss @@ -0,0 +1,105 @@ +@use '../../utils/index' as *; + +.more { + background-color: $bg-dark-main; + + &__container { + padding-block: 50px; + + @include padding-inline; + + @include on-tablet { + padding-block: 70px; + } + @include on-desktop { + padding-block: 100px; + } + @include on-design { + padding-block: 158px; + } + } + + &__image { + display: none; + + @include on-tablet { + display: block; + margin-bottom: 22px; + } + } + + &__title { + margin-bottom: 12px; + color: $white; + text-align: center; + + & span { + font-weight: 400; + color: $bg-button; + } + + @include on-desktop { + margin-bottom: 16px; + } + } + + &__title-info { + margin-bottom: 30px; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 400; + line-height: 100%; + letter-spacing: 0; + color: $bg-button; + text-align: center; + } + + &__container-article { + row-gap: 20px; + + @include grid-page; + } + + &__article { + grid-column: 1 / -1; + + padding: 5px; + border-radius: 5px; + cursor: pointer; + + + transition: all $transition; + + &:hover { + box-shadow: 0 0 10px 5px $bg-button; + + line-clamp: none; + -webkit-line-clamp: none; + } + + @include line-clamp(3); + + @include on-tablet { + grid-column: span 3; + display: flex; + flex-direction: column; + align-items: center; + } + + @include on-design { + grid-column: span 4; + } + } + + &__article-title { + margin-bottom: 11px; + color: $white; + } + + &__article-description { + @extend %plain-text; + + color: $bt-disabled-text; + transition: all $transition; + } +} diff --git a/src/styles/main/question/_question.scss b/src/styles/main/question/_question.scss new file mode 100644 index 000000000..3ae4d313f --- /dev/null +++ b/src/styles/main/question/_question.scss @@ -0,0 +1,141 @@ +@use '../../utils/index' as *; + +.question { + background-color: $bg-dark-main; + + &__container { + grid-template-rows: repeat(5, auto); + + padding-block: 50px; + + @include on-tablet { + padding-block: 70px 130px; + } + @include on-desktop { + padding-block: 100px; + } + @include on-design { + padding-block: 156px 205px; + } + + @include padding-inline; + @include grid-page; + } + + &__wrapper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 3; + } + + @include on-desktop { + grid-column: 1 / span 5; + } + } + + &__title-question { + @extend %secondary-text; + + color: $bg-button; + } + + &__title { + grid-column: 1 / span 2; + margin-block: 11px 32px; + line-height: 100%; + color: $white; + + & span { + font-weight: 400; + color: $bg-button; + } + + @include on-tablet { + grid-row: 2; + grid-column: 1 / span 3; + margin-block: 11px 50px; + } + + @include on-desktop { + margin-block: 11px 26px; + } + } + + &__form { + position: relative; + grid-column: 1 / span 2; + + @include on-tablet { + grid-row: 1 / span 4; + grid-column: 4 / span 3; + } + + @include on-desktop { + grid-column: 7 / span 6; + } + + @include on-design { + grid-column: 9 / -1; + } + } + + &__arrow-link { + position: absolute; + display: none; + width: 48px; + height: 48px; + right: 0; + bottom: 0; + border-radius: 50%; + + background-image: url(../images/icons/main/arrow-up-hover.svg); + background-repeat: no-repeat; + background-size: contain; + box-shadow: 0 0 15px 4px $bg-button, inset 0 0 15px 4px $bg-button; + + transition: box-shadow $transition; + + &:hover { + background-image: url(../images/icons/main/arrow-up.svg); + box-shadow: 0 0 15px 4px $white, inset 0 0 15px 4px $white; + } + + @include on-tablet { + display: block; + } + } + + &__reply { + @extend %plain-text; + + margin-top: 30px; + font-size: 12px; + color: $bt-disabled-text; + + @include on-tablet { + grid-row: 2; + grid-column: 1 / span 3; + } + + @include on-desktop { + margin-top: 0; + } + + &--mobile { + grid-column: 1 / -1; + @include on-tablet { + display: none; + } + } + + &--tablet { + display: none; + + @include on-tablet { + display: block; + margin-bottom: 76px; + } + } + } +} diff --git a/src/styles/main/specs/_specs.scss b/src/styles/main/specs/_specs.scss new file mode 100644 index 000000000..2207e7b4a --- /dev/null +++ b/src/styles/main/specs/_specs.scss @@ -0,0 +1,251 @@ +@use '../../utils/index' as *; + +.specs { + background-color: $bg-dark-main; + + &__container { + padding-block: 50px; + + @include padding-inline; + @include grid-page; + + @include on-tablet { + padding-block: 80px; + } + @include on-desktop { + padding-block: 100px; + } + @include on-design { + padding-block: 160px; + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 30px; + line-height: 100%; + color: $white; + + & span { + font-weight: 400; + color: $bg-button; + } + + @include on-tablet { + margin-bottom: 57px; + } + + @include on-desktop { + grid-column: 9 / -1; + margin-bottom: 141px; + } + + @include on-design { + grid-column: 12 / -1; + } + } + + &__content { + position: relative; + grid-column: 1 / -1; + place-self: center; + width: 200px; + height: 200px; + + @include on-tablet { + width: 360px; + height: 360px; + } + + @include on-desktop { + width: 300px; + height: 300px; + } + } + + &__image { + width: 100%; + object-fit: contain; + object-position: bottom; + } + + &__button { + position: absolute; + width: 35px; + height: 35px; + border-radius: 50%; + background-color: $bg-button; + background-image: url(../images/icons/main/plus.svg); + background-repeat: no-repeat; + background-size: 12px; + background-position: center; + cursor: pointer; + + &--active { + background-image: url(../images/icons/main/minus.svg); + } + + &--sensor { + left: 30%; + top: -5%; + } + + &--connection { + left: -5%; + bottom: 0; + } + + &--batterries { + top: 50%; + left: 75%; + + transform: translate(-50%, -50%); + } + + @include hover(box-shadow, 0 0 10px 5px $bg-button); + + @include on-desktop { + display: none; + } + } + + &__title-info { + display: none; + + @include on-desktop { + display: block; + position: relative; + margin-bottom: 21px; + font-size: 16px; + color: $white; + } + } + + &__info { + position: absolute; + width: max-content; + max-width: 280px; + padding: 10px; + border-radius: 5px; + background-color: $bg-aside; + opacity: 0; + pointer-events: none; + transition: opacity $transition; + + & p { + @extend %plain-text; + + font-size: 12px; + line-height: 100%; + color: $bt-disabled-text; + + @include on-tablet { + font-size: 16px; + line-height: 150%; + } + } + + &--sensor { + top: 15%; + left: -25%; + + & h3::after { + width: 431px; + height: 72px; + left: 34%; + top: 50%; + + @include after('../images/icons/main/sensor.svg'); + } + + @include on-desktop { + top: -20%; + left: -127%; + } + } + + &--connection { + top: 80%; + left: 15%; + + & h3::after { + width: 160px; + height: 80px; + bottom: 10%; + left: 57%; + + @include after('../images/icons/main/connection.svg'); + } + + @include on-desktop { + top: 55%; + left: -95%; + } + } + + &--batterries { + top: 60%; + left: -20%; + + & h3::after { + width: 160px; + height: 260px; + right: 105%; + top: 50%; + + @include after('../images/icons/main/batterries.svg'); + } + + @include on-desktop { + top: -20%; + left: 110%; + } + + @include on-design { + left: 145%; + } + } + + &--active { + opacity: 1; + } + + @include on-tablet { + max-width: 100%; + } + + @include on-desktop { + max-width: 120%; + padding: 0; + background-color: transparent; + opacity: 1; + } + } + + &__ellips { + display: none; + position: absolute; + width: 40px; + height: 200px; + top: 15%; + background-image: url(../images/icons/main/ellipse.svg); + background-repeat: no-repeat; + background-size: cover; + + transform-origin: 150px 105px; + animation: orbit 3s ease-in-out infinite alternate; + + @include on-desktop { + display: block; + } + } + + @keyframes orbit { + from { + transform: rotate(-40deg); + } + to { + transform: rotate(40deg); + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..5a2bb1c99 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,78 @@ +@use 'mixins' as *; + %h1 { - font-family: Roboto, sans-serif; + font-size: 26px; + font-family: Inter, sans-serif; + font-weight: 900; + line-height: 130%; + letter-spacing: 0; + + @include on-desktop { + font-size: 46px; + } + + @include on-design { + font-size: 54px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 21px; + font-weight: 900; + line-height: 130%; + letter-spacing: 0; + + @include on-desktop { + font-size: 36px; + line-height: 100%; + } +} + +%h3 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 900; + line-height: 100%; + letter-spacing: 0; +} + +%nav-text { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 130%; + letter-spacing: 0; +} + +%plain-text { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0; +} + +%price { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 100%; + letter-spacing: 0; +} + +%pagination { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 100%; + letter-spacing: 0; +} + +%secondary-text { + font-size: 14px; + font-family: Inter, sans-serif; font-weight: 400; + line-height: 100%; + letter-spacing: 0; } diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss new file mode 100644 index 000000000..904893c33 --- /dev/null +++ b/src/styles/utils/_index.scss @@ -0,0 +1,4 @@ +@forward 'extends'; +@forward 'mixins'; +@forward 'vars'; +@forward 'normalize'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f35c43448 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,118 @@ +@use 'vars' as *; + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: all $transition; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 110px; + } + + @include on-design { + max-width: $design-min-width; + padding-inline: 235px; + margin: auto; + } +} + +@mixin grid-page { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } + + @include on-design { + --columns: 16; + } +} + +@mixin aside { + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-200%); + + z-index: 2; + + opacity: 0; + + transition: $transition; + + &:target { + transform: translateY(0); + opacity: 1; + } +} + +@mixin after($path) { + position: absolute; + display: block; + content: ''; + background-image: url($path); + background-repeat: no-repeat; + background-size: contain; +} + +@mixin line-clamp($line) { + display: -webkit-box; + line-clamp: $line; + -webkit-line-clamp: $line; + -webkit-box-orient: vertical; + overflow: hidden; +} + +@mixin input-field($height) { + width: 100%; + height: $height; + border-bottom: 1px solid $br-input; + background-color: $bg-dark-main; +} + +@mixin mask($path) { + mask-image: url($path); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url($path); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..f9fedc71a --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,32 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, ul, p { + margin: 0; + padding: 0; +} + +ul { + list-style-type: none; +} + +a { + text-decoration: none; +} + +button { + padding: 0; + border: none; +} + +input, textarea { + padding: 0; + outline: none; + border: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..7e015157b 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,19 @@ $c-gray: #eee; +$white: #fff; +$bg-button: #05C2DF; +$bg-aside: #191536; +$bg-aside-main: #000000B2; +$bg-aside-link: #110E25; +$bt-disabled-text: #929292; +$bg-pagination: #212121; +$secondary-text: #545454; +$bg-pagination-more: #484848; +$bg-dark-main: #05040B; +$br-input: #2f2f2f; +$header-gradient-start: #191536; +$header-gradient-end: #000; +$error: #860404; +$transition: 0.3s; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$design-min-width: 1920px;