diff --git a/src/fonts/HelveticaNeue.woff b/src/fonts/HelveticaNeue.woff new file mode 100644 index 000000000..8538e2983 Binary files /dev/null and b/src/fonts/HelveticaNeue.woff differ diff --git a/src/fonts/HelveticaNeueRoman.otf b/src/fonts/HelveticaNeueRoman.otf new file mode 100644 index 000000000..4961505b6 Binary files /dev/null and b/src/fonts/HelveticaNeueRoman.otf differ diff --git a/src/images/a347db2baba6b808980fb0422ff7f7f2_original.png b/src/images/a347db2baba6b808980fb0422ff7f7f2_original.png new file mode 100644 index 000000000..86b6e248f Binary files /dev/null and b/src/images/a347db2baba6b808980fb0422ff7f7f2_original.png differ diff --git a/src/images/header/desktop-header.webp b/src/images/header/desktop-header.webp new file mode 100644 index 000000000..b3b02aa60 Binary files /dev/null and b/src/images/header/desktop-header.webp differ diff --git a/src/images/header/mobile-header.webp b/src/images/header/mobile-header.webp new file mode 100644 index 000000000..d720c7edf Binary files /dev/null and b/src/images/header/mobile-header.webp differ diff --git a/src/images/header/tablet-header.webp b/src/images/header/tablet-header.webp new file mode 100644 index 000000000..d41762498 Binary files /dev/null and b/src/images/header/tablet-header.webp differ diff --git a/src/images/icon/Icon-Burger-menu.svg b/src/images/icon/Icon-Burger-menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/icon/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/Icon-Close.svg b/src/images/icon/Icon-Close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/arrow-left.svg b/src/images/icon/arrow-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/icon/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrow-right.svg b/src/images/icon/arrow-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icon/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/arrowUp.svg b/src/images/icon/arrowUp.svg new file mode 100644 index 000000000..9977a457b --- /dev/null +++ b/src/images/icon/arrowUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/favicon.svg b/src/images/icon/favicon.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icon/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/futuristic.svg b/src/images/icon/futuristic.svg new file mode 100644 index 000000000..55b340246 --- /dev/null +++ b/src/images/icon/futuristic.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/inst.svg b/src/images/icon/inst.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon/inst.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/lighting.svg b/src/images/icon/lighting.svg new file mode 100644 index 000000000..60c45a669 --- /dev/null +++ b/src/images/icon/lighting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg new file mode 100644 index 000000000..49756ce2b --- /dev/null +++ b/src/images/icon/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/multirun.svg b/src/images/icon/multirun.svg new file mode 100644 index 000000000..a15bc32b2 --- /dev/null +++ b/src/images/icon/multirun.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/speaker.svg b/src/images/icon/speaker.svg new file mode 100644 index 000000000..945253101 --- /dev/null +++ b/src/images/icon/speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/testimonilas.svg b/src/images/icon/testimonilas.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/icon/testimonilas.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twit.svg b/src/images/icon/twit.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon/twit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/about/desktop-about.webp b/src/images/main/about/desktop-about.webp new file mode 100644 index 000000000..ccb85e792 Binary files /dev/null and b/src/images/main/about/desktop-about.webp differ diff --git a/src/images/main/about/desktop.png b/src/images/main/about/desktop.png new file mode 100644 index 000000000..873c75cc1 Binary files /dev/null and b/src/images/main/about/desktop.png differ diff --git a/src/images/main/about/mobile-about.webp b/src/images/main/about/mobile-about.webp new file mode 100644 index 000000000..aa227a067 Binary files /dev/null and b/src/images/main/about/mobile-about.webp differ diff --git a/src/images/main/about/mobile.png b/src/images/main/about/mobile.png new file mode 100644 index 000000000..357e061b2 Binary files /dev/null and b/src/images/main/about/mobile.png differ diff --git a/src/images/main/about/tablet-about.webp b/src/images/main/about/tablet-about.webp new file mode 100644 index 000000000..89e97a5d8 Binary files /dev/null and b/src/images/main/about/tablet-about.webp differ diff --git a/src/images/main/about/tablet.png b/src/images/main/about/tablet.png new file mode 100644 index 000000000..507d716f8 Binary files /dev/null and b/src/images/main/about/tablet.png differ diff --git a/src/images/main/features/desctop.webp b/src/images/main/features/desctop.webp new file mode 100644 index 000000000..c10bf236a Binary files /dev/null and b/src/images/main/features/desctop.webp differ diff --git a/src/images/main/features/erasebg-transformed.webp b/src/images/main/features/erasebg-transformed.webp new file mode 100644 index 000000000..ab4341e4b Binary files /dev/null and b/src/images/main/features/erasebg-transformed.webp differ diff --git a/src/images/main/features/feature.webp b/src/images/main/features/feature.webp new file mode 100644 index 000000000..4a908c5e0 Binary files /dev/null and b/src/images/main/features/feature.webp differ diff --git a/src/images/main/presantation/desktop-pr.webp b/src/images/main/presantation/desktop-pr.webp new file mode 100644 index 000000000..6b93863c0 Binary files /dev/null and b/src/images/main/presantation/desktop-pr.webp differ diff --git a/src/images/main/presantation/mobile-pr.webp b/src/images/main/presantation/mobile-pr.webp new file mode 100644 index 000000000..329a270ba Binary files /dev/null and b/src/images/main/presantation/mobile-pr.webp differ diff --git a/src/images/main/presantation/tablet-pr.webp b/src/images/main/presantation/tablet-pr.webp new file mode 100644 index 000000000..aad6ec062 Binary files /dev/null and b/src/images/main/presantation/tablet-pr.webp differ diff --git a/src/images/main/technology/desktop-tech.webp b/src/images/main/technology/desktop-tech.webp new file mode 100644 index 000000000..323d6765d Binary files /dev/null and b/src/images/main/technology/desktop-tech.webp differ diff --git a/src/images/main/technology/desktop.png b/src/images/main/technology/desktop.png new file mode 100644 index 000000000..2b2021047 Binary files /dev/null and b/src/images/main/technology/desktop.png differ diff --git a/src/images/main/technology/mobile-tech.webp b/src/images/main/technology/mobile-tech.webp new file mode 100644 index 000000000..c68ba5d16 Binary files /dev/null and b/src/images/main/technology/mobile-tech.webp differ diff --git a/src/images/main/technology/mobile.png b/src/images/main/technology/mobile.png new file mode 100644 index 000000000..3462ac14c Binary files /dev/null and b/src/images/main/technology/mobile.png differ diff --git a/src/images/main/technology/tablet-tech.webp b/src/images/main/technology/tablet-tech.webp new file mode 100644 index 000000000..068f94206 Binary files /dev/null and b/src/images/main/technology/tablet-tech.webp differ diff --git a/src/images/main/technology/tablet.png b/src/images/main/technology/tablet.png new file mode 100644 index 000000000..f942f4a75 Binary files /dev/null and b/src/images/main/technology/tablet.png differ diff --git a/src/images/main/testimonials/avatar.png b/src/images/main/testimonials/avatar.png new file mode 100644 index 000000000..cfe0ce78f Binary files /dev/null and b/src/images/main/testimonials/avatar.png differ diff --git a/src/scripts/constants.js b/src/scripts/constants.js new file mode 100644 index 000000000..fb403c2df --- /dev/null +++ b/src/scripts/constants.js @@ -0,0 +1,2 @@ +export const TIME_OUT = 3000; +export const pattern = /^[A-Za-z0-9._%+-]+@[^\s@]+\.[^\s@]+$/; diff --git a/src/scripts/form.js b/src/scripts/form.js new file mode 100644 index 000000000..3f1a58733 --- /dev/null +++ b/src/scripts/form.js @@ -0,0 +1,32 @@ +import { pattern } from './constants'; + +const emailInput = document.querySelector('.form__input'); +const textArea = document.querySelector('.form__textarea'); +const button = document.querySelector('.form__submit'); + +const emailValidation = (email) => pattern.test(email); + +const toggleButtonState = () => { + const emailText = emailInput.value.trim(); + const textValue = textArea.value.trim(); + + button.disabled = !emailValidation(emailText) || textValue === ''; +}; + +emailInput.addEventListener('input', (event) => { + const emailText = event.target.value; + + if (!emailValidation(emailText)) { + emailInput.classList.add('form__input--error'); + } else { + emailInput.classList.remove('form__input--error'); + } + + if (emailText === '') { + emailInput.classList.remove('form__input--error'); + } + + toggleButtonState(); +}); + +textArea.addEventListener('input', toggleButtonState); diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..386e49442 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,58 @@ 'use strict'; +import './swiper'; +import './form'; +import { TIME_OUT } from './constants'; + +document.addEventListener('DOMContentLoaded', () => { + const container = document.querySelector('.benefits__wrapper-articles'); + const articles = document.querySelectorAll('.benefits__article'); + const mediaQuery = window.matchMedia('(max-width: 743px)'); + let currentSlid = 0; + let intervalId = 0; + + const startAutoScroll = () => { + const goToSlide = (slide) => { + const slideWidth = articles[0].offsetWidth + 30; + + container.scrollTo({ + left: slideWidth * slide, + behavior: 'smooth', + }); + }; + + intervalId = setInterval(() => { + goToSlide(currentSlid); + currentSlid = (currentSlid + 1) % articles.length; + }, TIME_OUT); + }; + + const stopAutoScroll = () => clearInterval(intervalId); + + mediaQuery.addEventListener('change', (e) => { + if (e.matches) { + startAutoScroll(); + } else { + stopAutoScroll(); + } + }); + + if (mediaQuery.matches) { + startAutoScroll(); + } + + container.addEventListener('mouseenter', stopAutoScroll); + + container.addEventListener('mouseleave', () => { + if (mediaQuery.matches) { + startAutoScroll(); + } + }); + + container.addEventListener('touchstart', stopAutoScroll); + + container.addEventListener('touchend', () => { + if (mediaQuery.matches) { + startAutoScroll(); + } + }); +}); diff --git a/src/scripts/swiper.js b/src/scripts/swiper.js new file mode 100644 index 000000000..25b29b22b --- /dev/null +++ b/src/scripts/swiper.js @@ -0,0 +1,20 @@ +'use strict'; + +import Swiper from 'swiper/bundle'; +import 'swiper/css/bundle'; + +export const swiper = new Swiper('.swiper', { + direction: 'horizontal', + loop: true, + navigation: { + nextEl: '.swiper-button-left', + prevEl: '.swiper-button-right', + }, + autoplay: { + delay: 3000, + }, + pagination: { + el: '.swiper-pagination', + type: 'fraction', // показує "1/3", "2/3" тощо + }, +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..33ce396c4 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,13 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; + font-weight: normal; src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-style: normal; +} + +@font-face { + font-family: 'Helvetica Neue'; font-weight: normal; + src: url('../fonts/HelveticaNeue.woff') format('woff'); font-style: normal; } diff --git a/src/styles/_normalize.scss b/src/styles/_normalize.scss new file mode 100644 index 000000000..271723304 --- /dev/null +++ b/src/styles/_normalize.scss @@ -0,0 +1,22 @@ +* { + box-sizing: border-box; +} + +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; +} + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..b00420ec9 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,15 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h5 { + @extend %h5; +} diff --git a/src/styles/blocks/blocks.scss b/src/styles/blocks/blocks.scss new file mode 100644 index 000000000..7692cb1c9 --- /dev/null +++ b/src/styles/blocks/blocks.scss @@ -0,0 +1,5 @@ +@import './form/form'; +@import './buttons/button'; +@import './nav/nav'; +@import './top-bar/top-bar'; + diff --git a/src/styles/blocks/buttons/button.scss b/src/styles/blocks/buttons/button.scss new file mode 100644 index 000000000..6bd451c52 --- /dev/null +++ b/src/styles/blocks/buttons/button.scss @@ -0,0 +1,26 @@ +.button { + width: 100px; + height: 48px; + + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 100%; + text-align: center; + color: $white; + letter-spacing: 0; + text-transform: uppercase; + + cursor: pointer; + + background-color: $main-black; + + transition: all $transition; + + &:hover { + background-color: $black; + -webkit-box-shadow: 0 0 21px 0 rgba(46, 44, 44, 0.75); + -moz-box-shadow: 0 0 21px 0 rgba(46, 44, 44, 0.75); + box-shadow: 0 0 21px 0 rgba(46, 44, 44, 0.75); + } +} diff --git a/src/styles/blocks/form/form.scss b/src/styles/blocks/form/form.scss new file mode 100644 index 000000000..442fedc32 --- /dev/null +++ b/src/styles/blocks/form/form.scss @@ -0,0 +1,99 @@ +.form { + display: flex; + flex-direction: column; + gap: 20px; + + &__input { + @extend %main-text; + + width: 100%; + height: 48px; + padding: 12px 20px; + border: 1px solid $tertiary-text; + + font-size: 14px; + + outline: none; + + background-color: $c-gray; + + transition: all $transition; + + &::placeholder { + @extend %main-text; + + color: $arrow; + } + + &:focus { + border-color: $feature-green; + } + + &--error { + border-color: $error; + } + + &--error:focus { + border-color: $error; + } + + &:is(:autofill, :-webkit-autofil) { + box-shadow: inset 0 0 0 1000px $c-gray; + -webkit-text-fill-color: $main-black; + } + } + + &__textarea { + @extend %main-text; + + width: 100%; + height: 128px; + padding: 12px 20px; + border: 1px solid $tertiary-text; + + font-size: 14px; + + background-color: $c-gray; + outline: none; + + @include on-tablet { + height: 201px; + } + + @include on-desktop { + height: 128px; + } + + &::placeholder { + @extend %main-text; + + color: $arrow; + } + + &:focus { + border-color: $feature-green; + } + } + + &__submit { + @extend %button; + + border: none; + width: 102px; + height: 40px; + margin-top: 10px; + padding: 0; + color: $white; + + background-color: $green-link; + + cursor: pointer; + + @include hover(background-color, $feature-green); + + &:disabled { + cursor: not-allowed; + background-color: $disabled-bt; + } + } +} diff --git a/src/styles/blocks/nav/nav.scss b/src/styles/blocks/nav/nav.scss new file mode 100644 index 000000000..8aff572d3 --- /dev/null +++ b/src/styles/blocks/nav/nav.scss @@ -0,0 +1,24 @@ +.nav { + &__list { + display: flex; + gap: 84px; + justify-content: center; + + &--menu { + flex-direction: column; + gap: 25px; + } + } + + &__link { + @extend %therdary-text; + + color: $main-black; + transition: all $transition; + + &:hover { + font-weight: 700; + color: $active-link-nav; + } + } +} 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..ab0660085 --- /dev/null +++ b/src/styles/blocks/top-bar/top-bar.scss @@ -0,0 +1,116 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 25px; + + @include padding-inline; + + @include on-tablet { + padding-inline: 0; + } + + @include on-desktop { + margin: 0; + } + + &__content { + display: flex; + gap: 30px; + align-items: center; + + &--menu { + gap: 25px; + } + } + + &__logo { + display: block; + width: 160px; + height: 26px; + + background-image: url(../images/icon/logo.svg); + background-size: contain; + background-repeat: no-repeat; + + @include hover(transform, scale(1.07)); + } + + &__specs { + @extend %therdary-text; + + display: none; + + font-family: 'Helvetica Neue', Helvetica, sans-serif; + font-weight: 400; + line-height: 100%; + color: $secondary-text; + text-transform: uppercase; + + transition: all $transition; + + @include on-tablet { + display: block; + } + + &:hover { + font-weight: 700; + color: $main-black; + } + } + + &__container-language { + display: none; + + @include on-tablet { + display: flex; + gap: 3px; + } + } + + &__button { + display: none; + + @include on-tablet { + display: block; + } + } + + &__lang { + display: block; + + font-family: 'Helvetica Neue', Helvetica, sans-serif; + color: $tertiary-text; + + @include hover(color, $main-black); + @include hover(font-weight, 700); + + &--active { + color: $main-black; + } + } + + &__burger-menu { + display: block; + width: 32px; + height: 32px; + + @include on-desktop { + display: none; + } + + &--open { + background-image: url(../images/icon/Icon-Burger-menu.svg); + background-size: cover; + + @include hover(transform, scale(1.2)); + } + + &--close { + background-image: url(../images/icon/Icon-Close.svg); + background-size: cover; + + @include hover(transform, scale(1.2)); + } + } +} diff --git a/src/styles/footer/footer.scss b/src/styles/footer/footer.scss new file mode 100644 index 000000000..c0d059c7d --- /dev/null +++ b/src/styles/footer/footer.scss @@ -0,0 +1,99 @@ +.footer { + position: relative; + + display: flex; + flex-direction: column; + gap: 30px; + justify-content: center; + align-items: center; + + padding-bottom: 20px; + + @include on-tablet { + padding-bottom: 30px; + } + + @include on-desktop { + gap: 60px; + } + + @include padding-inline; + + &__logo { + display: none; + + width: 184px; + height: 26px; + + background-image: url(../images/icon/logo.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + display: block; + } + } + + &__arrow { + position: absolute; + display: none; + top: 0; + right:34px; + + transform-origin: center; + + background-image: url(../images/icon/arrowUp.svg); + background-repeat: no-repeat; + background-position: center; + + cursor: pointer; + + @include hover(transform, rotate(360deg)); + + @include on-tablet { + display: block; + width: 50px; + height: 50px; + } + + @include on-desktop { + right:123px; + } + } + + &__social { + display: flex; + gap: 40px; + } + + &__icon { + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include size-icon-footer; + @include hover(transform, scale(1.2)); + + &--twit { + background-image: url(../images/icon/twit.svg); + } + + &--face { + background-image: url(../images/icon/facebook.svg); + } + + &--inst { + background-image: url(../images/icon/inst.svg); + } + } + + &__policy { + @extend %secondary-text; + + color: $arrow; + text-align: center; + } +} diff --git a/src/styles/header/header.scss b/src/styles/header/header.scss new file mode 100644 index 000000000..6839a8f82 --- /dev/null +++ b/src/styles/header/header.scss @@ -0,0 +1,103 @@ +.header { + @include grid-page; + + @include on-tablet { + @include padding-inline; + } + + &__top-bar { + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 105px; + } + + @include on-design { + margin-bottom: 90px; + } + } + + &__container-image { + grid-column: 1 / -1; + + width: 100%; + background-image: url(../images/header/mobile-header.webp); + background-repeat: no-repeat; + background-size: cover; + aspect-ratio: 1.31; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2; + + aspect-ratio: 1.35; + + background-image: url(../images/header/tablet-header.webp); + } + + @include on-desktop { + grid-column: 5 / -1; + height: 464px; + background-image: url(../images/header/desktop-header.webp); + background-size: contain; + } + + @include on-design { + transform: translateX(-30px); + } + } + + &__description { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + gap: 20px; + + padding-inline: 30px; + padding-block: 40px 0; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column: 1 / 5; + grid-row: 2; + gap: 30px; + + align-self: self-end; + + height: fit-content; + + padding: 0; + } + } + + &__title { + grid-column: 1 / -1; + } + + &__title-break { + display: none; + + @include on-tablet { + display: block; + } + } + + &__paragraph { + @extend %main-text; + + grid-column: 1 / span 3; + margin: 0; + } + + &__nav { + display: none; + + grid-column: 1 / -1; + margin-top: 170px; + + @include on-desktop { + display: block; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..fb1113100 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,44 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './normalize'; +@import './header/header'; +@import './menu/menu'; +@import './main/mainBlock'; +@import './blocks/blocks'; +@import './footer/footer'; + body { + margin: 0; + padding: 0; background: $c-gray; } + +.page { + position: relative; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateY(-100%); + + opacity: 0; + + transition: all $transition; + + z-index: 2; + + &:target { + transform: translateY(0); + opacity: 1; + } + } +} diff --git a/src/styles/main/about/about.scss b/src/styles/main/about/about.scss new file mode 100644 index 000000000..4e1b41499 --- /dev/null +++ b/src/styles/main/about/about.scss @@ -0,0 +1,18 @@ +.about { + width: 100%; + + &__article-title { + font-size: 30px; + line-height: 40px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } +} diff --git a/src/styles/main/article/article.scss b/src/styles/main/article/article.scss new file mode 100644 index 000000000..25d1279cc --- /dev/null +++ b/src/styles/main/article/article.scss @@ -0,0 +1,155 @@ +.article { + width: 100%; + + @include grid-page; + + @include on-tablet { + grid-template-rows: auto; + } + + &__wrapper-text-content { + display: none; + + @include on-tablet { + display: block; + grid-column: 5 / span 4; + } + + @include on-desktop { + grid-column: 7/ span 6; + } + + &--technology { + grid-column: 1 / span 4; + grid-row: 1; + + @include on-desktop { + grid-column: 1 / span 6; + } + } + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 30px; + color: $main-black; + + &--hidden { + @include on-tablet { + display: none; + } + } + } + + &__picture { + grid-column: 1 / -1; + width: 100%; + + cursor: pointer; + + transition: all $transition; + + @include on-tablet { + grid-column: 1 / span 4; + } + + @include on-desktop { + grid-column: 1 / span 6; + } + + &--technology { + @include on-tablet { + grid-column: 5 / span 4; + } + + @include on-desktop { + grid-column: 7 / span 6; + } + } + + + &:hover { + -webkit-box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + -moz-box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__text-content { + @extend %main-text; + + grid-column: 1 / -1; + + margin-bottom: 30px; + margin-top: 20px; + + color: $descriptio-text; + + @include on-tablet { + margin-top: 0; + margin-bottom: 60px; + } + + &--small { + @extend %secondary-text; + + @include on-tablet { + font-size: 16px; + line-height: 24px; + } + } + + &--hidden { + @include on-tablet { + display: none; + } + } + } + + &__link { + @extend %button; + + grid-column: span 3; + position: relative; + width: fit-content; + + color: $green-link; + + &::after { + position: absolute; + + display: block; + + content: ''; + + width: 100%; + height: 1px; + + background-color: $green-link; + + bottom: -5px; + + transform: scaleX(0.42); + + transform-origin: left; + + transition: $transition; + } + + &:hover::after { + transform: scaleX(1); + } + + &--hidden { + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/main/benefits/benefits.scss b/src/styles/main/benefits/benefits.scss new file mode 100644 index 000000000..e6b361d37 --- /dev/null +++ b/src/styles/main/benefits/benefits.scss @@ -0,0 +1,88 @@ +.benefits { + width: 100%; + height: 100%; + + &__wrapper-articles { + display: flex; + gap: 30px; + + overflow: hidden; + + width: 100%; + + @include on-tablet { + overflow: visible; + gap: 65px; + + @include grid-page; + } + } + + &__icone { + width: 50px; + height: 40px; + transition: $transition; + + @include on-desktop { + width: 70px; + height: 50px; + } + } + + &__article { + display: flex; + grid-column: span 4; + flex-direction: column; + gap: 40px; + flex: 0 0 100%; + align-items: center; + + scroll-snap-align: center; + + cursor: pointer; + + transition: $transition; + + @include on-tablet { + grid-column: span 4; + gap: 50px; + } + + @include on-desktop { + grid-column: span 3; + gap: 30px; + } + + &:hover .benefits__icone { + transform: rotate(360deg); + } + } + + &__wrapper-title { + width: 100%; + height: 48px; + + @include on-desktop { + height: 80px; + } + } + + &__title { + @extend %h4; + + color: $main-black; + } + + &__descripftion { + height: 126px; + text-align: center; + + @include on-tablet { + height: 105px; + } + + @include on-design { + height: 126px; + } + } +} diff --git a/src/styles/main/feature/feature.scss b/src/styles/main/feature/feature.scss new file mode 100644 index 000000000..ed5c1a034 --- /dev/null +++ b/src/styles/main/feature/feature.scss @@ -0,0 +1,209 @@ +.features { + position: relative; + margin-inline: -30px; + + @include on-tablet { + margin-inline: 0; + background-color: $feature-bg; + + @include grid-page; + } + + &__title { + font-size: 30px; + line-height: 40px; + margin-bottom: 30px; + margin-left: 30px; + color: $main-black; + + @include on-tablet { + grid-column: 1 / -1; + + margin-bottom: 0; + margin-left: 0; + + padding-bottom: 30px; + + background-color: $c-gray; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__container { + padding-top: 30px; + padding-inline: 30px; + background-color: $feature-bg; + + @include on-tablet { + grid-column: 2 / span 3; + padding-top: 60px; + padding-inline: 0; + } + + @include on-desktop { + display: none; + } + } + + &__title-slide { + margin-bottom: 20px; + color: $feature-green; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + list-style-type: disc; + + padding-left: 16px; + + @include on-tablet { + padding-left: 16px; + } + } + + &__item { + @extend %secondary-text; + + width: 100%; + color: $main-black; + + @include on-design { + font-size: 16px; + line-height: 24px; + } + } + + &__pagination { + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + + @include on-tablet { + justify-content: flex-start; + } + + span:first-child { + @extend %main-text; + + display: block; + + transform: translateY(-6px); + min-width: 2ch; + + &::before { + content: '0'; + } + } + + span:last-child { + display: block; + + min-width: 2ch; + + font-family: Inter, sans-serif; + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: $feature-green; + letter-spacing: 0; + + &::before { + content: '0'; + } + } + } + + &__swiper { + padding-inline: 30px; + + & .features__pagination { + position: static; + margin-top: 20px; + padding-left: 24px; + } + } + + &__arrow-container { + display: flex; + justify-content: center; + margin-top: 50px; + + @include on-tablet { + justify-content: flex-start; + } + } + + &__button { + &--left { + svg { + fill: $arrow; + } + } + + &--right { + svg { + fill: $main-black; + } + } + + &:hover svg { + fill: $feature-green; + } + } + + &__slide { + display: none; + + @include on-desktop { + display: block; + } + + &--connectivity { + grid-column: 2 / span 4; + margin-block: 60px 56px; + } + + &--app { + grid-column: 7 / span 3; + margin-block: 60px 56px; + } + + &--sound { + grid-column: 2 / span 4; + } + } + + &__container-img { + width: 100%; + min-height: 174px; + + background-color: $feature-bg; + background-image: url('../images/main/features/erasebg-transformed.webp'); + background-repeat: no-repeat; + background-size: contain; + background-position: calc(100% - 7px) 100%; + + @include on-tablet { + position: absolute; + bottom: -120px; + min-height: 226px; + } + + @include on-desktop { + position: static; + + grid-column: 7 / -1; + + height: 301px; + background-position: calc(100% - 7px) 100%; + } + } +} diff --git a/src/styles/main/mainBlock.scss b/src/styles/main/mainBlock.scss new file mode 100644 index 000000000..6f85a94c8 --- /dev/null +++ b/src/styles/main/mainBlock.scss @@ -0,0 +1,27 @@ +@import './benefits/benefits'; +@import './presentation/presentation'; +@import './about/about'; +@import './article/article'; +@import './testimonials/testimonials'; +@import './feature/feature'; +@import './questions/questions'; + +.main { + display: flex; + flex-direction: column; + gap: 110px; + padding-block: 110px; + + @include padding-inline; + + @include on-tablet { + gap: 140px; + padding-block: 140px; + } + + @include on-desktop { + gap: 170px; + padding-block: 62px 170px; + + } +} diff --git a/src/styles/main/presentation/presentation.scss b/src/styles/main/presentation/presentation.scss new file mode 100644 index 000000000..85683c43c --- /dev/null +++ b/src/styles/main/presentation/presentation.scss @@ -0,0 +1,27 @@ +.presentation { + transition: $transition; + + @include grid-page; + + &:hover { + -webkit-box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + -moz-box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + box-shadow: 0 0 41px 4px rgba(117, 116, 116, 0.41); + } + + &__picture { + grid-column: 1 / -1; + width: 100%; + + cursor: pointer; + + @include on-desktop { + grid-column: 3 / span 8; + } + } + + &__image { + width: 100%; + object-fit: contain; + } +} diff --git a/src/styles/main/questions/questions.scss b/src/styles/main/questions/questions.scss new file mode 100644 index 000000000..e0b4ef912 --- /dev/null +++ b/src/styles/main/questions/questions.scss @@ -0,0 +1,39 @@ +.questions { + padding-top: 130px; + + @include grid-page; + + &__title { + grid-column: 1 / -1; + + margin-bottom: 27px; + + font-size: 30px; + line-height: 40px; + color: $main-black; + + @include on-tablet { + grid-column: 1 / span 4; + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + grid-column: 1 / span 6; + font-size: 56px; + line-height: 70px; + } + } + + &__container-form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / span 4; + } + + @include on-desktop { + grid-column: 7 / span 6; + } + } +} diff --git a/src/styles/main/testimonials/testimonials.scss b/src/styles/main/testimonials/testimonials.scss new file mode 100644 index 000000000..84f9ea463 --- /dev/null +++ b/src/styles/main/testimonials/testimonials.scss @@ -0,0 +1,74 @@ +.testimonials { + grid-template-rows: auto; + row-gap: 30px; + + background-image: url('../images/icon/testimonilas.svg'); + background-repeat: no-repeat; + background-position: top; + + @include on-tablet { + row-gap: 40px; + } + + @include on-desktop { + row-gap: 30px; + } + + @include grid-page; + + &__container-quote { + @extend %qoute; + + grid-column: 1 / -1; + margin-top: 50px; + color: $main-black; + + @include on-tablet { + margin-top: 60px; + } + + @include on-desktop { + grid-column: 3 / span 8; + margin-top: 42px; + } + } + + &__card { + grid-column: 2 / span 2; + + display: flex; + flex-direction: column; + gap: 5px; + align-items: center; + + @include on-tablet { + grid-column: 4 / span 2; + } + + @include on-desktop { + grid-column: 6 / span 2; + } + } + + &__avatar { + width: 62px; + height: 62px; + + cursor: pointer; + + @include hover(transform, scale(1.2)); + } + + &__name { + @extend %h5; + + margin-top: 5px; + color: $main-black; + } + + &__profession { + @extend %secondary-text; + + color: $descriptio-text; + } +} diff --git a/src/styles/menu/menu.scss b/src/styles/menu/menu.scss new file mode 100644 index 000000000..58c4d5a46 --- /dev/null +++ b/src/styles/menu/menu.scss @@ -0,0 +1,56 @@ +.menu { + position: relative; + height: 100vh; + background-color: $c-gray; + + & &__button { + position: fixed; + + display: block; + + right: 30px; + left: 30px; + bottom: 30px; + + width: auto; + + @include on-tablet { + display: none; + } + } + + @include on-tablet { + @include padding-inline; + } + + &__nav-container { + @include padding-inline; + + @include on-tablet { + padding-inline: 0; + } + } + + &__language { + display: flex; + gap: 4px; + } + + &__top-bar-content { + position: absolute; + top: 280px; + left: 30px; + + @include on-tablet { + display: none; + } + + & .menu__specs, & .menu__language { + display: flex; + + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..3a44d151b 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,120 @@ %h1 { - font-family: Roboto, sans-serif; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + color: $main-black; + text-transform: uppercase; + letter-spacing: 0; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 46px; + text-transform: uppercase; + letter-spacing: 0; + + @include on-desktop { + font-size: 56px; + line-height: 70px; + vertical-align: middle; + } +} + +%h3 { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-transform: uppercase; + letter-spacing: 0; + vertical-align: middle; + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +%h4 { + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + letter-spacing: 0; + text-transform: uppercase; + vertical-align: middle; +} + +%h5 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; + text-align: center; + letter-spacing: 0; +} + +%main-text { + font-family: Inter, sans-serif; + font-size: 16px; font-weight: 400; + line-height: 24px; + color: $main-black; + letter-spacing: 0; +} + +%secondary-text { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0; +} + +%therdary-text { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: center; + letter-spacing: 0%; + vertical-align: middle; +} + +%button { + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; + letter-spacing: 0; +} +%qoute { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..85ef5823e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,61 @@ @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: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + max-width: 1440px; + margin: auto; + padding-inline: 123px; + } +} + +@mixin grid-page { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} + +@mixin size-icon-footer { + width: 24px; + height: 24px; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..74a735654 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,18 @@ -$c-gray: #eee; +$c-gray: #F7F7F7; +$white: #fff; +$feature-bg: #D6ECEC; +$arrow: #BDBDBD; +$secondary-text: #4F4F4F; +$tertiary-text: #828282; +$descriptio-text: #7C7C7C; +$main-black: #333; +$active-link-nav: #131313; +$black: #111; +$green-link: #0DB2B3; +$feature-green: #0C797A; +$disabled-bt: #CFEFF0; +$error: #EB5757; +$tablet-min-width: 744px; +$desktop-min-width: 1280px; +$design-min-width: 1440px; +$transition: 0.3s;