Сверстать админку из figma/pixso в html + tailwind

22.07.2024 20:42

«Фрилансим»

Техническое задание на верстку приложения из Figma в HTML + Tailwind

Адаптивность: Только десктоп.
Кроссбраузерность: Обеспечить корректное отображение в последних версиях браузеров (Chrome, Firefox, Safari, Edge).
Компонентность: Использование компонентного подхода с использованием Tailwind CSS для создания переиспользуемых стилей.

HTML: Структура страниц и компонентов согласно макету в Figma.
Tailwind CSS: Использование утилитарных классов для стилизации элементов.
Статические файлы: Все необходимые изображения, иконки и шрифты должны быть включены в проект.

Главная страница:
- Заголовок, подзаголовок, кнопки CTA.
- Превью продуктов/услуг.
- Отзывы клиентов.
- Контактная информация и форма обратной связи.
Страница продукта/услуги:
- Детальное описание продукта/услуги.
- Галерея изображений.
- Спецификации и характеристики.
- Блок с ценой и кнопкой "Купить/Заказать".
О нас:
- Информация о компании.
- Команда.
- История и достижения.
Блог/Новости:
- Список статей с кратким превью.
- Полный текст статьи.
Контакты:
- Форма обратной связи.
- Карта с указанием местоположения.
- Контактная информация (телефон, email, адрес).

Файловая структура:
- /index.html
- /about.html
- /product.html
- /blog.html
- /contact.html
- /assets/ - директория для статических файлов (изображения, шрифты, иконки)
- /css/ - директория для дополнительных стилей (если необходимо)
- /js/ - директория для скриптов (если необходимо)
HTML:
- Использование семантических тегов (<header>, <footer>, <section>, <article>, <nav>, <main> и т.д.).
- Подключение Tailwind CSS через CDN или локально.
Tailwind CSS:
- Использование утилитарных классов для стилизации.
- Настройка конфигурационного файла Tailwind (tailwind.config.js) для кастомизации темы и добавления собственных стилей, если необходимо.