Разработка дизайна и верстка сайта для взрослых

Необходимо разработать дизайн и выполнить адаптивную front-end верстку для сайта взрослой тематики. Сайт является каталогом записей стримов. Ключевые требования - высокая скорость загрузки, чистый код, современный минималистичный вид и возможность легкой смены цветовой схемы. То есть нужно

1. **UI/UX Дизайн:** Создание макетов для всех страниц сайта в **Figma**. Этот этап должен быть завершен и **полностью утвержден** перед началом верстки.

2. **Front-end верстка:** Преобразование утвержденных макетов в рабочий HTML/CSS/JS сайт.

**Домен:** `lexotex.com`

**Требования к дизайну (UI/UX)**

* **Общий стиль:** Современный, минималистичный дизайн в **темных тонах**. Стиль должен быть простым, интуитивно понятным и функциональным, без лишних визуальных элементов. Основной акцент – на контенте (превью видео).

* **Цветовая гамма:** Исполнитель должен предложить основную темную палитру. **Критически важно:** вся цветовая схема должна быть реализована через **CSS-переменные (custom properties)**. В файле стилей должен быть отдельный блок (например, `:root`), где собраны 5-7 основных переменных цветов (основной фон, цвет текста, акцентный цвет для ссылок и кнопок и т.д.). Изменение значений этих переменных должно полностью и корректно изменять вид всего сайта.

* **Шрифты:** Использовать стандартные системные шрифты (например, Arial, Helvetica, San Francisco, Roboto) для максимальной скорости загрузки и совместимости. **Без использования сторонних веб-шрифтов.**

* **Логотип:** Логотип как таковой не нужен. Вместо него использовать текстовое название сайта `lexotex.com`, стилизованное выбранным шрифтом.

* **Референс:** **Pornhub** (в качестве примера для структуры, функциональности и общего компоновки элементов, а не для прямого копирования дизайна).

**Структура сайта и страницы**

1. **Главная страница:**

    * Шапка сайта (текстовый логотип, меню категорий, строка поиска).

    * Блок "Популярные видео".

    * Блок "Новые видео".

    * Основная сетка с превью видео (изображение + название).

    * Пагинация (классическая, с номерами страниц: 1, 2, 3...).

    * Футер (ссылки на текстовые страницы).

2. **Страница просмотра видео:**

    * Встроенный фрейм с видео (iframe).

    * Название видео.

    * Список тегов/категорий, к которым принадлежит видео.

    * Блок "Похожие видео" (дизайн и верстка).

3. **Страница категории:**

    * Аналогична главной странице, но отображает видео только из выбранной категории, имеет название категории и собственную пагинацию.

4. **Текстовые страницы (2 шт.):**

    * Правила пользования (Terms of Service).

    * DMCA.

    * Страницы должны быть сверстаны, контент использовать в виде текста-заглушки ("lorem ipsum").

5. **Страница "Обратная связь":**

    * Форма с полями (Им'я, Email, Тема, Текст сообщения) и кнопкой "Отправить".

    * Данные из формы должны отправляться на указанную почту.

    * Форма должна быть защищена от спама с помощью **Google reCAPTCHA v2**.

**Технические требования к верстке**

* **Валидность:** 100% валидный HTML-код, проверенный на `validator.w3.org` без ошибок.

* **Скорость:** Показатель **Google PageSpeed Insights 95+** для мобильной и десктопной версий. Обязательная оптимизация изображений. Минификация не нужна CSS/JS, так как CMS это сделает.

* **Адаптивность:** Единый HTML для всех устройств (Mobile-first подход). Верстка должна корректно отображаться на всех популярных разрешениях экранов.

* **Кроссбраузерность:** Корректное отображение в последних версиях браузеров Chrome, Firefox, Safari, Edge. Поддержка Internet Explorer не нужна.

* **Семантическая верстка:** Использование соответствующих тегов (header, footer, nav, article, section) для улучшения SEO.

* **Favicon:** Подключение иконок favicon для различных устройств.

* **Легкая смена темы:** Этот пункт дублирует требование из раздела дизайна для акцента: **весь CSS должен базироваться на переменных** для быстрого ребрендинга сайта.

**Технологический стек**

* **HTML5**

* **CSS3** (желательно без использования препроцессора **SCSS**, так как не умею в такое).

* Нативный **JavaScript (ES6+)**.

* **Без использования jQuery, Bootstrap, Tailwind** или других крупных JS/CSS фреймворков.

**Результат работы**

1. Ссылка на финальный, утвержденный проект в Figma (или какой-то аналог).

2. Архив со всеми файлами верстки (HTML, CSS, JS, оптимизированные изображения, шрифты) и короткой инструкцией по структуре файлов.

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