diff --git a/wp-content/themes/hantico/assets/css/style.css b/wp-content/themes/hantico/assets/css/style.css index f3624ce..073adfc 100644 --- a/wp-content/themes/hantico/assets/css/style.css +++ b/wp-content/themes/hantico/assets/css/style.css @@ -2915,6 +2915,9 @@ h4 { margin-bottom: 45px; text-align: center; } +.articles-title--lg span{ + color: var(--color-red); +} .articles-filter { margin-bottom: 30px; overflow-x: auto; @@ -6700,159 +6703,225 @@ h4 { } .h-app-steps { - width: 100%; - box-sizing: border-box; - margin: 40px 0; - padding: 40px 30px; - background: var(--color-light); - border-radius: 18px; - font-family: inherit; - color: var(--color-dark); + display: grid; + grid-template-columns: 39.29% 60.71%; + grid-template-rows: repeat(3, 1fr); + grid-template-areas: 'one two' + 'one three' + 'one four'; + gap: 20px; } +.h-app-steps__item{ + position: relative; -.h-app-steps *, -.h-app-steps *::before, -.h-app-steps *::after { - box-sizing: border-box; + padding: 40px; + + border-radius: 40px; + background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%); } +.h-app-steps__item:nth-child(1){ + grid-area: one; -.h-app-steps .h-app-steps__title { - margin: 0 0 40px; - padding: 0; - text-align: center; - font-size: 32px; - font-weight: 700; - line-height: 1.3; - color: var(--color-dark); + display: flex; + flex-direction: column; + gap: 24px; } - -.h-app-steps .h-app-steps__layout { - display: grid; - grid-template-columns: minmax(210px, 35%) minmax(0, 1fr); - gap: 30px; - align-items: center; - width: 100%; +.h-app-steps__item:nth-child(2){ + grid-area: two; } - -.h-app-steps .h-app-steps__phone { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - min-width: 0; - height: 100%; +.h-app-steps__item:nth-child(3){ + grid-area: three; } - -.h-app-steps .h-app-steps__phone img { - display: block; - width: 100%; - max-width: 350px; - height: auto; - max-height: 420px; - object-fit: contain; - object-position: center; - border: none; - border-radius: 0; - box-shadow: none; +.h-app-steps__item:nth-child(4){ + grid-area: four; } - -.h-app-steps .h-app-steps__grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: 28px; - row-gap: 40px; - width: 100%; - min-width: 0; - align-items: start; +.h-app-steps__item:not(:first-child){ + display: flex; + justify-content: space-between; } +.h-app-steps__nomber{ + width: 51px; + height: 51px; -.h-app-steps .h-app-steps__step { - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: 0; - height: 100%; + display: flex; + justify-content: center; + align-items: center; + + border-radius: 100px; + background: linear-gradient(0deg, #AE001B 0%, #AE001B 100%), linear-gradient(232deg, #771719 18.85%, #A53634 72.03%); + + font-size: 18px; + font-weight: 700; + line-height: 140%; /* 25.2px */ + letter-spacing: -0.18px; + color: var(--color-white); } - -.h-app-steps .h-app-steps__number { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 44px; - width: 44px; - height: 44px; - margin: 0 0 16px; - padding: 0; - background: var(--color-grey-light); - border-radius: 12px; - color: var(--color-light); - font-size: 20px; - font-weight: 700; - line-height: 1; - text-align: center; +.h-app-steps__main{ + display: flex; + gap: 24px; } - -.h-app-steps .h-app-steps__step:first-child .h-app-steps__number { - background: var(--color-red); +.h-app-steps__content{ + display: flex; + flex-direction: column; + gap: 16px; } - -.h-app-steps .h-app-steps__step-title { - margin: 0 0 8px; - padding: 0; - font-size: 18px; - font-weight: 600; - line-height: 1.35; - color: var(--color-dark); - text-align: left; +.h-app-steps__title{ + font-size: 26px; + font-weight: 600; + line-height: 110%; /* 28.6px */ + letter-spacing: -0.26px; + color: var(--color-dark); } - -.h-app-steps .h-app-steps__description { - margin: 0; - padding: 0; - font-size: 15px; - font-weight: 400; - line-height: 1.55; - color: var(--color-text); - text-align: left; +.h-app-steps__title span{ + color: var(--color-red); } - -.h-app-steps .h-app-steps__download { - display: flex; - align-items: center; - gap: 14px; - width: 100%; - margin-top: 20px; +.h-app-steps__text{ + font-size: 18px; + line-height: 150%; + color: var(--color-text); } +.h-app-steps__qr{ + display: flex; + align-items: center; + gap: 24px; +} +.h-app-steps__qr-img{ + width: 146px; + height: 146px; +} +.h-app-steps__qr-text{ + font-size: 18px; + font-weight: 500; + line-height: 150%; + color: var(--color-text); +} +.h-app-steps__phone{ + position: absolute; + bottom: 0; + left: 0; -.h-app-steps .h-app-steps__qr { - display: block; - flex: 0 0 82px; - width: 82px; - height: 82px; - max-width: none; - object-fit: contain; - border-radius: 0; - box-shadow: none; + width: 100%; + height: 242px; +} +.h-app-steps__item-img{ + position: absolute; + + right: 33px; + top: calc(50% - 77px); + + width: 218.5px; + height: 154px; + + object-fit: contain; + object-position: center; +} +.h-app-steps__item:nth-child(2) .h-app-steps__item-img{ + right: 54px; + + width: 177px; +} +.h-app-steps__item:nth-child(3) .h-app-steps__item-img{ + right: 26px; + + width: 251px; +} +.h-app-steps__social{ + display: none; } @media (max-width: 1279.98px) { - .h-app-steps .h-app-steps__layout{ - display: flex; - flex-direction: column; - gap: 20px; + .h-app-steps { + display: grid; + grid-template-columns: 100%; + grid-template-rows: repeat(4, auto); + grid-template-areas: 'one' + 'two' + 'three' + 'four'; +} + + .h-app-steps__item:nth-child(1){ + padding-bottom: 266px; } - .h-app-steps .h-app-steps__phone{ + .h-app-steps__phone{ + object-fit: contain; + } + + .h-app-steps__item-img{ display: none; } } @media (max-width: 767.98px) { - .h-app-steps .h-app-steps__title{ - font-size: 24px; + .h-app-steps__item{ + overflow: hidden; + + padding: 24px; + + border-radius: 40px; + } + .h-app-steps__item:not(:first-child){ + border-radius: 20px; + } + .h-app-steps__item:not(:first-child) .h-app-steps__content{ + gap: 8px; + } + .h-app-steps__nomber{ + width: 32px; + height: 32px; + + font-size: 12px; + line-height: 140%; /* 16.8px */ + letter-spacing: -0.12px; + } + .h-app-steps__content{ + gap: 14px; + } + .h-app-steps__title{ + font-size: 16px; + line-height: 110%; /* 17.6px */ + letter-spacing: -0.16px; + } + .h-app-steps__text{ + font-size: 13px; + line-height: 150%; + } + .h-app-steps__qr{ + display: none; + } + .h-app-steps__social{ + display: flex; + flex-wrap: wrap; + gap: 12px; + } + .h-app-steps__social a{ + width: calc(50% - 6px); + height: 44px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 10px; + border: 1px solid rgba(174, 0, 27, 0.50); + + transition: all .2s ease-out; + } + .h-app-steps__social a span{ + transition: all .2s ease-out; } - .h-app-steps .h-app-steps__grid{ - grid-template-columns: 1fr; + .h-app-steps__social a:hover{ + background: rgba(174, 0, 27, 0.50); + } + .h-app-steps__social a:hover span{ + filter: brightness(0) invert(1); + } + .h-app-steps__phone{ + object-fit: cover; + } + .h-app-steps__main{ + gap: 12px; } } diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-1.webp b/wp-content/themes/hantico/assets/img/content/app-steps-1.webp new file mode 100644 index 0000000..70a4bb2 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-1.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-2.webp b/wp-content/themes/hantico/assets/img/content/app-steps-2.webp new file mode 100644 index 0000000..dbaf274 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-2.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-3.webp b/wp-content/themes/hantico/assets/img/content/app-steps-3.webp new file mode 100644 index 0000000..fb4240b Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-3.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp b/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp new file mode 100644 index 0000000..1d3b169 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-phone.webp differ diff --git a/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp b/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp new file mode 100644 index 0000000..7cabf07 Binary files /dev/null and b/wp-content/themes/hantico/assets/img/content/app-steps-qr.webp differ diff --git a/wp-content/themes/hantico/assets/img/social/AppGallery.svg b/wp-content/themes/hantico/assets/img/social/AppGallery.svg new file mode 100644 index 0000000..316bc2d --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/AppGallery.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/social/appstore.svg b/wp-content/themes/hantico/assets/img/social/appstore.svg new file mode 100644 index 0000000..4a77ac3 --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/appstore.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/hantico/assets/img/social/google.svg b/wp-content/themes/hantico/assets/img/social/google.svg new file mode 100644 index 0000000..3fac5dd --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/google.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/wp-content/themes/hantico/assets/img/social/rustor.svg b/wp-content/themes/hantico/assets/img/social/rustor.svg new file mode 100644 index 0000000..73652fb --- /dev/null +++ b/wp-content/themes/hantico/assets/img/social/rustor.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/hantico/template-parts/app-steps.php b/wp-content/themes/hantico/template-parts/app-steps.php index 3f49228..056e4c6 100644 --- a/wp-content/themes/hantico/template-parts/app-steps.php +++ b/wp-content/themes/hantico/template-parts/app-steps.php @@ -1,83 +1,118 @@
+

Начать работать — просто

+
-

- Начать работать — просто -

+
+

+ 01 +

-
- -
- Приложение Hantico на смартфоне +
+

+ Скачайте приложение
+ в App Store или Google Play +

+

+ Установите Hantico на смартфон +

-
+
+ qr установки -
-
1
+

+ Наведите камеру
+ смартфона на QR код
+ чтобы скачать приложение +

+
-

- Скачайте приложение -

+ + -
-
2
+ +
-

+ qr установки +

+
+
+

+ 02 +

+ +
+

Зарегистрируйтесь - - -

- Создайте аккаунт и заполните - необходимые данные. +

+

+ Создайте аккаунт и заполните
+ необходимые данные

- -
-
3
- -

- Выберите подходящий формат работы -

- -

- Найдите доступные варианты и условия, - которые подходят именно вам. -

-
- -
-
4
- -

- Начинайте работать -

- -

- Переходите к заказам и используйте - Hantico в работе. -

-
-
+ + +
+
+
+

+ 03 +

+ +
+

+ Выберите подходящий
+ формат работы +

+

+ Найдите доступные варианты и условия,
+ которые подходят именно вам +

+
+
+ + +
+
+
+

+ 04 +

+ +
+

+ Начинайте работать +

+

+ Переходите к заказам и используйте
+ Hantico в работе +

+
+
+ +