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]

📧 Система уведомлений

При каждой новой заявке через форму на сайте:

1. ✅ Данные сохраняются в базу данных PostgreSQL
2. 📧 Отправляется Email уведомление на info@global-it24.ru
3. 💬 Отправляется сообщение в 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

📱 Секции лендинга

1. Hero - Главный экран с призывом к действию
2. Преимущества - Ключевые преимущества компании
3. Услуги - Типы систем видеонаблюдения (дома, офисы, промышленность)
4. Процесс работы - Этапы установки системы
5. Прайс - Ценовые пакеты
6. Контакты - Форма обратной связи
7. 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