Сверстать на ejs + tailwind сайт по макету из фигмы
Техническое задание: Верстка сайта на tailwind
1. Введение
Цель:Окружение: NodeJS18, SailsJS
Стек разработки: EJS, Tailwind
Бюджет: 20000 руб
Условия:
- Проект будет опубликован под лицензией MIT
- По вопросам архитектуры модуля консультироваться с представителем заказчика
- Все данные будут доведены (бекенд разработчиком) во view в ejs.
- Ручное функциональное тестирование будет проводится заказчиком
- Сайт собирается в докер, и автоматически разворачивается для просмотра и тестирования заказчиком (Эта система настраивается заказчиком)
- Разработка через систему версии кода git
- Любые контроллеры и серверную логику будет делать представитель заказчика
- Есть примеры реализованных проектов.
- Есть возможность созвониться или задавать вопросы в чате по технической части и организации процесса
- Есть тестировщик который будет выявлять баги во время разработки
Требования:
- Предоставить полностью рабочие страницы, это включает разрендренные данные, JS скрипты на страницах.
- Для фронтенд скриптов использовать VUE, REACT, VANILA JS (jquery не разрешается)
- Серверный рендеринг организовать на EJS
- Установить SEO теги, и использовать общепринятые рекомендации по верстке для поисковой оптимизации
- Для стилей использовать фреймворк tailwind
- Предоставить рабочий докер контейнер
- Все должно быть упаковано в webpack (есть пример)
- Осуществить исправление багов после ручного тестирования.
- Выбирать приоритет скорость над архитектурой, если есть возможность что то ускорить или упростить (даже ценой переделки дизайна) это надо предлагать.
- Адаптив для основных разрешений (моб, планшет, ПК)
- Поддержка Retina
Описание:
Верстка для двух основных страница: Главная и Услуга.
Для внутренних страниц будут переиспользовать блоки Главной и Услуги. Для нескольких блоков будут минимальные изменение (в описании указано какие именно)
Запуск в 2 этапа:
1й - Главная страница
2й - Страница услуги и внутренние
Ссылка на макет: https://www.figma.com/file/8Tt64CAbYDfyp7JoCfI32M/...
Главная страница состоит из блоков:
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. Контакты - состоит из блока из страницы Услуга
- Контакты (добавить заголовок)