Нужна верстка небольшого ЛК по типу соц сеть на чистом коде

Cсылка на детальное ТЗ, https://docs.google.com/document/d/1OAeQi7FVT7lKfAjhCEfAyUtZaRIjcfYefoBJpRvRW-U/ , ниже часть продублировано из тз, верстка принимается после просмотра кода программистом, нужна качественная адаптивная верстка на все разрешения, 1600 1440 1200 1024 768 393 и тд

Необходима адаптивная верстка лк на css html и js, лк будет по типу как соцсеть, будет натягиваться на YII2.

Суть проекта, продажа мемориального киор кода, мы его делаем на заказ из металла.
Пользователь заказывает и оплачивает изготовление киор кода через лендинг, после оплаты пользователю на почту генерируется уникальный киор код и уникальные доступы в ЛК. Где зайдя по полученным доступам в лк он заполняет профиль биографию умершего человека. Далее когда мы по почте отправим  киор код, его смогут приклеить на мемориальный памятник, где любой человек сможет сканировать киор код и почитать историю об умершем.

* купивший может создать в лк не более 1-го кабинета, то есть это информация об умершем человеке.

* логику делает программист, сейчас необходима только верстка макетов

Нужна обычная верстка на чистом css, html, js чтобы программист мог натянуть на YII2, весь контент текст, ссылки на соцсети, иконки, картинки, видео, делать в html, чтобы программист мог сделать редактируемым контент, тк все что в css невозможно будет сделать редактируемым в админке.

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

Ссылка на ЛК- https://www.figma.com/design/x7ZImpSuI0qrCXMtSXZZR3/Memorial-marks-(fin)?node-id=0-1&t=UboJP6Kp0rBocXeh-1


Макет ЛК - первый длинный ряд это внутренняя часть ЛК для заполнения профиля

2-й ряд это уже вывод заполненного контента, то есть это как выглядит внешне заполненный профиль

Чеклист:

1. Вёрстка должна быть полностью адаптивная(респонсив), по кроссбраузрености должна быть поддержка последних двух актуальных версий браузера Chrome, Firefox, Opera, Edge, Safari, Yandex.Browser и другие стандартные браузеры, кроме IE, из ТЗ: http://joxi.ru/krDDnkuKPq6Krp 

2. Хороший пейджспид (зеленая зона пк,  желательно) и моб желтая.

3. Подключить lazyload для картинок, они должны появляется плавно.

4. Соответствие с макетом 96-98%

    У каждой формы должна быть валидация через JS(т.е. проверка полей),  при клике на кнопку «Отправить».

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

5. Желательно не использовать jQuery, используем нативный JS и плагины для него.

6. Оптимизация под ретину:

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

 - картинки подключаем в двух версиях, обычный размер, и х2 размер в srcset для ретины экранов.

7. Перед началом работы, сообщить какие сборщики будут использованы и какие пропроцессоры, а также, важно, чтобы по итогу работы, js не был минифицирован, чтобы программист смог работать с ним без сборщика.