SHIFT.ED — Курсы профессий будущего

Иммерсивный лендинг для образовательной платформы, которая готовит специалистов в профессиях, которых ещё нет — AI-инженер, XR-разработчик, Промпт-дизайнер.

---

О проекте

SHIFT.ED — концепт Landing Page для образовательной платформы нового поколения. Три программы:

Профессия	Описание
AI-инженер	Проектирование и деплой AI-систем: трансформеры, LLM fine-tuning, MLOps, мультимодальные агенты
XR-разработчик	Пространственные интерфейсы для AR/VR/MR: WebXR, Three.js, Spatial UI, распознавание жестов
Промпт-дизайнер	Проектирование промптов: System Prompts, Chain-of-Thought, мультимодальные промпты, метрики

Курс длится 16 недель, первый поток стартует в марте 2026.

---

Технические особенности

Анимации и интерактивность

• Scroll-driven Hero — заголовок SHIFT.ED растягивается и сжимается при скролле через motion/react useScroll + useTransform; glow-pulse в фоне; SCROLL-индикатор исчезает при движении
• Cursor Trail — canvas-based шлейф из маджента-частиц, следующий за курсором (отключается на тач-устройствах и при prefers-reduced-motion)
• Flashlight Reveal — скрытый манифест, открываемый курсором-«фонариком» через CSS mask-image: radial-gradient(); на мобильном — тап раскрывает текст анимированным расширяющимся кругом от точки касания
• Staggered scroll reveal — карточки курсов и CTA появляются через whileInView с задержкой

Мини-игра (геймификация)

Секция «Разблокируй программу» — полноценная drag-and-drop игра в редакторе кода:

• 6 Python-блоков кода в перемешанном порядке
• Desktop: HTML5 drag-and-drop
• Mobile: tap-to-swap (два тапа меняют блоки местами)
• Прогресс-бар показывает количество правильно расставленных блоков
• При победе — анимированное раскрытие программы курса (4 модуля, 16 недель)

Навигация

• Floating pill navbar с backdrop-blur при скролле
• Мобильный гамбургер: анимированный X-крест через motion, полноэкранный оверлей с AnimatePresence

Next.js архитектура

• Server Components по умолчанию — course-cards, footer остаются серверными
• Client Components только где нужна интерактивность ("use client" на 4 компонентах)
• SSR-безопасная гидратация — CodeGame откладывает Math.random() в useEffect
• Шрифты через next/font/google с display: swap

---

Стек

Технология	Версия	Применение
Next.js	16.1.6	App Router, Static Generation
React	19.2	UI, Server Components
Tailwind CSS	4	Утилити-классы, кастомные CSS-переменные
motion	latest	Scroll animations, gestures, AnimatePresence
TypeScript	5	Типизация

---

Структура проекта

shift.ed/
├── app/
│   ├── globals.css          # Design tokens (CSS vars), keyframes, bg-grid
│   ├── layout.tsx           # Шрифты (Syncopate, Inter, Space Mono), metadata
│   └── page.tsx             # Сборка секций
├── components/
│   ├── navbar.tsx           # Floating nav + mobile menu (client)
│   ├── hero-section.tsx     # Scroll-driven kinetic title (client)
│   ├── cursor-trail.tsx     # Canvas cursor trail (client)
│   ├── flashlight-reveal.tsx # Flashlight / tap reveal (client)
│   ├── course-cards.tsx     # 3 course cards with scroll reveal (client)
│   ├── code-game.tsx        # Drag-and-drop code mini-game (client)
│   └── footer.tsx           # CTA + links (client)

---

Запуск

npm install
npm run dev

Открыть http://localhost:3000

npm run build   # production build
npm start       # production server

---