Верстка лендинга

Лендинг состоит из 2х страниц.

Общие принципы:

• Сайт должен полностью быть масштабируемый, дизайн нарисован в большом расширении в высоком качестве. Суть масштабирование, что бы всегда весь контент был на странице.
• Так же как масштабироваться, сайт должен уменьшаться до моб версии с промежуточной Планшет версией (она это что-то среднее между ПК и Моб версией), на усмотрение верстальщика, ее, как правило, мы не рисуем, верстальщики сами решают эту задачу.
• Все кнопочки, и поля, где есть текст - должны быть гибкими, так как в них текст будет меняться, и важно что бы верстка вела себя адекватно.
• Минимальный размер моб версии 480 пикс.
• Все кнопки которые на слайдах типа Let’s try, Try, Let’s start - ведут на 2-ю стр.

 https://prnt.sc/ruw5d9 . Она по сути без особого функционала. По пунктам: 

• Меню - оно фиксированное в шапке меню, добавить еще один пункт меню в конце HELP.
• Первый слайд - масштабируемая картинка на фоне, статический (без анимации) текст + кнопка.
• How it’s work слайд - масштабируемая картинка на фоне, Шаги можно картинками сделать (они должны так же масштабироваться), Тексты под шагами делаем текстом, и кнопка.
• Our products слайд - масштабируемая картинка на фоне, картинка продукта должна грамотно размещаться в белом контейнере, так как контейнер имеет фикс размеры (пропорции), а картинки продуктов могут быть разные как на дизайне. 

  При клике на кнопку Try под продуктом - так же переход на 2-ю стр, но с ID продукта, вот пример - #product-asin=ASIN-1 (мы потом пропишем ID продуктов)

  • Если 4+ продукта, то как на дизайне должен быть слайдер продуктов со стрелочками
  • Если 3-2-1 продукта, то они просто по центру выравниваются и без стрелочек
• About us слайд -   масштабируемая картинка на фоне + текст масштабируемый + кнопка
• FAQ слайд - разворачиваемые списки, первый сделать открытым (и что бы любой можно было по умолчанию сделать открытым каким то классом), принцип простой, один открывается все закрываются.  Масштабируемая картинка на фоне + текст масштабируемый + кнопка
• Значок ФБ всегда зафиксирован в правом нижнем углу Экрана (fixed) как в дизайне, он должен всегда быть виден.

• Copyright съехал у его, сделать примерно как на скрине я подчеркнул - https://prnt.sc/ruwsv7
• How its work слайд - https://prnt.sc/ruwtfx - диз забыл желтую риску добавить, как на остальных заголовках

1-вариант старта - https://prnt.sc/ruwuxd - если прямой переход без #product-asin=ASIN-1 в строке браузера, открыт только 1й слайд.2-вариант старта - https://prnt.sc/ruwwkq - уже со вторым открытым слайдом.  

Принцип работы этой стр:

• по умолчанию 2-3 слайд (Requirements … и 2 Step…) должны быть скрытым (за исключение 2-вариант старта), логика такая:
  • Человек переходит на стр, выбирает продукт, нажимает Try на нем.
  • Открывается второй слайд (Requirements…), читает условия и нажимает кнопку Yes, I’m ready
  • Открывается 3й слайд - 2 Step…
  • Читает инструкцию и кликнет на кнопку GO TO AMAZON (это ссылка - адрес которой должен подтягиваться в зависимости от выбранного продукта из URL #product-asin=ASIN-1, можно сделать JS массив (в HTML стр в шапке), что-то типа ASIN => Ссылка и мы будем сами его заполнять, и написать JS скрипт по клику на кнопку GO TO AMAZON и он смотрит, что в строке браузера - какой ASIN и выбирает ссылку из массива, либо запоминать выбранные прод в куки и с них брать ASIN, либо свои идеи - главное что бы эта история работала 100% без глюков )
  • После всего этого он читает дальше инструкцию и нажимает кнопку I DID IT и эта кнопка должна открывать ФБ чат который у нас в нижнем правом углу закреплен (как это сделать я пока что не знаю, я почитаю API и дам инфу как он открывается...)

• Сокращенная версия Как это работает - https://prnt.sc/ruxb2k она должна масштабировать согласно дизайну
• Step 1 Choose product слайд - это копия функционала с главной стр. (логика кнопок Try описана выше)
• Requirements … слайд -  масштабируемая картинка на фоне, текст (он должен быть адаптирован под изменение кол. Рядов, их может быть больше / меньше) + кнопка (логика описана выше)
• Step 2 … слайд -  масштабируемая картинка на фоне, текст (он должен быть адаптирован под изменение, его может быть больше / меньше) + кнопки (их логика описана выше)

Жду от вас:

1) Цену и сроки 

2) Примеры работ (минимум 3 шт)