Вёрстка TailwindCSS по дизайну из Figma

Есть дизайн мобильной версии интернет-магазина. Суммарно около 10 уникальных блоков + сайдбар. Так же нужно будет сделать адаптивно для всех планшетов и десктопных устройств. Задача сильно упрощается тем, что не нужно верстать с нуля - есть готовый шаблон проекта. В шаблоне всё разбито по блокам, тебе никакой логики (кроме слайдера и нажатия по меню и прокрутки хэдера) писать не нужно, только добавить нужный html. (Я использую Svelte - для запуска нужно установить NodeJS, установить пакеты `npm install` и написать в консоли `npm run dev`) - В шаблоне уже имеются классы для типографии. Их нужно использовать обязательно для любых текстов на странице. - В шаблоне уже имеются необходимые цвета. - В шаблоне подключен модуль с иконками. - В шаблоне, в папке `./static/assets` есть нужные картинки. Также, все эти картинки (кроме `svg`) нужно переформатировать в WEBP. - В шаблоне есть компонент `` где показано как использовать все вышеперечисленное. Скажу сразу, дизайн в фигме не pixel-perfect и мерить спэйсинг по нему не нужно! Используй стандартные размеры 8-Point Grid System, в общем, надо чтобы выглядело хорошо! Фигма дизайн: https://www.figma.com/design/Hzhfgof57hZ5H6IhxZ4HOc/%D0%92%D0%B5%D0%BA-%D0%A2%D1%80%D0%B8%D1%83%D0%BC%D1%84%D0%B0?node-id=0-1&m=dev&t=DKKOdpEn8PYOVfI9-1 Шаблон отправлю по факту, на скрине структура