Изменение с.визитки на Botstrap, новые формы, табы оптимизация вёрстки

Оптимизация\редизайн вёрстки действующего сайта-визитки на Bootstrap, добавление новых разделов и страниц, форм связи.

Цена фиксированная, желаемый срок - до 9-10го декабря. Работа под сейф, комиссию оплатим сами.

Взаимодействие будет происходить с маркетологом (мной), я штатный сотрудник этого бизнеса. Формирую белый список исполнителей, для будущих проектов - лендинги на автотематику, доработки WP.

Просьба не предлагать перенести сайт на cms и т.п - это доп.проект одного из наших СТО, для которого надо запустить контекстную рекламу под НГ и не больше.

Для оценки технического состояния, ссылку на гугл-диск с сайтом, отправлю всем написавшим в личку, макет мобильной версии в приложении проекта, сделан качественно. Десктоп высылаю, только готовым взяться за работу. Пишите срок выполнения в комментарии, сообщениях. Рассматриваю всех исполнителей с опытом от 2-5 макетов на Bootstrap

Макет будет отдаваться и выполняться параллельно, сделается за три дня - на сегодня есть мобильная+десктоп версия главной страницы, большая часть новых элементов переиспользуется на др. страницах.  Ничего трудного для вёрстки в дизайне не будет, к моменту старта - Вы уже получите точную картину и psd под каждый экран. Приложенные файлы смотрите только для оценки сложности.

Сайт, который нужно доработать: http://auto-marka.com.ua/

Новые функциональные элементы с js, которые требуется реализовать и что должно присутствовать на новых страницах:

-- форма обратной связи с компонентом Bootstrap DateTimePicker (запись клиентов с временем и календарем), 

Всегда присутствует в статике перед футером и нажатие на кнопку в секции быстрого доступа ("Записаться на точное время" или "Быстрая запись" с кнопкой "Записаться") приводит к переходу к форме, скроллится до места якорной ссылкой. 

Должна отправлять полученную информацию сообщением по почте 

содержит инпуты "Имя", "Телефон", "Марка/Модель автомобиля", "Год выпуска", 

+ поля из предложенного компонента: 

"Желаемая дата", при клике выдающая календарь и 

"Удобное время", при клике выдающий выбор часа и минут в 24х часовом формате.

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

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

пример: https://autoexpert.kh.ua/services/regylirovka-klapanov

-- любая простая форма заявки на звонок по Вашему усмотрению, с минимальной валидацией на пустые поля (выводится предупреждение на отправку) и проверкой вводимого телефона на отсутствие символов и мин. длину, которая !обязательно! должна вызываться в необходимых разделах и страницах сайта без проблем и отправлять информацию сообщением по почте, отслеживаться ГуглАналитикой.

Содержит инпуты:  Имя - Номер телефона - Текст сообщения

Вызывается в модальном окне при нажатии на кнопку "Заказать звонок" в хедере, присутствует в секции с табами во вкладке "Остались?"

пример в конце страницы: https://autoexpert.kh.ua/services/regylirovka-klapanov

-- секция с табами |"Преимущества"|"Акция"|"Остались вопросы?"|, на вкладке вопросов простая форма, описанная выше (телефон + имя + текст)

пример работы: https://xmotors.com.ua/services/promyvka-forsunok/#advantagesb851-d429

-- секция с табами "Стоимость планового ТО"

включает три вкладки, расположенные слева "ТО - 15 000 КМ", "ТО - 60 000 КМ", "ТО - 105 000 КМ", переключающими прилегающую справа таблицу с заголовком "Цена", колонками описания услуги и стоимости

*** заполните по 6 строк текстом-рыбой и любыми цифрами

пример работы: https://elcars.ua/service/

-- стандартный слайдер отзывы на странице "О нас"

-- стандартный слайдер в секции "Наша специализация" на главной странице и в "О нас"  

-- стандартный слайдер-карусель для акционных баннеров и фото на главной странице, каждый слайд содержит текст УТП и кнопку, первый слайд - кнопка с линком на стр. "О нас", второй слайд - кнопка с линком на стр. "Бесплатная диагностика"

пример в библиотеке бутстрапа, дефолтной теме CMS Opencart, !ширина на всю длину экрана, за пределы контейнера

https://demo.opencart.com/ 

-- стандартный слайдер для карточек "Популярные услуги" на главной странице 

интерактивный пример на гл. странице: https://ps-auto.kh.ua/

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

-- стрелка "Вверх" - появляется на моб. версии, фиксированная при нажатии - скроллит страницу в начало, реализовать по возможности плагином или анкером.

*** можете использовать любой слайдер и свои заготовки, с которыми хорошо умеете работать, лишь бы не было проблем с адаптивностью 

*** Существующие формы и лишнюю разметку, подключения не используемых скриптов и плагинов требуется удалить из разметки, т.к они не работают корректно: отправляются пустые данные, запускаются все через раз, если можете довести до ума - был использован formoid

Новые полноценные страницы:

Акции

О нас

Бесплатная диагностика (пример страницы с конкретной услугой)

Изменение существующих:

Главная

Услуги и цены (общая страница со списком всех возможных услуг, для перевода на каждую отдельно)

Запчасти

В целом главное меню состоит из пунктов:  Главная | Услуги и цены | Запчасти | Акции | О нас

*** Удалить из проекта страницу контакты ( или переделать в "О нас")

Предыдущими исполнителями использована тема

* Mobirise v4 theme (https://mobirise.com/)  -- точно не смог определить какая, возможно это поможет Вам выполнить задание

Согласовывания классов, переменных и прочего не требутся, главное - довести до работоспособного состояния 

(Сохранить минимальное время загрузки, по возможности оптимизировать графику и скрипты. Если обладаете навыками, есть заготовки таск-менеджеров и сможете отдать не только компилируемые файлы стилей и скриптов).

По максимуму используйте существующие стили для верстки новых элементов, добивайтесь минимального объёма нового кода. Не перебивайте всю каскадность !important, грамотно используйте селекторы.

Адаптив фиксированный, проверяться будет на трёх брекпоинтах - мобильная версия, планшет и десктоп. Используйте flexbox, везде, где выходите за рамки логики css фреймворка и готовых компонентов. Учитывайте возможное переполнение текстом по высоте, возможность добавления нового блока услуги, пункта меню, где это требуется.

В качестве отправной точки берите представленные примеры конкурентов, где потребуется делайте скроллинг внутри блока (возможно потребуется на моб.версии, где не учтено макетом)

!!Используйте готовые компоненты Bootstrap - верстка с 0 не требуется. Где возникнут незначительные расхождения по внешнему виду: отступы и размеры секций дефолтные или на свое усмотрение, чтобы не резало взгляд и сохранялись пропорции. Описания и заголовки заполняйте текстом-рыбой, детали текста из макета будут меняться, заполнение правильным контентом не требуется!

Навигация по подпунктам на моб. версии не требуется. (скрываются выпадающие списки, остается просто переход на стр. списка всех услуг). Меню как и раньше выпадает вертикальным списком поверх слайдера (не толкая контент! - добавить свойство)