Motion — преміальний landing page для SaaS-продукту

Motion - інтерактивний SaaS landing page з анімаціями та code-diff demo

Основний акцент зроблено на інтерактивності. Scroll-reveal анімації, fade-in ефекти та code-diff блок реалізовані на чистому JavaScript.

Що реалізовано:
- Статична структура HTML/CSS/JS без фреймворків
- Локальні шрифти, зображення, CSS, аудіо та медіа
- Header/footer правки: логотип, типографіка, посилання
- Scroll-reveal та fade-in анімації
- Інтерактивний code-diff блок
- Editable right code pane
- Green inserted-text highlighting
- Синхронізація лівої та правої частин diff
- Збереження syntax highlighting під час редагування
- Responsive layout
- Clean production/deploy folder
- Перевірка asset-залежностей і відсутності 404

Технічні деталі:
- HTML5, CSS3, vanilla JavaScript
- Без React, Next.js, Vue
- Без Webpack/Vite/esbuild
- Повністю статичний сайт
- 100% локальні runtime-ассети
- IntersectionObserver для reveal-анімацій
- Vanilla JS-модуль для code-diff interaction

Виклики та вирішені проблеми:
- Відтворення складного UI без оригінального React/Next runtime
- Перенесення інтерактивної логіки на vanilla JS
- Збереження syntax highlighting під час live editing
- Синхронізація diff-панелей
- Коректна робота opacity/transform у reveal-анімаціях
- Локалізація ассетів без CDN
- Підготовка чистого deploy-пакета

Стек:
HTML5 · CSS3 · Vanilla JavaScript · IntersectionObserver · GitHub · Vercel