Лендинг для производственной компании

Лендинг представляет собой одностраничный сайт, разработанный с использованием React, TypeScript и Tailwind CSS. Сайт демонстрирует услуги производственной компании.

---

Содержание

• Функционал
• Используемые технологии
• Структура проекта
• Установка и настройка
• Docker
• Вклад в проект
• Лицензия

---

Функционал

• Главная секция: Приветствие пользователя с кратким описанием услуг.
• Видео-блок: Демонстрация процесса производства.
• Этапы работы: Подробное описание этапов изготовления изделий с возможностью просмотра модального окна для каждого этапа.
• Услуги: Информация о предоставляемых услугах.
• Галерея работ: Адаптивная галерея готовых изделий с возможностью просмотра на мобильных устройствах через горизонтальную прокрутку.
• Контакты: Контактная информация, карта проезда и возможность скачать реквизиты.
• Кнопка со стрелкой "Наверх": Быстрый переход к началу страницы.
• Адаптивность: Полная поддержка различных устройств, включая мобильные телефоны и планшеты.

---

Используемые технологии

Фронтенд:

• React: Библиотека JavaScript для создания пользовательского интерфейса.
• TypeScript: Статически типизированный язык программирования, обеспечивающий безопасность кода.
• Tailwind CSS: Утилитарный фреймворк для быстрой стилизации компонентов.
• Vite: Инструмент сборки для ускорения разработки.
• Font Awesome: Библиотека иконок для использования в интерфейсе.
• Intersection Observer API: Для автоматического воспроизведения видео при скролле.

Инструменты:

• Docker: Для контейнеризации приложения.
• Nginx: Веб-сервер для обслуживания статических файлов.
• ESLint: Для проверки качества кода.

---

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

landing_page_example/
├── public/
│   ├── video/production.mp4      # Видео для секции производства
│   └── favicon.ico               # Favicon сайта
├── src/
│   ├── assets/                   # Изображения и GIF-анимации
│   ├── components/               # Компоненты React
│   │   ├── BackToTopButton.tsx
│   │   ├── CNCSection.tsx
│   │   ├── ContactsButton.tsx
│   │   ├── ContactsSection.tsx
│   │   ├── Footer.tsx
│   │   ├── GallerySection.tsx
│   │   ├── Header.tsx
│   │   ├── HeroSection.tsx
│   │   ├── VideoBlock.tsx
│   │   └── WorkStages.tsx
│   ├── index.css                 # Глобальные стили
│   ├── main.tsx                  # Entry point для React-приложения
│   └── App.tsx                   # Главный компонент приложения
├── nginx/
│   ├── nginx.conf                # Конфигурация Nginx
├── Dockerfile                    # Конфигурация Docker
├── package.json                  # Конфигурация npm/yarn
└── README.md                     # Документация проекта

---

Установка и настройка

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

• Установленные Docker и Docker Compose (для запуска через Docker).
• Node.js и Yarn (если вы хотите запустить проект локально без Docker).

Шаги

Запуск через Docker:

1. Клонируйте репозиторий:

   git clone https://github.com/username/landing_page_example.git
   cd landing_page_example

2. Постройте и запустите контейнер:

   docker build -t landing_page_example .
   docker run -p 80:80 landing_page_example

3. Откройте сайт в браузере: http://localhost

Локальный запуск:

1. Клонируйте репозиторий:

   git clone https://github.com/username/landing_page_example.git
   cd landing_page_example

2. Установите зависимости:

   yarn install

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

   yarn dev

4. Откройте сайт в браузере: http://localhost:3000

Сборка для production:

yarn build

---

Docker

Сборка и запуск:

docker build -t landing_page_example .
docker run -p 80:80 landing_page_example

Остановка контейнера:

docker stop <container_id>
docker rm <container_id>

---

Вклад в проект

Мы приветствуем ваши предложения и улучшения! Чтобы внести вклад:

1. Создайте форк репозитория.
2. Создайте новую ветку (git checkout -b feature/your-feature).
3. Зафиксируйте изменения (git commit -m 'Добавить функционал').
4. Отправьте изменения в ветку (git push origin feature/your-feature).
5. Откройте pull request.

---

Лицензия

Проект распространяется под лицензией MIT. Подробнее см. LICENSE.

Если у вас возникнут вопросы или проблемы, пожалуйста, создайте issue на GitHub.

---