Сайт ООО "Кросс-Автоматика"

Описание проекта

Современный адаптивный веб-сайт для компании ООО "Кросс-Автоматика", специализирующейся на промышленной автоматизации, испытательном оборудовании и программном обеспечении. Сайт разработан с использованием React, TypeScript и Tailwind CSS.

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

cross_automatika_site/
├── content/                # Структурированный контент сайта
├── src/                    # Исходный код
│   ├── components/         # React компоненты
│   │   ├── layout/         # Компоненты макета (Header, Footer)
│   │   ├── sections/       # Секции страниц
│   │   └── ui/             # UI компоненты
│   ├── pages/              # Страницы сайта
│   ├── assets/             # Статические ресурсы
│   ├── App.tsx             # Главный компонент приложения
│   ├── index.css           # Глобальные стили
│   └── tailwind.config.js  # Конфигурация Tailwind CSS
└── public/                 # Публичные файлы
    └── images/             # Изображения

Технологии

• React: Библиотека для создания пользовательских интерфейсов
• TypeScript: Типизированный JavaScript для повышения надежности кода
• Tailwind CSS: Утилитарный CSS-фреймворк для быстрой разработки
• Framer Motion: Библиотека для анимаций
• React Router: Маршрутизация в приложении

Инструкция по установке и запуску

Требования

• Node.js (версия 16.0.0 или выше)
• npm или pnpm

Установка

1. Распакуйте архив с проектом
2. Откройте терминал и перейдите в директорию проекта
3. Установите зависимости:

cd cross_automatika_site/src
pnpm install
# или
npm install

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

pnpm run dev
# или
npm run dev

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

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

pnpm run build
# или
npm run build

Готовые файлы для деплоя будут находиться в директории dist.

Основные страницы сайта

• Главная: Обзор компании и ключевых продуктов
• О компании: Информация о компании, история, партнеры
• Продукция: Каталог продукции с подразделами
  • Испытательное оборудование
  • Автоматика и телемеханика
  • Фасовочное оборудование
  • Программное обеспечение
• Решения: Отраслевые решения компании
• Услуги: Перечень предоставляемых услуг
• Контакты: Контактная информация и форма обратной связи
• Карьера: Информация о вакансиях и работе в компании
• Фотоотчеты: Галерея выполненных проектов

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

Сайт полностью адаптирован для различных устройств:

• Десктопные компьютеры
• Планшеты
• Мобильные устройства

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

• Современный чистый дизайн с акцентом на технологичность
• Фирменные цвета компании (синий, серый)
• Анимации и интерактивные элементы
• Оптимизированные изображения
• Удобная навигация