Вёрстка первого экрана сайта с анимацией

✅ Техническое задание на первый экран (мобильная версия)

Проект: Новый сайт веб студии

⸻

1. Исходники, которые уже есть

К проекту прикладывается:

1.1. Дизайн (JPEG)

Готовый референс первого экрана в формате JPEG.

Если потребуется, можем отрисовать его заново по слоям в Figma:

• фоновые горы

• персонаж

• неоновое свечение

• тексты

• кнопка

• нижнее меню

(Основной смысл — дизайнеру нужно понимать, что композиция в JPEG должна быть точно повторена.)

1.2. Анимация фона (видео)

Отдельно прикладывается анимация заднего фона:

• формат: MP4 (обязательно) и WebM (желательно для Chrome)

• длительность: 3–4 секунды

• тип: зацикленное видео без рывков

• назначение: используется как фоновое видео за всей композицией

⸻

2. Что нужно реализовать

2.1. Фоновое видео ( в приложении)

Видео размещается как background первого экрана:

<video autoplay muted loop playsinline></video>

Требования:

• не должно тормозить на мобильных

• вес до 1.5–2 MB

• подгоняется под ширину экрана, без белых полос

⸻

2.2. Поверх видео должны быть размещены:

1️⃣ Логотип A-LUX (SVG)

2️⃣ Подпись: «с 2007 года»

3️⃣ Заголовок:

«Покоряем цифровые вершины Казахстана»

4️⃣ Подзаголовок:

Создаём мобильные приложения, сайты

и внедряем ИИ

5️⃣ Мелкий текст:

с 2007 года

500+ завершённых проектов

6️⃣ Кнопка CTA: «Оставить заявку»

— стиль неоновый, как на JPEG

7️⃣ Нижнее меню (фиксированная панель):

• Главная

• Услуги

• Кейсы

• Контакты

(иконки — SVG)

⸻

3. Требования к верстке

• Чистая мобильная HTML-верстка

• CSS (можно Tailwind/SCSS или обычный CSS)

• Минимум JS

• Все тексты должны быть живыми, НЕ картинкой

• Логотип и иконки — SVG

• Кнопка — CSS (градиент/свечение)

⸻

4. Оптимизация

• Все изображения желательно в WebP

• Видео прогнать через FFmpeg (битрейт 700–1200 kbps)

• Общий вес экрана до 2–3 MB максимум

• Никаких тяжёлых CSS-фильтров

⸻

5. Что нужно от подрядчика

• Перенести JPEG-референс в точную HTML-структуру

• Подключить видео-фон

• Собрать слои (если нужно — мы предоставим по слоям)

• Сделать аккуратную адаптивную мобильную верстку

• Сделать чистую HTML-страницу с подключённым видео

⸻

6. Что мы можем дополнительно предоставить

По запросу:

• исходник дизайна в Figma (по слоям)

• отрисованные элементы (фон, персонаж, свечение)

• оптимизированные ассеты (WebP, SVG)