Описание
1. Быть на связи в телемосте для доработок. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ К РАЗРАБОТКЕ (ТЗ) Проект: Лендинг закрытого клуба Figma www.figma.com/design/A3tI... 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 (чтобы подтягивалась картинка-превью). Проверка обязательно без ошибок в validator.w3.org/
Источник вакансии