Адаптивная верстка и frontend лендинга, студии архитектуры и дизайна

Макет в figma

Разрешение:

Здесь мне нужен ваш пример адаптива верстки, в идеале я вижу 2 варианта:

1) 4 breakpoint разрешения , то есть необходимое для fullhd + 2 уменьшения по масштабу и шрифтам для ноутбуков 1366 и планшетов + mobile

2)Отзывчивая вёрстка+mobile

Можем отрисовать макет под более удобное для вёрстки разрешение, или для понимания breakpoint-ов, но это уже когда начнем работу -  делается в пределах дня.

БЭМ c семантикой заголовков.

Дать инструкцию или оставить комментарии в соответствующих файлах(js css) по таймингам анимаций на странице.

Требования (желательные)

Оценка страницы в https://developers.google.com/speed/pagespeed/insights/ в чистом виде (без кэширования) 80-90

Оценка страницы в https://tools.pingdom.com 80+

Без ошибок и до 15 warning-гов на https://validator.w3.org

Как правило (на сколько я знаю) такую скорость легче получить в gulp , с использованием минимизации, поэтому если проект будет с использованием gulp - то нужно приложить ваш сборщик и инструкции по его запуску.

Но gulp - не обязателен, главное нужна быстрая работа страницы (поэтому привел приблизительные критерии оценок выше), фото ужмите конечно, если нужно.

Frontend по элементам (1 экран детально в прилагаемом скрине):

1)Все обязательные hover эффекты - в макете.

На первом экране hover на тексте кнопок меню должен активироваться при наведении на прямоугольную плитку, в которой расположена надпись.

2) Слайдеры: 

На странице портфолио слайдер. 2х слайдов достаточно(1вый и 2рой, они однотипные).

Но при этом - нужно сделать плавную анимацию счетчика страниц, под 5 слайдов (эффект по аналогии как здесь справа http://okkapi.agency/en/works), то есть изменение длинны линии + плавный переход (перетекание) к следующие цифре слайда, посредством изменением значения.

Можно это всё js плагином(если такой есть), или как будет оптимально по трудозатратам-качеству.

Эффект переключения слайдов портфолио должен быть максимально похож на этот (http://okkapi.agency/en/works), то есть сжатие фонового прямоугольника-> плавная смена текста и изображения -> раскрытие фонового прямоугольника.

Слайдер на странице с работниками дублируется по механике с слайдером портфолио, но выглядит в рамках дизайна, естественно.

Если этот функционал слайдера сложно реализуем, то прикрепляйте вариант, который вы предлагаете.

3)Первый экран: 

при открытии main экрана на desktop версии будет 3 стартовые анимации, а на одном объекте нужен параллакс, как здесь https://wayup.in на зеленом квадрате, у нас же - фигура куба (относительно белой доски на фоновом изображении в main на desktop версии)

На мобильной версии этого эффекта не будет.

4) В мобильной версии будет меню , по нажатию бургера (нужна простенькая, но со вкусом, анимация открытия-закрытия меню в мобильной версии)

5) форма на мобильной и desktop версиях.

Открывается лайтбоксом поверх страницы , закрывается по крестику или кнопке завершения (не по тычку в зону вне окна формы, хотя по Esc или кнопке назад на смартфоне-можно)

6) В скрине описана планируемуя последовательность 3-х анимаций на main экране.

7) В предпоследнем экране на место видео вставить любое видео из youtube 16:9 

8) В футере кнопка вверх-якорь на 1вый экран

Доступ на редактирование макета предоставлю, при необходимости.

Сроки - до 10 дней, но если быстрее - отлично.

Правки и процесс работы в рамках этого срока разберем лично. 

2 дня буду смотреть исполнителей, 14 02 19 начнём работу

Я сам backend и возможно употребил некоторые термины в отличном, от общепринятого, смысле, поэтому комментарии о том, как лучше сделать работу - приветствуются.

При этом бюджет строго ограничен, то есть можете предлагать упрощение (ссылки на сайты с комментариями), но не повышение цены.