Global-IT24 Landing Page
Лендинг для компании Global-IT24 - профессиональный монтаж систем видеонаблюдения в Москве.
🌐 Веб-сайт
Production: https://video.mscsrv.ru
📦 Технологии
- Framework: Next.js 14.2.28
- UI: React 18.2, Tailwind CSS
- UI Components: Radix UI, Shadcn/ui, Lucide Icons
- Database: PostgreSQL + Prisma ORM
- Email: Nodemailer (SMTP Mail.ru)
- Notifications: Telegram Bot API
- Deployment: Docker + Traefik
- Language: TypeScript
✨ Возможности
- 🎨 Адаптивный дизайн (Desktop, Tablet, Mobile)
- 📱 Оптимизирован для мобильных устройств
- 📧 Email уведомления о новых заявках
- 💬 Telegram уведомления в реальном времени
- 💾 Сохранение заявок в базу данных PostgreSQL
- 🔒 SSL сертификаты через Let's Encrypt (Traefik)
- 🚀 Оптимизация производительности Next.js
- 🐳 Docker контейнеризация
📋 Структура проекта
global_it24_landing/
├── nextjs_space/ # Next.js приложение
│ ├── app/ # App Router
│ │ ├── api/ # API Routes
│ │ │ └── contact/ # Endpoint для обработки заявок
│ │ ├── layout.tsx # Корневой layout
│ │ └── page.tsx # Главная страница
│ ├── components/ # React компоненты
│ │ ├── ui/ # UI компоненты (Shadcn/ui)
│ │ ├── contact-form.tsx # Форма контакта
│ │ └── ...
│ ├── lib/ # Утилиты и библиотеки
│ │ ├── email.ts # Email уведомления
│ │ ├── telegram.ts # Telegram уведомления
│ │ ├── db.ts # Prisma client
│ │ └── utils.ts # Вспомогательные функции
│ ├── prisma/ # Database schema
│ │ └── schema.prisma # Prisma схема
│ ├── public/ # Статические файлы
│ └── package.json # Зависимости
├── Dockerfile # Docker образ
├── docker-compose.yml # Docker Compose конфигурация
├── traefik-config-example.yml # Traefik конфигурация
├── deploy.sh # Скрипт развертывания
├── update.sh # Скрипт обновления
├── logs.sh # Просмотр логов
├── status.sh # Проверка статуса
├── stop.sh # Остановка контейнера
├── backup.sh # Резервное копирование
├── check-network.sh # Проверка сетевой связности
└── README.deployment.md # Инструкция по развертыванию
🚀 Быстрый старт
Разработка (локально)
# Клонировать репозиторий
git clone https://git.mscsrv.ru/sa/global_it24_landing.git
cd global_it24_landing/nextjs_space
# Установить зависимости
yarn install
# Настроить переменные окружения
cp .env.example .env
nano .env
# Запустить dev сервер
yarn dev
Откройте http://localhost:3000 в браузере.
Production развертывание
Подробная инструкция по развертыванию находится в README.deployment.md
Краткая версия:
# На вашем Ubuntu сервере
cd /path/to/global_it24_landing
# Настроить .env
cp .env.example .env
nano .env
# Запустить развертывание
./deploy.sh
⚙️ Конфигурация
Переменные окружения (.env)
# Database
DATABASE_URL="postgresql://user:password@host:5432/database"
# SMTP Configuration
SMTP_HOST=smtp.mail.ru
SMTP_USER=your-email@mail.ru
SMTP_PASSWORD=your-smtp-password
NOTIFICATION_EMAIL=your-email@mail.ru
# Telegram Bot
TELEGRAM_BOT_TOKEN=your-bot-token
TELEGRAM_CHAT_ID=your-chat-id
# Application
NEXT_PUBLIC_SITE_URL=https://video.mscsrv.ru
NODE_ENV=production
Архитектура развертывания
Internet
↓
[DNS: video.mscsrv.ru] → 192.168.50.59
↓
[Traefik: 192.168.50.59] (SSL, Reverse Proxy)
↓ проксирует на порт 3000
[App Server: Ubuntu Docker Container]
↓
[Next.js App + PostgreSQL]
📧 Система уведомлений
При каждой новой заявке через форму на сайте:
- ✅ Данные сохраняются в базу данных PostgreSQL
- 📧 Отправляется Email уведомление на info@global-it24.ru
- 💬 Отправляется сообщение в Telegram бот
Формат уведомлений:
- Имя клиента
- Телефон (кликабельная ссылка)
- Email (если указан)
- Тип услуги
- Сообщение (если есть)
🛠 Команды управления
# Развертывание
./deploy.sh
# Обновление (рестарт контейнера)
./update.sh
# Просмотр логов
./logs.sh
# Проверка статуса
./status.sh
# Остановка контейнера
./stop.sh
# Резервное копирование
./backup.sh
# Проверка сетевой связности с Traefik
./check-network.sh
🗄 База данных
Schema (Prisma):
model ContactSubmission {
id String @id @default(cuid())
name String
phone String
email String?
serviceType String?
message String?
createdAt DateTime @default(now())
@@map("contact_submissions")
}
Миграции:
cd nextjs_space
yarn prisma migrate dev
yarn prisma generate
📱 Секции лендинга
- Hero - Главный экран с призывом к действию
- Преимущества - Ключевые преимущества компании
- Услуги - Типы систем видеонаблюдения (дома, офисы, промышленность)
- Процесс работы - Этапы установки системы
- Прайс - Ценовые пакеты
- Контакты - Форма обратной связи
- Footer - Контактная информация и соцсети
🔐 Безопасность
- SSL сертификаты через Let's Encrypt (Traefik)
- Security headers (X-Frame-Options, CSP, etc.)
- SMTP пароли и токены в переменных окружения
- .env файл в .gitignore
- Валидация данных форм
- Rate limiting на API endpoints (можно добавить)
📈 Производительность
- Next.js Standalone build для минимального размера образа
- Статическая генерация страниц где возможно
- Оптимизация изображений (Next.js Image)
- Сжатие (Traefik compress middleware)
- CDN ready (статические файлы могут быть вынесены)
🐳 Docker
Сборка:
docker build -t global-it24-landing .
Запуск:
docker compose up -d
Остановка:
docker compose down
📝 Логи
# Docker logs
docker compose logs -f
# Или через скрипт
./logs.sh
# Логи находятся в
.logs/
🔄 Обновление кода
# Остановка текущего контейнера
docker compose down
# Получение обновлений из git
git pull origin master
# Пересборка и запуск
./deploy.sh
📞 Контакты
Global-IT24
- 📱 Телефон: 8(985)489-16-19
- 📧 Email: info@global-it24.ru
- 🌐 Сайт: https://video.mscsrv.ru
- 📍 Москва
📄 Лицензия
Proprietary - Global-IT24 © 2025
🔗 Ссылки
- Документация Next.js
- Документация Prisma
- Документация Traefik
- Документация Docker
- Shadcn/ui Components
👨💻 Разработка
Разработано с использованием:
- Next.js App Router
- TypeScript
- Tailwind CSS
- Docker
- PostgreSQL
Repository: https://git.mscsrv.ru/sa/global_it24_landing
Сделано с ❤️ для Global-IT24