## Итерация 03 — Swiper карусель + Download UX (OS + macOS arch) ### Цель Сделать две “ключевые” UX части максимально качественно: карусель скриншотов и умный блок скачивания. ### Часть A: Screenshots (Swiper) #### Требования - Swiper Vue (`https://swiperjs.com/vue`) - Desktop: на экране одновременно видно **несколько** скринов. - Mobile: 1 скрин, свайп, pagination. #### План реализации - Компонент `ScreenshotCarousel.vue`: - `breakpoints` для `slidesPerView` (примерно: 1 / 2 / 3 / 4 в зависимости от ширины) - `spaceBetween`, `grabCursor`, `keyboard`, `a11y` - `lazy` для изображений (если уместно) - `landing/data/screenshots.ts`: массив скринов, подписи, alt-тексты, темы (dark/light) #### Критерии готовности - Desktop показывает 2–4 скрина одновременно. - Навигация доступна клавиатурой. - Alt тексты корректны. - Изображения не “раздувают” страницу: есть ограничение по размерам, понятные форматы, нет тяжёлых файлов “на авось”. ### Часть B: Download Section (OS + macOS arch) #### Требования - Определяем ОС. - Если неизвестно — показываем все. - macOS: учитываем Apple Silicon vs Intel: - если детект уверенный — автоселект - если нет — выбор пользователю #### План реализации - `landing/utils/platform.ts`: чистые функции: - parse platform (mac/windows/linux/unknown) - parse arch (arm64/x64/unknown) через `userAgentData` где доступно - важно: не “угадывать” там, где точности нет — лучше показать выбор и запомнить решение пользователя - `landing/stores/downloadStore.ts`: - хранит `platform`, `arch`, `preferredMacArch` (если пользователь выбрал), `selectedAsset` - умеет fallback-логики и приоритеты отображения - `landing/data/downloads.ts`: - описывает доступные артефакты (os, arch, extension, url, label) #### Контракт UI/данных (чтобы потом не разъезжалось) - В `downloads.ts` у каждого ассета есть: - `os`: `macos | windows | linux` - `arch`: `arm64 | x64 | universal | unknown` - `variant`: например `dmg | zip | exe | msi | appimage | deb | rpm` (что реально есть) - `url`, `labelKey` (i18n), опционально `sha256`, `sizeBytes` - Блок download умеет: - показывать “рекомендованный” вариант сверху (если уверенно определили) - всегда давать способ выбрать альтернативу (особенно для macOS) - сохранять выбор пользователя (локально) #### Критерии готовности - Для “unknown” показывается полный список ОС. - Для macOS всегда понятен выбор: Silicon/Intel. - Выбор пользователя запоминается. - Логика выбора ассета покрыта тестами на основные кейсы (хотя бы таблица кейсов). - Все ссылки валидны (нет 404 в конфиге), плюс есть быстрый способ проверить это локально. ### Чеклист перепроверки (несколько проходов) - Проверка на macOS Safari/Chrome, Windows, Linux (эмуляция user agent). - A11y: keyboard, screen reader labels. - Логика не завязана на Nuxt в `utils/`. - Если `userAgentData` недоступен, UX остаётся понятным (никакой “магии”, только явный выбор).