coresyncreact1/README.md

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

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

npm install

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

npm run dev

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

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

npm run build

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

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 анимации для простых эффектов
• Оптимизация производительности