| <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #0a0a0a; color: #E1E1E1; overflow-x: hidden; } .glow-text { text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); } .glow-box { box-shadow: 0 0 15px rgba(246, 252, 121, 0.5); } .glow-box:hover { box-shadow: 0 0 25px rgba(246, 252, 121, 0.8); } .border-glow { border-color: #f6fc79; box-shadow: 0 0 10px rgba(246, 252, 121, 0.3); } .border-glow:hover { box-shadow: 0 0 20px rgba(246, 252, 121, 0.5); } .dashboard-container { perspective: 1000px; transform-style: preserve-3d; } .dashboard { transform: rotateY(-15deg) rotateX(5deg); transition: all 0.5s ease; } .dashboard:hover { transform: rotateY(-10deg) rotateX(3deg); } .traffic-flow { position: relative; height: 100%; overflow: hidden; } .flow-item { position: absolute; transition: all 0.5s ease; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; background-color: rgba(246, 252, 121, 0.6); border-radius: 50%; pointer-events: none; } .tooltip { visibility: hidden; opacity: 0; transition: all 0.3s ease; } .flow-item:hover .tooltip { visibility: visible; opacity: 1; } .nav-link { position: relative; transition: all 0.3s ease; } .nav-link:hover { text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); color: #f6fc79 !important; } .process-arrow { position: absolute; color: #f6fc79; font-size: 24px; top: 50%; transform: translateY(-50%); z-index: 1; } @media (max-width: 768px) { .dashboard { transform: none; } } .arrow-animation { animation: arrowPulse 1.5s infinite; } @keyframes arrowPulse { 0% { opacity: 0.5; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(5px); } 100% { opacity: 0.5; transform: translateY(-50%) translateX(0); } } </style> На основе вот этого стиля выше - сделай вот этот блок: 📦 Техническое задание: Блок 9 — «💼 После курса ты сможешь не только в арбитраж» ⸻ 🧱 1. Структура и расположение • Позиция: после блока с тарифами • Формат: ~1 экран, адаптивный • Композиция: • Сверху — заголовок и подзаголовок • Ниже — 5 карточек с иконкой, названием роли и описанием • Внизу — подтверждающий факт или краткая цитата ⸻ 🏷️ 2. Заголовок блока: 💼 После курса ты сможешь не только в арбитраж • Цвет: #f6fc79, Uppercase, Bold • Анимация: fade-up, иконка 💼 может слегка “покачиваться” при загрузке ⸻ ✍️ 3. Подзаголовок: Овладей универсальной профессией — не только для арбитража • Цвет: #E1E1E1, Medium • Шрифт: без засечек, на 90% прозрачности ⸻ 📋 4. Блок профессий (5 карточек) 💠 Формат карточек: • Каждая карточка — это «роль»: иконка + название профессии + краткое описание • Карточки визуально похожи на блоки с тарифами или “Что вы получите” • Анимация: при появлении — slide-up + лёгкий bounce иконки • Фон: #121212, скругления 2xl, тень/свечение при ховере 📇 Содержание карточек: 1. 🎯 Таргетолог Настройка рекламы в Facebook, Instagram, TikTok, Telegram для бизнеса и блогеров 2. 📣 Специалист по интернет-рекламе Работа в маркетинговых агентствах, с брендами и маркетплейсами 3. 🤝 Фрилансер Поиск клиентов через биржи и соцсети. Работа по рекламе на заказ 4. 🚀 Медиабайер Работа в арбитражной команде с % от залива. Рост до тимлида или стартапа 5. 🧠 Консультант / Куратор Обучение других, разбор чужих связок, сопровождение команд ⸻ 🧾 5. Факт/доверие (внизу блока): Наши выпускники успешно находят клиентов на фрилансе, устраиваются в агентства и даже открывают свои digital-проекты. • Цвет: #f6fc79, стиль — italic или выделенный блоб/плашка • Расположение: по центру, подчёркивающее основную мысль блока ⸻ 📱 6. Адаптивность: • Desktop: 5 карточек в один ряд или 2 + 3 • Tablet: 2 карточки в ряд • Mobile: 1 карточка в ряд • Подписи остаются читаемыми, иконки масштабируются ⸻ 🎨 7. Визуальная целостность: • Цветовая палитра: #0a0a0a, #1a1a1a, #f6fc79, #E1E1E1 • Анимации — плавные, “живые”, как в мессенджерах/дашбордах • Можно добавить в фон абстрактную “сеть профессий” или нейросеть карьерных путей (лёгкий SVG WebGL-анимация) ⸻ |
