1. Быть на связи в телемосте для доработок.
ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К РАЗРАБОТКЕ (ТЗ)
Проект: Лендинг закрытого клуба
Figma
1. СТЕК ТЕХНОЛОГИЙ (Stack)
Framework: Next.js (App Router). Это обязательно для оптимизации скорости и SEO.
Styling: Tailwind CSS.
Animation: Framer Motion (предпочтительно) ИЛИ GSAP. Нам нужны сложные каскадные появления (Staggered fade-up) и параллакс, на чистом CSS это будет «деревянно».
2. UX И «ОЩУЩЕНИЕ» (Feel)
В премиум-сегменте важна «тяжесть» и плавность интерфейса.
Smooth Scroll: Обязательная интеграция библиотеки Lenis Scroll (или аналог). Скролл не должен быть «дерганым» (стандартным браузерным), он должен быть инерционным, плавным.
No FOUC (Flash of Unstyled Content): Шрифты и стили должны грузиться мгновенно. Никаких «скачков» верстки при загрузке.
Overscroll: Фон страницы (body) должен быть залит основным цветом (#0C0C0C или как в макете), чтобы при «оттягивании» страницы на iPhone (rubber banding) не было белых полос.
3. РАБОТА С ГРАФИКОЙ И ЭФФЕКТАМИ
Noise Texture (Шум): Поверх всего сайта должен быть наложен слой с зернистостью (Grain/Noise) через CSS (pointer-events: none). Это ключевой элемент дизайн-кода, он не должен перекрывать интерактивные элементы.
Images: Все растровые изображения (фото) конвертировать в WebP / AVIF. Использовать компонент next/image для ленивой загрузки (Lazy load) и оптимизации под Retina экраны (x2, x3).
4. АНИМАЦИЯ (Motion)
Не делать анимацию «ради анимации». Все должно быть строго:
Появление: Элементы не появляются резко. Они плавно выплывают снизу вверх (Y: 20px -> 0, Opacity: 0 -> 1) с задержкой (delay) друг за другом. (или обсудить отдельно)
Кнопки: При нажатии (tap) на мобильном — кнопка должна слегка уменьшаться (scale: 0.98).
Parallax: Легкое движение слоев (телефоны двигаются с разной скоростью) при скролле.
5. АДАПТИВ (Mobile First)
Основной приоритет — iPhone (Safari / Chrome).
Проверить отображение на iPhone SE (маленький экран) — контент не должен обрезаться.
Проверить отображение на iPhone Pro Max — контент не должен «разлетаться».
+ Super Retina 5к
Десктоп: Центральная колонка, ограниченная по ширине (container), аккуратные отступы. Фон на всю ширину.
6. ПРОИЗВОДИТЕЛЬНОСТЬ (KPI)
Google Lighthouse Performance: 90+ (Зеленая зона).
Корректные мета-теги (Open Graph) для красивого шеринга ссылки в Telegram/iMessage (чтобы подтягивалась картинка-превью).
Проверка обязательно без ошибок в