🚗 Garage Racer BMW Service

✨ Основні Особливості

🎨 Дизайн

• Сучасний мінімалістичний дизайн з акцентом на BMW брендинг
• Темна тема з автоматичним збереженням налаштувань
• Градієнтні ефекти та плавні переходи
• Адаптивний дизайн для всіх пристроїв (mobile-first підхід)

🎭 Анімації

BMW Лого

• 3D обертання логотипу при наведенні миші
• Анімовані квадранти з градієнтами
• Пульсуюче центральне кільце
• Світіння тексту BMW
• Орбітальні кільця з обертанням
• Particle ефект навколо лого

Floating Cards

• Плавання вгору-вниз
• Hover ефекти зі збільшенням та підйомом
• Shine анімація (світлова хвиля)
• Іконки з різними анімаціями:
  • Pulse (пульсація)
  • Rotate (обертання)
  • Check (масштабування)

Картки Послуг

• 3D tilt ефект при русі миші
• Ripple анімація при hover
• Плавне збільшення іконок
• Gradient bar згори
• Хвильовий background ефект

Інші Анімації

• Scroll progress bar зверху
• Parallax scrolling для елементів
• Magnetic buttons (магнітний ефект на кнопках)
• Gradient text animation на заголовках
• Cursor trail effect (слід за курсором)
• Fade-in на scroll з Intersection Observer
• Card tilt на всіх картках

🌓 Темна Тема

• Перемикач у header з анімованими іконками
• Збереження в localStorage
• Клавіатурний shortcut: Ctrl/Cmd + Shift + D
• Плавний перехід між темами
• Адаптовані кольори для всіх компонентів

📱 Мобільна Версія

• Компактні відступи та розміри
• Оптимізовані шрифти
• Hamburger меню
• Адаптивні картки та форми
• Окремі стилі для екранів <480px

🎯 Секції

1. Hero - Головний екран з BMW лого та статистикою
2. Services - 8+ послуг з іконками
3. Advantages - 4 переваги компанії
4. Locations - 2 філії у Львові
5. Owner - Інформація про власника
6. Contact - Форма запису з валідацією
7. Footer - Посилання та соц. мережі

🚀 Технології

• HTML5 - Семантична розмітка
• CSS3 - Grid, Flexbox, CSS Variables, Animations
• Vanilla JavaScript - Без фреймворків
• SVG - Векторна графіка для лого
• Intersection Observer API - Анімації при скролі
• LocalStorage - Збереження теми

🎨 Кольорова Схема

• Primary: #1c69d4 (BMW Blue)
• Secondary: #00d4ff (Cyan)
• Accent: #ff6b35 (Orange)
• Success: #10b981 (Green)

⚡ Оптимізація

• Lazy loading для зображень
• Оптимізовані анімації (GPU acceleration)
• Мінімальні reflows
• Passive event listeners
• Ефективні селектори

📦 Файли

web/
├── index.html          # Основний HTML
├── styles.css          # Всі стилі
├── script.js           # JavaScript функціонал
└── README.md          # Документація

🎮 Інтерактивність

Клавіатура

• Ctrl/Cmd + Shift + D - Перемикання теми
• Escape - Закриття мобільного меню

Миша

• Hover ефекти на всіх інтерактивних елементах
• 3D tilt на картках
• Magnetic buttons
• Cursor trail

🌐 Браузери

Підтримка всіх сучасних браузерів:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+