Сверстать на ejs + tailwind сайт по макету из фигмы

Техническое задание: Верстка сайта на tailwind

1. Введение

Цель: 

Окружение: NodeJS18, SailsJS

Стек разработки: EJS, Tailwind

Бюджет: 20000 руб

Условия:

1. Проект будет опубликован под лицензией MIT

2. По вопросам архитектуры модуля консультироваться с представителем заказчика

3. Все данные будут доведены (бекенд разработчиком) во view в ejs.

4. Ручное функциональное тестирование будет проводится заказчиком

5. Сайт собирается в докер, и автоматически разворачивается для просмотра и тестирования заказчиком (Эта система настраивается заказчиком)

6. Разработка через систему версии кода git

7. Любые контроллеры и серверную логику будет делать представитель заказчика

8. Есть примеры реализованных проектов.

9. Есть возможность созвониться или задавать вопросы в чате по технической части и организации процесса

10. Есть тестировщик который будет выявлять баги во время разработки

Требования:

1. Предоставить полностью рабочие страницы, это включает разрендренные данные, JS скрипты на страницах.

2. Для фронтенд скриптов использовать VUE, REACT, VANILA JS (jquery не разрешается) это не SPA

3. Серверный рендеринг организовать на EJS

4. Установить SEO теги, и использовать общепринятые рекомендации по верстке для поисковой оптимизации

5. Для стилей использовать фреймворк tailwind

6. Предоставить рабочий докер контейнер

7. Все должно быть упаковано в webpack (есть пример)

8. Осуществить исправление багов после ручного тестирования. 

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

Описание: 

Верстка для двух основных страница: Главная и Услуга.

Для внутренних страниц будут переиспользовать блоки Главной и Услуги. Для нескольких блоков будут минимальные изменение (в описании указано какие именно)

Запуск в 2 этапа:

1й - Главная страница

2й - Страница услуги и внутренние

Ссылка на макет: https://www.figma.com/file/8Tt64CAbYDfyp7JoCfI32M/%D0%94%D0%BE%D0%B1%D1%80%D0%BE%D0%BC%D0%B5%D0%B4-%D0%B4%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8?type=design&node-id=0%3A1&mode=design&t=LYfFVsFF0MjF08l9-1

Главная страница состоит из блоков:

1. Хедер (одинаковый для всех страниц, далее в описании не фигурирует)

- логотип кликабельный, при нажатии открывается главная страница

- Кнопка записи отрывает сервис https://app.medesk.ru/

- Соцсеть если не указана в админке - не отображается соответствующая иконка

2. FAB чат-бот (одинаковый для всех страниц, далее в описании не фигурирует)

- При нажатии открывается телеграм, то есть на сайте окошка чата не будет

3. Баннер

- Кнопка записи отрывает сервис https://app.medesk.ru/

4. Услуги клиники

- услуг может быть разное количество, если в последнем ряду 3шт, то располагается как и в предыдущих, если 2 или 1, то растягиваются от края до края блока (в дизайне будет показано в отдельном фрейме)

- при нажатии на одну из услуг откроется текстовая страница (со списком ссылок)

5. Популярные процедуры

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

- кнопка "подробнее" открывает страницу услуги

- кнопка "записатья" отрывает сервис https://app.medesk.ru/

6. Акции

- акций в блоке показывается 5 штук, но по факту может быть больше, поэтому при обновлении страницы показывать разные акции

- кнопка "подробнее" открывает страницу акции

- кнопка "записатья" отрывает сервис https://app.medesk.ru/

- кнопка "все акции" открывает разводящую страницу акций

7. Статьи

- статей в блоке показывать 3 последние статьи

- кнопка "читать все статьи" отрывает разводящую страницу статей

8. Сертификат

- кнопка "подробнее" открывает страницу описания сертификата

9. Специалисты

- показаны 3 первых специалиста, карусель бесконечная, пролистывание по одному

- кнопка "подробнее" открывает страницу акции

- кнопка "записатья" отрывает сервис https://app.medesk.ru/

10. Отзывы

- верхний ряд кнопок - это переход на сервисы с отзывами

- нижний ряд карточек отзывов - это текст добавляемый через админку

- кнопка "читать полностью" в карточках открывает сервис отзывов

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

11. Форма записи

- оба поля обязательны для заполнения

- после отправки формы показать надпись, что отправлена (по макету)

12. Футер (одинаковый для всех страниц, далее в описании не фигурирует)

- логотип кликабельный, при нажатии открывается главная страница

- Соцсеть если не указана в админке - не отображается соответствующая иконка

- все ссылки под линией открывают соответствующие текстовые страницы

Страница Услуги состоит из блоков:

1. Заголовок

2. Баннер

3. Текстовый блок

4. Кнопка записи на прием

- отрывает сервис https://app.medesk.ru/

5. Показания к процедуре

- Открыт только первый блок, при нажатии на другие меняется текст открытого блока

- Если блоков нечетное количество, то в последнем ряду растягивается от края до края (показано в макете)

6. Преимущества процедуры

7. Фото и видео 

8. Стоимость процедур

9. Форма записи

- аналогично главной

10. Специалисты 

- аналогично главной

11. Часто задаваемые вопросы

- аналогично блоку показания к процедуре

12. Отзывы

- аналогично главной

13. О клинике

14. Фото клиники

14. Преимущества клиники

15. Лицензии

16. Карта

Внутренние страницы:

1. О нас -  состоит из блоков из страницы Услуга

- О клинике

- Фото клиники

- Преимущества клиники

- Лицензии

- Карта

2. Разводящая для услуг - состоит из блоков из страницы Услуга

- Заголовок

- Баннер

- Блок с редактируемым текстом

(условно назовем эту страницу текстовой)

3. Специалисты - состоит из блока из страницы Услуга

- Специалисты ( не использовать прокрутку, показать все карточки на одной странице. если карточек в последнем ряду меньше трех, то выравнивать по левой стороне)

4. Сертификат - состоит из блоков из страницы Услуга

- Заголовок

- Баннер

- Блок с редактируемым текстом

5. Разводящая страница Акции - состоит из блока главной страницы

- Акции (левая карточка не растягивается на две строки. если карточек в последнем ряду меньше трех, то выравнивать по левой стороне)

6. Разводящая страница Статьи - аналогично разводящей Акции

- отличие карточек в отсутствии описания и одна кнопка "подробнее"

7. Отзывы - состоит из блока главной страницы

- Отзывы 

8. Контакты - состоит из блока из страницы Услуга

- Контакты (добавить заголовок)