ТЗ: Вёрстка лэндинга компании

# ТЗ: Вёрстка маркетингового сайта по готовому дизайну

## 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.