Задание: HTML-верстальщик. ТЗ: Вёрстка лэндинга компании (Дистанционная работа)
# ТЗ: Вёрстка маркетингового сайта по готовому дизайну
## 1. Обзор проекта
Необходимо сверстать маркетинговый сайт по готовому дизайн-макету.
Сайт состоит из 3 статических страниц. Бэкенд не требуется.
Готовый результат размещается на статическом хостинге с CI-деплоем из Git-репозитория.
**Параметры проекта:**
* Тип проекта: вёрстка маркетингового сайта
* Количество страниц: 3
* Дизайн: готовый макет, доступ view-only
* Бэкенд: не требуется
* Репозиторий: доступ предоставляется
* Деплой: static hosting + CI из Git
---
## 2. Технический стек
* Next.js 14+
* Static export
* Tailwind CSS
* Node.js 20+
* Деплой на статический хостинг через CI из Git
---
## 3. Страницы
## 3.1 Home `/`
Главная маркетинговая страница.
**Секции сверху вниз:**
### Navigation
* логотип;
* меню;
* CTA-кнопка;
* hover-состояния по дизайну.
### Hero
* заголовок и подзаголовок согласно макету;
* две CTA-кнопки;
* иллюстрация / визуальный блок справа.
### Logo bar
* статичный блок с логотипами из дизайн-ассетов;
* без прокрутки и без дополнительного интерактива.
### Industries / Use Cases
* заголовок согласно макету;
* 4 карточки с иконками, заголовками и описаниями.
### Benefits / Features
* секция с feature-карточками;
* тексты, иконки и hover-эффекты согласно макету.
### Footer
* футер по дизайн-макету.
---
## 3.2 Fees `/fees`
Страница с таблицей статических данных.
### Header
* заголовок согласно макету;
* поясняющий текст.
### Filters
Фильтрация выполняется полностью на клиенте, без запросов к серверу.
Поля:
* фильтр 1;
* фильтр 2;
* текстовый поиск.
Требования:
* мгновенная фильтрация;
* без перезагрузки страницы;
* без API-запросов.
### Table
* колонки соответствуют макету и предоставленным данным;
* таблица должна поддерживать сотни строк;
* данные статические;
* фильтрация на клиенте;
* адаптивное отображение на desktop, tablet и phone.
Исходная таблица сейчас реализована через статический JS-скрипт в code block. Исполнителю будет предоставлен скрипт и данные. Нужно перенести логику в React-компонент.
### Дополнительные секции
* статичный logo bar;
* FAQ;
* footer.
---
## 3.3 Landing Page `/partner-check`
Дополнительная маркетинговая страница. Финальный slug может быть уточнён перед началом работы.
### Hero
* заголовок и подзаголовок согласно макету;
* цена и перечёркнутая цена;
* CTA-кнопка;
* изображение / иллюстрация согласно макету.
### Feature badges
* 4 карточки преимуществ согласно дизайну.
### What's Included
* сетка преимуществ / возможностей согласно макету.
### Why Now
* два текстовых блока с CTA.
### Footer
* футер по дизайн-макету.
---
## 4. Адаптивность
Требуется pixel-perfect соответствие desktop-версии готовому дизайну.
Tablet и Phone — по адаптивным версиям из макета.
**Брейкпоинты:**
* Desktop: 1440+
* Tablet: 1429–810
* Phone: ≤810
* Для дополнительной страницы также учитывать промежуточные desktop/tablet-состояния из макета.
---
## 5. Интерактив и состояния
* Кнопки: hover-состояния по дизайну, CSS.
* Карточки: hover-эффекты по дизайну, CSS.
* Таблица `/fees`: мгновенная фильтрация на клиенте.
* Logo bar: статичный блок, без прокрутки.
* Формы, если есть: только визуальная реализация, без отправки данных.
---
## 6. Что предоставляет заказчик
* view-only доступ к дизайн-макету;
* исходный JS-скрипт и данные таблицы;
* изображения, иллюстрации и ассеты из макета;
* доступ к Git-репозиторию;
* доступ к статическому хостингу или инструкции по деплою.
---
## 7. Требования к сдаче
Исполнитель должен предоставить:
* исходный код в Git-репозитории;
* чистые и понятные коммиты;
* README с инструкцией запуска;
* успешную сборку через `npm run build`;
* preview-деплой для приёмки;
* корректную адаптивность desktop / tablet / phone;
* отсутствие лишних зависимостей.
**Lighthouse:**
* Performance ≥ 85
* Accessibility ≥ 90
---
## 8. Оценка объёма
Ожидаемый объём для сильного специалиста: до 2 рабочих дней.
---
## 9. Что указать в отклике
Просьба указать:
* стоимость работы;
* примерный срок;
* похожие проекты;
* когда готовы приступить;
* опыт с Next.js static export и Tailwind CSS.
