# CoreSync React Website

Современный веб-сайт компании CoreSync, специализирующейся на разработке серверных приложений, интеграции 1C/ERP/CRM, автоматизации бизнес-процессов, CI/CD/DevOps, архитектуре, мониторинге, менторинге, управлении командами, код-ревью и SMM.

 Технологии

- **React 18.2.0** - Основная библиотека
- **Vite 4.4.5** - Сборщик и dev-сервер
- **Framer Motion 10.16.4** - Анимации
- **Font Awesome 6.4.0** - Иконки
- **CSS3** - Стилизация с современными возможностями

 Дизайн

- **Цветовая схема**: Темно-синяя (#0a1929)
- **Стиль**: Современный 2025, минималистичный
- **Анимации**: Плавные переходы и интерактивные элементы
- **Адаптивность**: Полная поддержка мобильных устройств

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

```
coresync-react-project/
├── public/
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── Header.jsx          # Навигация
│   │   ├── Header.css
│   │   ├── Hero.jsx           # Главная секция
│   │   ├── Hero.css
│   │   ├── Services.jsx       # Услуги
│   │   ├── Services.css
│   │   ├── About.jsx          # О компании
│   │   ├── About.css
│   │   ├── Achievements.jsx   # Достижения
│   │   ├── Achievements.css
│   │   ├── Portfolio.jsx      # Наши проекты
│   │   ├── Portfolio.css
│   │   ├── Contact.jsx        # Контакты
│   │   ├── Contact.css
│   │   ├── Footer.jsx         # Подвал
│   │   └── Footer.css
│   ├── App.jsx                # Главный компонент
│   ├── App.css                # Глобальные стили
│   ├── main.jsx               # Точка входа
│   └── index.css              # Базовые стили
├── index.html                 # HTML шаблон
├── package.json               # Зависимости
├── vite.config.js             # Конфигурация Vite
└── README.md                  # Документация
```

 Установка и запуск

### Предварительные требования

- Node.js 16+ 
- npm или yarn

### Установка зависимостей

```bash
npm install
```

 Запуск в режиме разработки

```bash
npm run dev
```

Приложение будет доступно по адресу: http://localhost:5173

### Сборка для продакшена

```bash
npm run build
```

### Предварительный просмотр сборки

```bash
npm run preview
```

 Основные функции

### Навигация
- Фиксированная навигация с эффектом размытия
- Плавная прокрутка к секциям
- Адаптивное мобильное меню

 Главная секция (Hero)
- Анимированный заголовок с градиентом
- Интерактивные плавающие карточки
- Кнопки призыва к действию

 Услуги
- Карточки услуг с иконками Font Awesome
- Hover-эффекты и анимации
- Детальное описание каждой услуги

 О компании
- Информация о компании
- Статистика и достижения
- Команда экспертов

 Достижения
- Анимированные счетчики
- Статистика проектов
- Интерактивные элементы

 Наши проекты
- Портфолио работ
- Hover-эффекты на карточках
- Фильтрация по категориям

 Контакты
- Форма обратной связи
- Валидация полей
- Анимация отправки

 Подвал
- Ссылки на социальные сети
- Контактная информация
- Навигационные ссылки

 Особенности дизайна

### Цветовая палитра
- **Основной фон**: #0a1929 (темно-синий)
- **Акцентный цвет**: #3b82f6 (синий)
- **Текст**: #e8f4fd (светло-голубой)
- **Градиенты**: От #1e3a8a до #3b82f6

### Анимации
- Плавные переходы между секциями
- Hover-эффекты на интерактивных элементах
- Анимированные счетчики
- Плавающие элементы в hero-секции

### Типографика
- **Шрифт**: Inter (современный sans-serif)
- **Размеры**: Адаптивные с использованием clamp()
- **Иерархия**: Четкая структура заголовков

 Адаптивность

Сайт полностью адаптивен и оптимизирован для:
- Десктопных устройств (1200px+)
- Планшетов (768px - 1199px)
- Мобильных устройств (до 767px)

 Производительность

- Оптимизированные изображения
- Ленивая загрузка компонентов
- Минификация CSS и JS
- Современные форматы изображений

 Разработка

### Структура компонентов
Каждый компонент состоит из:
- `.jsx` файл с логикой
- `.css` файл со стилями
- Импорт необходимых зависимостей

### Стилизация
- CSS модули для изоляции стилей
- CSS переменные для консистентности
- Flexbox и Grid для макетов

### Анимации
- Framer Motion для сложных анимаций
- CSS анимации для простых эффектов
- Оптимизация производительности