Верстка слайдера (iPhone 17) с сайта Apple на Next JS

В этом видео автор демонстрирует, как создать кастомный слайдер для презентации iPhone 17 на сайте Apple, используя Next.js. Он начинает с обзора проекта, объясняет выбор технологий, затем пошагово показывает настройку проекта, работу с ассетами, шрифтами и компонентом Slider, рендеринг данных слайдов и управление состоянием активного слайда. Далее рассматриваются стили иконок, навигационные стрелки, анимации переходов с помощью Framer Motion, а также интеграция видео в слайды. В конце автор демонстрирует сборку и запуск проекта, подводит итоги и делится ссылками. Таймкоды: 00:00 – заставка и старт стрима; 01:32 – приветствие, проверка связи; 04:02 – план: что верстаем сегодня; 07:26 – разбор apple.com: что картинка, что текст; 10:41 – решение: кастомный слайдер (без Swiper); 12:37 – технологии: почему сразу Next.js; 20:51 – старт проекта: create-next-app, структура; 22:54 – ассеты: SVG-иконки и изображения в public; 38:22 – подготовка страницы и шрифтов (Noto Sans); 44:52 – фон/контейнер, каркас компонента Slider; 59:04 – данные слайдов и рендер списка контролов; 01:12:39 – стили бейджей и иконка "плюс" (inline SVG); 01:55:32 – состояние: переключение активного слайда; 02:24:44 – стрелки навигации: SVG, стили, позиционирование; 02:51:23 – индекс активного слайда; блокировка кнопок; 03:05:46 – проверка movePrev/moveNext + анимация появления стрелок; 03:16:17 – блок SlideContent: Image, overflow, обрезка краёв; 03:39:59 – анимации с Framer Motion (FadeIn, AnimatePresence); 04:13:45 – exit-анимация: уезжание слайда влево; 04:21:52 – видео в слайдах: структура данных и video; 04:28:50 – стили видео, autoplay/loop; тест; 04:36:07 – сборка и запуск (build/start); 04:37:35 – завершение стрима, итоги и ссылки.