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