Верстка макетов

https://www.figma.com/file/GLJ9b50nIGerEkcqRxnXMc/VG-KIH

### Интерактивный декор

В тех элементах, где видна https://dl.dropboxusercontent.com/s/u3o1narbzkt22fr/Figma_hAkvW1IZFH.jpg, присутствует интерактивная анимация. По направляющим сетки с случайном направлении "бегают" змейки. Змейки не длинные, направление движения змейки выбирается случайно на каждом отрезке этой сетки. По возможности сделать так, чтобы они "бежали" к курсору и кружили вокруг него. Бежать по прямой они не должны. Если в таком блоке присутствуют

https://dl.dropboxusercontent.com/s/7lnab3aj082chhc/Figma_MqkFMYoJD6.png, то оцчень важно, чтобы они тоже "прорисовывались" черчением своего контура. Также важно, чтобы те крестики, которые присутствуют на пересечении направляющих сетки, никуда при адапте не уплывали.

### Интерактивный блок истории

https://dl.dropboxusercontent.com/s/8r3sjmptj3nvmfb/Figma_I9VnRWXB8c.png представляет собой слайдер. При скролле страницы блок "прилипает" к экрану и скролл идет внутри него. При этом запоминается направление скролла, и нажатие кнопки "пропустить" выведет нас из этого блока в направлении скролла. При скролле в блоке/свайпе/клике на годы в ленте годов происходит смена последних двух цифр с анимацией "счетчик", если смена года затрагивает только 2 последние цифры. При этом также с параллаксовым эффектом листания вверх происходит смена картинки и текста на ней.

## Основные требования

Верстка должна быть кроссбраузерной, выполненной на современных технологиях, должна без проблем отображаться во всех современных браузерах текущей версии и 2 прошлых версиях. Желательно использовать технологии: Gulp, SCSS, Babel, Nunjucks. Картинки должны быть оптимизированы с использованием современного WebP формата и тегов picture. При этом должно гарантироваться правильная работа в браузерах, не поддерживающих WebP. Использование jQuery недопустимо. Все анимации должны протекать нелинейно, с изингом. Крупные заголовки появляются с эффектом "подскролла", картинки имеют параллакс внутри своих контейнеров.

### Основные блоки

1. Hero screen. Блок занимает 1 пользовательский вьюпорт целиком. Фоновая картинка крайне плавно увеличивается в размере на 30% за 10-15 секунд. При скролле нужен параллакс фона. Остальная анимация расписана ранее.

2. Меню. При скролле из первого экрана меню заполняется снизу вверх белым фоном и остается таким.

3. Блок "решения" (система электронного документооборота). Это слайдер. Можно кликать на указатели и произойдет перерисовка иллюстрации. На узких экранах этот список указателей можно свайпать.

4. Философия и миссия. Как мы доскролливаем до этого блока, начинается плавнейшая и легчайшая анимация фона аналогичная фону на главной странице.

5. Блок истории описан ранее.

6. Сертификаты. Слайдер.