| Хорошо, переходим к Блоку 6 — это ключевой объясняющий блок, где человек понимает, как именно работает сервис. Он должен быть простым, последовательным и визуально привлекательным. ⸻ 🟩 БЛОК 6: Как работает PhaseAI Цель: Показать, что использование сервиса — это простой и понятный процесс. Разбить путь пользователя на 3–4 визуальных шага. ⸻ 🧱 Структура блока 1. 🔠 Заголовок и подзаголовок • Заголовок: «Как это работает» • Подзаголовок: «Всего 3 шага до понимания фазы и выигрыша» 2. 🪜 Блок с шагами (лучше — 3) Каждый шаг — это номер, иконка, заголовок, описание. Анимация сверху-вниз или слева-направо. № Заголовок Подпись Иконка 1 Выберите игру Aviator, Gates of Olympus, Bonanza — выберите то, что играете 🎮 2 Проверьте фазу Наша система покажет фазу: отдача, холд или слив 📈 3 Играйте с умом Используйте момент — играйте тогда, когда слот «даёт» 🎯 ⸻ 📐 HTML структура (Tailwind) <section class="py-24 bg-black text-white"> <div class="max-w-5xl mx-auto px-6 text-center"> <h2 class="text-3xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400"> Как это работает </h2> <p class="text-lg opacity-70 mb-12"> Всего 3 шага до понимания фазы игры. Просто следуй инструкции — и заходи в нужный момент. </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">🎮</div> <h3 class="font-semibold text-lg mb-2">1. Выберите игру</h3> <p class="text-sm opacity-70">Aviator, Sweet Bonanza, Gates of Olympus и другие — выбирайте то, во что играете.</p> </div> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">📈</div> <h3 class="font-semibold text-lg mb-2">2. Проверьте фазу</h3> <p class="text-sm opacity-70">PhaseAI покажет текущую фазу: отдача, холд или слив. Данные обновляются каждую минуту.</p> </div> <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-800 hover:shadow-xl transition"> <div class="text-4xl mb-4">🎯</div> <h3 class="font-semibold text-lg mb-2">3. Играйте с умом</h3> <p class="text-sm opacity-70">Заходите в игру, когда фаза на отдачу — и повышайте шансы на выигрыш.</p> </div> </div> </div> </section> ⸻ 🔧 Анимации (по желанию) • При скролле снизу вверх: gsap.from(".step-card", {opacity: 0, y: 30, stagger: 0.2}) • При наведении: подсветка фона, увеличение иконки ⸻ 🧠 Альтернативный вариант — с видео или гифкой • Если планируешь использовать видео или демонстрацию интерфейса, блок можно дополнить демонстрацией (в формате: “Смотри, как просто”). ⸻ ✅ Резюме Блок 6 объясняет: • Как пользоваться сервисом • Почему это несложно • Визуально делит сложную механику на понятные шаги ⸻ Если хочешь, соберу в код сразу с анимацией. Или идём к Блоку 7 — социальные доказательства, отзывы, доверие? |
