Исправлена валидация формы заказа услуги - поля теперь правильно передаются и проверяются

Исправлена форма заказа услуги для показа QR-кода вместо создания заявки напрямую
Исправлена ошибка создания ServiceRequest - убран несуществующий параметр message и добавлено создание Order
2025-11-26 21:42:09 +09:00 · 2025-11-26 21:30:44 +09:00 · 2025-11-26 21:24:11 +09:00 · 2025-11-26 21:14:24 +09:00 · 2025-11-26 21:07:14 +09:00 · 2025-11-26 21:02:33 +09:00
113 changed files with 17227 additions and 1222 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -134,13 +134,214 @@ steps:

  - name: security-scan
    image: aquasec/trivy:latest
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
    commands:
      - echo "Security scanning Docker image..."
-      - trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress smartsoltech:latest
+      - |
+        if docker image inspect smartsoltech:latest >/dev/null 2>&1; then
+          echo "Image found, starting security scan..."
+          trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress smartsoltech:latest
+        else
+          echo "Image smartsoltech:latest not found, scanning base Python image instead..."
+          trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress python:3.10-slim
+        fi
      - echo "Security scan completed"
    depends_on:
      - docker-compose-tests

+  - name: test-production-connectivity
+    image: alpine:latest
+    environment:
+      PROD_HOST:
+        from_secret: production_host
+    commands:
+      - echo "Testing production server connectivity..."
+      - apk add --no-cache curl netcat-openbsd
+      - |
+        if [ -z "$PROD_HOST" ]; then
+          echo "⚠️ Production host not configured, skipping connectivity test"
+          exit 0
+        fi
+      - echo "Testing SSH connectivity to $PROD_HOST..."
+      - |
+        if nc -z $PROD_HOST 22 2>/dev/null; then
+          echo "✅ SSH port 22 is accessible on $PROD_HOST"
+        else
+          echo "⚠️ SSH port 22 is not accessible, but continuing CI"
+        fi
+      - echo "Testing HTTPS connectivity..."
+      - |
+        if curl -f -s --connect-timeout 10 https://smartsoltech.kr/health/ >/dev/null 2>&1; then
+          echo "✅ Production HTTPS service is accessible"
+        else
+          echo "⚠️ Production HTTPS service check failed, but continuing CI"
+        fi
+      - echo "✅ Production connectivity test completed"
+    depends_on:
+      - security-scan
+    when:
+      branch:
+        - master
+        - main
+
+  - name: deploy-to-staging
+    image: alpine:latest
+    environment:
+      STAGING_HOST:
+        from_secret: staging_host
+      STAGING_USER:
+        from_secret: staging_user
+      STAGING_KEY:
+        from_secret: staging_key
+    commands:
+      - echo "Checking staging environment configuration..."
+      - apk add --no-cache openssh-client git curl netcat-openbsd
+      - |
+        if [ -z "$STAGING_HOST" ] || [ -z "$STAGING_USER" ]; then
+          echo "⚠️ Staging credentials not configured"
+          echo "ℹ️ Skipping staging deployment - this is normal for development CI"
+          echo "✅ Continuing with integration tests on local environment"
+          exit 0
+        fi
+      - echo "Deploying to staging server:" $STAGING_HOST
+      - mkdir -p ~/.ssh
+      - echo "$STAGING_KEY" > ~/.ssh/id_rsa
+      - chmod 600 ~/.ssh/id_rsa
+      - ssh-keyscan -H $STAGING_HOST >> ~/.ssh/known_hosts 2>/dev/null || true
+      - echo "Testing staging server connectivity..."
+      - |
+        if ! nc -z $STAGING_HOST 22 2>/dev/null; then
+          echo "❌ Cannot connect to staging server on port 22"
+          echo "⚠️ Skipping staging deployment due to connectivity issues"
+          exit 0
+        fi
+      - echo "Deploying to staging environment..."
+      - |
+        ssh $STAGING_USER@$STAGING_HOST "cd /opt/smartsoltech-staging && 
+          echo 'Fetching latest changes...' &&
+          git fetch origin && 
+          git reset --hard origin/master && 
+          echo 'Restarting services...' &&
+          docker-compose down --timeout 30 && 
+          docker-compose pull && 
+          docker-compose up -d --build" || {
+            echo "❌ Staging deployment failed"
+            echo "⚠️ Continuing CI pipeline - staging failures are non-critical"
+        }
+      - echo "✅ Staging deployment step completed"
+    depends_on:
+      - test-production-connectivity
+    when:
+      branch:
+        - master
+        - main
+
+  - name: integration-tests
+    image: alpine:latest
+    environment:
+      STAGING_HOST:
+        from_secret: staging_host
+    commands:
+      - echo "Starting comprehensive integration tests..."
+      - apk add --no-cache curl jq netcat-openbsd
+      - |
+        # Определяем target для тестирования
+        if [ -n "$STAGING_HOST" ]; then
+          # Проверяем доступность staging сервера
+          if nc -z -w5 $STAGING_HOST 80 2>/dev/null; then
+            export TEST_TARGET="http://$STAGING_HOST"
+            echo "🎯 Testing staging environment: $TEST_TARGET"
+          else
+            echo "⚠️ Staging server not accessible, falling back to local testing"
+            export TEST_TARGET="http://localhost:8000"
+            echo "🏠 Testing local environment: $TEST_TARGET"
+          fi
+        else
+          export TEST_TARGET="http://localhost:8000"
+          echo "🏠 Testing local environment: $TEST_TARGET"
+        fi
+      - echo "Waiting for services to be ready..."
+      - sleep 30
+      - echo "Running endpoint availability tests..."
+      - |
+        test_endpoint() {
+          local url="$1"
+          local description="$2"
+          echo "Testing $description ($url)..."
+          
+          local status_code=$(curl -L -o /dev/null -s -w "%{http_code}" -m 10 "$url" 2>/dev/null || echo "000")
+          
+          if [ "$status_code" = "200" ]; then
+            echo "✅ $description - OK (HTTP $status_code)"
+            return 0
+          elif [ "$status_code" = "301" ] || [ "$status_code" = "302" ]; then
+            echo "✅ $description - Redirect (HTTP $status_code)"
+            return 0
+          elif [ "$status_code" = "404" ]; then
+            echo "⚠️ $description - Not Found (HTTP $status_code)"
+            return 1
+          elif [ "$status_code" = "000" ]; then
+            echo "❌ $description - Connection Failed"
+            return 1
+          else
+            echo "⚠️ $description - Unexpected status (HTTP $status_code)"
+            return 1
+          fi
+        }
+      - |
+        # Счетчик ошибок
+        errors=0
+        total_tests=0
+        
+        # Основные страницы
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/" "Homepage"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/services/" "Services page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/career/" "Career page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/contact/" "Contact page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/admin/" "Admin panel"; then
+          echo "ℹ️ Admin panel test failed (expected for production)"
+        fi
+        
+        echo ""
+        echo "📊 Integration Test Results:"
+        echo "   Total tests: $total_tests"
+        echo "   Failures: $errors"
+        if [ $total_tests -gt 0 ]; then
+          success_rate=$(( (total_tests - errors) * 100 / total_tests ))
+          echo "   Success rate: ${success_rate}%"
+        fi
+        
+        if [ $errors -gt 2 ]; then
+          echo "❌ Too many critical endpoint failures ($errors)"
+          exit 1
+        elif [ $errors -gt 0 ]; then
+          echo "⚠️ Some tests failed but within acceptable limits"
+        else
+          echo "✅ All integration tests passed successfully"
+        fi
+      - echo "✅ Integration testing phase completed"
+    depends_on:
+      - deploy-to-staging
+
  - name: notify-success
    image: plugins/webhook
    settings:
@@ -164,7 +365,7 @@ steps:
        exclude:
        - '*'
    depends_on:
-      - security-scan
+      - integration-tests

  - name: notify-failure
    image: plugins/webhook
@@ -189,7 +390,7 @@ steps:
        exclude:
        - '*'
    depends_on:
-      - security-scan
+      - integration-tests

 volumes:
  - name: docker-sock
@@ -216,6 +417,36 @@ platform:
  arch: amd64

 steps:
+  - name: check-production-server
+    image: alpine:latest
+    environment:
+      PROD_HOST:
+        from_secret: production_host
+      PROD_USER:
+        from_secret: production_user
+    commands:
+      - echo "Checking production server connectivity..."
+      - apk add --no-cache openssh-client curl netcat-openbsd
+      - |
+        if [ -z "$PROD_HOST" ] || [ -z "$PROD_USER" ]; then
+          echo "❌ Production server credentials not configured"
+          exit 1
+        fi
+      - echo "Testing SSH connectivity to $PROD_HOST..."
+      - |
+        if ! nc -z $PROD_HOST 22; then
+          echo "❌ SSH port 22 is not accessible on $PROD_HOST"
+          exit 1
+        fi
+      - echo "Testing HTTPS connectivity..."
+      - |
+        if curl -f -s --connect-timeout 10 https://smartsoltech.kr >/dev/null; then
+          echo "✅ HTTPS service is accessible"
+        else
+          echo "⚠️ HTTPS service check failed, but continuing deployment"
+        fi
+      - echo "✅ Production server checks passed"
+
  - name: deploy-production
    image: docker:24-dind
    volumes:
@@ -230,13 +461,53 @@ steps:
        from_secret: production_ssh_key
    commands:
      - echo "Deploying to production..."
-      - apk add --no-cache openssh-client git
+      - apk add --no-cache openssh-client git curl
      - mkdir -p ~/.ssh
      - echo "$PROD_KEY" > ~/.ssh/id_rsa
      - chmod 600 ~/.ssh/id_rsa
      - ssh-keyscan -H $PROD_HOST >> ~/.ssh/known_hosts
-      - ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech && git pull origin master && ./bin/update"
-      - echo "Production deployment completed"
+      - echo "Creating backup before deployment..."
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech && 
+          echo 'Creating backup...' &&
+          git stash push -m \"Pre-deployment backup \$(date)\" || true &&
+          docker-compose down --timeout 30 || true"
+      - echo "Pulling latest changes..."
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech &&
+          git fetch origin &&
+          git reset --hard origin/master &&
+          git clean -fd"
+      - echo "Running deployment script..."
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech &&
+          if [ -f ./bin/update ]; then
+            chmod +x ./bin/update &&
+            ./bin/update
+          else
+            echo 'Update script not found, running manual deployment...' &&
+            docker-compose pull &&
+            docker-compose up -d --build
+          fi"
+      - echo "Verifying deployment..."
+      - sleep 30
+      - |
+        for i in 1 2 3; do
+          if curl -f -s --connect-timeout 10 https://smartsoltech.kr >/dev/null; then
+            echo "✅ Deployment verification successful"
+            break
+          else
+            echo "⚠️ Deployment verification attempt $i failed, retrying..."
+            sleep 15
+          fi
+          if [ $i -eq 3 ]; then
+            echo "❌ Deployment verification failed after 3 attempts"
+            exit 1
+          fi
+        done
+      - echo "🎉 Production deployment completed successfully"
+    depends_on:
+      - check-production-server

  - name: notify-production-success
    image: plugins/webhook
@@ -247,7 +518,7 @@ steps:
      template: |
        {
          "chat_id": "${TELEGRAM_CHAT_ID}",
-          "text": "🎉 *SmartSolTech Production*\n\n✅ Production deployment completed!\n\n📝 *Version:* `${DRONE_TAG}`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🌐 [Website](https://smartsoltech.kr)",
+          "text": "🎉 *SmartSolTech Production*\n\n✅ Production deployment completed!\n\n📝 *Commit:* \`${DRONE_COMMIT_SHA:0:8}\`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Branch:* ${DRONE_BRANCH}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🌐 [Website](https://smartsoltech.kr)\n🔧 [Admin](https://smartsoltech.kr/admin/)\n📊 [Status Check](https://smartsoltech.kr/health/)",
          "parse_mode": "Markdown"
        }
    environment:
@@ -265,7 +536,7 @@ steps:
      template: |
        {
          "chat_id": "${TELEGRAM_CHAT_ID}",
-          "text": "🚨 *SmartSolTech Production*\n\n❌ Production deployment failed!\n\n📝 *Version:* `${DRONE_TAG}`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🔗 [Logs](${DRONE_BUILD_LINK})",
+          "text": "🚨 *SmartSolTech Production*\n\n❌ Production deployment failed!\n\n📝 *Commit:* \`${DRONE_COMMIT_SHA:0:8}\`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Branch:* ${DRONE_BRANCH}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n💥 *Step:* ${DRONE_FAILED_STEPS}\n\n🔗 [View Logs](${DRONE_BUILD_LINK})\n🛠 [Rollback Guide](https://smartsoltech.kr/docs/rollback)",
          "parse_mode": "Markdown"
        }
    environment:
--- a/.gitignore
+++ b/.gitignore
@@ -110,6 +110,11 @@ sent_emails/
 # 🌍 Translation files
 *.pot

+# 📋 Temporary files and folders
+temp/
+*.tmp
+*.temp
+
 # 🚫 Exclude test files from root
 response_*.json
 test_*.html
@@ -122,3 +127,8 @@ qr_success_animation_demo.html
 BACKUP_SETUP_COMPLETE.md
 COMMIT_SUMMARY.md
 SCRIPTS_README.md
+
+# 🔧 Utils and scripts (keep tracked but ignore development versions)
+utils/*.log
+scripts/*.log
+backups/*.tmp
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 🚀 SmartSolTech

-[![Build Status](https://drone.smartsoltech.kr/api/badges/smartsoltech/smartsoltech.kr/status.svg)](https://drone.smartsoltech.kr/smartsoltech/smartsoltech.kr)
+[![Build Status](https://drone.smartsoltech.kr/api/badges/trevor/smartsoltech_site/status.svg)](https://drone.smartsoltech.kr/trevor/smartsoltech_site)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Python 3.10](https://img.shields.io/badge/python-3.10-blue.svg)](https://www.python.org/downloads/release/python-3100/)
 [![Django 4.2](https://img.shields.io/badge/django-4.2-green.svg)](https://docs.djangoproject.com/en/4.2/)
@@ -71,7 +71,7 @@ cd smartsoltech.kr
 ### Основные команды

 ```bash
-./cli shell          # Django shell
+.utils/cli shell          # Django shell
 ./cli migrate         # Применить миграции
 ./update             # Полное обновление проекта
 ./stop               # Остановка сервисов
@@ -181,6 +181,35 @@ pip install -r requirements.txt
 ./cli status
 ```

+## 📂 Структура проекта
+
+```
+smartsoltech/
+├── 🐍 smartsoltech/          # Основное Django приложение
+├── 🎨 frontend/              # Статические фронтенд файлы  
+├── 🐳 bin/                   # Скрипты развертывания
+├── 📋 docs/                  # Документация проекта
+├── 🧩 patch/                 # Патчи и исправления
+├── 🛠️ utils/                 # Утилиты и инструменты
+│   ├── start                 # Запуск проекта
+│   ├── stop                  # Остановка сервисов
+│   ├── update                # Обновление проекта
+│   ├── cli                   # CLI интерфейс
+│   ├── logs                  # Просмотр логов
+│   └── drone                 # CI/CD бинарий
+├── 🐍 scripts/               # Вспомогательные скрипты
+│   ├── create_hero_banner.py # Создание баннеров
+│   └── hero_script.py        # Скрипты для баннеров
+├── 💾 backups/               # Резервные копии
+│   ├── .drone.yml.backup     # Бэкап CI конфигурации
+│   └── original_home_modern.html # Оригинал главной страницы
+├── 🗂️ temp/                  # Временные файлы
+├── 🐳 docker-compose.yml     # Docker конфигурация
+├── 🚀 .drone.yml             # CI/CD конфигурация  
+├── 📄 requirements.txt       # Python зависимости
+└── 📖 README.md              # Этот файл
+```
+
 ### Мониторинг

 - **Веб-сайт**: http://localhost:8000
--- a/backups/.drone.yml.backup
+++ b/backups/.drone.yml.backup
--- a/backups/README.md
+++ b/backups/README.md
@@ -0,0 +1,19 @@
+# 💾 Backups
+
+Папка для хранения резервных копий конфигурационных файлов и важных данных.
+
+## Содержимое:
+
+- `.drone.yml.backup` - Резервная копия конфигурации CI/CD
+- `original_home_modern.html` - Оригинальная версия главной страницы
+
+## Правила:
+
+1. Все файлы в этой папке не должны влиять на работу проекта
+2. Файлы служат для восстановления при необходимости
+3. Регулярно очищайте старые файлы
+4. Добавляйте дату к именам файлов при создании бэкапов
+
+## Автоматические бэкапы:
+
+Система CI/CD автоматически создает бэкапы перед деплоем в продакшн.
--- a/backups/original_home_modern.html
+++ b/backups/original_home_modern.html
--- a/bin/setup-docker-compose-compatibility.sh
+++ b/bin/setup-docker-compose-compatibility.sh
@@ -0,0 +1,59 @@
+#!/bin/bash
+
+# Скрипт для настройки совместимости docker-compose с Docker Compose v2
+# Запускать на продакшн сервере с правами sudo
+
+echo "🐳 Setting up docker-compose compatibility..."
+
+# Проверяем, есть ли уже docker-compose
+if command -v docker-compose >/dev/null 2>&1; then
+    echo "✅ docker-compose уже доступен:"
+    docker-compose --version
+    exit 0
+fi
+
+# Проверяем наличие docker compose v2
+if ! docker compose version >/dev/null 2>&1; then
+    echo "❌ Docker Compose v2 не найден. Установите Docker сначала."
+    exit 1
+fi
+
+echo "📦 Docker Compose v2 обнаружен:"
+docker compose version
+
+# Пытаемся найти путь к docker-compose plugin
+COMPOSE_PLUGIN_PATH=""
+for path in "/usr/libexec/docker/cli-plugins/docker-compose" "/usr/local/lib/docker/cli-plugins/docker-compose" "/opt/docker/cli-plugins/docker-compose"; do
+    if [ -f "$path" ]; then
+        COMPOSE_PLUGIN_PATH="$path"
+        break
+    fi
+done
+
+# Если найден plugin, создаем symlink
+if [ -n "$COMPOSE_PLUGIN_PATH" ]; then
+    echo "🔗 Создаем symlink из $COMPOSE_PLUGIN_PATH"
+    sudo ln -sf "$COMPOSE_PLUGIN_PATH" /usr/local/bin/docker-compose
+else
+    # Создаем wrapper скрипт
+    echo "📝 Создаем wrapper скрипт..."
+    sudo tee /usr/local/bin/docker-compose > /dev/null << 'EOF'
+#!/bin/bash
+# Docker Compose v1 compatibility wrapper
+exec docker compose "$@"
+EOF
+fi
+
+# Делаем исполняемым
+sudo chmod +x /usr/local/bin/docker-compose
+
+# Проверяем результат
+if command -v docker-compose >/dev/null 2>&1; then
+    echo "✅ Успешно! docker-compose теперь доступен:"
+    docker-compose --version
+else
+    echo "❌ Что-то пошло не так. Проверьте настройки PATH."
+    exit 1
+fi
+
+echo "🎉 Настройка завершена!"
--- a/create_test_data.py
+++ b/create_test_data.py
@@ -0,0 +1,45 @@
+#!/usr/bin/env python
+import os
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'smartsoltech.settings')
+django.setup()
+
+from web.models import ProjectCategory, Project
+
+# Создаём категорию
+cat, created = ProjectCategory.objects.get_or_create(
+    slug='web-development',
+    defaults={
+        'name': 'Веб-разработка',
+        'description': 'Разработка современных веб-приложений',
+        'icon': 'fas fa-laptop-code',
+        'order': 1,
+        'is_active': True
+    }
+)
+print(f"{'Создана' if created else 'Найдена'} категория: {cat.name}")
+
+# Обновляем первый проект
+project = Project.objects.first()
+if project:
+    project.short_description = 'Корпоративный сайт SmartSolTech с современным дизайном'
+    project.description = '<h2>О проекте</h2><p>Разработка корпоративного сайта с использованием Django и современного дизайна.</p><h3>Особенности</h3><ul><li>Адаптивный дизайн</li><li>Админ-панель</li><li>Интеграция с Telegram</li></ul>'
+    if not project.slug:
+        project.slug = 'smartsoltech-website'
+    project.technologies = 'Python, Django, PostgreSQL, Bootstrap, JavaScript'
+    project.duration = '3 месяца'
+    project.team_size = 4
+    project.is_featured = True
+    project.display_order = 1
+    project.save()
+    project.categories.add(cat)
+    print(f"Обновлён проект: {project.name}")
+    print(f"URL: /project/{project.pk}/")
+else:
+    print("Проектов не найдено")
+
+print("\n=== Статистика ===")
+print(f"Категорий: {ProjectCategory.objects.count()}")
+print(f"Проектов: {Project.objects.count()}")
+print(f"Завершённых проектов: {Project.objects.filter(status='completed').count()}")
--- a/create_test_projects.py
+++ b/create_test_projects.py
@@ -0,0 +1,192 @@
+#!/usr/bin/env python3
+import os
+import sys
+import django
+from datetime import datetime, date
+
+# Настройка Django
+sys.path.append('/app/smartsoltech')
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'smartsoltech.settings')
+django.setup()
+
+from web.models import Project, Category, Client, Service, Order
+from django.contrib.auth.models import User
+
+def create_test_projects():
+    # Создаем или получаем категории
+    categories = []
+    
+    cat_web, _ = Category.objects.get_or_create(
+        slug='web-development',
+        defaults={
+            'name': 'Веб-разработка',
+            'icon': 'fas fa-code', 
+            'order': 1, 
+            'description': 'Создание веб-сайтов и приложений'
+        }
+    )
+    categories.append(cat_web)
+    
+    cat_mobile, _ = Category.objects.get_or_create(
+        slug='mobile-apps',
+        defaults={
+            'name': 'Мобильные приложения',
+            'icon': 'fas fa-mobile-alt', 
+            'order': 2, 
+            'description': 'Разработка iOS и Android приложений'
+        }
+    )
+    categories.append(cat_mobile)
+    
+    cat_design, _ = Category.objects.get_or_create(
+        slug='design',
+        defaults={
+            'name': 'Дизайн',
+            'icon': 'fas fa-palette', 
+            'order': 3, 
+            'description': 'UI/UX дизайн и брендинг'
+        }
+    )
+    categories.append(cat_design)
+    
+    cat_analytics, _ = Category.objects.get_or_create(
+        slug='analytics',
+        defaults={
+            'name': 'Аналитика',
+            'icon': 'fas fa-chart-bar', 
+            'order': 4, 
+            'description': 'Системы аналитики и отчетности'
+        }
+    )
+    categories.append(cat_analytics)
+    
+    cat_ecommerce, _ = Category.objects.get_or_create(
+        slug='ecommerce',
+        defaults={
+            'name': 'E-commerce',
+            'icon': 'fas fa-shopping-cart', 
+            'order': 5, 
+            'description': 'Интернет-магазины и торговые платформы'
+        }
+    )
+    categories.append(cat_ecommerce)
+    
+    # Создаем или получаем тестового клиента
+    client, _ = Client.objects.get_or_create(
+        email='test@example.com',
+        defaults={
+            'first_name': 'Тестовый',
+            'last_name': 'Клиент',
+            'phone_number': '+7-900-000-0000'
+        }
+    )
+    
+    # Создаем или получаем тестовую услугу
+    service, _ = Service.objects.get_or_create(
+        name='Разработка сайта',
+        defaults={
+            'description': 'Профессиональная разработка веб-сайтов',
+            'price': 100000.00,
+            'category': cat_web
+        }
+    )
+    
+    # Тестовые данные проектов
+    test_projects = [
+        {
+            'name': 'Корпоративный портал TechCorp',
+            'short_description': 'Современный корпоративный портал с системой управления документами, интеграцией с CRM и модулем HR.',
+            'description': '<p>Разработан комплексный корпоративный портал для компании TechCorp, включающий в себя систему управления документами, интеграцию с CRM-системой и модуль управления персоналом.</p><p>Основные функции: документооборот, календарь событий, внутренние новости, система заявок, интеграция с почтовыми сервисами.</p>',
+            'technologies': 'Django, PostgreSQL, Redis, Celery, Docker, React.js',
+            'duration': '4 месяца',
+            'team_size': 5,
+            'views_count': 1245,
+            'likes_count': 89,
+            'completion_date': date(2024, 8, 15),
+            'categories': [cat_web, cat_analytics],
+            'is_featured': True
+        },
+        {
+            'name': 'Мобильное приложение FoodDelivery',
+            'short_description': 'Cross-platform приложение для доставки еды с геолокацией, онлайн-платежами и системой рейтингов.',
+            'description': '<p>Создано мобильное приложение для службы доставки еды с поддержкой iOS и Android платформ.</p><p>Функционал включает: поиск ресторанов по геолокации, онлайн-заказы, интеграцию с платежными системами, отслеживание курьера в реальном времени, система рейтингов и отзывов.</p>',
+            'technologies': 'React Native, Node.js, MongoDB, Socket.io, Stripe API',
+            'duration': '6 месяцев',
+            'team_size': 4,
+            'views_count': 892,
+            'likes_count': 156,
+            'completion_date': date(2024, 10, 20),
+            'categories': [cat_mobile, cat_ecommerce],
+            'is_featured': False
+        },
+        {
+            'name': 'Аналитическая панель SmartMetrics',
+            'short_description': 'Интерактивная панель управления с визуализацией данных, машинным обучением и предиктивной аналитикой.',
+            'description': '<p>Разработана комплексная система аналитики для обработки больших данных с возможностями машинного обучения.</p><p>Включает: интерактивные дашборды, автоматизированные отчеты, прогнозирование трендов, интеграция с различными источниками данных, алгоритмы машинного обучения.</p>',
+            'technologies': 'Python, Django, PostgreSQL, Redis, TensorFlow, D3.js, Pandas',
+            'duration': '5 месяцев',
+            'team_size': 6,
+            'views_count': 673,
+            'likes_count': 124,
+            'completion_date': date(2024, 7, 10),
+            'categories': [cat_analytics, cat_web],
+            'is_featured': True
+        },
+        {
+            'name': 'E-commerce платформа ShopMaster',
+            'short_description': 'Полнофункциональная платформа интернет-торговли с многопользовательскими магазинами и системой управления.',
+            'description': '<p>Создана масштабируемая e-commerce платформа, поддерживающая множественные магазины на одной основе.</p><p>Возможности: многопользовательская архитектура, система платежей, управление складом, программы лояльности, мобильная оптимизация, SEO инструменты.</p>',
+            'technologies': 'Laravel, MySQL, Redis, Elasticsearch, Vue.js, Stripe, PayPal',
+            'duration': '8 месяцев',
+            'team_size': 7,
+            'views_count': 1567,
+            'likes_count': 203,
+            'completion_date': date(2024, 11, 5),
+            'categories': [cat_ecommerce, cat_web, cat_mobile],
+            'is_featured': True
+        },
+        {
+            'name': 'Дизайн-система BrandKit',
+            'short_description': 'Комплексная дизайн-система для финтех стартапа с фирменным стилем, UI-компонентами и брендбуком.',
+            'description': '<p>Разработана полная дизайн-система для финтех компании, включающая создание фирменного стиля, UI-компонентов и подробного брендбука.</p><p>Результат: логотип и фирменный стиль, библиотека UI-компонентов, руководство по использованию бренда, адаптация для различных платформ.</p>',
+            'technologies': 'Figma, Adobe Creative Suite, Principle, Sketch, InVision',
+            'duration': '3 месяца',
+            'team_size': 3,
+            'views_count': 445,
+            'likes_count': 78,
+            'completion_date': date(2024, 9, 30),
+            'categories': [cat_design],
+            'is_featured': False
+        }
+    ]
+    
+    print(f"Текущее количество проектов: {Project.objects.count()}")
+    
+    # Создаем проекты
+    for i, project_data in enumerate(test_projects):
+        categories_to_add = project_data.pop('categories')
+        
+        project, created = Project.objects.get_or_create(
+            name=project_data['name'],
+            defaults={
+                **project_data,
+                'client': client,
+                'service': service,
+                'status': 'completed',
+                'display_order': i + 1
+            }
+        )
+        
+        if created:
+            # Добавляем категории
+            project.categories.set(categories_to_add)
+            print(f"✅ Создан проект: {project.name}")
+        else:
+            print(f"⚠️  Проект уже существует: {project.name}")
+    
+    print(f"\nИтого проектов в базе: {Project.objects.count()}")
+    print(f"Завершенных проектов: {Project.objects.filter(status='completed').count()}")
+    print(f"Избранных проектов: {Project.objects.filter(is_featured=True).count()}")
+
+if __name__ == '__main__':
+    create_test_projects()
--- a/frontend/assets/bootstrap/css/bootstrap.min.css
+++ b/frontend/assets/bootstrap/css/bootstrap.min.css
--- a/frontend/assets/css/styles.min.css
+++ b/frontend/assets/css/styles.min.css
--- a/Script-3db770c46931b64b6e281dcb2a7d0586.woff2
+++ b/Script-3db770c46931b64b6e281dcb2a7d0586.woff2
--- a/Script-ba85b3a237ebd28058cd515071c02485.woff2
+++ b/Script-ba85b3a237ebd28058cd515071c02485.woff2
--- a/frontend/assets/fonts/Montserrat-5cfb114945f0457bd5a940932bb8156d.woff2
+++ b/frontend/assets/fonts/Montserrat-5cfb114945f0457bd5a940932bb8156d.woff2
--- a/frontend/assets/fonts/Montserrat-99764e33f03a95926b938c6f56e08a4f.woff2
+++ b/frontend/assets/fonts/Montserrat-99764e33f03a95926b938c6f56e08a4f.woff2
--- a/frontend/assets/fonts/Montserrat-bcb799eba0c324e431d5daac3e5ea6bf.woff2
+++ b/frontend/assets/fonts/Montserrat-bcb799eba0c324e431d5daac3e5ea6bf.woff2
--- a/frontend/assets/fonts/Montserrat-cc6c968bcebf02819ee3afff266119d9.woff2
+++ b/frontend/assets/fonts/Montserrat-cc6c968bcebf02819ee3afff266119d9.woff2
--- a/frontend/assets/fonts/Montserrat-f32ddc894c166fbd8bc0d500ff2aeb3d.woff2
+++ b/frontend/assets/fonts/Montserrat-f32ddc894c166fbd8bc0d500ff2aeb3d.woff2
--- a/frontend/assets/img/about/1.jpg
+++ b/frontend/assets/img/about/1.jpg
--- a/frontend/assets/img/about/2.jpg
+++ b/frontend/assets/img/about/2.jpg
--- a/frontend/assets/img/about/3.jpg
+++ b/frontend/assets/img/about/3.jpg
--- a/frontend/assets/img/about/4.jpg
+++ b/frontend/assets/img/about/4.jpg
--- a/frontend/assets/img/clients/creative-market.jpg
+++ b/frontend/assets/img/clients/creative-market.jpg
--- a/frontend/assets/img/clients/designmodo.jpg
+++ b/frontend/assets/img/clients/designmodo.jpg
--- a/frontend/assets/img/clients/envato.jpg
+++ b/frontend/assets/img/clients/envato.jpg
--- a/frontend/assets/img/clients/themeforest.jpg
+++ b/frontend/assets/img/clients/themeforest.jpg
--- a/frontend/assets/img/header-bg.jpg
+++ b/frontend/assets/img/header-bg.jpg
--- a/frontend/assets/img/map-image.png
+++ b/frontend/assets/img/map-image.png
--- a/frontend/assets/img/photo_2024-10-06_10-06-08.jpg
+++ b/frontend/assets/img/photo_2024-10-06_10-06-08.jpg
--- a/frontend/assets/img/photo_2024-10-06_10-06-15.jpg
+++ b/frontend/assets/img/photo_2024-10-06_10-06-15.jpg
--- a/frontend/assets/img/photo_2024-10-06_10-06-18.jpg
+++ b/frontend/assets/img/photo_2024-10-06_10-06-18.jpg
--- a/frontend/assets/img/portfolio/1-full.jpg
+++ b/frontend/assets/img/portfolio/1-full.jpg
--- a/frontend/assets/img/portfolio/1-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/1-thumbnail.jpg
--- a/frontend/assets/img/portfolio/2-full.jpg
+++ b/frontend/assets/img/portfolio/2-full.jpg
--- a/frontend/assets/img/portfolio/2-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/2-thumbnail.jpg
--- a/frontend/assets/img/portfolio/3-full.jpg
+++ b/frontend/assets/img/portfolio/3-full.jpg
--- a/frontend/assets/img/portfolio/3-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/3-thumbnail.jpg
--- a/frontend/assets/img/portfolio/4-full.jpg
+++ b/frontend/assets/img/portfolio/4-full.jpg
--- a/frontend/assets/img/portfolio/4-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/4-thumbnail.jpg
--- a/frontend/assets/img/portfolio/5-full.jpg
+++ b/frontend/assets/img/portfolio/5-full.jpg
--- a/frontend/assets/img/portfolio/5-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/5-thumbnail.jpg
--- a/frontend/assets/img/portfolio/6-full.jpg
+++ b/frontend/assets/img/portfolio/6-full.jpg
--- a/frontend/assets/img/portfolio/6-thumbnail.jpg
+++ b/frontend/assets/img/portfolio/6-thumbnail.jpg
--- a/frontend/assets/img/team/1.jpg
+++ b/frontend/assets/img/team/1.jpg
--- a/frontend/assets/img/team/2.jpg
+++ b/frontend/assets/img/team/2.jpg
--- a/frontend/assets/img/team/3.jpg
+++ b/frontend/assets/img/team/3.jpg
--- a/frontend/assets/js/script.min.js
+++ b/frontend/assets/js/script.min.js
@@ -1 +0,0 @@
-!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r);var d=document.querySelectorAll(".portfolio-modal");for(var s of d)s.addEventListener("shown.bs.modal",(function(o){e.classList.add("d-none")})),s.addEventListener("hidden.bs.modal",(function(o){e.classList.remove("d-none")}))}}();
--- a/frontend/footer.html
+++ b/frontend/footer.html
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Home - Brand</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54">
-    <!-- Start: footer -->
-    <footer class="text-light bg-dark pt-5 pb-4">
-        <div class="container text-md-left">
-            <div class="row text-md-left">
-                <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Company Name</h5>
-                    <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                </div>
-                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Products</h5>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 1</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 2</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 3</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 4</a></p>
-                </div>
-                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Useful Links</h5>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Your Account</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Become an Affiliate</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Shipping Rates</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Help</a></p>
-                </div>
-                <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Contact</h5>
-                    <p><i class="fas fa-home mr-3"></i> 123 Street, City, State</p>
-                    <p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
-                    <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
-                    <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
-                </div>
-            </div>
-            <hr class="mb-4">
-            <div class="row align-items-center">
-                <div class="col-md-7 col-lg-8">
-                    <p class="text-md-left">© 2024 Company Name. All rights reserved.</p>
-                </div>
-                <div class="col-md-5 col-lg-4">
-                    <div class="text-md-right">
-                        <ul class="list-unstyled list-inline">
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-facebook"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-twitter"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-google-plus"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-linkedin-in"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </footer><!-- End: footer -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>
--- a/frontend/header.html
+++ b/frontend/header.html
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Home - Brand</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54">
-    <!-- Start: Navbar Right Links (Dark) -->
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navcol-5">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav><!-- End: Navbar Right Links (Dark) -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>
--- a/frontend/manifest.json
+++ b/frontend/manifest.json
@@ -1 +0,0 @@
-{"short_name":"sst","name":"smartsoltech","icons":[{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"},{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"}],"start_url":"smartsoltech.kr","display":"fullscreen"}
--- a/frontend/services.html
+++ b/frontend/services.html
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="ru">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>SmartSoltech</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body>
-    <!-- Start: Articles Cards -->
-    <div class="container py-4 py-xl-5">
-        <div class="row mb-5">
-            <div class="col-md-8 col-xl-6 text-center mx-auto">
-                <h2>Heading</h2>
-                <p class="w-lg-50">Curae hendrerit donec commodo hendrerit egestas tempus, turpis facilisis nostra nunc. Vestibulum dui eget ultrices.</p>
-            </div>
-        </div>
-        <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3">
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div><!-- End: Articles Cards -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>
--- a/preview.html
+++ b/preview.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Проект Django E-commerce - Предварительный просмотр</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+    <link rel="stylesheet" href="smartsoltech/static/assets/css/modern-styles.css">
+    <link rel="stylesheet" href="smartsoltech/static/assets/css/compact-gallery.css">"
+    <style>
+        .main-content {
+            padding-top: 2rem;
+            padding-bottom: 3rem;
+        }
+        .content-wrapper {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="main-content">
+        <div class="content-wrapper">
+            
+            <!-- Компактная медиа-галерея -->
+            <div class="compact-media-gallery">
+                <div class="row g-3">
+                    <!-- Основное изображение -->
+                    <div class="col-lg-8">
+                        <div class="main-media-display">
+                            <div class="main-media-item" id="main-media">
+                                <a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта">
+                                    <img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" alt="Главное изображение" class="main-media-img">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Сетка превью -->
+                    <div class="col-lg-4">
+                        <div class="media-thumbnails-grid">
+                            <div class="thumbnail-item active" data-index="0">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение', 'image', 'Главное изображение проекта')">
+                                    <img src="https://via.placeholder.com/200x200/4f46e5/ffffff?text=Превью+1" alt="Превью 1" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="1">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1', 'image', 'Скриншот интерфейса')">
+                                    <img src="https://via.placeholder.com/200x200/7c3aed/ffffff?text=Превью+2" alt="Превью 2" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1" data-lightbox="project-gallery" data-title="Скриншот интерфейса" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="2">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2', 'image', 'Мобильная версия')">
+                                    <img src="https://via.placeholder.com/200x200/f59e0b/ffffff?text=Превью+3" alt="Превью 3" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2" data-lightbox="project-gallery" data-title="Мобильная версия" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="3">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель', 'image', 'Административная панель')">
+                                    <img src="https://via.placeholder.com/200x200/10b981/ffffff?text=Превью+4" alt="Превью 4" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель" data-lightbox="project-gallery" data-title="Административная панель" style="display: none;"></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Основной контент - двухколоночная структура -->
+            <div class="row">
+                
+                <!-- Левая колонка - описание проекта -->
+                <div class="col-lg-8">
+                    <div class="project-content">
+                        <h2 class="mb-4">Описание проекта</h2>
+                        <div class="description-text">
+                            <p>Этот проект представляет собой <strong>современное веб-приложение</strong> электронной коммерции, разработанное с использованием Django и современных технологий фронтенда.</p>
+                            
+                            <h3>Ключевые особенности</h3>
+                            <ul>
+                                <li><em>Адаптивный дизайн</em>, оптимизированный для всех устройств</li>
+                                <li>Интеграция с <a href="#">популярными платежными системами</a></li>
+                                <li>Многоуровневая система категорий товаров</li>
+                                <li>Расширенная система поиска и фильтрации</li>
+                                <li>Административная панель для управления контентом</li>
+                            </ul>
+                            
+                            <blockquote>
+                                Проект демонстрирует современные подходы к веб-разработке, включая использование микросервисной архитектуры, контейнеризации и непрерывной интеграции.
+                            </blockquote>
+                            
+                            <h4>Технические детали</h4>
+                            <p>Для обеспечения высокой производительности использовались следующие решения:</p>
+                            
+                            <ol>
+                                <li><code>Redis</code> для кеширования данных</li>
+                                <li><code>PostgreSQL</code> как основная база данных</li>
+                                <li><code>Docker</code> для контейнеризации</li>
+                            </ol>
+                            
+                            <hr>
+                            
+                            <p><strong>Результат:</strong> Платформа способна обрабатывать <em>более 10,000 одновременных пользователей</em> с временем отклика менее 200ms.</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Правая колонка - технологии -->
+                <div class="col-lg-4">
+                    <div class="tech-sidebar-section">
+                        <h3 class="tech-sidebar-title">Технологии</h3>
+                        <div class="technologies-html-content">
+                            <p><code>Python</code> <code>Django</code> <code>PostgreSQL</code></p>
+                            <p><code>JavaScript</code> <code>HTML5</code> <code>CSS3</code></p>
+                            <p><code>Docker</code> <code>Redis</code> <code>Bootstrap</code></p>
+                            <p><strong>Дополнительно:</strong> <code>Bash</code> <code>SQLite3</code></p>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            
+            <!-- Дополнительная секция -->
+            <div class="row mt-5">
+                <div class="col-12">
+                    <div class="additional-info p-4 rounded-4" style="background: #f8fafc; border: 1px solid #e2e8f0;">
+                        <h3 class="mb-3">Результаты проекта</h3>
+                        <div class="row g-4">
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">150%</div>
+                                <div class="stat-label">Рост продаж</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">2.5x</div>
+                                <div class="stat-label">Быстрее загрузка</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">95%</div>
+                                <div class="stat-label">Доступность</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">100%</div>
+                                <div class="stat-label">Адаптивность</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Карусель похожих проектов -->
+            <div class="similar-projects-section">
+                <div class="container">
+                    <h2 class="section-title">Похожие проекты</h2>
+                    <div class="similar-projects-carousel">
+                        <div class="swiper similarSwiper">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/4f46e5/ffffff?text=Проект+1" alt="Проект 1">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">E-commerce платформа</h4>
+                                            <p class="project-description">Современная платформа для онлайн-торговли с интеграцией платежных систем</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Web</span>
+                                                <span class="category-tag">Django</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/7c3aed/ffffff?text=Проект+2" alt="Проект 2">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">CRM система</h4>
+                                            <p class="project-description">Система управления клиентскими отношениями с аналитикой</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">CRM</span>
+                                                <span class="category-tag">Analytics</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/f59e0b/ffffff?text=Проект+3" alt="Проект 3">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">Мобильное приложение</h4>
+                                            <p class="project-description">iOS и Android приложение для управления задачами</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Mobile</span>
+                                                <span class="category-tag">React Native</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <div class="image-placeholder">
+                                                <div class="placeholder-content">
+                                                    <i class="fas fa-image placeholder-icon"></i>
+                                                    <div class="placeholder-text">Проект без изображения</div>
+                                                </div>
+                                            </div>
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">Analytics Dashboard</h4>
+                                            <p class="project-description">Интерактивная панель аналитики с визуализацией данных</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Analytics</span>
+                                                <span class="category-tag">D3.js</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-button-next similar-next"></div>
+                            <div class="swiper-button-prev similar-prev"></div>
+                            <div class="swiper-pagination similar-pagination"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+    <script>
+        // Функция переключения основного медиа
+        function switchMainMedia(url, type, caption, poster = '') {
+            const mainMediaContainer = document.getElementById('main-media');
+            if (!mainMediaContainer) return;
+            
+            // Очищаем контейнер
+            mainMediaContainer.innerHTML = '';
+            
+            if (type === 'image') {
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('data-lightbox', 'project-gallery');
+                link.setAttribute('data-title', caption);
+                
+                const img = document.createElement('img');
+                img.src = url;
+                img.alt = caption;
+                img.className = 'main-media-img';
+                
+                link.appendChild(img);
+                mainMediaContainer.appendChild(link);
+            } else if (type === 'video') {
+                const video = document.createElement('video');
+                video.controls = true;
+                video.className = 'main-media-video';
+                if (poster) {
+                    video.poster = poster;
+                }
+                
+                const source = document.createElement('source');
+                source.src = url;
+                source.type = 'video/mp4';
+                
+                video.appendChild(source);
+                video.appendChild(document.createTextNode('Ваш браузер не поддерживает видео.'));
+                
+                mainMediaContainer.appendChild(video);
+            }
+            
+            // Обновляем активный thumbnail
+            document.querySelectorAll('.thumbnail-item').forEach(item => item.classList.remove('active'));
+            event.target.closest('.thumbnail-item').classList.add('active');
+        }
+
+        // Инициализация Swiper для карусели
+        const swiper = new Swiper('.similarSwiper', {
+            effect: 'coverflow',
+            grabCursor: true,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            spaceBetween: 40,
+            loop: true,
+            coverflowEffect: {
+                rotate: 15,
+                stretch: 0,
+                depth: 200,
+                modifier: 1.5,
+                slideShadows: true,
+            },
+            navigation: {
+                nextEl: '.similar-next',
+                prevEl: '.similar-prev',
+            },
+            pagination: {
+                el: '.similar-pagination',
+                clickable: true,
+            },
+            breakpoints: {
+                768: {
+                    slidesPerView: 2,
+                    spaceBetween: 20,
+                },
+                1024: {
+                    slidesPerView: 3,
+                    spaceBetween: 30,
+                }
+            }
+        });
+    </script>
+</body>
+</html>
--- a/requirements.txt
+++ b/requirements.txt
@@ -22,3 +22,6 @@ coverage==7.3.2
 pytest==7.4.3
 pytest-django==4.7.0
 pytest-cov==4.1.0
+django-tinymce==4.1.0
+Pillow==10.4.0
+django-tinymce==4.1.0
--- a/reset_database.sql
+++ b/reset_database.sql
@@ -0,0 +1,73 @@
+-- Скрипт для полной очистки базы данных smartsoltech_db
+-- ВНИМАНИЕ: Этот скрипт удалит ВСЕ данные из базы данных!
+
+-- Отключаем проверку внешних ключей
+SET session_replication_role = replica;
+
+-- Удаляем все таблицы Django приложений
+DROP TABLE IF EXISTS django_migrations CASCADE;
+DROP TABLE IF EXISTS django_content_type CASCADE;
+DROP TABLE IF EXISTS auth_permission CASCADE;
+DROP TABLE IF EXISTS auth_group CASCADE;
+DROP TABLE IF EXISTS auth_group_permissions CASCADE;
+DROP TABLE IF EXISTS auth_user CASCADE;
+DROP TABLE IF EXISTS auth_user_groups CASCADE;
+DROP TABLE IF EXISTS auth_user_user_permissions CASCADE;
+DROP TABLE IF EXISTS django_admin_log CASCADE;
+DROP TABLE IF EXISTS django_session CASCADE;
+
+-- Удаляем таблицы приложения web
+DROP TABLE IF EXISTS web_herobanner CASCADE;
+DROP TABLE IF EXISTS web_category CASCADE;
+DROP TABLE IF EXISTS web_service CASCADE;
+DROP TABLE IF EXISTS web_client CASCADE;
+DROP TABLE IF EXISTS web_order CASCADE;
+DROP TABLE IF EXISTS web_project CASCADE;
+DROP TABLE IF EXISTS web_project_categories CASCADE;
+DROP TABLE IF EXISTS web_projectmedia CASCADE;
+DROP TABLE IF EXISTS web_portfolioitem CASCADE;
+DROP TABLE IF EXISTS web_portfolioitem_categories CASCADE;
+DROP TABLE IF EXISTS web_portfoliocategory CASCADE;
+DROP TABLE IF EXISTS web_portfoliomedia CASCADE;
+DROP TABLE IF EXISTS web_review CASCADE;
+DROP TABLE IF EXISTS web_blogpost CASCADE;
+DROP TABLE IF EXISTS web_servicerequest CASCADE;
+DROP TABLE IF EXISTS web_contactinfo CASCADE;
+DROP TABLE IF EXISTS web_team CASCADE;
+DROP TABLE IF EXISTS web_career CASCADE;
+DROP TABLE IF EXISTS web_newspost CASCADE;
+
+-- Удаляем таблицы приложения comunication
+DROP TABLE IF EXISTS comunication_usercommunication CASCADE;
+DROP TABLE IF EXISTS comunication_emailsettings CASCADE;
+DROP TABLE IF EXISTS comunication_telegramsettings CASCADE;
+
+-- Удаляем все последовательности (sequences)
+DROP SEQUENCE IF EXISTS web_herobanner_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_category_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_service_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_client_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_order_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_project_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_project_categories_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_projectmedia_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfolioitem_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfolioitem_categories_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfoliocategory_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfoliomedia_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_review_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_blogpost_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_servicerequest_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_contactinfo_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_team_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_career_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_newspost_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_usercommunication_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_emailsettings_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_telegramsettings_id_seq CASCADE;
+
+-- Включаем обратно проверку внешних ключей
+SET session_replication_role = DEFAULT;
+
+-- Выводим сообщение о завершении
+SELECT 'База данных успешно очищена!' as status;
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -0,0 +1,23 @@
+# 🐍 Scripts
+
+Папка содержит вспомогательные скрипты для проекта SmartSolTech.
+
+## Файлы:
+
+- `create_hero_banner.py` - Скрипт для создания героических баннеров
+- `hero_script.py` - Дополнительный скрипт для работы с баннерами
+
+## Использование:
+
+Запуск скриптов должен производиться из корневой директории проекта:
+
+```bash
+cd smartsoltech/
+python ../scripts/create_hero_banner.py
+```
+
+или через Django management команды из папки smartsoltech/:
+
+```bash
+python manage.py shell < ../scripts/script_name.py
+```
--- a/scripts/create_hero_banner.py
+++ b/scripts/create_hero_banner.py
--- a/scripts/hero_script.py
+++ b/scripts/hero_script.py
--- a/smartsoltech/smartsoltech/settings.py
+++ b/smartsoltech/smartsoltech/settings.py
@@ -60,6 +60,7 @@ INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+    'tinymce',
    'web',
    'comunication'
 ]
@@ -158,6 +159,36 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # Папка для соб
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

+# TinyMCE Configuration
+TINYMCE_DEFAULT_CONFIG = {
+    'height': 500,
+    'width': '100%',
+    'cleanup_on_startup': True,
+    'custom_undo_redo_levels': 20,
+    'selector': 'textarea',
+    'theme': 'silver',
+    'plugins': '''
+        textcolor save link image media preview codesample contextmenu
+        table code lists fullscreen insertdatetime nonbreaking
+        contextmenu directionality searchreplace wordcount visualblocks
+        visualchars code fullscreen autolink lists charmap print hr
+        anchor pagebreak
+    ''',
+    'toolbar1': '''
+        fullscreen preview bold italic underline | fontselect,
+        fontsizeselect | forecolor backcolor | alignleft alignright |
+        aligncenter alignjustify | indent outdent | bullist numlist table |
+        | link image media | codesample |
+    ''',
+    'toolbar2': '''
+        visualblocks visualchars |
+        charmap hr pagebreak nonbreaking anchor | code |
+    ''',
+    'contextmenu': 'formats | link image',
+    'menubar': True,
+    'statusbar': True,
+}
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field

--- a/smartsoltech/smartsoltech/urls.py
+++ b/smartsoltech/smartsoltech/urls.py
@@ -1,8 +1,16 @@
 # smartsoltech/urls.py
 from django.contrib import admin
 from django.urls import path, include
+from django.conf import settings
+from django.conf.urls.static import static

 urlpatterns = [
    path('admin/', admin.site.urls),
+    path('tinymce/', include('tinymce.urls')),
    path('', include('web.urls')),  # Включаем маршруты приложения web
 ]
+
+# Serve media files in development
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
--- a/smartsoltech/static/assets/css/compact-gallery.css
+++ b/smartsoltech/static/assets/css/compact-gallery.css
@@ -0,0 +1,589 @@
+/* Современная медиа-галерея */
+.modern-media-gallery {
+    background: white;
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
+    border: 1px solid #f1f5f9;
+    margin-bottom: 3rem;
+}
+
+/* Основное медиа */
+.main-media-container {
+    position: relative;
+    aspect-ratio: 16/10;
+    overflow: hidden;
+    background: #f8fafc;
+}
+
+.main-media-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.main-media-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.main-media-item.active {
+    opacity: 1;
+}
+
+.main-media-img,
+.main-media-video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.embed-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.main-media-embed {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Overlay с информацией */
+.media-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+    padding: 2rem;
+    color: white;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+}
+
+.main-media-item:hover .media-overlay {
+    opacity: 1;
+}
+
+.media-info {
+    flex: 1;
+}
+
+.media-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.media-meta {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.media-action-btn {
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.2);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-left: 1rem;
+}
+
+.media-action-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+/* Навигационные кнопки */
+.media-nav-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.9);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border: none;
+    border-radius: 50%;
+    color: #4f46e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.main-media-wrapper:hover .media-nav-btn {
+    opacity: 1;
+}
+
+.prev-btn {
+    left: 20px;
+}
+
+.next-btn {
+    right: 20px;
+}
+
+.media-nav-btn:hover {
+    background: white;
+    transform: translateY(-50%) scale(1.1);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* Миниатюры */
+.thumbnails-container {
+    padding: 1.5rem;
+    background: #fafbfc;
+    border-top: 1px solid #f1f5f9;
+}
+
+.thumbnails-wrapper {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 8px;
+}
+
+/* Для Firefox */
+.thumbnails-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: #cbd5e0 transparent;
+}
+
+/* Для Webkit браузеров */
+.thumbnails-wrapper::-webkit-scrollbar {
+    height: 6px;
+}
+
+.thumbnails-wrapper::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.thumbnails-wrapper::-webkit-scrollbar-thumb {
+    background: #cbd5e0;
+    border-radius: 3px;
+}
+
+.thumbnail-item {
+    position: relative;
+    width: 80px;
+    height: 60px;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+    border: 2px solid transparent;
+}
+
+.thumbnail-item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.thumbnail-item.active {
+    border-color: #4f46e5;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.thumbnail-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.video-thumbnail-placeholder,
+.embed-thumbnail-placeholder {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+}
+
+.media-type-badge {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    color: white;
+}
+
+.media-type-badge.video {
+    background: #ef4444;
+}
+
+.media-type-badge.embed {
+    background: #06b6d4;
+}
+
+.thumbnail-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.thumbnail-item:hover .thumbnail-overlay {
+    opacity: 1;
+}
+
+.thumbnail-number {
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+/* Индикатор прогресса */
+.gallery-progress {
+    height: 4px;
+    background: #f1f5f9;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
+    transition: width 0.4s ease;
+    border-radius: 2px;
+}
+
+/* Placeholder для проектов без изображений */
+.project-placeholder-image {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    text-align: center;
+}
+
+.project-placeholder-image i {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+.project-placeholder-image p {
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin: 0;
+    opacity: 0.7;
+}
+
+/* Адаптивность */
+@media (max-width: 1024px) {
+    .main-media-container {
+        aspect-ratio: 16/9;
+    }
+    
+    .media-overlay {
+        padding: 1.5rem;
+    }
+    
+    .thumbnails-container {
+        padding: 1rem;
+    }
+    
+    .thumbnail-item {
+        width: 70px;
+        height: 52px;
+    }
+}
+
+@media (max-width: 768px) {
+    .modern-media-gallery {
+        border-radius: 16px;
+        margin-bottom: 2rem;
+    }
+    
+    .media-overlay {
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.7);
+        opacity: 1;
+    }
+    
+    .media-nav-btn {
+        opacity: 1;
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
+    
+    .prev-btn {
+        left: 12px;
+    }
+    
+    .next-btn {
+        right: 12px;
+    }
+    
+    .thumbnails-container {
+        padding: 0.75rem;
+    }
+    
+    .thumbnail-item {
+        width: 60px;
+        height: 45px;
+    }
+    
+    .media-action-btn {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
+}
+
+/* HTML-контент в описании проекта */
+.description-text h1,
+.description-text h2,
+.description-text h3,
+.description-text h4,
+.description-text h5,
+.description-text h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    color: #1a202c;
+}
+
+.description-text h1 { font-size: 2rem; }
+.description-text h2 { font-size: 1.75rem; }
+.description-text h3 { font-size: 1.5rem; }
+.description-text h4 { font-size: 1.25rem; }
+.description-text h5 { font-size: 1.1rem; }
+.description-text h6 { font-size: 1rem; }
+
+.description-text p {
+    margin-bottom: 1.2rem;
+    line-height: 1.8;
+}
+
+.description-text ul,
+.description-text ol {
+    margin: 1.5rem 0;
+    padding-left: 2rem;
+}
+
+.description-text li {
+    margin-bottom: 0.5rem;
+    line-height: 1.7;
+}
+
+.description-text blockquote {
+    border-left: 4px solid #4f46e5;
+    padding-left: 1.5rem;
+    margin: 2rem 0;
+    font-style: italic;
+    background: #f8fafc;
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.description-text code {
+    background: #f1f5f9;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.9em;
+    color: #e53e3e;
+}
+
+.description-text pre {
+    background: #1a202c;
+    color: #fff;
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+}
+
+.description-text pre code {
+    background: none;
+    color: inherit;
+    padding: 0;
+}
+
+.description-text a {
+    color: #4f46e5;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.3s ease;
+}
+
+.description-text a:hover {
+    border-bottom-color: #4f46e5;
+}
+
+.description-text strong,
+.description-text b {
+    font-weight: 600;
+    color: #1a202c;
+}
+
+.description-text em,
+.description-text i {
+    font-style: italic;
+}
+
+.description-text img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.description-text hr {
+    border: none;
+    height: 2px;
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    margin: 3rem 0;
+    border-radius: 1px;
+}
+
+.description-text table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 2rem 0;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.description-text th,
+.description-text td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.description-text th {
+    background: #f8fafc;
+    font-weight: 600;
+    color: #1a202c;
+}
+
+/* HTML-контент в технологиях */
+.technologies-html-content {
+    line-height: 1.6;
+}
+
+.technologies-html-content p {
+    margin-bottom: 1rem;
+}
+
+.technologies-html-content code {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.9rem;
+    font-weight: 500;
+    display: inline-block;
+    margin: 0.25rem 0;
+    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
+    transition: all 0.3s ease;
+}
+
+.technologies-html-content code:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.technologies-html-content p code {
+    margin: 0.2rem;
+    white-space: nowrap;
+}
+
+.technologies-html-content h1,
+.technologies-html-content h2,
+.technologies-html-content h3,
+.technologies-html-content h4,
+.technologies-html-content h5,
+.technologies-html-content h6 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    color: #1a202c;
+}
+
+.technologies-html-content ul,
+.technologies-html-content ol {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+}
+
+.technologies-html-content li {
+    margin-bottom: 0.4rem;
+}
+
+.technologies-html-content strong,
+.technologies-html-content b {
+    font-weight: 600;
+    color: #1a202c;
+}
+
+.technologies-html-content em,
+.technologies-html-content i {
+    font-style: italic;
+}
+
+.technologies-html-content a {
+    color: #4f46e5;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.3s ease;
+}
+
+.technologies-html-content a:hover {
+    border-bottom-color: #4f46e5;
+}
--- a/smartsoltech/static/assets/css/modern-styles.css
+++ b/smartsoltech/static/assets/css/modern-styles.css
--- a/smartsoltech/static/assets/js/modern-scripts.js
+++ b/smartsoltech/static/assets/js/modern-scripts.js
@@ -21,46 +21,6 @@ document.addEventListener('DOMContentLoaded', function() {
        console.log('SmartSolTech: Loading screen not found');
    }
    
-    // Theme Toggle Functionality
-    const themeToggle = document.getElementById('theme-toggle');
-    const html = document.documentElement;
-    
-    if (themeToggle) {
-        // Check for saved theme preference
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        html.setAttribute('data-theme', currentTheme);
-        updateThemeIcon(currentTheme);
-        
-        themeToggle.addEventListener('click', function() {
-            const currentTheme = html.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            
-            html.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            updateThemeIcon(newTheme);
-            
-            // Add animation
-            this.style.transform = 'scale(0.8)';
-            setTimeout(() => {
-                this.style.transform = 'scale(1)';
-            }, 150);
-        });
-    }
-    
-    function updateThemeIcon(theme) {
-        if (!themeToggle) return;
-        const icon = themeToggle.querySelector('i');
-        if (icon) {
-            if (theme === 'dark') {
-                icon.className = 'fas fa-sun';
-                themeToggle.setAttribute('aria-label', 'Переключить на светлую тему');
-            } else {
-                icon.className = 'fas fa-moon';
-                themeToggle.setAttribute('aria-label', 'Переключить на темную тему');
-            }
-        }
-    }
-    
    // Navbar scroll behavior
    const navbar = document.querySelector('.navbar-modern');
    if (navbar) {
--- a/smartsoltech/static/assets/js/project-detail.js
+++ b/smartsoltech/static/assets/js/project-detail.js
@@ -0,0 +1,227 @@
+// Modern Project Detail Page Enhancements
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // Animate counter numbers
+    function animateCounters() {
+        const counters = document.querySelectorAll('.stat-number[data-target]');
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const counter = entry.target;
+                    const target = parseInt(counter.dataset.target);
+                    const duration = 2000; // 2 seconds
+                    const step = target / (duration / 16); // 60fps
+                    let current = 0;
+                    
+                    const timer = setInterval(() => {
+                        current += step;
+                        counter.textContent = Math.floor(current);
+                        
+                        if (current >= target) {
+                            counter.textContent = target;
+                            clearInterval(timer);
+                        }
+                    }, 16);
+                    
+                    observer.unobserve(counter);
+                }
+            });
+        }, {
+            threshold: 0.5
+        });
+        
+        counters.forEach(counter => observer.observe(counter));
+    }
+    
+    // Scroll-triggered animations
+    function initScrollAnimations() {
+        const animatedElements = document.querySelectorAll('.content-section, .tech-item, .info-item');
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry, index) => {
+                if (entry.isIntersecting) {
+                    setTimeout(() => {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }, index * 100);
+                }
+            });
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        });
+        
+        animatedElements.forEach(el => {
+            el.style.opacity = '0';
+            el.style.transform = 'translateY(30px)';
+            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+            observer.observe(el);
+        });
+    }
+    
+    // Share functionality
+    function initShareButton() {
+        const shareBtn = document.querySelector('.share-btn');
+        if (shareBtn) {
+            shareBtn.addEventListener('click', async function() {
+                const projectTitle = document.querySelector('.hero-title').textContent;
+                const url = window.location.href;
+                
+                if (navigator.share) {
+                    try {
+                        await navigator.share({
+                            title: projectTitle,
+                            text: `Посмотрите на этот проект: ${projectTitle}`,
+                            url: url
+                        });
+                    } catch (err) {
+                        console.log('Sharing failed:', err);
+                        fallbackShare(url);
+                    }
+                } else {
+                    fallbackShare(url);
+                }
+            });
+        }
+    }
+    
+    function fallbackShare(url) {
+        // Copy to clipboard as fallback
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(url).then(() => {
+                showToast('Ссылка скопирована в буфер обмена!');
+            });
+        }
+    }
+    
+    function showToast(message) {
+        // Create toast notification
+        const toast = document.createElement('div');
+        toast.className = 'toast-notification';
+        toast.textContent = message;
+        toast.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #48bb78, #38a169);
+            color: white;
+            padding: 1rem 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            z-index: 10000;
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+        `;
+        
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.style.transform = 'translateX(0)';
+        }, 100);
+        
+        setTimeout(() => {
+            toast.style.transform = 'translateX(400px)';
+            setTimeout(() => document.body.removeChild(toast), 300);
+        }, 3000);
+    }
+    
+    // Tech item hover effects
+    function initTechInteractions() {
+        const techItems = document.querySelectorAll('.tech-item');
+        
+        techItems.forEach(item => {
+            item.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-8px) scale(1.02)';
+            });
+            
+            item.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(-5px) scale(1)';
+            });
+        });
+    }
+    
+    // Parallax effect for hero background
+    function initParallaxEffect() {
+        const heroBackground = document.querySelector('.hero-pattern');
+        if (!heroBackground) return;
+        
+        let ticking = false;
+        
+        function updateParallax() {
+            const scrolled = window.pageYOffset;
+            const rate = scrolled * -0.3;
+            
+            heroBackground.style.transform = `translateY(${rate}px)`;
+            ticking = false;
+        }
+        
+        function requestTick() {
+            if (!ticking) {
+                requestAnimationFrame(updateParallax);
+                ticking = true;
+            }
+        }
+        
+        window.addEventListener('scroll', requestTick);
+    }
+    
+    // Smooth scroll for internal links
+    function initSmoothScroll() {
+        const links = document.querySelectorAll('a[href^="#"]');
+        
+        links.forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                const targetSection = document.querySelector(targetId);
+                
+                if (targetSection) {
+                    targetSection.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
+    
+    // Initialize all enhancements
+    animateCounters();
+    initScrollAnimations();
+    initShareButton();
+    initTechInteractions();
+    initParallaxEffect();
+    initSmoothScroll();
+    
+    // Add loading class removal after page load
+    window.addEventListener('load', function() {
+        document.body.classList.add('page-loaded');
+    });
+});
+
+// CSS for page loading animation
+const loadingStyles = `
+    body:not(.page-loaded) .project-hero {
+        opacity: 0;
+        transform: translateY(50px);
+        transition: opacity 0.8s ease, transform 0.8s ease;
+    }
+    
+    body.page-loaded .project-hero {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    
+    .toast-notification {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 0.9rem;
+        font-weight: 500;
+    }
+`;
+
+// Inject loading styles
+const styleSheet = document.createElement('style');
+styleSheet.textContent = loadingStyles;
+document.head.appendChild(styleSheet);
--- a/smartsoltech/static/img/лого
+++ b/smartsoltech/static/img/лого
--- a/smartsoltech/staticfiles/assets/css/modern-styles.css
+++ b/smartsoltech/staticfiles/assets/css/modern-styles.css
--- a/smartsoltech/staticfiles/assets/js/modern-scripts.js
+++ b/smartsoltech/staticfiles/assets/js/modern-scripts.js
@@ -1,109 +1,45 @@
 // Modern Scripts for SmartSolTech Website
 document.addEventListener('DOMContentLoaded', function() {
+    console.log('SmartSolTech: DOM loaded, initializing...');
    
    // Hide loading screen
    const loadingScreen = document.getElementById('loading-screen');
    if (loadingScreen) {
+        console.log('SmartSolTech: Loading screen found, hiding...');
        setTimeout(() => {
            loadingScreen.style.opacity = '0';
+            loadingScreen.style.pointerEvents = 'none';
            setTimeout(() => {
-                loadingScreen.style.display = 'none';
+                // Полностью удаляем элемент из DOM
+                if (loadingScreen.parentNode) {
+                    loadingScreen.parentNode.removeChild(loadingScreen);
+                    console.log('SmartSolTech: Loading screen completely removed from DOM');
+                }
            }, 300);
-        }, 1000);
-    }
-    
-    // Theme Toggle Functionality
-    const themeToggle = document.getElementById('theme-toggle');
-    const html = document.documentElement;
-    
-    // Check for saved theme preference
-    const currentTheme = localStorage.getItem('theme') || 'light';
-    html.setAttribute('data-theme', currentTheme);
-    updateThemeIcon(currentTheme);
-    
-    themeToggle.addEventListener('click', function() {
-        const currentTheme = html.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
-        html.setAttribute('data-theme', newTheme);
-        localStorage.setItem('theme', newTheme);
-        updateThemeIcon(newTheme);
-        
-        // Add animation
-        this.style.transform = 'scale(0.8)';
-        setTimeout(() => {
-            this.style.transform = 'scale(1)';
-        }, 150);
-    });
-    
-    function updateThemeIcon(theme) {
-        const icon = themeToggle.querySelector('i');
-        if (theme === 'dark') {
-            icon.className = 'fas fa-sun';
-            themeToggle.setAttribute('aria-label', 'Переключить на светлую тему');
+        }, 200); // Уменьшили время ожидания до 200ms
    } else {
-            icon.className = 'fas fa-moon';
-            themeToggle.setAttribute('aria-label', 'Переключить на темную тему');
-        }
+        console.log('SmartSolTech: Loading screen not found');
    }
    
    // Navbar scroll behavior
    const navbar = document.querySelector('.navbar-modern');
-    let lastScrollTop = 0;
-    
+    if (navbar) {
        window.addEventListener('scroll', function() {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        
-        // Add/remove scrolled class
-        if (scrollTop > 50) {
+            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
-        
-        // Hide/show navbar on scroll
-        if (scrollTop > lastScrollTop && scrollTop > 100) {
-            navbar.style.transform = 'translateY(-100%)';
-        } else {
-            navbar.style.transform = 'translateY(0)';
+        });
    }
    
-        lastScrollTop = scrollTop;
-    });
-    
-    // Scroll to top button
-    const scrollToTopBtn = document.getElementById('scroll-to-top');
-    
-    window.addEventListener('scroll', function() {
-        if (window.pageYOffset > 300) {
-            scrollToTopBtn.style.display = 'block';
-            scrollToTopBtn.style.opacity = '1';
-        } else {
-            scrollToTopBtn.style.opacity = '0';
-            setTimeout(() => {
-                if (window.pageYOffset <= 300) {
-                    scrollToTopBtn.style.display = 'none';
-                }
-            }, 300);
-        }
-    });
-    
-    scrollToTopBtn.addEventListener('click', function() {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-    });
-    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
-                const offsetTop = target.offsetTop - 80; // Account for fixed navbar
-                window.scrollTo({
-                    top: offsetTop,
+                e.preventDefault();
+                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
@@ -116,211 +52,19 @@ document.addEventListener('DOMContentLoaded', function() {
        rootMargin: '0px 0px -50px 0px'
    };
    
-    const observer = new IntersectionObserver(function(entries) {
+    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-fade-in-up');
-                // Add stagger delay for child elements
-                const children = entry.target.querySelectorAll('.service-card, .feature-list > *, .step-card');
-                children.forEach((child, index) => {
-                    setTimeout(() => {
-                        child.classList.add('animate-fade-in-up');
-                    }, index * 100);
-                });
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
-    // Observe elements for animation
-    document.querySelectorAll('.service-card, .card-modern, .step-card').forEach(el => {
-        observer.observe(el);
+    // Observe cards and service items
+    document.querySelectorAll('.card-modern, .service-card, .step-card').forEach(card => {
+        observer.observe(card);
    });
    
-    // Form enhancements
-    const forms = document.querySelectorAll('form');
-    forms.forEach(form => {
-        form.addEventListener('submit', function(e) {
-            const submitBtn = form.querySelector('button[type="submit"]');
-            if (submitBtn) {
-                const originalContent = submitBtn.innerHTML;
-                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Отправляем...';
-                submitBtn.disabled = true;
-                
-                // Re-enable after 3 seconds (in case of slow response)
-                setTimeout(() => {
-                    submitBtn.innerHTML = originalContent;
-                    submitBtn.disabled = false;
-                }, 3000);
-            }
+    console.log('SmartSolTech: All scripts loaded successfully');
 });
-    });
-    
-    // Parallax effect for hero section
-    window.addEventListener('scroll', function() {
-        const scrolled = window.pageYOffset;
-        const parallaxElements = document.querySelectorAll('.animate-float');
-        
-        parallaxElements.forEach(element => {
-            const speed = 0.5;
-            element.style.transform = `translateY(${scrolled * speed}px)`;
-        });
-    });
-    
-    // Service cards hover effect
-    document.querySelectorAll('.service-card').forEach(card => {
-        card.addEventListener('mouseenter', function() {
-            this.style.transform = 'translateY(-10px) scale(1.02)';
-        });
-        
-        card.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0) scale(1)';
-        });
-    });
-    
-    // Card modern hover effects
-    document.querySelectorAll('.card-modern').forEach(card => {
-        card.addEventListener('mouseenter', function() {
-            this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
-        });
-        
-        card.addEventListener('mouseleave', function() {
-            this.style.boxShadow = 'var(--shadow)';
-        });
-    });
-    
-    // Add loading animation to buttons
-    document.querySelectorAll('.btn-primary-modern, .btn-secondary-modern').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            // Create ripple effect
-            const ripple = document.createElement('span');
-            const rect = this.getBoundingClientRect();
-            const size = Math.max(rect.width, rect.height);
-            const x = e.clientX - rect.left - size / 2;
-            const y = e.clientY - rect.top - size / 2;
-            
-            ripple.style.cssText = `
-                position: absolute;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.4);
-                transform: scale(0);
-                animation: ripple 0.6s linear;
-                width: ${size}px;
-                height: ${size}px;
-                left: ${x}px;
-                top: ${y}px;
-            `;
-            
-            this.style.position = 'relative';
-            this.style.overflow = 'hidden';
-            this.appendChild(ripple);
-            
-            setTimeout(() => {
-                ripple.remove();
-            }, 600);
-        });
-    });
-    
-    // Typing animation for hero text (optional)
-    const typingText = document.querySelector('.typing-text');
-    if (typingText) {
-        const text = typingText.textContent;
-        typingText.textContent = '';
-        let i = 0;
-        
-        function typeWriter() {
-            if (i < text.length) {
-                typingText.textContent += text.charAt(i);
-                i++;
-                setTimeout(typeWriter, 100);
-            }
-        }
-        
-        setTimeout(typeWriter, 1000);
-    }
-    
-    // Mobile menu enhancements
-    const navbarToggler = document.querySelector('.navbar-toggler');
-    const navbarCollapse = document.querySelector('.navbar-collapse');
-    
-    if (navbarToggler && navbarCollapse) {
-        navbarToggler.addEventListener('click', function() {
-            const isExpanded = this.getAttribute('aria-expanded') === 'true';
-            
-            // Animate the toggler icon
-            this.style.transform = 'rotate(180deg)';
-            setTimeout(() => {
-                this.style.transform = 'rotate(0deg)';
-            }, 300);
-        });
-        
-        // Close menu when clicking on a link
-        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
-            link.addEventListener('click', () => {
-                const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
-                    hide: true
-                });
-            });
-        });
-    }
-    
-    // Newsletter form
-    const newsletterForm = document.querySelector('footer form');
-    if (newsletterForm) {
-        newsletterForm.addEventListener('submit', function(e) {
-            e.preventDefault();
-            const email = this.querySelector('input[type="email"]').value;
-            
-            if (email) {
-                // Show success message
-                const button = this.querySelector('button');
-                const originalContent = button.innerHTML;
-                button.innerHTML = '<i class="fas fa-check"></i>';
-                button.style.background = '#10b981';
-                
-                setTimeout(() => {
-                    button.innerHTML = originalContent;
-                    button.style.background = '';
-                    this.reset();
-                }, 2000);
-            }
-        });
-    }
-});
-
-// Add CSS for ripple animation
-const style = document.createElement('style');
-style.textContent = `
-    @keyframes ripple {
-        to {
-            transform: scale(2);
-            opacity: 0;
-        }
-    }
-    
-    .animate-fade-in-up {
-        opacity: 1 !important;
-        transform: translateY(0) !important;
-    }
-    
-    /* Smooth transitions */
-    .navbar-modern {
-        transition: transform 0.3s ease, background-color 0.3s ease;
-    }
-    
-    .service-card, .card-modern {
-        opacity: 0;
-        transform: translateY(30px);
-        transition: all 0.6s ease;
-    }
-    
-    .step-card {
-        opacity: 0;
-        transform: translateX(-30px);
-        transition: all 0.6s ease;
-    }
-    
-    .step-card:nth-child(even) {
-        transform: translateX(30px);
-    }
-`;
-document.head.appendChild(style);
--- a/smartsoltech/staticfiles/img/logo.svg
+++ b/smartsoltech/staticfiles/img/logo.svg
--- a/smartsoltech/staticfiles/manifest.json
+++ b/smartsoltech/staticfiles/manifest.json
@@ -3,12 +3,12 @@
    "name": "Smartsoltech",
    "icons": [
      {
-        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "src": "/static/img/logo.jpg",
        "type": "image/jpeg",
        "sizes": "1011x702"
      },
      {
-        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "src": "/static/img/logo.jpg",
        "type": "image/jpeg",
        "sizes": "1011x702"
      }
--- a/smartsoltech/web/admin.py
+++ b/smartsoltech/web/admin.py
@@ -1,7 +1,19 @@
 from django.contrib import admin
-from .models import Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, HeroBanner
+from .models import (
+    Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, 
+    HeroBanner, ContactInfo, Team, Career,
+    ProjectMedia
+)
 from .forms import ProjectForm

+@admin.register(ContactInfo)
+class ContactInfoAdmin(admin.ModelAdmin):
+    list_display = ('company_name', 'email', 'phone', 'is_active')
+    list_filter = ('is_active',)
+    search_fields = ('company_name', 'email', 'phone')
+    fields = ('company_name', 'email', 'phone', 'telegram', 'address', 'working_hours', 
+              'description', 'call_to_action', 'subtitle', 'is_active')
+
@admin.register(HeroBanner)
 class HeroBannerAdmin(admin.ModelAdmin):
    list_display = ('title', 'is_active', 'order', 'created_at')
@@ -22,20 +34,6 @@ class ServiceAdmin(admin.ModelAdmin):
    has_video.boolean = True
    has_video.short_description = 'Есть видео'

-@admin.register(Project)
-class ProjectAdmin(admin.ModelAdmin):
-    form = ProjectForm
-    list_display = ('name', 'client','service', 'status', 'order', 'has_video')
-    list_filter = ('name', 'client','service', 'status', 'order')
-    search_fields = ('name', 'client','service', 'status', 'order', 'client__first_name', 'client__last_name')
-    fields = ('name', 'description', 'completion_date', 'client', 'service', 'order', 
-              'category', 'image', 'video', 'video_poster', 'status')
-    
-    def has_video(self, obj):
-        return bool(obj.video)
-    has_video.boolean = True
-    has_video.short_description = 'Есть видео'
-
@admin.register(Client)
 class ClientAdmin(admin.ModelAdmin):
    list_display = ('first_name', 'last_name', 'email', 'phone_number')
@@ -72,11 +70,224 @@ class BlogPostAdmin(admin.ModelAdmin):
    
@admin.register(Category)
 class CategoryAdmin(admin.ModelAdmin):
-    list_display = ('name','description')
-    search_fields = ('name',)
+    list_display = ('name', 'slug', 'order', 'is_active', 'services_count', 'projects_count')
+    list_filter = ('is_active',)
+    search_fields = ('name', 'description')
+    prepopulated_fields = {'slug': ('name',)}
+    list_editable = ('order', 'is_active')
+    ordering = ('order', 'name')
+    fieldsets = (
+        ('Основная информация', {
+            'fields': ('name', 'slug', 'description', 'icon')
+        }),
+        ('Настройки отображения', {
+            'fields': ('order', 'is_active')
+        }),
+    )
+    
+    def services_count(self, obj):
+        return obj.services.count()
+    services_count.short_description = 'Услуг'
+    
+    def projects_count(self, obj):
+        return obj.projects.count()
+    projects_count.short_description = 'Проектов'
    
@admin.register(ServiceRequest)
 class ServiceRequestAdmin(admin.ModelAdmin):
    list_display = ('service','token', 'client', 'created_at')
    search_fields = ('service','token', 'client')
    list_filter = ('service','token','client')
+
+
+@admin.register(Team)
+class TeamAdmin(admin.ModelAdmin):
+    list_display = ('first_name', 'last_name', 'position', 'department', 'is_active', 'display_order')
+    list_filter = ('department', 'is_active', 'show_on_about')
+    search_fields = ('first_name', 'last_name', 'position', 'skills')
+    list_editable = ('display_order', 'is_active')
+    
+    fieldsets = (
+        ('Основная информация', {
+            'fields': ('first_name', 'last_name', 'position', 'department')
+        }),
+        ('Контактные данные', {
+            'fields': ('email', 'phone', 'photo'),
+            'classes': ('collapse',)
+        }),
+        ('Профессиональная информация', {
+            'fields': ('bio', 'skills', 'experience_years')
+        }),
+        ('Социальные сети', {
+            'fields': ('linkedin', 'github', 'telegram'),
+            'classes': ('collapse',)
+        }),
+        ('Настройки отображения', {
+            'fields': ('is_active', 'show_on_about', 'display_order')
+        }),
+    )
+    
+    def get_queryset(self, request):
+        return super().get_queryset(request).order_by('display_order', 'last_name')
+
+
+@admin.register(Career)
+class CareerAdmin(admin.ModelAdmin):
+    list_display = ('title', 'department', 'experience_level', 'employment_type', 'status', 'is_featured', 'created_at')
+    list_filter = ('status', 'employment_type', 'experience_level', 'department', 'is_featured')
+    search_fields = ('title', 'department', 'description', 'required_skills')
+    list_editable = ('status', 'is_featured')
+    
+    fieldsets = (
+        ('Основная информация', {
+            'fields': ('title', 'department', 'location', 'employment_type', 'experience_level')
+        }),
+        ('Описание вакансии', {
+            'fields': ('description', 'responsibilities', 'requirements', 'benefits')
+        }),
+        ('Зарплата', {
+            'fields': ('salary_min', 'salary_max', 'salary_currency'),
+            'classes': ('collapse',)
+        }),
+        ('Навыки', {
+            'fields': ('required_skills', 'preferred_skills'),
+        }),
+        ('Контактная информация', {
+            'fields': ('contact_email', 'contact_person'),
+            'classes': ('collapse',)
+        }),
+        ('Статус и метаданные', {
+            'fields': ('status', 'is_featured', 'application_deadline', 'published_at')
+        }),
+    )
+    
+    readonly_fields = ('created_at', 'updated_at')
+    
+    def get_queryset(self, request):
+        return super().get_queryset(request).order_by('-is_featured', '-created_at')
+    
+    def save_model(self, request, obj, form, change):
+        if obj.status == 'active' and not obj.published_at:
+            from django.utils import timezone
+            obj.published_at = timezone.now()
+        super().save_model(request, obj, form, change)
+    
+    actions = ['mark_as_active', 'mark_as_paused', 'mark_as_closed']
+    
+    def mark_as_active(self, request, queryset):
+        from django.utils import timezone
+        updated = queryset.update(status='active')
+        queryset.filter(published_at__isnull=True).update(published_at=timezone.now())
+        self.message_user(request, f'{updated} вакансий отмечены как активные.')
+    mark_as_active.short_description = "Отметить как активные"
+    
+    def mark_as_paused(self, request, queryset):
+        updated = queryset.update(status='paused')
+        self.message_user(request, f'{updated} вакансий приостановлены.')
+    mark_as_paused.short_description = "Приостановить"
+    
+    def mark_as_closed(self, request, queryset):
+        updated = queryset.update(status='closed')
+        self.message_user(request, f'{updated} вакансий закрыты.')
+    mark_as_closed.short_description = "Закрыть"
+
+
+# ============================================
+# ПРОЕКТЫ - АДМИНКИ
+# ============================================
+
+class ProjectMediaInline(admin.TabularInline):
+    """Inline для медиа-файлов проекта"""
+    model = ProjectMedia
+    extra = 1
+    fields = ('media_type', 'image', 'video', 'video_poster', 'embed_code', 'caption', 'order')
+    ordering = ('order',)
+
+
+@admin.register(Project)
+class ProjectAdmin(admin.ModelAdmin):
+    """Админка для проектов"""
+    list_display = ('name', 'status', 'is_featured', 'display_order', 'categories_display', 
+                   'views_count', 'likes_count', 'media_count', 'completion_date')
+    list_filter = ('status', 'is_featured', 'categories', 'completion_date')
+    search_fields = ('name', 'description', 'client__first_name', 'client__last_name', 'technologies')
+    filter_horizontal = ('categories',)
+    list_editable = ('is_featured', 'display_order', 'status')
+    ordering = ('-is_featured', '-display_order', '-completion_date')
+    date_hierarchy = 'completion_date'
+    
+    inlines = [ProjectMediaInline]
+    
+    fieldsets = (
+        ('📋 Основная информация', {
+            'fields': ('name', 'categories', 'status', 'is_featured', 'display_order')
+        }),
+        ('📝 Описание', {
+            'fields': ('short_description', 'description', 'image')
+        }),
+        ('🏢 Детали проекта', {
+            'fields': ('client', 'service', 'order', 'category', 'project_url', 'github_url', 
+                      'technologies', 'duration', 'team_size', 'completion_date')
+        }),
+        ('🎬 Видео', {
+            'fields': ('video', 'video_poster'),
+            'classes': ('collapse',)
+        }),
+        ('🔍 SEO', {
+            'fields': ('meta_title', 'meta_description', 'meta_keywords'),
+            'classes': ('collapse',)
+        }),
+        ('📊 Статистика', {
+            'fields': ('views_count', 'likes_count'),
+            'classes': ('collapse',)
+        }),
+    )
+    
+    readonly_fields = ('views_count', 'likes_count')
+    
+    def categories_display(self, obj):
+        return ', '.join([cat.name for cat in obj.categories.all()[:3]])
+    categories_display.short_description = 'Категории'
+    
+    def media_count(self, obj):
+        return obj.media_files.count()
+    media_count.short_description = 'Медиа'
+    
+    actions = ['mark_as_completed', 'mark_as_featured']
+    
+    def mark_as_completed(self, request, queryset):
+        updated = queryset.update(status='completed')
+        self.message_user(request, f'{updated} проектов отмечены как завершённые.')
+    mark_as_completed.short_description = "Отметить как завершённые"
+    
+    def mark_as_featured(self, request, queryset):
+        updated = queryset.update(is_featured=True)
+        self.message_user(request, f'{updated} проектов отмечены как избранные.')
+    mark_as_featured.short_description = "Отметить как избранные"
+
+
+@admin.register(ProjectMedia)
+class ProjectMediaAdmin(admin.ModelAdmin):
+    """Админка для медиа-файлов проектов"""
+    list_display = ('id', 'project', 'media_type', 'caption', 'order', 'uploaded_at')
+    list_filter = ('media_type', 'uploaded_at')
+    search_fields = ('project__name', 'caption', 'alt_text')
+    list_editable = ('order',)
+    ordering = ('project', 'order', '-uploaded_at')
+    
+    fieldsets = (
+        ('Проект', {
+            'fields': ('project', 'media_type', 'order')
+        }),
+        ('Изображение', {
+            'fields': ('image', 'alt_text'),
+            'classes': ('collapse',)
+        }),
+        ('Видео', {
+            'fields': ('video', 'video_poster', 'embed_code'),
+            'classes': ('collapse',)
+        }),
+        ('Описание', {
+            'fields': ('caption',)
+        }),
+    )
--- a/smartsoltech/web/migrations/0012_contactinfo.py
+++ b/smartsoltech/web/migrations/0012_contactinfo.py
@@ -0,0 +1,33 @@
+# Generated by Django 5.1.1 on 2025-11-25 06:19
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0011_add_video_fields'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ContactInfo',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('company_name', models.CharField(default='SmartSolTech', max_length=200, verbose_name='Название компании')),
+                ('email', models.EmailField(default='info@smartsoltech.kr', max_length=254, verbose_name='Email')),
+                ('phone', models.CharField(default='+82-10-5693-6103', max_length=20, verbose_name='Телефон')),
+                ('telegram', models.CharField(default='@smartsoltech', max_length=100, verbose_name='Telegram')),
+                ('address', models.TextField(default='Чолланамдо, Кванджу', verbose_name='Адрес')),
+                ('working_hours', models.CharField(default='Пн-Пт 9:00-18:00', max_length=100, verbose_name='Часы работы')),
+                ('description', models.TextField(default='Мы - команда профессионалов в сфере IT-решений', verbose_name='Описание')),
+                ('call_to_action', models.CharField(default='Начнем сотрудничество?', max_length=200, verbose_name='Призыв к действию')),
+                ('subtitle', models.CharField(default='Свяжитесь с нами для обсуждения вашего проекта', max_length=200, verbose_name='Подзаголовок')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активно')),
+            ],
+            options={
+                'verbose_name': 'Контактная информация',
+                'verbose_name_plural': 'Контактная информация',
+            },
+        ),
+    ]
--- a/smartsoltech/web/migrations/0013_career_team.py
+++ b/smartsoltech/web/migrations/0013_career_team.py
@@ -0,0 +1,75 @@
+# Generated by Django 5.1.1 on 2025-11-25 06:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0012_contactinfo'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Career',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200, verbose_name='Название вакансии')),
+                ('department', models.CharField(max_length=100, verbose_name='Отдел')),
+                ('location', models.CharField(default='Кванджу, Южная Корея', max_length=200, verbose_name='Местоположение')),
+                ('employment_type', models.CharField(choices=[('full_time', 'Полная занятость'), ('part_time', 'Частичная занятость'), ('contract', 'Контракт'), ('internship', 'Стажировка'), ('remote', 'Удаленная работа'), ('freelance', 'Фриланс')], default='full_time', max_length=20, verbose_name='Тип занятости')),
+                ('experience_level', models.CharField(choices=[('junior', 'Junior (0-1 год)'), ('middle', 'Middle (2-4 года)'), ('senior', 'Senior (5+ лет)'), ('lead', 'Team Lead'), ('intern', 'Стажер')], default='middle', max_length=20, verbose_name='Уровень опыта')),
+                ('description', models.TextField(verbose_name='Описание вакансии')),
+                ('responsibilities', models.TextField(verbose_name='Обязанности')),
+                ('requirements', models.TextField(verbose_name='Требования')),
+                ('benefits', models.TextField(blank=True, verbose_name='Преимущества и условия')),
+                ('salary_min', models.PositiveIntegerField(blank=True, null=True, verbose_name='Зарплата от (₩)')),
+                ('salary_max', models.PositiveIntegerField(blank=True, null=True, verbose_name='Зарплата до (₩)')),
+                ('salary_currency', models.CharField(default='KRW', max_length=10, verbose_name='Валюта')),
+                ('required_skills', models.TextField(help_text='Разделите навыки запятыми', verbose_name='Обязательные навыки')),
+                ('preferred_skills', models.TextField(blank=True, help_text='Разделите навыки запятыми', verbose_name='Желательные навыки')),
+                ('status', models.CharField(choices=[('active', 'Активная'), ('paused', 'Приостановлена'), ('closed', 'Закрыта'), ('draft', 'Черновик')], default='active', max_length=20, verbose_name='Статус')),
+                ('is_featured', models.BooleanField(default=False, verbose_name='Рекомендуемая вакансия')),
+                ('application_deadline', models.DateField(blank=True, null=True, verbose_name='Дедлайн подачи заявок')),
+                ('contact_email', models.EmailField(default='hr@smartsoltech.kr', max_length=254, verbose_name='Email для связи')),
+                ('contact_person', models.CharField(blank=True, max_length=200, verbose_name='Контактное лицо')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('published_at', models.DateTimeField(blank=True, null=True, verbose_name='Дата публикации')),
+            ],
+            options={
+                'verbose_name': 'Вакансия',
+                'verbose_name_plural': 'Карьера',
+                'ordering': ['-is_featured', '-published_at', '-created_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Team',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('first_name', models.CharField(max_length=100, verbose_name='Имя')),
+                ('last_name', models.CharField(max_length=100, verbose_name='Фамилия')),
+                ('position', models.CharField(max_length=200, verbose_name='Должность')),
+                ('department', models.CharField(blank=True, max_length=100, verbose_name='Отдел')),
+                ('bio', models.TextField(blank=True, verbose_name='Биография/Описание')),
+                ('photo', models.ImageField(blank=True, null=True, upload_to='static/img/team/', verbose_name='Фотография')),
+                ('email', models.EmailField(blank=True, max_length=254, verbose_name='Email')),
+                ('phone', models.CharField(blank=True, max_length=20, verbose_name='Телефон')),
+                ('linkedin', models.URLField(blank=True, verbose_name='LinkedIn')),
+                ('github', models.URLField(blank=True, verbose_name='GitHub')),
+                ('telegram', models.CharField(blank=True, max_length=100, verbose_name='Telegram')),
+                ('skills', models.TextField(blank=True, help_text='Разделите навыки запятыми', verbose_name='Навыки')),
+                ('experience_years', models.PositiveIntegerField(default=0, verbose_name='Лет опыта')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активен')),
+                ('display_order', models.PositiveIntegerField(default=0, verbose_name='Порядок отображения')),
+                ('show_on_about', models.BooleanField(default=True, verbose_name='Показывать на странице О нас')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+            ],
+            options={
+                'verbose_name': 'Сотрудник',
+                'verbose_name_plural': 'Команда',
+                'ordering': ['display_order', 'last_name', 'first_name'],
+            },
+        ),
+    ]
--- a/smartsoltech/web/migrations/0014_portfoliocategory_alter_blogpost_content_newspost_and_more.py
+++ b/smartsoltech/web/migrations/0014_portfoliocategory_alter_blogpost_content_newspost_and_more.py
@@ -0,0 +1,116 @@
+# Generated by Django 5.1.1 on 2025-11-25 23:21
+
+# Modified to remove ckeditor dependency
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0013_career_team'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='PortfolioCategory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Название')),
+                ('slug', models.SlugField(max_length=100, unique=True, verbose_name='URL')),
+                ('description', models.TextField(blank=True, verbose_name='Описание')),
+                ('icon', models.CharField(blank=True, help_text='Класс иконки (например: fa-code)', max_length=50, verbose_name='Иконка')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активна')),
+            ],
+            options={
+                'verbose_name': 'Категория портфолио',
+                'verbose_name_plural': 'Категории портфолио',
+                'ordering': ['order', 'name'],
+            },
+        ),
+        migrations.AlterField(
+            model_name='blogpost',
+            name='content',
+            field=models.TextField(verbose_name='Содержание'),
+        ),
+        migrations.CreateModel(
+            name='NewsPost',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200, verbose_name='Заголовок')),
+                ('slug', models.SlugField(max_length=200, unique=True, verbose_name='URL')),
+                ('excerpt', models.TextField(max_length=300, verbose_name='Краткое описание')),
+                ('content', models.TextField(verbose_name='Содержание')),
+                ('featured_image', models.ImageField(upload_to='news/', verbose_name='Главное изображение')),
+                ('tags', models.CharField(blank=True, help_text='Разделите запятыми', max_length=200, verbose_name='Теги')),
+                ('is_published', models.BooleanField(default=False, verbose_name='Опубликовано')),
+                ('is_featured', models.BooleanField(default=False, verbose_name='Избранная новость')),
+                ('views_count', models.PositiveIntegerField(default=0, verbose_name='Просмотры')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('published_at', models.DateTimeField(blank=True, null=True, verbose_name='Дата публикации')),
+                ('category', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='web.category', verbose_name='Категория')),
+            ],
+            options={
+                'verbose_name': 'Новость',
+                'verbose_name_plural': 'Новости',
+                'ordering': ['-published_at', '-created_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='PortfolioItem',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200, verbose_name='Название проекта')),
+                ('slug', models.SlugField(max_length=200, unique=True, verbose_name='URL')),
+                ('short_description', models.TextField(max_length=300, verbose_name='Краткое описание')),
+                ('description', models.TextField(blank=True, verbose_name='Полное описание')),
+                ('thumbnail', models.ImageField(upload_to='portfolio/thumbnails/', verbose_name='Превью изображение')),
+                ('client', models.CharField(blank=True, max_length=200, verbose_name='Клиент')),
+                ('project_url', models.URLField(blank=True, verbose_name='Ссылка на проект')),
+                ('github_url', models.URLField(blank=True, verbose_name='GitHub репозиторий')),
+                ('technologies', models.TextField(help_text='Разделите запятыми', verbose_name='Технологии')),
+                ('duration', models.CharField(blank=True, max_length=100, verbose_name='Длительность')),
+                ('team_size', models.PositiveIntegerField(blank=True, null=True, verbose_name='Размер команды')),
+                ('status', models.CharField(choices=[('draft', 'Черновик'), ('published', 'Опубликовано'), ('featured', 'Избранное')], default='draft', max_length=20, verbose_name='Статус')),
+                ('completion_date', models.DateField(blank=True, null=True, verbose_name='Дата завершения')),
+                ('meta_title', models.CharField(blank=True, max_length=200, verbose_name='SEO заголовок')),
+                ('meta_description', models.TextField(blank=True, max_length=300, verbose_name='SEO описание')),
+                ('views_count', models.PositiveIntegerField(default=0, verbose_name='Просмотры')),
+                ('likes_count', models.PositiveIntegerField(default=0, verbose_name='Лайки')),
+                ('is_featured', models.BooleanField(default=False, verbose_name='Избранный проект')),
+                ('display_order', models.PositiveIntegerField(default=0, verbose_name='Порядок отображения')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('published_at', models.DateTimeField(blank=True, null=True, verbose_name='Дата публикации')),
+                ('categories', models.ManyToManyField(related_name='portfolio_items', to='web.portfoliocategory', verbose_name='Категории')),
+            ],
+            options={
+                'verbose_name': 'Проект портфолио',
+                'verbose_name_plural': 'Портфолио',
+                'ordering': ['-is_featured', '-display_order', '-published_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='PortfolioMedia',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('media_type', models.CharField(choices=[('image', 'Изображение'), ('video', 'Видео'), ('embed', 'Встроенное видео (YouTube, Vimeo)')], default='image', max_length=10, verbose_name='Тип медиа')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='portfolio/gallery/', verbose_name='Изображение')),
+                ('video', models.FileField(blank=True, null=True, upload_to='portfolio/videos/', verbose_name='Видео файл')),
+                ('video_poster', models.ImageField(blank=True, null=True, upload_to='portfolio/posters/', verbose_name='Превью видео')),
+                ('embed_url', models.URLField(blank=True, verbose_name='URL видео (YouTube, Vimeo)')),
+                ('caption', models.CharField(blank=True, max_length=200, verbose_name='Подпись')),
+                ('alt_text', models.CharField(blank=True, max_length=200, verbose_name='Alt текст')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('uploaded_at', models.DateTimeField(auto_now_add=True)),
+                ('portfolio_item', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_files', to='web.portfolioitem', verbose_name='Проект')),
+            ],
+            options={
+                'verbose_name': 'Медиа файл портфолио',
+                'verbose_name_plural': 'Медиа файлы портфолио',
+                'ordering': ['order', 'uploaded_at'],
+            },
+        ),
+    ]
--- a/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
+++ b/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
@@ -0,0 +1,217 @@
+# Generated by Django 5.1.1 on 2025-11-26 00:02
+
+import django.db.models.deletion
+import tinymce.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0014_portfoliocategory_alter_blogpost_content_newspost_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ProjectCategory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Название')),
+                ('slug', models.SlugField(max_length=100, unique=True, verbose_name='URL')),
+                ('description', models.TextField(blank=True, verbose_name='Описание')),
+                ('icon', models.CharField(blank=True, help_text='Класс иконки (например: fa-code)', max_length=50, verbose_name='Иконка')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активна')),
+            ],
+            options={
+                'verbose_name': 'Категория проекта',
+                'verbose_name_plural': 'Категории проектов',
+                'ordering': ['order', 'name'],
+            },
+        ),
+        migrations.RemoveField(
+            model_name='portfolioitem',
+            name='categories',
+        ),
+        migrations.RemoveField(
+            model_name='portfoliomedia',
+            name='portfolio_item',
+        ),
+        migrations.AlterModelOptions(
+            name='project',
+            options={'ordering': ['-is_featured', '-display_order', '-completion_date'], 'verbose_name': 'Проект', 'verbose_name_plural': 'Проекты'},
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='display_order',
+            field=models.PositiveIntegerField(default=0, verbose_name='Порядок отображения'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='duration',
+            field=models.CharField(blank=True, max_length=100, verbose_name='Длительность'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='github_url',
+            field=models.URLField(blank=True, verbose_name='GitHub репозиторий'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='is_featured',
+            field=models.BooleanField(default=False, verbose_name='Избранный проект'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='likes_count',
+            field=models.PositiveIntegerField(default=0, verbose_name='Количество лайков'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_description',
+            field=models.TextField(blank=True, max_length=300, verbose_name='SEO описание'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_keywords',
+            field=models.CharField(blank=True, max_length=200, verbose_name='Ключевые слова'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_title',
+            field=models.CharField(blank=True, max_length=200, verbose_name='SEO заголовок'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='project_url',
+            field=models.URLField(blank=True, verbose_name='Ссылка на проект'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='short_description',
+            field=models.TextField(default='Описание проекта', max_length=300, verbose_name='Краткое описание'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=200, unique=True, verbose_name='URL'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='team_size',
+            field=models.PositiveIntegerField(blank=True, null=True, verbose_name='Размер команды'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='technologies',
+            field=models.TextField(blank=True, help_text='Разделите запятыми', verbose_name='Технологии'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='thumbnail',
+            field=models.ImageField(blank=True, null=True, upload_to='static/img/project/thumbnails/', verbose_name='Миниатюра'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='views_count',
+            field=models.PositiveIntegerField(default=0, verbose_name='Количество просмотров'),
+        ),
+        migrations.AlterField(
+            model_name='blogpost',
+            name='content',
+            field=tinymce.models.HTMLField(verbose_name='Содержание'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='category',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='web.category', verbose_name='Категория (старая)'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='client',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='projects', to='web.client', verbose_name='Клиент'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='completion_date',
+            field=models.DateField(blank=True, null=True, verbose_name='Дата завершения'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='description',
+            field=tinymce.models.HTMLField(verbose_name='Полное описание'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='image',
+            field=models.ImageField(blank=True, null=True, upload_to='static/img/project/', verbose_name='Главное изображение'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='name',
+            field=models.CharField(max_length=200, verbose_name='Название проекта'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='order',
+            field=models.OneToOneField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='project', to='web.order', verbose_name='Заказ'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='service',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='projects', to='web.service', verbose_name='Услуга'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='status',
+            field=models.CharField(choices=[('in_progress', 'В процессе'), ('completed', 'Завершен'), ('archived', 'В архиве')], default='in_progress', max_length=50, verbose_name='Статус'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='categories',
+            field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
+        ),
+        migrations.CreateModel(
+            name='ProjectMedia',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('media_type', models.CharField(choices=[('image', 'Изображение'), ('video', 'Видео'), ('embed_video', 'Встроенное видео (YouTube, Vimeo)')], default='image', max_length=20, verbose_name='Тип медиа')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='static/img/project/gallery/', verbose_name='Изображение')),
+                ('video', models.FileField(blank=True, null=True, upload_to='static/video/project/gallery/', verbose_name='Видео файл')),
+                ('video_poster', models.ImageField(blank=True, null=True, upload_to='static/img/project/gallery/posters/', verbose_name='Превью видео')),
+                ('embed_code', models.TextField(blank=True, help_text='Вставьте iframe код от YouTube или Vimeo', verbose_name='Код встраивания (iframe)')),
+                ('caption', models.CharField(blank=True, max_length=200, verbose_name='Подпись')),
+                ('alt_text', models.CharField(blank=True, max_length=200, verbose_name='Alt текст')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('uploaded_at', models.DateTimeField(auto_now_add=True)),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_items', to='web.project', verbose_name='Проект')),
+            ],
+            options={
+                'verbose_name': 'Медиа файл проекта',
+                'verbose_name_plural': 'Медиа файлы проектов',
+                'ordering': ['order', 'uploaded_at'],
+            },
+        ),
+        migrations.DeleteModel(
+            name='NewsPost',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioCategory',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioItem',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioMedia',
+        ),
+    ]
--- a/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
+++ b/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
@@ -0,0 +1,48 @@
+# Generated by Django 5.1.1 on 2025-11-26 00:14
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0015_projectcategory_remove_portfolioitem_categories_and_more'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='ProjectCategory',
+        ),
+        migrations.AlterModelOptions(
+            name='category',
+            options={'ordering': ['order', 'name'], 'verbose_name': 'Категория', 'verbose_name_plural': 'Категории'},
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='icon',
+            field=models.CharField(blank=True, help_text='Класс FontAwesome (например: fa-code)', max_length=50, verbose_name='Иконка'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='is_active',
+            field=models.BooleanField(default=True, verbose_name='Активна'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='order',
+            field=models.PositiveIntegerField(default=0, verbose_name='Порядок'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=100, null=True, unique=True, verbose_name='URL'),
+        ),
+        # Удаляем проблемную операцию изменения ManyToManyField
+        # Поле уже существует с нужными параметрами
+        migrations.AlterField(
+            model_name='projectmedia',
+            name='project',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_files', to='web.project', verbose_name='Проект'),
+        ),
+    ]
--- a/smartsoltech/web/migrations/0017_auto_20251126_0146.py
+++ b/smartsoltech/web/migrations/0017_auto_20251126_0146.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 01:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0016_delete_projectcategory_alter_category_options_and_more'),
+    ]
+
+    operations = [
+    ]
--- a/smartsoltech/web/migrations/0018_fix_project_categories_column.py
+++ b/smartsoltech/web/migrations/0018_fix_project_categories_column.py
@@ -0,0 +1,47 @@
+# Fix for column name in project categories table
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0017_auto_20251126_0146'),
+    ]
+
+    operations = [
+        migrations.RunSQL(
+            # Forward SQL - rename column and fix constraints
+            """
+            -- Rename the column if it still exists as projectcategory_id
+            DO $$
+            BEGIN
+                IF EXISTS (
+                    SELECT column_name 
+                    FROM information_schema.columns 
+                    WHERE table_name = 'web_project_categories' 
+                    AND column_name = 'projectcategory_id'
+                ) THEN
+                    ALTER TABLE web_project_categories RENAME COLUMN projectcategory_id TO category_id;
+                    
+                    -- Add foreign key constraint if it doesn't exist
+                    IF NOT EXISTS (
+                        SELECT constraint_name 
+                        FROM information_schema.table_constraints 
+                        WHERE table_name = 'web_project_categories' 
+                        AND constraint_name = 'web_project_categories_category_id_fk'
+                    ) THEN
+                        ALTER TABLE web_project_categories 
+                        ADD CONSTRAINT web_project_categories_category_id_fk 
+                        FOREIGN KEY (category_id) REFERENCES web_category(id) ON DELETE CASCADE;
+                    END IF;
+                END IF;
+            END $$;
+            """,
+            # Reverse SQL
+            """
+            ALTER TABLE web_project_categories RENAME COLUMN category_id TO projectcategory_id;
+            ALTER TABLE web_project_categories DROP CONSTRAINT IF EXISTS web_project_categories_category_id_fk;
+            """
+        ),
+    ]
--- a/smartsoltech/web/migrations/0019_add_project_slug.py
+++ b/smartsoltech/web/migrations/0019_add_project_slug.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:03
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0018_fix_project_categories_column'),
+    ]
+
+    operations = [
+    ]
--- a/smartsoltech/web/migrations/0020_recreate_project_table.py
+++ b/smartsoltech/web/migrations/0020_recreate_project_table.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:16
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0019_add_project_slug'),
+    ]
+
+    operations = [
+    ]
--- a/smartsoltech/web/migrations/0021_sync_production_database.py
+++ b/smartsoltech/web/migrations/0021_sync_production_database.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0020_recreate_project_table'),
+    ]
+
+    operations = [
+    ]
--- a/smartsoltech/web/models.py
+++ b/smartsoltech/web/models.py
@@ -1,8 +1,34 @@
 from django.db import models
 from django.contrib.auth.models import AbstractUser, User
+from tinymce.models import HTMLField
 import uuid
 from django.urls import reverse

+class ContactInfo(models.Model):
+    """Модель для контактной информации компании"""
+    company_name = models.CharField(max_length=200, default="SmartSolTech", verbose_name="Название компании")
+    email = models.EmailField(default="info@smartsoltech.kr", verbose_name="Email")
+    phone = models.CharField(max_length=20, default="+82-10-5693-6103", verbose_name="Телефон")
+    telegram = models.CharField(max_length=100, default="@smartsoltech", verbose_name="Telegram")
+    address = models.TextField(default="Чолланамдо, Кванджу", verbose_name="Адрес")
+    working_hours = models.CharField(max_length=100, default="Пн-Пт 9:00-18:00", verbose_name="Часы работы")
+    description = models.TextField(default="Мы - команда профессионалов в сфере IT-решений", verbose_name="Описание")
+    call_to_action = models.CharField(max_length=200, default="Начнем сотрудничество?", verbose_name="Призыв к действию")
+    subtitle = models.CharField(max_length=200, default="Свяжитесь с нами для обсуждения вашего проекта", verbose_name="Подзаголовок")
+    is_active = models.BooleanField(default=True, verbose_name="Активно")
+    
+    class Meta:
+        verbose_name = 'Контактная информация'
+        verbose_name_plural = 'Контактная информация'
+    
+    def __str__(self):
+        return f"Контакты - {self.company_name}"
+    
+    @classmethod
+    def get_active(cls):
+        """Получить активную контактную информацию"""
+        return cls.objects.filter(is_active=True).first() or cls.objects.create()
+
 class HeroBanner(models.Model):
    """Модель для главного баннера на сайте"""
    title = models.CharField(max_length=200, verbose_name="Заголовок")
@@ -29,16 +55,26 @@ class HeroBanner(models.Model):

 class Category(models.Model):
    name = models.CharField(max_length=100)
+    slug = models.SlugField(max_length=100, unique=True, blank=True, null=True, verbose_name="URL")
    description = models.TextField(default='Описание категории')
+    icon = models.CharField(max_length=50, blank=True, verbose_name="Иконка", help_text="Класс FontAwesome (например: fa-code)")
+    order = models.PositiveIntegerField(default=0, verbose_name="Порядок")
+    is_active = models.BooleanField(default=True, verbose_name="Активна")

    class Meta:
        verbose_name = 'Категория'
        verbose_name_plural = 'Категории'
-        ordering = ['name']
+        ordering = ['order', 'name']

    def __str__(self):
        return self.name
    
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            from django.utils.text import slugify
+            self.slug = slugify(self.name)
+        super().save(*args, **kwargs)
+
 class Service(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField(default='Описание услуги')
@@ -86,7 +122,7 @@ class Client(models.Model):

 class BlogPost(models.Model):
    title = models.CharField(max_length=200)
-    content = models.TextField()
+    content = HTMLField(verbose_name="Содержание")
    published_date = models.DateTimeField(auto_now_add=True)
    image = models.ImageField(upload_to='static/img/blog/', blank=True, null=True)
    video = models.FileField(upload_to='static/video/blog/', blank=True, null=True, help_text='Видео файл для блог поста')
@@ -147,27 +183,200 @@ class Order(models.Model):
    def get_absolute_url(self):
        return reverse('order_detail', kwargs={'pk': self.pk})

+
+# ПРОЕКТЫ
+# ============================================
+
 class Project(models.Model):
-    name = models.CharField(max_length=200)
-    description = models.TextField(default='Описание проекта')
-    completion_date = models.DateField(blank=True, null=True)
-    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='projects')
-    service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='projects')
-    order = models.OneToOneField(Order, on_delete=models.CASCADE, related_name='project', null=True, blank=True)
-    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, blank=True)
-    image = models.ImageField(upload_to='static/img/project/', blank=True, null=True)
+    """Расширенная модель проекта с множественными категориями и медиа"""
+    
+    STATUS_CHOICES = [
+        ('in_progress', 'В процессе'),
+        ('completed', 'Завершен'),
+        ('archived', 'В архиве'),
+    ]
+    
+    # Основная информация
+    name = models.CharField(max_length=200, verbose_name="Название проекта")
+    slug = models.SlugField(max_length=200, unique=True, verbose_name="URL", blank=True)
+    
+    # Краткое описание для списка
+    short_description = models.TextField(max_length=300, verbose_name="Краткое описание", default='Описание проекта')
+    
+    # Полное описание с WYSIWYG редактором
+    description = HTMLField(verbose_name="Полное описание")
+    
+    # Связи с существующими моделями
+    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='projects', verbose_name="Клиент")
+    service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='projects', verbose_name="Услуга")
+    order = models.OneToOneField(Order, on_delete=models.CASCADE, related_name='project', null=True, blank=True, verbose_name="Заказ")
+    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, blank=True, verbose_name="Категория (старая)")
+    
+    # Множественные категории проектов = категории услуг
+    categories = models.ManyToManyField(Category, related_name='projects', verbose_name="Категории", blank=True)
+    
+    # Главное изображение (для обратной совместимости и превью)
+    image = models.ImageField(upload_to='static/img/project/', blank=True, null=True, verbose_name="Главное изображение")
+    thumbnail = models.ImageField(upload_to='static/img/project/thumbnails/', blank=True, null=True, verbose_name="Миниатюра")
+    
+    # Видео (для обратной совместимости)
    video = models.FileField(upload_to='static/video/project/', blank=True, null=True, help_text='Видео презентация проекта')
    video_poster = models.ImageField(upload_to='static/img/project/posters/', blank=True, null=True, help_text='Превью изображение для видео проекта')
-    status = models.CharField(max_length=50, choices=[('in_progress', 'В процессе'), ('completed', 'Завершен')], default='in_progress')
+    
+    # Дополнительная информация о проекте
+    project_url = models.URLField(blank=True, verbose_name="Ссылка на проект")
+    github_url = models.URLField(blank=True, verbose_name="GitHub репозиторий")
+    
+    # Технологии и инструменты
+    technologies = models.TextField(blank=True, verbose_name="Технологии", help_text="Разделите запятыми")
+    
+    # Метрики проекта
+    duration = models.CharField(max_length=100, blank=True, verbose_name="Длительность")
+    team_size = models.PositiveIntegerField(blank=True, null=True, verbose_name="Размер команды")
+    
+    # Даты и статус
+    completion_date = models.DateField(blank=True, null=True, verbose_name="Дата завершения")
+    status = models.CharField(max_length=50, choices=STATUS_CHOICES, default='in_progress', verbose_name="Статус")
+    
+    # Счетчики и метрики
+    views_count = models.PositiveIntegerField(default=0, verbose_name='Количество просмотров')
+    likes_count = models.PositiveIntegerField(default=0, verbose_name='Количество лайков')
+    
+    # Настройки отображения
+    is_featured = models.BooleanField(default=False, verbose_name="Избранный проект")
+    display_order = models.PositiveIntegerField(default=0, verbose_name="Порядок отображения")
+    
+    # SEO
+    meta_title = models.CharField(max_length=200, blank=True, verbose_name="SEO заголовок")
+    meta_description = models.TextField(max_length=300, blank=True, verbose_name="SEO описание")
+    meta_keywords = models.CharField(max_length=200, blank=True, verbose_name="Ключевые слова")
+    
+    # Timestamps
+    created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True)
+    updated_at = models.DateTimeField(auto_now=True, null=True, blank=True)

    class Meta:
        verbose_name = 'Проект'
        verbose_name_plural = 'Проекты'
-        ordering = ['-completion_date']
+        ordering = ['-is_featured', '-display_order', '-completion_date']

    def __str__(self):
        return self.name
    
+    def get_absolute_url(self):
+        return reverse('project_detail', kwargs={'pk': self.pk})
+    
+    @property
+    def technologies_list(self):
+        """Возвращает список технологий"""
+        if self.technologies:
+            return [tech.strip() for tech in self.technologies.split(',') if tech.strip()]
+        return []
+    
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            from django.utils.text import slugify
+            self.slug = slugify(self.name)
+        
+        # Автоматически создаем thumbnail из главного изображения
+        if self.image and not self.thumbnail:
+            self.thumbnail = self.image
+        
+        super().save(*args, **kwargs)
+        
+        # Ресайз thumbnail после сохранения
+        if self.thumbnail:
+            self._resize_thumbnail()
+    
+    def _resize_thumbnail(self):
+        """Автоматический ресайз thumbnail до 600x400px"""
+        from PIL import Image
+        from io import BytesIO
+        from django.core.files.base import ContentFile
+        import os
+        
+        if not self.thumbnail:
+            return
+        
+        try:
+            # Открываем изображение
+            img = Image.open(self.thumbnail.path)
+            
+            # Конвертируем в RGB если нужно
+            if img.mode not in ('RGB', 'RGBA'):
+                img = img.convert('RGB')
+            
+            # Целевой размер
+            target_width = 600
+            target_height = 400
+            
+            # Вычисляем соотношение сторон
+            img_ratio = img.width / img.height
+            target_ratio = target_width / target_height
+            
+            # Обрезаем изображение по центру
+            if img_ratio > target_ratio:
+                # Изображение шире, обрезаем по ширине
+                new_width = int(img.height * target_ratio)
+                left = (img.width - new_width) // 2
+                img = img.crop((left, 0, left + new_width, img.height))
+            else:
+                # Изображение выше, обрезаем по высоте
+                new_height = int(img.width / target_ratio)
+                top = (img.height - new_height) // 2
+                img = img.crop((0, top, img.width, top + new_height))
+            
+            # Ресайз до целевого размера
+            img = img.resize((target_width, target_height), Image.Resampling.LANCZOS)
+            
+            # Сохраняем оптимизированное изображение
+            img.save(self.thumbnail.path, quality=85, optimize=True)
+            
+        except Exception as e:
+            print(f"Ошибка при ресайзе thumbnail для проекта {self.name}: {e}")
+
+
+class ProjectMedia(models.Model):
+    """Медиа-файлы для проектов (множественные фото и видео)"""
+    
+    MEDIA_TYPE_CHOICES = [
+        ('image', 'Изображение'),
+        ('video', 'Видео'),
+        ('embed_video', 'Встроенное видео (YouTube, Vimeo)'),
+    ]
+    
+    project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='media_files', verbose_name="Проект")
+    
+    media_type = models.CharField(max_length=20, choices=MEDIA_TYPE_CHOICES, default='image', verbose_name="Тип медиа")
+    
+    # Для изображений
+    image = models.ImageField(upload_to='static/img/project/gallery/', blank=True, null=True, verbose_name="Изображение")
+    
+    # Для видео
+    video = models.FileField(upload_to='static/video/project/gallery/', blank=True, null=True, verbose_name="Видео файл")
+    video_poster = models.ImageField(upload_to='static/img/project/gallery/posters/', blank=True, null=True, verbose_name="Превью видео")
+    
+    # Для встроенных видео
+    embed_code = models.TextField(blank=True, verbose_name="Код встраивания (iframe)", help_text="Вставьте iframe код от YouTube или Vimeo")
+    
+    # Описание и метаданные
+    caption = models.CharField(max_length=200, blank=True, verbose_name="Подпись")
+    alt_text = models.CharField(max_length=200, blank=True, verbose_name="Alt текст")
+    
+    # Порядок отображения
+    order = models.PositiveIntegerField(default=0, verbose_name="Порядок")
+    
+    # Timestamps
+    uploaded_at = models.DateTimeField(auto_now_add=True)
+    
+    class Meta:
+        verbose_name = 'Медиа файл проекта'
+        verbose_name_plural = 'Медиа файлы проектов'
+        ordering = ['order', 'uploaded_at']
+    
+    def __str__(self):
+        return f"{self.get_media_type_display()} для {self.project.name}"
+
 class Review(models.Model):
    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='reviews')
    service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='reviews')
@@ -187,3 +396,173 @@ class Review(models.Model):
    def __str__(self):
        return f"Отзыв от {self.client.first_name} {self.client.last_name} for {self.service.name}"

+
+class Team(models.Model):
+    """Модель для управления персоналом компании"""
+    first_name = models.CharField(max_length=100, verbose_name="Имя")
+    last_name = models.CharField(max_length=100, verbose_name="Фамилия")
+    position = models.CharField(max_length=200, verbose_name="Должность")
+    department = models.CharField(max_length=100, verbose_name="Отдел", blank=True)
+    bio = models.TextField(verbose_name="Биография/Описание", blank=True)
+    photo = models.ImageField(upload_to='static/img/team/', blank=True, null=True, verbose_name="Фотография")
+    email = models.EmailField(blank=True, verbose_name="Email")
+    phone = models.CharField(max_length=20, blank=True, verbose_name="Телефон")
+    
+    # Социальные сети
+    linkedin = models.URLField(blank=True, verbose_name="LinkedIn")
+    github = models.URLField(blank=True, verbose_name="GitHub")
+    telegram = models.CharField(max_length=100, blank=True, verbose_name="Telegram")
+    
+    # Навыки и технологии
+    skills = models.TextField(blank=True, verbose_name="Навыки", help_text="Разделите навыки запятыми")
+    experience_years = models.PositiveIntegerField(default=0, verbose_name="Лет опыта")
+    
+    # Настройки отображения
+    is_active = models.BooleanField(default=True, verbose_name="Активен")
+    display_order = models.PositiveIntegerField(default=0, verbose_name="Порядок отображения")
+    show_on_about = models.BooleanField(default=True, verbose_name="Показывать на странице О нас")
+    
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        verbose_name = 'Сотрудник'
+        verbose_name_plural = 'Команда'
+        ordering = ['display_order', 'last_name', 'first_name']
+
+    def __str__(self):
+        return f"{self.first_name} {self.last_name} - {self.position}"
+
+    @property
+    def full_name(self):
+        return f"{self.first_name} {self.last_name}"
+
+    @property
+    def skills_list(self):
+        """Возвращает список навыков"""
+        if self.skills:
+            return [skill.strip() for skill in self.skills.split(',') if skill.strip()]
+        return []
+
+
+class Career(models.Model):
+    """Модель для управления вакансиями и карьерными возможностями"""
+    
+    EMPLOYMENT_TYPE_CHOICES = [
+        ('full_time', 'Полная занятость'),
+        ('part_time', 'Частичная занятость'),
+        ('contract', 'Контракт'),
+        ('internship', 'Стажировка'),
+        ('remote', 'Удаленная работа'),
+        ('freelance', 'Фриланс'),
+    ]
+
+    EXPERIENCE_LEVEL_CHOICES = [
+        ('junior', 'Junior (0-1 год)'),
+        ('middle', 'Middle (2-4 года)'),
+        ('senior', 'Senior (5+ лет)'),
+        ('lead', 'Team Lead'),
+        ('intern', 'Стажер'),
+    ]
+
+    STATUS_CHOICES = [
+        ('active', 'Активная'),
+        ('paused', 'Приостановлена'),
+        ('closed', 'Закрыта'),
+        ('draft', 'Черновик'),
+    ]
+
+    title = models.CharField(max_length=200, verbose_name="Название вакансии")
+    department = models.CharField(max_length=100, verbose_name="Отдел")
+    location = models.CharField(max_length=200, default="Кванджу, Южная Корея", verbose_name="Местоположение")
+    
+    employment_type = models.CharField(
+        max_length=20, 
+        choices=EMPLOYMENT_TYPE_CHOICES, 
+        default='full_time',
+        verbose_name="Тип занятости"
+    )
+    
+    experience_level = models.CharField(
+        max_length=20,
+        choices=EXPERIENCE_LEVEL_CHOICES,
+        default='middle',
+        verbose_name="Уровень опыта"
+    )
+    
+    # Описание вакансии
+    description = models.TextField(verbose_name="Описание вакансии")
+    responsibilities = models.TextField(verbose_name="Обязанности")
+    requirements = models.TextField(verbose_name="Требования")
+    benefits = models.TextField(blank=True, verbose_name="Преимущества и условия")
+    
+    # Зарплатная вилка
+    salary_min = models.PositiveIntegerField(blank=True, null=True, verbose_name="Зарплата от (₩)")
+    salary_max = models.PositiveIntegerField(blank=True, null=True, verbose_name="Зарплата до (₩)")
+    salary_currency = models.CharField(max_length=10, default="KRW", verbose_name="Валюта")
+    
+    # Необходимые навыки
+    required_skills = models.TextField(verbose_name="Обязательные навыки", help_text="Разделите навыки запятыми")
+    preferred_skills = models.TextField(blank=True, verbose_name="Желательные навыки", help_text="Разделите навыки запятыми")
+    
+    # Статус и метаданные
+    status = models.CharField(
+        max_length=20,
+        choices=STATUS_CHOICES,
+        default='active',
+        verbose_name="Статус"
+    )
+    
+    is_featured = models.BooleanField(default=False, verbose_name="Рекомендуемая вакансия")
+    application_deadline = models.DateField(blank=True, null=True, verbose_name="Дедлайн подачи заявок")
+    
+    # Контактная информация
+    contact_email = models.EmailField(default="hr@smartsoltech.kr", verbose_name="Email для связи")
+    contact_person = models.CharField(max_length=200, blank=True, verbose_name="Контактное лицо")
+    
+    # Timestamps
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+    published_at = models.DateTimeField(blank=True, null=True, verbose_name="Дата публикации")
+
+    class Meta:
+        verbose_name = 'Вакансия'
+        verbose_name_plural = 'Карьера'
+        ordering = ['-is_featured', '-published_at', '-created_at']
+
+    def __str__(self):
+        return f"{self.title} ({self.get_experience_level_display()})"
+
+    @property
+    def required_skills_list(self):
+        """Возвращает список обязательных навыков"""
+        if self.required_skills:
+            return [skill.strip() for skill in self.required_skills.split(',') if skill.strip()]
+        return []
+
+    @property
+    def preferred_skills_list(self):
+        """Возвращает список желательных навыков"""
+        if self.preferred_skills:
+            return [skill.strip() for skill in self.preferred_skills.split(',') if skill.strip()]
+        return []
+
+    @property
+    def salary_range(self):
+        """Возвращает строку с зарплатной вилкой"""
+        if self.salary_min and self.salary_max:
+            return f"₩{self.salary_min:,} - ₩{self.salary_max:,}"
+        elif self.salary_min:
+            return f"от ₩{self.salary_min:,}"
+        elif self.salary_max:
+            return f"до ₩{self.salary_max:,}"
+        return "По договоренности"
+
+    def is_active_position(self):
+        """Проверяет, активна ли вакансия"""
+        from django.utils import timezone
+        if self.status != 'active':
+            return False
+        if self.application_deadline and self.application_deadline < timezone.now().date():
+            return False
+        return True
--- a/smartsoltech/web/templates/web/about.html
+++ b/smartsoltech/web/templates/web/about.html
@@ -1,53 +1,280 @@
-{% extends 'web/base.html' %}
+{% extends 'web/base_modern.html' %}
 {% load static %}

+{% block title %}{{ contact_info.company_name }} - О нас{% endblock %}
+
+{% block extra_styles %}
+<style>
+    .about-hero {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 4rem 0;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .about-hero::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><polygon fill="white" fill-opacity="0.1" points="1000,4 1000,100 0,100"/></svg>');
+        z-index: 1;
+    }
+    
+    .about-hero .container {
+        position: relative;
+        z-index: 2;
+    }
+    
+    .contact-card {
+        background: white;
+        border-radius: 20px;
+        padding: 2rem;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        border: 1px solid rgba(255,255,255,0.2);
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .contact-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
+        background-size: 200% 100%;
+        animation: shimmer 2s linear infinite;
+    }
+    
+    .contact-card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+    }
+    
+    .contact-icon {
+        width: 60px;
+        height: 60px;
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1.5rem;
+        color: white;
+        font-size: 24px;
+    }
+    
+    .contact-title {
+        font-weight: 700;
+        font-size: 1.25rem;
+        color: #2c3e50;
+        margin-bottom: 0.5rem;
+    }
+    
+    .contact-info {
+        color: #667eea;
+        font-size: 1rem;
+        font-weight: 500;
+    }
+    
+    .contact-info a {
+        color: #667eea;
+        text-decoration: none;
+        transition: color 0.3s ease;
+    }
+    
+    .contact-info a:hover {
+        color: #764ba2;
+        text-decoration: underline;
+    }
+    
+    .cta-section {
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        padding: 4rem 0;
+        text-align: center;
+    }
+    
+    .cta-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: #2c3e50;
+        margin-bottom: 1rem;
+    }
+    
+    .cta-subtitle {
+        font-size: 1.25rem;
+        color: #6c757d;
+        margin-bottom: 2rem;
+    }
+    
+    .cta-button {
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: white;
+        padding: 1rem 2rem;
+        border: none;
+        border-radius: 50px;
+        font-size: 1.1rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        text-decoration: none;
+        display: inline-block;
+    }
+    
+    .cta-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        color: white;
+        text-decoration: none;
+    }
+    
+    .description-card {
+        background: white;
+        border-radius: 20px;
+        padding: 3rem;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        margin: 3rem 0;
+    }
+    
+    .description-card h3 {
+        color: #2c3e50;
+        font-weight: 700;
+        margin-bottom: 1.5rem;
+        font-size: 1.8rem;
+    }
+    
+    .description-card p {
+        color: #6c757d;
+        font-size: 1.1rem;
+        line-height: 1.7;
+        margin-bottom: 0;
+    }
+    
+    @keyframes shimmer {
+        0% { background-position: -200% 0; }
+        100% { background-position: 200% 0; }
+    }
+    
+    .working-hours-badge {
+        background: linear-gradient(135deg, #28a745, #20c997);
+        color: white;
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        font-weight: 600;
+        display: inline-block;
+        margin-top: 1rem;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
-<section class="position-relative py-4 py-xl-5">
-    <div class="container position-relative">
-        <div class="row mb-5">
-            <div class="col-md-8 col-xl-6 text-center mx-auto">
-                <h2>Contact us</h2>
-                <p class="w-lg-50"></p>
+<!-- Hero Section -->
+<section class="about-hero">
+    <div class="container">
+        <h1 class="display-4 fw-bold mb-3">{{ contact_info.call_to_action }}</h1>
+        <p class="lead">{{ contact_info.subtitle }}</p>
+    </div>
+</section>
+
+<!-- Contact Cards Section -->
+<section class="py-5">
+    <div class="container">
+        <div class="row">
+            <!-- Email Card -->
+            <div class="col-lg-4 col-md-6">
+                <div class="contact-card">
+                    <div class="contact-icon">
+                        <i class="fas fa-envelope"></i>
+                    </div>
+                    <div class="contact-title">Email</div>
+                    <div class="contact-info">
+                        <a href="mailto:{{ contact_info.email }}">{{ contact_info.email }}</a>
                    </div>
                </div>
-        <div class="row d-flex justify-content-center">
-            <div class="col-md-6 col-lg-4 col-xl-4">
-                <div class="d-flex flex-column justify-content-center align-items-start h-100">
-                    <div class="d-flex align-items-center p-3">
-                        <div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-telephone" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-                                <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"></path>
-                            </svg></div>
-                        <div class="px-2">
-                            <h6 class="mb-0">Телефон</h6>
-                            <p class="mb-0"><a href ="tel:01056936103">010-5693-6103</a></p>
+            </div>
+            
+            <!-- Phone Card -->
+            <div class="col-lg-4 col-md-6">
+                <div class="contact-card">
+                    <div class="contact-icon">
+                        <i class="fas fa-phone"></i>
+                    </div>
+                    <div class="contact-title">Телефон</div>
+                    <div class="contact-info">
+                        <a href="tel:{{ contact_info.phone }}">{{ contact_info.phone }}</a>
+                    </div>
+                    <div class="working-hours-badge">{{ contact_info.working_hours }}</div>
                </div>
            </div>
-                    <div class="d-flex align-items-center p-3">
-                        <div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-envelope" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-                                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
-                            </svg></div>
-                        <div class="px-2">
-                            <h6 class="mb-0">Email</h6>
-                            <p class="mb-0"><a href="mailto:a.choi@smartsoltech.kr">a.choi@smartsoltech.kr</a></p>
+            
+            <!-- Telegram Card -->
+            <div class="col-lg-4 col-md-6">
+                <div class="contact-card">
+                    <div class="contact-icon">
+                        <i class="fab fa-telegram"></i>
+                    </div>
+                    <div class="contact-title">Telegram</div>
+                    <div class="contact-info">
+                        <a href="https://t.me/{{ contact_info.telegram|cut:'@' }}" target="_blank">{{ contact_info.telegram }}</a>
                    </div>
                </div>
-                    <div class="d-flex align-items-center p-3">
-                        <div class="bs-icon-md bs-icon-rounded bs-icon-primary d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon"><svg class="bi bi-pin" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-                                <path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354zm1.58 1.408-.002-.001.002.001m-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a4.922 4.922 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a4.915 4.915 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.775 1.775 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14c.06.1.133.191.214.271a1.78 1.78 0 0 0 .37.282"></path>
-                            </svg></div>
-                        <div class="px-2">
-                            <h6 class="mb-0">Мы находимся:</h6>
-                            <p class="mb-0">Чолланамдо, Кванджу</p>
+            </div>
+            
+            <!-- Address Card -->
+            <div class="col-lg-6 col-md-6">
+                <div class="contact-card">
+                    <div class="contact-icon">
+                        <i class="fas fa-map-marker-alt"></i>
+                    </div>
+                    <div class="contact-title">Мы находимся</div>
+                    <div class="contact-info">
+                        {{ contact_info.address }}
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Company Card -->
+            <div class="col-lg-6 col-md-6">
+                <div class="contact-card">
+                    <div class="contact-icon">
+                        <i class="fas fa-building"></i>
+                    </div>
+                    <div class="contact-title">Компания</div>
+                    <div class="contact-info">
+                        {{ contact_info.company_name }}
                    </div>
                </div>
            </div>
        </div>
-            <div class="col-md-6 col-lg-5 col-xl-4">
-                <div></div>
-                <h1>О нас</h1>
-                <p>Мы - команда профессионалов в своей отрасли. В нашей команде есть все, программисты, сетевые инженеры, системные администраторы, </p>
+        
+        <!-- Description Section -->
+        <div class="row">
+            <div class="col-12">
+                <div class="description-card">
+                    <h3>О нашей компании</h3>
+                    <p>{{ contact_info.description }}</p>
+                </div>
            </div>
        </div>
    </div>
 </section>
+
+<!-- CTA Section -->
+<section class="cta-section">
+    <div class="container">
+        <h2 class="cta-title">Начнем сотрудничество</h2>
+        <p class="cta-subtitle">Готовы воплотить ваш проект в жизнь</p>
+        <a href="{% url 'services' %}" class="cta-button">
+            <i class="fas fa-rocket me-2"></i>Посмотреть наши услуги
+        </a>
+    </div>
+</section>
 {% endblock %}
--- a/smartsoltech/web/templates/web/base.html
+++ b/smartsoltech/web/templates/web/base.html
@@ -1,26 +1,76 @@
 {% load static %}
-<!-- web/templates/web/base.html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="manifest" href="/static/manifest.json">
-    <script src="{% static 'assets/js/modal-init.js' %}"></script>
+    <meta name="description" content="SmartSolTech - Технологические решения для вашего бизнеса">
+    <meta name="keywords" content="веб-разработка, мобильные приложения, IT консалтинг">
+    <title>{% block title %}SmartSolTech - Технологические решения{% endblock %}</title>
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'assets/css/styles.min.css' %}">
+    <link rel="stylesheet" href="{% static 'assets/css/modern-styles.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/modal-styles.css' %}">
    
-<script src="{% static 'assets/js/modal-init.js' %}"></script>
-    <title>{% block title %}Smartsoltech{% endblock %}</title>
-    {% load static %}
-    <link rel="stylesheet" href="{% static 'assets/css/styles.min.css' %}">
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/static/manifest.json">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{% static 'assets/img/favicon.png' %}">
+    
+    {% block extra_styles %}{% endblock %}
 </head>
-<body>
-    {% include 'web/navbar.html' %}
-    <div class="container mt-4">
-        {% block content %}{% endblock %}
+<body class="modern-body">
+    <!-- Loading Screen -->
+    <div id="loadingScreen" class="loading-screen">
+        <div class="loading-content">
+            <div class="spinner-modern"></div>
+            <h4 class="mt-3 fw-bold">SmartSolTech</h4>
+            <p class="text-muted">Загружаем IT-решения...</p>
        </div>
+    </div>
+
+    <!-- Navigation -->
+    {% include 'web/navbar.html' %}
+    
+    <!-- Main Content -->
+    <main class="main-content">
+        {% block content %}{% endblock %}
+    </main>
+    
+    <!-- Footer -->
    {% include 'web/footer.html' %}
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script src="{% static 'assets/js/script.min.js' %}"></script>
+    <script src="{% static 'assets/js/modern-scripts.js' %}"></script>
+    
+    {% block extra_scripts %}{% endblock %}
+    
+    <!-- Emergency Loading Screen Script -->
+    <script>
+        // Remove loading screen
+        window.addEventListener('load', function() {
+            const loadingScreen = document.getElementById('loadingScreen');
+            if (loadingScreen) {
+                setTimeout(() => {
+                    loadingScreen.style.opacity = '0';
+                    setTimeout(() => {
+                        loadingScreen.remove();
+                    }, 300);
+                }, 500);
+            }
+        });
+    </script>
 </body>
 </html>
--- a/smartsoltech/web/templates/web/base_modern.html
+++ b/smartsoltech/web/templates/web/base_modern.html
@@ -29,7 +29,7 @@
    <link rel="manifest" href="/static/manifest.json">
    
    <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%236366f1'/><text y='70' font-size='60' fill='white' font-family='Arial,sans-serif' text-anchor='middle' x='50'>S</text></svg>">>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%236366f1'/><text y='70' font-size='60' fill='white' font-family='Arial,sans-serif' text-anchor='middle' x='50'>S</text></svg>">
    
    <title>{% block title %}SmartSolTech - Современные IT-решения{% endblock %}</title>
    
@@ -72,11 +72,6 @@
    <!-- Footer -->
    {% include 'web/footer_modern.html' %}
    
-    <!-- Theme Toggle Button -->
-    <button id="theme-toggle" class="theme-toggle" aria-label="Переключить тему">
-        <i class="fas fa-moon"></i>
-    </button>
-    
    <!-- Scroll to Top Button -->
    <button id="scroll-to-top" class="position-fixed bottom-0 end-0 m-4 btn btn-primary-modern rounded-circle" style="width: 50px; height: 50px; display: none; z-index: 999;">
        <i class="fas fa-arrow-up"></i>
--- a/smartsoltech/web/templates/web/blog.html
+++ b/smartsoltech/web/templates/web/blog.html
@@ -0,0 +1,322 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}Блог - SmartSolTech{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-modern">
+    <div class="container-modern">
+        <div class="row justify-content-center text-center">
+            <div class="col-lg-8">
+                <div class="hero-content">
+                    <h1 class="display-4 fw-bold mb-4">
+                        <span class="text-gradient">Блог</span> SmartSolTech
+                    </h1>
+                    <p class="lead text-muted mb-5">
+                        Новости, статьи и инсайты из мира IT и технологий
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Blog Posts Section -->
+<section class="section-padding">
+    <div class="container-modern">
+        {% if blog_posts %}
+        <div class="row g-4">
+            {% for post in blog_posts %}
+            <div class="col-lg-4 col-md-6">
+                <article class="card-modern h-100 hover-lift">
+                    <!-- Post Image/Video -->
+                    {% if post.video %}
+                    <div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0; position: relative;">
+                        <video class="w-100 h-100" 
+                               style="object-fit: cover;" 
+                               muted 
+                               {% if post.video_poster %}poster="{{ post.video_poster.url }}"{% endif %}>
+                            <source src="{{ post.video.url }}" type="video/mp4">
+                            {% if post.image %}
+                                <img src="{{ post.image.url }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ post.title }}">
+                            {% endif %}
+                        </video>
+                        <div class="position-absolute top-0 end-0 p-3">
+                            <span class="badge bg-primary">
+                                <i class="fas fa-play"></i> Видео
+                            </span>
+                        </div>
+                        <div class="position-absolute bottom-0 start-0 end-0 p-3" style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
+                            <button class="btn btn-light btn-sm" onclick="this.closest('div').previousElementSibling.play()">
+                                <i class="fas fa-play me-1"></i> Воспроизвести
+                            </button>
+                        </div>
+                    </div>
+                    {% elif post.image %}
+                    <div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0;">
+                        <img src="{{ post.image.url }}" alt="{{ post.title }}" 
+                             class="w-100 h-100"
+                             style="object-fit: cover;"
+                             loading="lazy">
+                    </div>
+                    {% else %}
+                    <div class="w-100 bg-gradient d-flex align-items-center justify-content-center" 
+                         style="height: 250px; border-radius: 15px 15px 0 0;">
+                        <i class="fas fa-newspaper text-white" style="font-size: 3rem; opacity: 0.7;"></i>
+                    </div>
+                    {% endif %}
+                    
+                    <!-- Post Content -->
+                    <div class="card-body d-flex flex-column">
+                        <div class="mb-3">
+                            <span class="badge bg-primary-modern">
+                                <i class="fas fa-newspaper me-1"></i>
+                                Блог
+                            </span>
+                        </div>
+                        
+                        <h3 class="h5 mb-3 text-dark">
+                            <a href="{% url 'blog_post_detail' post.pk %}" 
+                               class="text-decoration-none text-dark hover-primary">
+                                {{ post.title }}
+                            </a>
+                        </h3>
+                        
+                        <div class="text-muted mb-3 flex-grow-1">
+                            {% if post.content %}
+                                <p>{{ post.content|striptags|truncatewords:20 }}</p>
+                            {% else %}
+                                <p>Нет описания...</p>
+                            {% endif %}
+                        </div>
+                        
+                        <!-- Post Meta -->
+                        <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top">
+                            <small class="text-muted">
+                                <i class="fas fa-calendar-alt me-1"></i>
+                                {{ post.published_date|date:"d.m.Y" }}
+                            </small>
+                            <a href="{% url 'blog_post_detail' post.pk %}" 
+                               class="btn btn-sm btn-outline-primary">
+                                Читать далее
+                                <i class="fas fa-arrow-right ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </article>
+            </div>
+            {% endfor %}
+        </div>
+        
+        <!-- Pagination (если планируется) -->
+        <div class="text-center mt-5">
+            <div class="d-inline-flex align-items-center gap-3">
+                <span class="text-muted">Показано {{ blog_posts.count }} из {{ blog_posts.count }} постов</span>
+            </div>
+        </div>
+        
+        {% else %}
+        <!-- Empty State -->
+        <div class="text-center py-5">
+            <div class="empty-state">
+                <div class="mb-4">
+                    <i class="fas fa-newspaper text-muted" style="font-size: 4rem;"></i>
+                </div>
+                <h3 class="h4 mb-3">Пока нет постов в блоге</h3>
+                <p class="text-muted mb-4">
+                    Мы работаем над созданием интересного контента для вас
+                </p>
+                <a href="{% url 'home' %}" class="btn btn-primary-modern">
+                    <i class="fas fa-home me-2"></i>
+                    На главную
+                </a>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</section>
+
+<!-- Newsletter Section -->
+<section class="section-padding bg-light">
+    <div class="container-modern">
+        <div class="row justify-content-center">
+            <div class="col-lg-6 text-center">
+                <div class="newsletter-cta">
+                    <div class="mb-4">
+                        <i class="fas fa-envelope text-primary" style="font-size: 3rem;"></i>
+                    </div>
+                    <h2 class="h3 mb-3">Следите за новостями</h2>
+                    <p class="text-muted mb-4">
+                        Подпишитесь на наши обновления, чтобы получать последние новости и статьи
+                    </p>
+                    <div class="d-flex justify-content-center gap-3 flex-wrap">
+                        <a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
+                            <i class="fas fa-envelope me-2"></i>
+                            Связаться с нами
+                        </a>
+                        <a href="{% url 'services' %}" class="btn btn-outline-primary">
+                            <i class="fas fa-cogs me-2"></i>
+                            Наши услуги
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Smooth scrolling for blog navigation
+document.addEventListener('DOMContentLoaded', function() {
+    // Video play on hover
+    const videoCards = document.querySelectorAll('video');
+    videoCards.forEach(video => {
+        video.addEventListener('mouseenter', function() {
+            this.currentTime = 0;
+            this.play().catch(e => console.log('Video autoplay prevented'));
+        });
+        
+        video.addEventListener('mouseleave', function() {
+            this.pause();
+        });
+    });
+    
+    // Enhanced card hover effects
+    const cards = document.querySelectorAll('.hover-lift');
+    cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+        });
+    });
+});
+
+// Search functionality (if needed later)
+function searchBlogPosts(query) {
+    // Future implementation for blog search
+    console.log('Searching for:', query);
+}
+</script>
+
+<style>
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+}
+
+.hover-primary:hover {
+    color: var(--primary-color) !important;
+}
+
+.card-modern article {
+    border: none;
+}
+
+.empty-state {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.newsletter-cta {
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+/* Blog post content styling */
+.text-muted p {
+    line-height: 1.6;
+}
+
+/* Video overlay improvements */
+video {
+    transition: transform 0.3s ease;
+}
+
+video:hover {
+    transform: scale(1.05);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .hero-modern .display-4 {
+        font-size: 2rem;
+    }
+    
+    .newsletter-cta {
+        margin: 0 1rem;
+    }
+    
+    .d-flex.justify-content-center.gap-3 {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .d-flex.justify-content-center.gap-3 .btn {
+        width: 100%;
+        max-width: 250px;
+    }
+}
+
+/* Print styles */
+@media print {
+    .newsletter-cta,
+    .btn {
+        display: none;
+    }
+}
+
+/* Enhanced accessibility */
+@media (prefers-reduced-motion: reduce) {
+    .hover-lift,
+    video {
+        transition: none;
+    }
+    
+    video:hover {
+        transform: none;
+    }
+    
+    .hover-lift:hover {
+        transform: none;
+    }
+}
+
+/* Focus styles for better accessibility */
+.hover-primary:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Loading states */
+.card-modern img {
+    transition: opacity 0.3s ease;
+}
+
+.card-modern img:not([src]) {
+    opacity: 0;
+}
+
+/* Enhanced video controls */
+.position-absolute .btn:hover {
+    transform: scale(1.1);
+}
+
+/* Custom scrollbar for mobile */
+@media (max-width: 768px) {
+    .container-modern {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+</style>
+{% endblock %}
--- a/smartsoltech/web/templates/web/blog_post_detail.html
+++ b/smartsoltech/web/templates/web/blog_post_detail.html
@@ -0,0 +1,399 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}{{ blog_post.title }} - SmartSolTech{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-modern">
+    <div class="container-modern">
+        <div class="row gy-4 align-items-center">
+            <div class="col-lg-8 mx-auto text-center">
+                <div class="blog-header">
+                    <div class="mb-3">
+                        <span class="badge bg-primary-modern">
+                            <i class="fas fa-newspaper me-1"></i>
+                            Блог
+                        </span>
+                    </div>
+                    <h1 class="display-5 fw-bold mb-4">{{ blog_post.title }}</h1>
+                    <div class="blog-meta d-flex justify-content-center align-items-center flex-wrap gap-3 text-muted">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-calendar-alt me-2"></i>
+                            <span>{{ blog_post.published_date|date:"d.m.Y" }}</span>
+                        </div>
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-clock me-2"></i>
+                            <span>{{ blog_post.published_date|date:"H:i" }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Blog Content -->
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <!-- Featured Image/Video -->
+                {% if blog_post.video %}
+                <div class="mb-5">
+                    <video class="w-100 rounded-4 shadow-lg" 
+                           style="max-height: 500px; object-fit: cover;" 
+                           controls
+                           {% if blog_post.video_poster %}poster="{{ blog_post.video_poster.url }}"{% endif %}>
+                        <source src="{{ blog_post.video.url }}" type="video/mp4">
+                        {% if blog_post.image %}
+                            <!-- Fallback image if video not supported -->
+                            <img src="{{ blog_post.image.url }}" class="w-100 rounded-4 shadow-lg" style="max-height: 500px; object-fit: cover;" alt="{{ blog_post.title }}">
+                        {% endif %}
+                        Ваш браузер не поддерживает видео.
+                    </video>
+                </div>
+                {% elif blog_post.image %}
+                <div class="mb-5">
+                    <img class="w-100 rounded-4 shadow-lg" 
+                         style="max-height: 500px; object-fit: cover;" 
+                         src="{{ blog_post.image.url }}" 
+                         alt="{{ blog_post.title }}" />
+                </div>
+                {% endif %}
+                
+                <!-- Blog Content -->
+                <div class="blog-content">
+                    <div class="content-wrapper">
+                        {{ blog_post.content|safe }}
+                    </div>
+                </div>
+                
+                <!-- Blog Navigation -->
+                <div class="blog-navigation mt-5 pt-4 border-top">
+                    <div class="row align-items-center">
+                        <div class="col-auto">
+                            <a href="{% url 'home' %}#blog" class="btn btn-outline-primary">
+                                <i class="fas fa-arrow-left me-2"></i>
+                                Вернуться к блогу
+                            </a>
+                        </div>
+                        <div class="col text-end">
+                            <!-- Social Share Buttons -->
+                            <div class="share-buttons">
+                                <span class="text-muted me-3">Поделиться:</span>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('telegram')" 
+                                   class="btn btn-sm btn-outline-primary me-2" 
+                                   title="Поделиться в Telegram">
+                                    <i class="fab fa-telegram"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('whatsapp')" 
+                                   class="btn btn-sm btn-outline-success me-2" 
+                                   title="Поделиться в WhatsApp">
+                                    <i class="fab fa-whatsapp"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('copy')" 
+                                   class="btn btn-sm btn-outline-secondary" 
+                                   title="Скопировать ссылку">
+                                    <i class="fas fa-copy"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Sidebar -->
+            <div class="col-lg-4">
+                <div class="blog-sidebar">
+                    <!-- Contact CTA -->
+                    <div class="card-modern mb-4">
+                        <div class="card-body text-center">
+                            <div class="mb-3">
+                                <i class="fas fa-comments text-primary" style="font-size: 2rem;"></i>
+                            </div>
+                            <h5 class="mb-3">Есть вопросы?</h5>
+                            <p class="text-muted mb-4">
+                                Свяжитесь с нами для бесплатной консультации
+                            </p>
+                            <a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
+                                <i class="fas fa-envelope me-2"></i>
+                                Написать нам
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <!-- Services CTA -->
+                    <div class="card-modern">
+                        <div class="card-body">
+                            <h6 class="mb-3">
+                                <i class="fas fa-cogs text-primary me-2"></i>
+                                Наши услуги
+                            </h6>
+                            <div class="d-grid gap-2">
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-laptop-code me-2"></i>
+                                    Веб-разработка
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-mobile-alt me-2"></i>
+                                    Мобильные приложения
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-chart-line me-2"></i>
+                                    IT консалтинг
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-cloud me-2"></i>
+                                    Облачные решения
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- CTA Section -->
+<section class="section-padding bg-gradient text-white">
+    <div class="container-modern text-center">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <h2 class="display-6 fw-bold mb-4">
+                    Готовы обсудить ваш проект?
+                </h2>
+                <p class="lead mb-5 opacity-90">
+                    Получите бесплатную консультацию от наших экспертов
+                </p>
+                <div class="d-flex flex-wrap gap-3 justify-content-center">
+                    <a href="mailto:info@smartsoltech.kr" class="btn btn-light btn-lg text-primary">
+                        <i class="fas fa-envelope me-2"></i>
+                        Связаться с нами
+                    </a>
+                    <a href="{% url 'services' %}" class="btn btn-outline-light btn-lg">
+                        <i class="fas fa-th-large me-2"></i>
+                        Наши услуги
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Social sharing functionality
+function shareToSocial(platform) {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent('{{ blog_post.title|addslashes }}');
+    const text = encodeURIComponent('{{ blog_post.title|addslashes }} - SmartSolTech');
+    
+    let shareUrl = '';
+    
+    switch(platform) {
+        case 'telegram':
+            shareUrl = `https://t.me/share/url?url=${url}&text=${text}`;
+            break;
+        case 'whatsapp':
+            shareUrl = `https://wa.me/?text=${text}%20${url}`;
+            break;
+        case 'copy':
+            navigator.clipboard.writeText(window.location.href).then(() => {
+                // Show success message
+                const btn = event.target.closest('a');
+                const originalIcon = btn.innerHTML;
+                btn.innerHTML = '<i class="fas fa-check"></i>';
+                btn.classList.add('btn-success');
+                btn.classList.remove('btn-outline-secondary');
+                
+                setTimeout(() => {
+                    btn.innerHTML = originalIcon;
+                    btn.classList.remove('btn-success');
+                    btn.classList.add('btn-outline-secondary');
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+            return;
+    }
+    
+    if (shareUrl) {
+        window.open(shareUrl, '_blank', 'width=550,height=420');
+    }
+}
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+</script>
+
+<style>
+.blog-header {
+    margin-bottom: 2rem;
+}
+
+.blog-meta {
+    font-size: 0.9rem;
+}
+
+.blog-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+}
+
+.blog-content h1,
+.blog-content h2,
+.blog-content h3,
+.blog-content h4,
+.blog-content h5,
+.blog-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.blog-content p {
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+}
+
+.blog-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+}
+
+.blog-content blockquote {
+    border-left: 4px solid var(--primary-color);
+    background: var(--bg-light);
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+}
+
+.blog-content ul,
+.blog-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 2rem;
+}
+
+.blog-content li {
+    margin-bottom: 0.5rem;
+}
+
+.blog-content pre {
+    background: var(--bg-dark);
+    color: var(--text-light);
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+}
+
+.blog-content code {
+    background: var(--bg-light);
+    color: var(--primary-color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+}
+
+.blog-content pre code {
+    background: none;
+    color: inherit;
+    padding: 0;
+}
+
+.blog-sidebar {
+    position: sticky;
+    top: 2rem;
+}
+
+.share-buttons a {
+    transition: transform 0.2s ease;
+}
+
+.share-buttons a:hover {
+    transform: translateY(-2px);
+}
+
+.blog-navigation {
+    background: var(--bg-light);
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+/* Content typography improvements */
+.content-wrapper {
+    font-family: 'Georgia', serif;
+}
+
+.content-wrapper h1 { font-size: 2.5rem; }
+.content-wrapper h2 { font-size: 2rem; }
+.content-wrapper h3 { font-size: 1.5rem; }
+.content-wrapper h4 { font-size: 1.25rem; }
+.content-wrapper h5 { font-size: 1.1rem; }
+.content-wrapper h6 { font-size: 1rem; }
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .blog-header h1 {
+        font-size: 2rem;
+    }
+    
+    .blog-meta {
+        font-size: 0.8rem;
+    }
+    
+    .share-buttons {
+        margin-top: 1rem;
+    }
+    
+    .share-buttons span {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+    
+    .blog-sidebar {
+        position: relative;
+        top: auto;
+        margin-top: 2rem;
+    }
+    
+    .content-wrapper h1 { font-size: 1.8rem; }
+    .content-wrapper h2 { font-size: 1.5rem; }
+    .content-wrapper h3 { font-size: 1.3rem; }
+}
+
+/* Print styles */
+@media print {
+    .blog-navigation,
+    .blog-sidebar,
+    .share-buttons {
+        display: none;
+    }
+    
+    .blog-content {
+        font-size: 12pt;
+        line-height: 1.5;
+    }
+}
+</style>
+{% endblock %}
--- a/smartsoltech/web/templates/web/career.html
+++ b/smartsoltech/web/templates/web/career.html
@@ -0,0 +1,776 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}Карьера в SmartSolTech - Присоединяйтесь к нашей команде{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-simple bg-dark-gradient text-white">
+    <div class="container-modern text-center py-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <h1 class="display-4 fw-bold mb-4 text-white">Карьера в SmartSolTech</h1>
+                <p class="lead opacity-90 text-light">
+                    Развивайтесь вместе с нами в мире инновационных технологий
+                </p>
+                {% if total_positions > 0 %}
+                <div class="career-stats mt-4">
+                    <div class="stats-row d-flex justify-content-center align-items-center flex-wrap">
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ total_positions }}</div>
+                            <div class="stat-label text-light">Открытых позиций</div>
+                        </div>
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ departments|length }}</div>
+                            <div class="stat-label text-light">Отделов</div>
+                        </div>
+                        <div class="stat-item stat-item-dark">
+                            <div class="stat-number text-white">{{ featured_careers|length }}</div>
+                            <div class="stat-label text-light">Топ вакансий</div>
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Featured Positions -->
+{% if featured_careers %}
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="text-center mb-5">
+            <h2 class="display-6 fw-bold text-primary mb-3">Рекомендуемые вакансии</h2>
+            <p class="lead text-muted">Наиболее актуальные позиции в нашей команде</p>
+        </div>
+        
+        <div class="row g-4">
+            {% for career in featured_careers %}
+            <div class="col-lg-4 col-md-6">
+                <div class="career-card-featured">
+                    <div class="career-header">
+                        <div class="career-badges">
+                            <span class="badge bg-warning text-dark">
+                                <i class="fas fa-star me-1"></i>
+                                Рекомендуем
+                            </span>
+                            <span class="badge bg-success">{{ career.get_employment_type_display }}</span>
+                        </div>
+                        <h3 class="career-title">{{ career.title }}</h3>
+                        <p class="career-department">
+                            <i class="fas fa-building me-2"></i>
+                            {{ career.department }}
+                        </p>
+                    </div>
+                    
+                    <div class="career-details">
+                        <div class="detail-row">
+                            <div class="detail-item">
+                                <i class="fas fa-map-marker-alt text-primary"></i>
+                                <span>{{ career.location }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <i class="fas fa-chart-line text-success"></i>
+                                <span>{{ career.get_experience_level_display }}</span>
+                            </div>
+                        </div>
+                        <div class="detail-row">
+                            <div class="detail-item salary">
+                                <i class="fas fa-won-sign text-warning"></i>
+                                <span>{{ career.salary_range }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="career-description">
+                        <p class="text-muted">{{ career.description|truncatewords:20 }}</p>
+                    </div>
+                    
+                    <div class="career-requirements">
+                        <h6 class="text-muted small mb-2">Ключевые требования:</h6>
+                        <p class="text-muted small">{{ career.requirements|truncatewords:15 }}</p>
+                    </div>
+                    
+                    {% if career.required_skills_list %}
+                    <div class="career-skills">
+                        {% for skill in career.required_skills_list|slice:":5" %}
+                            <span class="skill-tag">{{ skill }}</span>
+                        {% endfor %}
+                        {% if career.required_skills_list|length > 5 %}
+                            <span class="skill-tag more">+{{ career.required_skills_list|length|add:"-5" }}</span>
+                        {% endif %}
+                    </div>
+                    {% endif %}
+                    
+                    <div class="career-footer">
+                        {% if career.application_deadline %}
+                            <div class="deadline-info mb-3">
+                                <i class="fas fa-calendar-alt text-warning me-2"></i>
+                                <small class="text-muted">Подача заявок до {{ career.application_deadline }}</small>
+                            </div>
+                        {% endif %}
+                        
+                        <div class="d-grid gap-2">
+                            <a href="mailto:{{ career.contact_email }}?subject=Заявка на вакансию: {{ career.title }}&body=Здравствуйте!%0A%0AМеня заинтересовала вакансия {{ career.title }} в отделе {{ career.department }}.%0A%0AОпыт работы: [укажите ваш опыт]%0AКлючевые навыки: [перечислите ваши навыки]%0A%0AПрикладываю резюме в письме.%0A%0AС уважением,[Ваше имя]" 
+                               class="btn btn-primary">
+                                <i class="fas fa-paper-plane me-2"></i>
+                                Откликнуться
+                            </a>
+                            <button class="btn btn-outline-secondary btn-sm" onclick="shareJob('{{ career.title }}', '{{ career.department }}')">
+                                <i class="fas fa-share me-2"></i>
+                                Поделиться
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+{% endif %}
+
+<!-- All Positions -->
+{% if active_careers %}
+<section class="section-padding {% if not featured_careers %}pt-0{% endif %} bg-light">
+    <div class="container-modern">
+        <div class="text-center mb-5">
+            <h2 class="display-6 fw-bold text-primary mb-3">{% if featured_careers %}Все вакансии{% else %}Открытые вакансии{% endif %}</h2>
+            <p class="lead text-muted">Найдите идеальную позицию для своего развития</p>
+        </div>
+        
+        <!-- Department Filter -->
+        {% if departments %}
+        <div class="filter-section mb-5">
+            <div class="text-center">
+                <h6 class="text-muted mb-3">Фильтр по отделам:</h6>
+                <div class="department-filters">
+                    <button class="filter-btn active" data-department="all">Все отделы</button>
+                    {% for dept in departments %}
+                        <button class="filter-btn" data-department="{{ dept }}">{{ dept }}</button>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <div class="row g-4" id="careers-grid">
+            {% for career in active_careers %}
+            <div class="col-lg-6" data-department="{{ career.department }}">
+                <div class="career-card-compact">
+                    <div class="card-header">
+                        <div class="d-flex justify-content-between align-items-start">
+                            <div class="flex-grow-1">
+                                <h4 class="career-title">{{ career.title }}</h4>
+                                <p class="career-department text-muted mb-2">{{ career.department }}</p>
+                                <div class="career-meta">
+                                    <span class="meta-item">
+                                        <i class="fas fa-map-marker-alt me-1"></i>
+                                        {{ career.location }}
+                                    </span>
+                                    <span class="meta-item">
+                                        <i class="fas fa-briefcase me-1"></i>
+                                        {{ career.get_employment_type_display }}
+                                    </span>
+                                    <span class="meta-item">
+                                        <i class="fas fa-chart-line me-1"></i>
+                                        {{ career.get_experience_level_display }}
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="position-badges">
+                                {% if career.is_featured %}
+                                    <span class="badge bg-warning text-dark small">
+                                        <i class="fas fa-star"></i>
+                                    </span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card-body">
+                        <p class="career-description text-muted">{{ career.description|truncatewords:25 }}</p>
+                        
+                        {% if career.required_skills_list %}
+                        <div class="skills-preview mb-3">
+                            {% for skill in career.required_skills_list|slice:":4" %}
+                                <span class="skill-tag small">{{ skill }}</span>
+                            {% endfor %}
+                            {% if career.required_skills_list|length > 4 %}
+                                <span class="skill-tag small more">+{{ career.required_skills_list|length|add:"-4" }}</span>
+                            {% endif %}
+                        </div>
+                        {% endif %}
+                        
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div class="salary-info">
+                                <strong class="text-success">{{ career.salary_range }}</strong>
+                            </div>
+                            <a href="mailto:{{ career.contact_email }}?subject=Заявка на вакансию: {{ career.title }}" 
+                               class="btn btn-primary btn-sm">
+                                Откликнуться
+                            </a>
+                        </div>
+                    </div>
+                    
+                    {% if career.application_deadline %}
+                    <div class="card-footer">
+                        <small class="text-muted">
+                            <i class="fas fa-calendar-alt me-1"></i>
+                            Подача заявок до {{ career.application_deadline }}
+                        </small>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+{% else %}
+<section class="section-padding text-center">
+    <div class="container-modern">
+        <div class="py-5">
+            <div class="mb-4">
+                <i class="fas fa-briefcase text-muted" style="font-size: 4rem;"></i>
+            </div>
+            <h3 class="text-muted">В данный момент открытых вакансий нет</h3>
+            <p class="text-muted mb-4">Но мы всегда рады талантливым кандидатам! Отправьте нам своё резюме.</p>
+            <a href="mailto:hr@smartsoltech.kr" class="btn btn-primary btn-lg">
+                <i class="fas fa-envelope me-2"></i>
+                Связаться с HR
+            </a>
+        </div>
+    </div>
+</section>
+{% endif %}
+
+<!-- Join Team CTA -->
+<section class="section-padding bg-gradient text-white">
+    <div class="container-modern text-center">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <h2 class="display-6 fw-bold mb-4">Почему выбирают SmartSolTech?</h2>
+                <div class="row g-4 mt-4">
+                    <div class="col-md-3">
+                        <div class="benefit-item">
+                            <i class="fas fa-rocket mb-3"></i>
+                            <h5>Инновации</h5>
+                            <p class="small opacity-90">Работа с новейшими технологиями</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="benefit-item">
+                            <i class="fas fa-users mb-3"></i>
+                            <h5>Команда</h5>
+                            <p class="small opacity-90">Дружный коллектив профессионалов</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="benefit-item">
+                            <i class="fas fa-chart-line mb-3"></i>
+                            <h5>Развитие</h5>
+                            <p class="small opacity-90">Постоянное обучение и рост</p>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="benefit-item">
+                            <i class="fas fa-balance-scale mb-3"></i>
+                            <h5>Баланс</h5>
+                            <p class="small opacity-90">Гибкий график и удаленка</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <a href="{% url 'team' %}" class="btn btn-dark btn-lg me-3" style="background: rgba(45, 55, 72, 0.9); border-color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
+                        <i class="fas fa-users me-2"></i>
+                        Наша команда
+                    </a>
+                    <a href="{% url 'about' %}" class="btn btn-outline-dark btn-lg" style="border-color: rgba(45, 55, 72, 0.8); color: rgba(45, 55, 72, 0.9); backdrop-filter: blur(10px);">
+                        <i class="fas fa-info-circle me-2"></i>
+                        О компании
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_styles %}
+<style>
+/* Career Styles */
+.hero-simple {
+    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+    min-height: 350px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.bg-dark-gradient {
+    background: linear-gradient(135deg, #2d3748 0%, #4a5568 50%, #1a202c 100%) !important;
+    position: relative;
+}
+
+.bg-dark-gradient::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    z-index: 1;
+}
+
+.bg-dark-gradient > .container-modern {
+    position: relative;
+    z-index: 2;
+}
+
+.career-stats {
+    margin-top: 2rem;
+}
+
+.stats-row {
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.stat-item {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px 25px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+    min-width: 140px;
+    text-align: center;
+}
+
+.stat-item-dark {
+    background: rgba(45, 55, 72, 0.8) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item:hover {
+    transform: translateY(-5px);
+    background: rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.5);
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+    color: #e2e8f0 !important;
+}
+
+.career-card-featured {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    transition: all 0.4s ease;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    height: 100%;
+    border: 2px solid transparent;
+    display: flex;
+    flex-direction: column;
+}
+
+.career-card-featured:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+    border-color: #ffd700;
+}
+
+.career-card-compact {
+    background: white;
+    border-radius: 15px;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+    height: 100%;
+    overflow: hidden;
+}
+
+.career-card-compact:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
+}
+
+.card-header {
+    padding: 25px 25px 0;
+}
+
+.card-body {
+    padding: 20px 25px;
+}
+
+.card-footer {
+    padding: 15px 25px;
+    background: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+}
+
+.career-badges {
+    margin-bottom: 15px;
+}
+
+.career-badges .badge {
+    margin-right: 8px;
+    font-size: 0.75rem;
+    padding: 6px 12px;
+    border-radius: 15px;
+}
+
+.career-title {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #2d3748;
+    line-height: 1.3;
+}
+
+.career-department {
+    margin-bottom: 15px;
+    font-weight: 500;
+    color: #6b7280;
+}
+
+.career-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.meta-item {
+    font-size: 0.85rem;
+    color: #6b7280;
+    display: flex;
+    align-items: center;
+}
+
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #6b7280;
+}
+
+.detail-item i {
+    width: 20px;
+    margin-right: 8px;
+}
+
+.detail-item.salary {
+    font-weight: 600;
+    color: #059669;
+}
+
+.career-description {
+    margin: 20px 0;
+    flex-grow: 1;
+}
+
+.career-requirements {
+    margin: 20px 0;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 10px;
+    border-left: 3px solid #667eea;
+}
+
+.career-skills,
+.skills-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 20px;
+}
+
+.skill-tag {
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 4px 10px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #475569;
+    transition: all 0.2s ease;
+}
+
+.skill-tag:hover {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.skill-tag.more {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.skill-tag.small {
+    font-size: 0.7rem;
+    padding: 3px 8px;
+}
+
+.career-footer {
+    margin-top: auto;
+}
+
+.deadline-info {
+    padding: 10px;
+    background: #fef3c7;
+    border-radius: 8px;
+}
+
+.department-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.filter-btn {
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 25px;
+    padding: 8px 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #6b7280;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.filter-btn:hover,
+.filter-btn.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.position-badges {
+    display: flex;
+    gap: 5px;
+}
+
+.salary-info {
+    font-size: 1rem;
+}
+
+.benefit-item {
+    padding: 30px 20px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s ease;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.benefit-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-radius: 20px;
+    z-index: 1;
+}
+
+.benefit-item:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    background: rgba(255, 255, 255, 1);
+    border-color: rgba(102, 126, 234, 0.5);
+}
+
+.benefit-item > * {
+    position: relative;
+    z-index: 2;
+}
+
+.benefit-item i {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    color: #667eea;
+    text-shadow: none;
+    transition: all 0.3s ease;
+}
+
+.benefit-item:hover i {
+    transform: scale(1.1);
+    color: #5a67d8;
+}
+
+.benefit-item h5 {
+    color: #2d3748;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    font-size: 1.3rem;
+    text-shadow: none;
+    letter-spacing: 0.5px;
+}
+
+.benefit-item p {
+    color: #4a5568 !important;
+    text-shadow: none;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    margin-bottom: 0;
+    font-weight: 500;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .career-stats .stats-row {
+        justify-content: center;
+        gap: 15px;
+    }
+    
+    .stat-item {
+        padding: 15px 20px;
+        min-width: 120px;
+    }
+    
+    .stat-number {
+        font-size: 2rem;
+    }
+    
+    .career-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .detail-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+    
+    .department-filters {
+        justify-content: flex-start;
+    }
+    
+    .filter-btn {
+        font-size: 0.8rem;
+        padding: 6px 15px;
+    }
+    
+    /* Mobile styles for benefit items */
+    .benefit-item {
+        padding: 25px 15px;
+        margin-bottom: 20px;
+    }
+    
+    .benefit-item i {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+    
+    .benefit-item h5 {
+        font-size: 1.1rem;
+    }
+    
+    .benefit-item p {
+        font-size: 0.85rem;
+    }
+}
+
+/* Custom button styles */
+.btn-dark.btn-lg {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(45, 55, 72, 0.3);
+}
+
+.btn-dark.btn-lg:hover {
+    background: rgba(45, 55, 72, 1) !important;
+    border-color: rgba(45, 55, 72, 1) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(45, 55, 72, 0.4);
+}
+
+.btn-outline-dark.btn-lg {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(45, 55, 72, 0.2);
+}
+
+.btn-outline-dark.btn-lg:hover {
+    background: rgba(45, 55, 72, 0.9) !important;
+    border-color: rgba(45, 55, 72, 0.9) !important;
+    color: white !important;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(45, 55, 72, 0.3);
+}
+</style>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Department filter functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const careerCards = document.querySelectorAll('#careers-grid > div');
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            // Update active button
+            filterBtns.forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+
+            const department = this.dataset.department;
+
+            careerCards.forEach(card => {
+                if (department === 'all' || card.dataset.department === department) {
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        });
+    });
+});
+
+// Share job functionality
+function shareJob(title, department) {
+    if (navigator.share) {
+        navigator.share({
+            title: `Вакансия: ${title}`,
+            text: `Открыта вакансия "${title}" в отделе ${department} в SmartSolTech`,
+            url: window.location.href
+        });
+    } else {
+        // Fallback - copy to clipboard
+        const text = `Вакансия: ${title} в ${department} - SmartSolTech\n${window.location.href}`;
+        navigator.clipboard.writeText(text).then(() => {
+            alert('Ссылка скопирована в буфер обмена!');
+        });
+    }
+}
+</script>
+{% endblock %}
--- a/smartsoltech/web/templates/web/footer.html
+++ b/smartsoltech/web/templates/web/footer.html
@@ -1,48 +1,184 @@
-<!-- web/templates/web/footer.html -->
 {% load static %}
-<footer class="text-light bg-dark pt-5 pb-4">
-    <div class="container text-md-left">
-        <div class="row text-md-left">
-            <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
-                <h5 class="text-uppercase text-warning mb-4 font-weight-bold">SmartSolTech</h5>
-                <p>Future begins here...</p>
-            </div>
-            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
-                <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Products</h5>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Product 1</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Product 2</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Product 3</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Product 4</a></p>
-            </div>
-            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
-                <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Usefu links:</h5>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Your Account</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Become an Affiliate</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Shipping Rates</a></p>
-                <p><a class="text-light" href="#" style="text-decoration: none;">Help</a></p>
-            </div>
-            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
-                <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Contact</h5>
-                <p><i class="fas fa-home mr-3"></i> Gwangju-si Cheollanam-do, Republic of Korea</p>
-                <p><i class="fas fa-envelope mr-3"></i> a.choi@smartsoltech.kr</p>
-                <p><i class="fas fa-phone mr-3"></i> + 8 (210) 5693 6103</p>
+<footer class="bg-dark text-light section-padding mt-5">
+    <div class="container-modern">
+        <div class="row g-4">
+            <!-- Company Info -->
+            <div class="col-lg-4 col-md-6">
+                <div class="mb-4">
+                    <h4 class="text-gradient mb-3">
+                        <i class="fas fa-code me-2"></i>
+                        SmartSolTech
+                    </h4>
+                    <p class="text-light opacity-75 mb-4">
+                        Мы создаем инновационные IT-решения, которые помогают бизнесу расти и развиваться в цифровую эпоху.
+                    </p>
+                    <div class="d-flex gap-3">
+                        <a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
+                            <i class="fab fa-telegram-plane"></i>
+                        </a>
+                        <a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="#" class="btn btn-outline-light rounded-circle" style="width: 45px; height: 45px;">
+                            <i class="fab fa-github"></i>
+                        </a>
                    </div>
                </div>
-        <hr class="mb-4" />
+            </div>
+            
+            <!-- Services -->
+            <div class="col-lg-2 col-md-6">
+                <h5 class="mb-3 text-light">Услуги</h5>
+                <ul class="list-unstyled">
+                    <li class="mb-2">
+                        <a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
+                            Веб-разработка
+                        </a>
+                    </li>
+                    <li class="mb-2">
+                        <a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
+                            Мобильные приложения
+                        </a>
+                    </li>
+                    <li class="mb-2">
+                        <a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
+                            UI/UX Дизайн
+                        </a>
+                    </li>
+                    <li class="mb-2">
+                        <a href="{% url 'services' %}" class="text-light opacity-75 text-decoration-none hover-primary">
+                            DevOps
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            
+            <!-- Company -->
+            <div class="col-lg-2 col-md-6">
+                <h5 class="mb-3 text-light">Компания</h5>
+                <ul class="list-unstyled">
+                    <li class="mb-2">
+                        <a href="{% url 'about' %}" class="text-light opacity-75 text-decoration-none hover-primary">
+                            О нас
+                        </a>
+                    </li>
+                    <li class="mb-2">
+                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
+                            Команда
+                        </a>
+                    </li>
+                    <li class="mb-2">
+                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
+                            Карьера
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            
+            <!-- Contact Info -->
+            <div class="col-lg-4 col-md-6">
+                <h5 class="mb-3 text-light">Контакты</h5>
+                <div class="mb-3">
+                    <div class="d-flex align-items-center mb-2">
+                        <i class="fas fa-envelope me-3 text-primary"></i>
+                        <a href="mailto:info@smartsoltech.kr" class="text-light opacity-75 text-decoration-none hover-primary">
+                            a.choi@smartsoltech.kr
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-center mb-2">
+                        <i class="fas fa-phone me-3 text-primary"></i>
+                        <a href="tel:+82-10-5693-6103" class="text-light opacity-75 text-decoration-none hover-primary">
+                            +82-10-5693-6103
+                        </a>
+                    </div>
+                    <div class="d-flex align-items-start mb-2">
+                        <i class="fas fa-map-marker-alt me-3 text-primary mt-1"></i>
+                        <span class="text-light opacity-75">
+                            Gwangju, South Korea
+                        </span>
+                    </div>
+                </div>
+                
+                <!-- Newsletter -->
+                <div class="mt-4">
+                    <h6 class="text-light mb-2">Подписаться на новости</h6>
+                    <form class="d-flex">
+                        <input type="email" class="form-control me-2 bg-transparent border-light text-light" 
+                               placeholder="Ваш email" style="border-radius: 10px;">
+                        <button type="submit" class="btn btn-primary-modern">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+        
+        <hr class="my-5 border-light opacity-25">
+        
+        <!-- Copyright -->
        <div class="row align-items-center">
-            <div class="col-md-7 col-lg-8">
-                <p class="text-md-left">© 2024 SmartSolTech. All rights reserved.</p>
+            <div class="col-md-6">
+                <p class="mb-0 text-light opacity-75">
+                    © 2025 SmartSolTech. Все права защищены.
+                </p>
            </div>
-            <div class="col-md-5 col-lg-4">
-                <div class="text-md-right">
-                    <ul class="list-unstyled list-inline">
-                        <li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-facebook"></i></a></li>
-                        <li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-twitter"></i></a></li>
-                        <li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-google-plus"></i></a></li>
-                        <li class="list-inline-item"><a class="btn-floating btn-sm text-light" href="#" style="font-size: 23px;"><i class="fab fa-linkedin-in"></i></a></li>
+            <div class="col-md-6">
+                <div class="d-md-flex justify-content-md-end">
+                    <ul class="list-inline mb-0">
+                        <li class="list-inline-item">
+                            <a href="#" class="text-light opacity-75 text-decoration-none hover-primary small">
+                                Политика конфиденциальности
+                            </a>
+                        </li>
+                        <li class="list-inline-item ms-3">
+                            <a href="#" class="text-light opacity-75 text-decoration-none hover-primary small">
+                                Условия использования
+                            </a>
+                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
 </footer>
+
+<style>
+.hover-primary {
+    transition: all 0.3s ease;
+}
+
+.hover-primary:hover {
+    color: var(--primary-color) !important;
+    opacity: 1 !important;
+}
+
+footer {
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
+    position: relative;
+}
+
+footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="0.5" fill="%236366f1" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
+    opacity: 0.3;
+}
+
+footer .container-modern {
+    position: relative;
+    z-index: 1;
+}
+
+.btn-outline-light:hover {
+    background: var(--gradient-primary) !important;
+    border-color: transparent !important;
+    transform: translateY(-2px);
+}
+</style>
--- a/smartsoltech/web/templates/web/footer_modern.html
+++ b/smartsoltech/web/templates/web/footer_modern.html
@@ -65,11 +65,6 @@
                            О нас
                        </a>
                    </li>
-                    <li class="mb-2">
-                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
-                            Портфолио
-                        </a>
-                    </li>
                    <li class="mb-2">
                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
                            Команда
--- a/smartsoltech/web/templates/web/gallery_preview.html
+++ b/smartsoltech/web/templates/web/gallery_preview.html
@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Предпросмотр современной галереи</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Lightbox2 CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+    
+    <!-- Наши стили -->
+    <link href="../../static/assets/css/compact-gallery.css" rel="stylesheet">
+    
+    <style>
+        body {
+            background: #f8fafc;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            padding: 2rem 0;
+        }
+        
+        .container {
+            max-width: 1200px;
+        }
+        
+        .preview-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .preview-header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1e293b;
+            margin-bottom: 1rem;
+        }
+        
+        .preview-header p {
+            font-size: 1.2rem;
+            color: #64748b;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="preview-header">
+            <h1>Современная медиа-галерея</h1>
+            <p>Интерактивная галерея с навигацией, миниатюрами и полноэкранным просмотром</p>
+        </div>
+        
+        <!-- Современная медиа-галерея -->
+        <div class="modern-media-gallery">
+            <!-- Основное медиа -->
+            <div class="main-media-container">
+                <div class="main-media-wrapper">
+                    <!-- Медиа элементы -->
+                    <div class="main-media-item active" data-index="0">
+                        <img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение+1" 
+                             alt="Изображение 1" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Название изображения</div>
+                                <div class="media-meta">Фото • 1920x1080 • 2.3 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(0)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="1">
+                        <img src="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Главное+изображение+2" 
+                             alt="Изображение 2" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Второе изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 1.8 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(1)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="2">
+                        <video class="main-media-video" controls>
+                            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
+                        </video>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Демо видео</div>
+                                <div class="media-meta">Видео • MP4 • 1:32</div>
+                            </div>
+                            <button class="media-action-btn" onclick="toggleVideo(2)">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="3">
+                        <div class="embed-container">
+                            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
+                                    class="main-media-embed" 
+                                    allowfullscreen></iframe>
+                        </div>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">YouTube видео</div>
+                                <div class="media-meta">Встраивание • YouTube</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openFullscreen(3)">
+                                <i class="fas fa-external-link-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="4">
+                        <img src="https://via.placeholder.com/800x500/06b6d4/ffffff?text=Главное+изображение+3" 
+                             alt="Изображение 3" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Третье изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 3.1 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(4)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Навигационные кнопки -->
+                    <button class="media-nav-btn prev-btn" onclick="gallery.previousMedia()">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    
+                    <button class="media-nav-btn next-btn" onclick="gallery.nextMedia()">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Индикатор прогресса -->
+            <div class="gallery-progress">
+                <div class="progress-bar" style="width: 20%"></div>
+            </div>
+            
+            <!-- Миниатюры -->
+            <div class="thumbnails-container">
+                <div class="thumbnails-wrapper">
+                    <div class="thumbnail-item active" data-index="0" onclick="gallery.switchToMedia(0)">
+                        <img src="https://via.placeholder.com/80x60/4f46e5/ffffff?text=1" alt="Thumb 1" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">1</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="1" onclick="gallery.switchToMedia(1)">
+                        <img src="https://via.placeholder.com/80x60/7c3aed/ffffff?text=2" alt="Thumb 2" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">2</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="2" onclick="gallery.switchToMedia(2)">
+                        <div class="video-thumbnail-placeholder">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="media-type-badge video">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">3</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="3" onclick="gallery.switchToMedia(3)">
+                        <div class="embed-thumbnail-placeholder">
+                            <i class="fab fa-youtube"></i>
+                        </div>
+                        <div class="media-type-badge embed">
+                            <i class="fas fa-link"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">4</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="4" onclick="gallery.switchToMedia(4)">
+                        <img src="https://via.placeholder.com/80x60/06b6d4/ffffff?text=3" alt="Thumb 3" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Lightbox2 JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+
+    <script>
+        // Класс для управления современной галереей
+        class ModernMediaGallery {
+            constructor(container) {
+                this.container = container;
+                this.mediaItems = container.querySelectorAll('.main-media-item');
+                this.thumbnails = container.querySelectorAll('.thumbnail-item');
+                this.progressBar = container.querySelector('.progress-bar');
+                this.currentIndex = 0;
+                
+                this.initGallery();
+                this.bindEvents();
+            }
+            
+            initGallery() {
+                this.updateProgress();
+                this.preloadMedia();
+            }
+            
+            bindEvents() {
+                // Клавиатурные события
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        this.previousMedia();
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        this.nextMedia();
+                    }
+                });
+                
+                // Touch события для свайпа
+                let startX = 0;
+                let startY = 0;
+                
+                this.container.addEventListener('touchstart', (e) => {
+                    startX = e.touches[0].clientX;
+                    startY = e.touches[0].clientY;
+                }, { passive: true });
+                
+                this.container.addEventListener('touchend', (e) => {
+                    const endX = e.changedTouches[0].clientX;
+                    const endY = e.changedTouches[0].clientY;
+                    
+                    const deltaX = endX - startX;
+                    const deltaY = endY - startY;
+                    
+                    // Проверяем, что это горизонтальный свайп
+                    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+                        if (deltaX > 0) {
+                            this.previousMedia();
+                        } else {
+                            this.nextMedia();
+                        }
+                    }
+                }, { passive: true });
+            }
+            
+            switchToMedia(index) {
+                if (index === this.currentIndex) return;
+                
+                // Останавливаем текущее видео
+                this.stopCurrentVideo();
+                
+                // Обновляем активные элементы
+                this.mediaItems[this.currentIndex].classList.remove('active');
+                this.thumbnails[this.currentIndex].classList.remove('active');
+                
+                this.currentIndex = index;
+                
+                this.mediaItems[this.currentIndex].classList.add('active');
+                this.thumbnails[this.currentIndex].classList.add('active');
+                
+                this.updateProgress();
+                this.scrollToActiveThumbnail();
+            }
+            
+            nextMedia() {
+                const nextIndex = (this.currentIndex + 1) % this.mediaItems.length;
+                this.switchToMedia(nextIndex);
+            }
+            
+            previousMedia() {
+                const prevIndex = (this.currentIndex - 1 + this.mediaItems.length) % this.mediaItems.length;
+                this.switchToMedia(prevIndex);
+            }
+            
+            updateProgress() {
+                const progress = ((this.currentIndex + 1) / this.mediaItems.length) * 100;
+                this.progressBar.style.width = `${progress}%`;
+            }
+            
+            scrollToActiveThumbnail() {
+                const activeThumbnail = this.thumbnails[this.currentIndex];
+                const container = activeThumbnail.parentElement;
+                
+                const thumbnailOffsetLeft = activeThumbnail.offsetLeft;
+                const thumbnailWidth = activeThumbnail.offsetWidth;
+                const containerWidth = container.offsetWidth;
+                
+                const scrollLeft = thumbnailOffsetLeft - (containerWidth / 2) + (thumbnailWidth / 2);
+                container.scrollTo({
+                    left: scrollLeft,
+                    behavior: 'smooth'
+                });
+            }
+            
+            stopCurrentVideo() {
+                const currentItem = this.mediaItems[this.currentIndex];
+                const video = currentItem.querySelector('video');
+                if (video) {
+                    video.pause();
+                }
+            }
+            
+            preloadMedia() {
+                this.mediaItems.forEach((item, index) => {
+                    if (index <= 2) { // Предзагружаем первые 3 элемента
+                        const img = item.querySelector('img');
+                        if (img && !img.complete) {
+                            // Изображение уже загружается
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Инициализация галереи
+        let gallery;
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const galleryContainer = document.querySelector('.modern-media-gallery');
+            if (galleryContainer) {
+                gallery = new ModernMediaGallery(galleryContainer);
+            }
+        });
+        
+        // Глобальные функции для интерактивности
+        function openLightbox(index) {
+            // Функция для открытия изображения в лайтбоксе
+            console.log('Открытие лайтбокса для изображения', index);
+        }
+        
+        function toggleVideo(index) {
+            const video = gallery.mediaItems[index].querySelector('video');
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        }
+        
+        function openFullscreen(index) {
+            // Функция для открытия встраиваемого контента в полном экране
+            console.log('Открытие в полном экране', index);
+        }
+    </script>
+</body>
+</html>
--- a/smartsoltech/web/templates/web/header.html
+++ b/smartsoltech/web/templates/web/header.html
@@ -1,20 +0,0 @@
-<!-- web/templates/web/header.html -->
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="{% url 'home' %}">Smartsoltech</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
-            <li class="nav-item">
-                <a class="nav-link" href="{% url 'home' %}">Главная</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="{% url 'services' %}">Услуги</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="{% url 'about' %}">Контакты</a>
-            </li>
-        </ul>
-    </div>
-</nav>
--- a/smartsoltech/web/templates/web/home.html
+++ b/smartsoltech/web/templates/web/home.html
--- a/smartsoltech/web/templates/web/home_modern.html
+++ b/smartsoltech/web/templates/web/home_modern.html
@@ -163,10 +163,10 @@
                                    <!-- Mobile Preview -->
                                    <div class="mobile-preview position-absolute bg-white rounded-4 p-3 shadow" 
                                         style="transform: rotate(10deg); top: 50px; right: 50px; width: 200px;">
-                                        <div class="bg-gradient rounded-3 p-3 text-white text-center">
-                                            <i class="fas fa-mobile-alt fa-3x mb-2"></i>
-                                            <h6 class="mb-1">Мобильные</h6>
-                                            <p class="small mb-0 opacity-75">приложения</p>
+                                        <div class="bg-light rounded-3 p-3 text-dark text-center" style="background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;">
+                                            <i class="fas fa-mobile-alt fa-3x mb-2 text-primary"></i>
+                                            <h6 class="mb-1 text-dark fw-bold">Мобильные</h6>
+                                            <p class="small mb-0 text-muted">приложения</p>
                                        </div>
                                    </div>
                                    
@@ -353,7 +353,7 @@
                        <i class="fas fa-comments me-2"></i>
                        Получить консультацию
                    </a>
-                    <a href="tel:+82-10-XXXX-XXXX" class="btn btn-outline-light btn-lg">
+                    <a href="tel:+82-10-XXXX-XXXX" class="btn btn-light btn-lg" style="background: rgba(255,255,255,0.9); color: #2d3748; border: 2px solid rgba(255,255,255,0.3);">
                        <i class="fas fa-phone me-2"></i>
                        Позвонить сейчас
                    </a>
@@ -367,10 +367,6 @@
 <section class="section-padding bg-light" id="portfolio">
    <div class="container-modern">
        <div class="text-center mb-5">
-            <span class="badge bg-primary rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-briefcase me-2"></i>
-                💼 Портфолио
-            </span>
            <h2 class="display-6 fw-bold mb-3">
                Наши <span class="text-gradient">работы</span>
            </h2>
@@ -396,7 +392,7 @@
                    {% endif %}
                    <div class="p-4">
                        <h5 class="mb-3">{{ project.name }}</h5>
-                        <p class="text-muted mb-3">{{ project.description|truncatewords:15 }}</p>
+                        <p class="text-muted mb-3">{{ project.short_description|default:project.description|striptags|truncatewords:15 }}</p>
                        <a href="{% url 'project_detail' project.pk %}" class="text-primary fw-semibold">
                            Подробнее <i class="fas fa-arrow-right ms-1"></i>
                        </a>
@@ -408,7 +404,7 @@
        {% endif %}
        
        <div class="text-center mt-5">
-            <a href="{% url 'portfolio' %}" class="btn btn-primary-modern btn-lg">
+            <a href="{% url 'projects_list' %}" class="btn btn-primary-modern btn-lg">
                <i class="fas fa-th-large me-2"></i>
                Смотреть все проекты
            </a>
@@ -420,10 +416,6 @@
 <section class="section-padding" id="blog">
    <div class="container-modern">
        <div class="text-center mb-5">
-            <span class="badge bg-success rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-blog me-2"></i>
-                📝 Блог
-            </span>
            <h2 class="display-6 fw-bold mb-3">
                Последние <span class="text-gradient">статьи</span>
            </h2>
@@ -463,112 +455,6 @@
        </div>
    </div>
 </section>
-
-<!-- News Section -->
-<section class="section-padding bg-light" id="news">
-    <div class="container-modern">
-        <div class="text-center mb-5">
-            <span class="badge bg-warning rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-newspaper me-2"></i>
-                📰 Новости
-            </span>
-            <h2 class="display-6 fw-bold mb-3">
-                Последние <span class="text-gradient">новости</span>
-            </h2>
-        </div>
-        
-        <div class="row g-4">
-            <div class="col-lg-12">
-                <div class="news-card bg-white rounded-4 p-4 shadow">
-                    <div class="d-flex align-items-center mb-3">
-                        <span class="badge bg-primary rounded-pill px-3 py-1 me-3">24.11.2025</span>
-                        <h5 class="mb-0">Новый сайт</h5>
-                    </div>
-                    <p class="text-muted mb-3">
-                        Поздравляем всех наших клиентов с этой знаменательной датой! 
-                        Мы переписали свой сайт! теперь у нас современный дизайн и улучшенная функциональность...
-                    </p>
-                    <a href="{% url 'news' %}" class="text-primary fw-semibold">
-                        Узнать больше <i class="fas fa-arrow-right ms-1"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-        
-        <div class="text-center mt-4">
-            <a href="{% url 'news' %}" class="btn btn-primary-modern btn-lg">
-                <i class="fas fa-newspaper me-2"></i>
-                Все новости
-            </a>
-        </div>
-    </div>
-</section>
-
-<!-- Career Section -->
-<section class="section-padding" id="career">
-    <div class="container-modern">
-        <div class="text-center mb-5">
-            <span class="badge bg-info rounded-pill px-3 py-2 mb-3">
-                <i class="fas fa-rocket me-2"></i>
-                🚀 Карьера
-            </span>
-            <h2 class="display-6 fw-bold mb-3">
-                Присоединяйтесь к нашей <span class="text-gradient">команде</span>
-            </h2>
-            <p class="lead text-muted max-width-600 mx-auto">
-                Мы ищем талантливых специалистов, которые разделяют нашу страсть к технологиям и инновациям.
-            </p>
-        </div>
-        
-        <div class="row g-4 mb-5">
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-primary rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-chart-line fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Профессиональный рост</h6>
-                    <p class="text-muted small mb-0">Возможности для развития и обучения</p>
-                </div>
-            </div>
-            
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-success rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-users fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Команда профессионалов</h6>
-                    <p class="text-muted small mb-0">Работайте с лучшими специалистами</p>
-                </div>
-            </div>
-            
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-warning rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-clock fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Гибкий график</h6>
-                    <p class="text-muted small mb-0">Удаленная работа и гибкое расписание</p>
-                </div>
-            </div>
-        </div>
-        
-        <div class="text-center">
-            <div class="career-stats bg-gradient rounded-4 p-4 text-white mb-4" style="max-width: 300px; margin: 0 auto;">
-                <h3 class="display-4 fw-bold mb-2">0</h3>
-                <h6 class="mb-2">Открыто вакансий</h6>
-                <p class="small mb-0 opacity-75">Найдите свою идеальную позицию</p>
-            </div>
-            
-            <a href="{% url 'career' %}" class="btn btn-primary-modern btn-lg me-3">
-                <i class="fas fa-briefcase me-2"></i>
-                Смотреть вакансии
-            </a>
-            <a href="{% url 'career' %}" class="btn btn-outline-primary btn-lg">
-                Посмотреть все
-            </a>
-        </div>
-    </div>
-</section>
 {% endblock %}

 {% block extra_styles %}
@@ -699,34 +585,43 @@
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 50px;
+    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-    min-width: 60px;
+    min-width: 120px;
+    height: 48px;
    display: flex;
+    align-items: center;
    justify-content: center;
+    transform-origin: center;
+}
+
+.outer-pill.expanding {
+    transform: scale(1.02);
 }

 .pill-indicators {
    display: flex;
-    gap: 4px;
+    gap: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
-    border-radius: 40px;
-    padding: 4px;
+    border-radius: 20px;
+    padding: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    height: 32px;
+    width: 100%;
 }

 .pill-indicator {
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 50%;
-    width: 12px;
-    height: 12px;
+    width: 32px;
+    height: 32px;
    padding: 0;
-    margin: 0;
+    margin: 0 2px;
    color: transparent;
    font-size: 0;
    cursor: pointer;
@@ -738,13 +633,14 @@
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
+    flex-shrink: 0;
 }

 .pill-indicator::before {
    content: '';
    position: absolute;
-    width: 6px;
-    height: 6px;
+    width: 8px;
+    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
@@ -756,12 +652,14 @@
    color: #333;
    font-size: 11px;
    font-weight: 600;
-    padding: 8px 16px;
-    border-radius: 25px;
+    padding: 0 16px;
+    border-radius: 16px;
    width: auto;
-    height: auto;
+    height: 32px;
+    min-width: 80px;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
+    margin: 0 8px;
 }

 .pill-indicator.active::before {
@@ -772,13 +670,13 @@

 .pill-indicator:not(.active):hover {
    background: rgba(255, 255, 255, 0.6);
-    transform: scale(1.2);
+    transform: scale(1.1);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
 }

 .pill-indicator:not(.active):hover::before {
    opacity: 1;
-    transform: scale(1.2);
+    transform: scale(1.1);
 }

 .pill-indicator-title {
@@ -904,36 +802,64 @@ document.addEventListener('DOMContentLoaded', function() {
                // Показываем текст активного индикатора
                const title = indicator.querySelector('.pill-indicator-title');
                if (title) {
-                    indicator.style.color = '#333';
-                    title.style.opacity = '1';
-                    title.style.transform = 'scale(1)';
+                    // Убираем inline стили, чтобы CSS правила работали корректно
+                    indicator.style.color = '';
+                    title.style.opacity = '';
+                    title.style.transform = '';
                }
            } else {
                indicator.classList.remove('active');
-                // Скрываем текст неактивных индикаторов
+                // Скрываем текст неактивных индикаторов и убираем inline стили
                const title = indicator.querySelector('.pill-indicator-title');
                if (title) {
-                    indicator.style.color = 'transparent';
-                    title.style.opacity = '0';
-                    title.style.transform = 'scale(0.8)';
+                    indicator.style.color = '';
+                    title.style.opacity = '';
+                    title.style.transform = '';
+                    // Убираем любые hover эффекты
+                    indicator.style.transform = '';
+                    indicator.style.background = '';
                }
            }
        });
        
-        // Анимация внешней pill (растягивается под активный элемент)
-        if (outerPill) {
-            const activeIndicator = indicators[index];
-            if (activeIndicator) {
-                // Измеряем ширину активного элемента
-                const activeRect = activeIndicator.getBoundingClientRect();
-                const containerRect = outerPill.getBoundingClientRect();
+        // Динамический расчет ширины внешнего контейнера
+        setTimeout(() => {
+            if (outerPill && indicators.length > 0) {
+                let totalWidth = 0;
                
-                // Вычисляем нужную ширину (с учетом padding)
-                const newWidth = Math.max(activeRect.width + 40, 120);
-                outerPill.style.width = newWidth + 'px';
-                outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
+                // Проходим по всем маркерам и суммируем их ширины
+                indicators.forEach((indicator, i) => {
+                    if (i === index && indicator.classList.contains('active')) {
+                        // Активный маркер - измеряем его реальную ширину
+                        const rect = indicator.getBoundingClientRect();
+                        totalWidth += rect.width || 60; // fallback к минимальной ширине
+                    } else {
+                        // Неактивный маркер - фиксированная ширина 36px
+                        totalWidth += 36;
                    }
+                    
+                    // Добавляем gap между маркерами (16px), кроме последнего
+                    if (i < indicators.length - 1) {
+                        totalWidth += 16;
                    }
+                });
+                
+                // Добавляем padding контейнера: 10px слева + 10px справа
+                totalWidth += 20;
+                
+                // Применяем новую ширину
+                outerPill.style.width = totalWidth + 'px';
+                
+                console.log('Pill state update:');
+                console.log('- Active index:', index);
+                console.log('- Total width:', totalWidth + 'px');
+                console.log('- Active element width:', 
+                    indicators[index] ? indicators[index].getBoundingClientRect().width + 'px' : 'N/A');
+                console.log('- Inactive elements count:', indicators.length - 1);
+                console.log('- Gaps total:', (indicators.length - 1) * 16 + 'px');
+                console.log('- Padding total: 20px');
+            }
+        }, 50);
        
        currentActiveIndex = index;
    }
@@ -941,38 +867,128 @@ document.addEventListener('DOMContentLoaded', function() {
    // Обработчики событий для индикаторов
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', function() {
+            console.log('Clicked indicator:', index);
            currentActiveIndex = index;
+            
+            // Добавляем класс расширения
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
            updatePillState(index);
        });
        
        // Hover эффекты для неактивных элементов
        indicator.addEventListener('mouseenter', function() {
            if (!this.classList.contains('active')) {
-                this.style.transform = 'scale(1.2)';
+                this.style.transform = 'scale(1.1)';
                this.style.background = 'rgba(255, 255, 255, 0.6)';
+                this.style.borderColor = 'rgba(255, 255, 255, 0.7)';
            }
        });
        
        indicator.addEventListener('mouseleave', function() {
            if (!this.classList.contains('active')) {
-                this.style.transform = 'scale(1)';
-                this.style.background = 'rgba(255, 255, 255, 0.4)';
+                // Возвращаем к исходному состоянию
+                this.style.transform = '';
+                this.style.background = '';
+                this.style.borderColor = '';
            }
        });
    });
    
    // Bootstrap carousel события
    if (carousel) {
+        // Обработка начала смены слайда
        carousel.addEventListener('slide.bs.carousel', function(event) {
            const nextIndex = event.to;
+            console.log('Carousel sliding to:', nextIndex);
            currentActiveIndex = nextIndex;
+            
+            // Добавляем класс расширения при смене слайда
+            if (outerPill) {
+                outerPill.classList.add('expanding');
+                setTimeout(() => {
+                    outerPill.classList.remove('expanding');
+                }, 400);
+            }
+            
+            // Обновляем состояние пилюли сразу при начале смены слайда
            updatePillState(nextIndex);
        });
        
-        // Инициализируем первое состояние
+        // Дополнительная обработка завершения смены слайда для надежности
+        carousel.addEventListener('slid.bs.carousel', function(event) {
+            const currentIndex = event.to;
+            console.log('Carousel slide completed:', currentIndex);
+            
+            // Дополнительное обновление состояния для гарантии корректного отображения
            setTimeout(() => {
-            updatePillState(0);
+                updatePillState(currentIndex);
            }, 100);
+        });
+        
+        // Инициализируем первое состояние и рассчитываем начальную ширину
+        setTimeout(() => {
+            console.log('Initializing pill state...');
+            updatePillState(0);
+            
+            // Дополнительная инициализация ширины контейнера
+            if (outerPill && indicators.length > 0) {
+                let initialWidth = 20; // padding
+                
+                // Первый элемент активный, остальные неактивные
+                indicators.forEach((indicator, i) => {
+                    if (i === 0) {
+                        // Даем время активному элементу развернуться
+                        setTimeout(() => {
+                            const rect = indicator.getBoundingClientRect();
+                            let width = 20 + rect.width; // padding + активный элемент
+                            
+                            // Добавляем неактивные элементы
+                            if (indicators.length > 1) {
+                                width += (indicators.length - 1) * 36; // неактивные элементы
+                                width += (indicators.length - 1) * 16; // gaps между элементами
+                            }
+                            
+                            outerPill.style.width = width + 'px';
+                            console.log('Initial container width:', width + 'px');
+                        }, 100);
+                    }
+                });
+            }
+        }, 200);
+    }
+    
+    // Отслеживаем изменения размеров активного элемента для пересчета ширины
+    if (window.ResizeObserver && outerPill) {
+        const resizeObserver = new ResizeObserver(entries => {
+            // Пересчитываем ширину контейнера при изменении размеров
+            let totalWidth = 0;
+            
+            indicators.forEach((indicator, i) => {
+                if (indicator.classList.contains('active')) {
+                    const rect = indicator.getBoundingClientRect();
+                    totalWidth += rect.width;
+                } else {
+                    totalWidth += 36;
+                }
+                
+                if (i < indicators.length - 1) {
+                    totalWidth += 16;
+                }
+            });
+            
+            totalWidth += 20; // padding
+            outerPill.style.width = totalWidth + 'px';
+        });
+        
+        indicators.forEach(indicator => {
+            resizeObserver.observe(indicator);
+        });
    }
    
    // Animate elements on scroll
--- a/smartsoltech/web/templates/web/modal_order_form.html
+++ b/smartsoltech/web/templates/web/modal_order_form.html
@@ -1,99 +1,157 @@
 {% load static %}
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    <title>Модальное окно для заявки на услугу</title>
-    <style>
-        /* Стили для модального окна */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgba(0, 0, 0, 0.4);
-        }

-        .modal-content {
-            background-color: #fefefe;
-            margin: 15% auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-            max-width: 600px;
-        }
-
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-
-        .close:hover,
-        .close:focus {
-            color: #000;
-            text-decoration: none;
-            cursor: pointer;
-        }
-
-        #qrCodeImg {
-            display: none;
-            margin: 20px auto;
-            width: 200px;
-            height: 200px;
-        }
-    </style>
-</head>
-<body>
-
-<!-- Модальное окно -->
-<div id="serviceModal" class="modal">
-    <div class="modal-content">
-        <span class="close">&times;</span>
+<!-- Modern Service Request Modal -->
+<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content border-0 shadow-lg">
+            <div class="modal-header bg-gradient text-white border-0">
+                <h5 class="modal-title" id="serviceModalLabel">
+                    <i class="fas fa-paper-plane me-2"></i>
+                    Заказать услугу
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-4">
                <form id="serviceRequestForm">
-            <div class="form-group">
-                <label for="clientName">Ваше имя:</label>
-                <input type="text" class="form-control" id="clientName" name="client_name" required>
+                    {% csrf_token %}
+                    <input type="hidden" id="serviceId" name="service_id">
+                    
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label for="firstName" class="form-label">Имя *</label>
+                            <input type="text" class="form-control" id="firstName" name="first_name" required>
                        </div>
-            <div class="form-group">
-                <label for="clientEmail">Ваш email:</label>
-                <input type="email" class="form-control" id="clientEmail" name="client_email" required>
+                        <div class="col-md-6">
+                            <label for="lastName" class="form-label">Фамилия *</label>
+                            <input type="text" class="form-control" id="lastName" name="last_name" required>
                        </div>
-            <div class="form-group">
-                <label for="clientPhone">Ваш телефон:</label>
-                <input type="text" class="form-control" id="clientPhone" name="client_phone" required pattern="^\+?[0-9\s\-]{7,15}$">
+                        <div class="col-md-6">
+                            <label for="email" class="form-label">Email *</label>
+                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
-            <div class="form-group">
-                <label for="description">Описание заявки:</label>
-                <textarea class="form-control" id="description" name="description" required></textarea>
+                        <div class="col-md-6">
+                            <label for="phone" class="form-label">Телефон</label>
+                            <input type="tel" class="form-control" id="phone" name="phone">
+                        </div>
+                        <div class="col-12">
+                            <label for="description" class="form-label">Описание проекта *</label>
+                            <textarea class="form-control" id="description" name="description" rows="4" 
+                                      placeholder="Опишите ваш проект, цели и требования..." required></textarea>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="budget" class="form-label">Примерный бюджет</label>
+                            <select class="form-select" id="budget" name="budget">
+                                <option value="">Не определен</option>
+                                <option value="1000-5000">₩ 1,000,000 - 5,000,000</option>
+                                <option value="5000-10000">₩ 5,000,000 - 10,000,000</option>
+                                <option value="10000+">₩ 10,000,000+</option>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="timeline" class="form-label">Желаемые сроки</label>
+                            <select class="form-select" id="timeline" name="timeline">
+                                <option value="">Не определены</option>
+                                <option value="urgent">Срочно (1-2 недели)</option>
+                                <option value="normal">Обычно (1-2 месяца)</option>
+                                <option value="flexible">Гибкие сроки</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <!-- QR Code Section (Hidden by default) -->
+                    <div class="mt-4" id="qrCodeSection" style="display: none;">
+                        <div class="alert alert-info text-center">
+                            <h6><i class="fas fa-qrcode me-2"></i>Завершите регистрацию через Telegram</h6>
+                            <p class="mb-3">Отсканируйте QR-код или перейдите по ссылке для подтверждения заявки:</p>
+                            <div class="d-flex justify-content-center mb-3">
+                                <img id="qrCodeImage" src="" alt="QR Code" class="img-fluid border rounded" style="max-width: 200px; min-width: 200px; height: 200px; object-fit: contain; display: none;">
+                            </div>
+                            <div class="mb-3">
+                                <a id="telegramLink" href="" target="_blank" class="btn btn-info">
+                                    <i class="fab fa-telegram-plane me-2"></i>Открыть в Telegram
+                                </a>
+                            </div>
+                            <div class="d-flex align-items-center justify-content-center">
+                                <div class="spinner-border spinner-border-sm text-primary me-2" role="status" aria-hidden="true"></div>
+                                <small class="text-muted">Ожидаем подтверждения в Telegram...</small>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Success Animation Section (Hidden by default) -->
+                    <div class="mt-4" id="successSection" style="display: none;">
+                        <div class="text-center py-5">
+                            <div class="success-checkmark">
+                                <div class="check-icon">
+                                    <span class="icon-line line-tip"></span>
+                                    <span class="icon-line line-long"></span>
+                                    <div class="icon-circle"></div>
+                                    <div class="icon-fix"></div>
+                                </div>
+                            </div>
+                            <h4 class="text-success mt-3 mb-2">Заявка подана успешно!</h4>
+                            <p class="text-muted">Мы свяжемся с вами в ближайшее время</p>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-4">
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="agreeTerms" required>
+                            <label class="form-check-label small" for="agreeTerms">
+                                Я соглашаюсь с <a href="#" class="text-primary">условиями обработки персональных данных</a>
+                            </label>
                        </div>
-            <div id="qrCodeContainer">
-                <p>QR-код для завершения регистрации:</p>
-                <img id="qrCodeImg" src="" alt="QR Code">
                    </div>
-            <button type="button" id="generateQrButton" class="btn btn-primary">Продолжить</button>
                </form>
            </div>
+            <div class="modal-footer border-0">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
+                <button type="submit" form="serviceRequestForm" class="btn btn-primary-modern">
+                    <i class="fas fa-paper-plane me-2"></i>
+                    Отправить заявку
+                </button>
+            </div>
        </div>
-
-<div id="confirmationModal" class="modal">
-    <div class="modal-content">
-        <span class="close">&times;</span>
-        <h4>Заявка успешно создана!</h4>
-        <p>Ваши данные были отправлены и заявка зарегистрирована. Пожалуйста, проверьте ваш Telegram для получения подтверждения.</p>
    </div>
 </div>

-<script <script src="{% static 'assets/js/modal-init.js' %}"> </script>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-</body>
-</html>
+<script>
+// Service modal function
+function openServiceModal(serviceId, serviceName) {
+    document.getElementById('serviceId').value = serviceId;
+    document.getElementById('serviceModalLabel').innerHTML = 
+        '<i class="fas fa-paper-plane me-2"></i>Заказать услугу: ' + serviceName;
+    
+    const modal = new bootstrap.Modal(document.getElementById('serviceModal'));
+    modal.show();
+}
+
+// Form submission handling
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('serviceRequestForm');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const formData = new FormData(this);
+            const submitBtn = document.querySelector('button[type="submit"][form="serviceRequestForm"]');
+            const originalContent = submitBtn.innerHTML;
+            
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Отправляем...';
+            submitBtn.disabled = true;
+            
+            // Get CSRF token
+            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+            
+            // Submit form logic would go here
+            // This is a placeholder for the actual submission logic
+            
+            // Reset button after delay (placeholder)
+            setTimeout(() => {
+                submitBtn.innerHTML = originalContent;
+                submitBtn.disabled = false;
+            }, 2000);
+        });
+    }
+});
+</script>
--- a/smartsoltech/web/templates/web/navbar.html
+++ b/smartsoltech/web/templates/web/navbar.html
@@ -1,14 +1,139 @@
 {% load static %}
-<nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-    <div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg class="bi bi-bezier" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
-                    <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                </svg></span><span>SmartSolTech</span></a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-        <div id="navcol-5" class="collapse navbar-collapse">
+<nav class="navbar navbar-expand-lg navbar-modern">
+    <div class="container-modern">
+        <a class="navbar-brand-modern" href="{% url 'home' %}">
+            <i class="fas fa-code me-2"></i>
+            SmartSolTech
+        </a>
+        
+        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Переключить навигацию">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        
+        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
-                <li class="nav-item"><a class="nav-link active" href="{% url 'services' %}">Услуги</a></li>
-                <li class="nav-item"><a class="nav-link" href="{% url 'about_view' %}">О нас</a></li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'home' %}active{% endif %}" 
+                       href="{% url 'home' %}">
+                        <i class="fas fa-home me-2"></i>Главная
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'services' %}active{% endif %}" 
+                       href="{% url 'services' %}">
+                        <i class="fas fa-cog me-2"></i>Услуги
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'about' %}active{% endif %}" 
+                       href="{% url 'about' %}">
+                        <i class="fas fa-info-circle me-2"></i>О нас
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'team' %}active{% endif %}" 
+                       href="{% url 'team' %}">
+                        <i class="fas fa-users me-2"></i>Команда
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'career' %}active{% endif %}" 
+                       href="{% url 'career' %}">
+                        <i class="fas fa-briefcase me-2"></i>Карьера
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern" href="#contact">
+                        <i class="fas fa-envelope me-2"></i>Контакты
+                    </a>
+                </li>
+                <li class="nav-item ms-3">
+                    <a class="btn btn-primary-modern" href="{% url 'services' %}">
+                        <i class="fas fa-rocket me-2"></i>Начать проект
+                    </a>
+                </li>
            </ul>
        </div>
    </div>
 </nav>
+
+<style>
+.navbar-toggler {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.navbar-toggler:focus {
+    box-shadow: none !important;
+}
+
+.navbar-toggler-icon {
+    display: block;
+    width: 25px;
+    height: 2px;
+    background-color: var(--text-dark);
+    position: relative;
+    transition: all 0.3s ease;
+    margin: auto;
+}
+
+.navbar-toggler-icon::before,
+.navbar-toggler-icon::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 2px;
+    background-color: var(--text-dark);
+    transition: all 0.3s ease;
+}
+
+.navbar-toggler-icon::before {
+    top: -8px;
+}
+
+.navbar-toggler-icon::after {
+    top: 8px;
+}
+
+.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    background-color: transparent;
+}
+
+.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
+    transform: rotate(45deg);
+    top: 0;
+}
+
+.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
+    transform: rotate(-45deg);
+    top: 0;
+}
+
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        margin-top: 1rem;
+        padding: 1.5rem;
+        background: var(--bg-light);
+        border-radius: 16px;
+        border: 1px solid var(--border-color);
+        box-shadow: var(--shadow);
+    }
+    
+    .nav-link-modern {
+        padding: 0.75rem 1rem;
+        margin: 0.25rem 0;
+        border-radius: 12px;
+    }
+    
+    .btn-primary-modern {
+        margin-top: 1rem;
+        width: 100%;
+        justify-content: center;
+    }
+}
+</style>
--- a/smartsoltech/web/templates/web/navbar_modern.html
+++ b/smartsoltech/web/templates/web/navbar_modern.html
@@ -25,12 +25,30 @@
                        <i class="fas fa-cog me-2"></i>Услуги
                    </a>
                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if 'project' in request.resolver_match.url_name %}active{% endif %}" 
+                       href="{% url 'projects_list' %}">
+                        <i class="fas fa-briefcase me-2"></i>Проекты
+                    </a>
+                </li>
                <li class="nav-item">
                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'about' %}active{% endif %}" 
                       href="{% url 'about' %}">
                        <i class="fas fa-info-circle me-2"></i>О нас
                    </a>
                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'team' %}active{% endif %}" 
+                       href="{% url 'team' %}">
+                        <i class="fas fa-users me-2"></i>Команда
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if request.resolver_match.url_name == 'career' %}active{% endif %}" 
+                       href="{% url 'career' %}">
+                        <i class="fas fa-user-tie me-2"></i>Карьера
+                    </a>
+                </li>
                <li class="nav-item">
                    <a class="nav-link-modern" href="#contact">
                        <i class="fas fa-envelope me-2"></i>Контакты
--- a/smartsoltech/web/templates/web/order.html
+++ b/smartsoltech/web/templates/web/order.html
@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'web/base.html' %}
 {% load static %}

 {% block content %}
--- a/smartsoltech/web/templates/web/portfolio_detail.html
+++ b/smartsoltech/web/templates/web/portfolio_detail.html
@@ -0,0 +1,305 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}{{ portfolio.title }} - Портфолио - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+<style>
+.portfolio-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+}
+
+.portfolio-gallery {
+    margin: 3rem 0;
+}
+
+.swiper {
+    width: 100%;
+    height: 500px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.portfolio-info {
+    background: white;
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    margin-bottom: 2rem;
+}
+
+.info-item {
+    padding: 1rem 0;
+    border-bottom: 1px solid #eee;
+}
+
+.info-item:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    font-weight: 600;
+    color: #667eea;
+    margin-bottom: 0.5rem;
+}
+
+.portfolio-content {
+    background: white;
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    line-height: 1.8;
+}
+
+.portfolio-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin: 1rem 0;
+}
+
+.tech-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 20px;
+    margin: 0.25rem;
+    font-size: 0.9rem;
+}
+
+.similar-project {
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+    background: white;
+    margin-bottom: 1.5rem;
+}
+
+.similar-project:hover {
+    transform: translateY(-5px);
+}
+
+.similar-thumb {
+    height: 200px;
+    overflow: hidden;
+}
+
+.similar-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.similar-content {
+    padding: 1.5rem;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="portfolio-header">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-8">
+                <h1 class="display-4 fw-bold mb-3">{{ portfolio.title }}</h1>
+                <p class="lead mb-3">{{ portfolio.short_description }}</p>
+                <div class="d-flex gap-3 flex-wrap">
+                    {% for category in portfolio.categories.all %}
+                    <span class="badge bg-light text-dark px-3 py-2">
+                        <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+                    </span>
+                    {% endfor %}
+                </div>
+            </div>
+            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
+                <div class="d-flex justify-content-lg-end gap-3">
+                    {% if portfolio.project_url %}
+                    <a href="{{ portfolio.project_url }}" target="_blank" class="btn btn-light btn-lg">
+                        <i class="fas fa-external-link-alt me-2"></i>Посетить сайт
+                    </a>
+                    {% endif %}
+                    {% if portfolio.github_url %}
+                    <a href="{{ portfolio.github_url }}" target="_blank" class="btn btn-outline-light btn-lg">
+                        <i class="fab fa-github me-2"></i>GitHub
+                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container py-5">
+    <div class="row">
+        <div class="col-lg-8">
+            {% if media_items %}
+            <div class="portfolio-gallery">
+                <div class="swiper portfolioSwiper">
+                    <div class="swiper-wrapper">
+                        {% for media in media_items %}
+                        {% if media.media_type == 'image' %}
+                        <div class="swiper-slide">
+                            <a href="{{ media.image.url }}" data-lightbox="portfolio-{{ portfolio.id }}" data-title="{{ media.caption }}">
+                                <img src="{{ media.image.url }}" alt="{{ media.alt_text }}">
+                            </a>
+                        </div>
+                        {% elif media.media_type == 'video' %}
+                        <div class="swiper-slide">
+                            <video controls style="width:100%; height:100%; object-fit:cover;">
+                                <source src="{{ media.video.url }}" type="video/mp4">
+                            </video>
+                        </div>
+                        {% elif media.media_type == 'embed_video' %}
+                        <div class="swiper-slide">
+                            <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
+                                {{ media.embed_code|safe }}
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endfor %}
+                    </div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+            {% endif %}
+
+            <div class="portfolio-content">
+                <h2 class="mb-4">Описание проекта</h2>
+                {{ portfolio.description|safe }}
+            </div>
+        </div>
+
+        <div class="col-lg-4">
+            <div class="portfolio-info">
+                <h3 class="mb-4">Информация о проекте</h3>
+                
+                {% if portfolio.client_name %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-user me-2"></i>Клиент
+                    </div>
+                    <div>{{ portfolio.client_name }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.completion_date %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-calendar me-2"></i>Дата завершения
+                    </div>
+                    <div>{{ portfolio.completion_date|date:"d.m.Y" }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.duration %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-clock me-2"></i>Длительность
+                    </div>
+                    <div>{{ portfolio.duration }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.team_size %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-users me-2"></i>Размер команды
+                    </div>
+                    <div>{{ portfolio.team_size }} человек</div>
+                </div>
+                {% endif %}
+
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-chart-line me-2"></i>Статистика
+                    </div>
+                    <div>
+                        <i class="fas fa-eye me-1"></i> {{ portfolio.views_count }} просмотров<br>
+                        <i class="fas fa-heart me-1"></i> {{ portfolio.likes_count }} лайков
+                    </div>
+                </div>
+            </div>
+
+            {% if portfolio.technologies %}
+            <div class="portfolio-info">
+                <h3 class="mb-3">Технологии</h3>
+                <div>
+                    {% for tech in portfolio.technologies.split %}
+                    <span class="tech-badge">{{ tech }}</span>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {% if similar_projects %}
+    <div class="mt-5">
+        <h2 class="mb-4">Похожие проекты</h2>
+        <div class="row">
+            {% for item in similar_projects %}
+            <div class="col-md-4">
+                <div class="similar-project">
+                    <div class="similar-thumb">
+                        {% if item.thumbnail %}
+                        <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                        {% else %}
+                        <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                        {% endif %}
+                    </div>
+                    <div class="similar-content">
+                        <h4 class="h6 mb-2">{{ item.title }}</h4>
+                        <p class="text-muted small mb-3">{{ item.short_description|truncatewords:10 }}</p>
+                        <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-sm btn-primary">
+                            Подробнее
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+<script>
+const swiper = new Swiper('.portfolioSwiper', {
+    loop: true,
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+    autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+    },
+    effect: 'fade',
+    fadeEffect: {
+        crossFade: true
+    }
+});
+</script>
+{% endblock %}
--- a/smartsoltech/web/templates/web/portfolio_list.html
+++ b/smartsoltech/web/templates/web/portfolio_list.html
@@ -0,0 +1,262 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}Портфолио - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+<style>
+.portfolio-hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+}
+
+.category-filter {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    margin: 2rem 0;
+    justify-content: center;
+    padding: 0 1rem;
+}
+
+.category-pill {
+    padding: 0.7rem 1.4rem;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #495057;
+    border: 2px solid transparent;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.category-pill:hover {
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.3);
+    text-decoration: none;
+}
+
+.category-pill.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    border-color: transparent;
+}
+
+.portfolio-card {
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    background: white;
+    margin-bottom: 2rem;
+}
+
+.portfolio-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+}
+
+.portfolio-thumb {
+    height: 250px;
+    overflow: hidden;
+    position: relative;
+}
+
+.portfolio-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.portfolio-card:hover .portfolio-thumb img {
+    transform: scale(1.1);
+}
+
+.portfolio-content {
+    padding: 2rem;
+}
+
+.portfolio-categories {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.portfolio-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.portfolio-stats {
+    display: flex;
+    gap: 1.5rem;
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.featured-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-weight: 600;
+    z-index: 10;
+}
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 768px) {
+    .portfolio-hero {
+        padding: 80px 0 40px;
+    }
+    
+    .portfolio-hero h1 {
+        font-size: 2rem;
+    }
+    
+    .portfolio-hero .lead {
+        font-size: 1rem;
+    }
+    
+    .category-filter {
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .category-pill {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+    
+    .portfolio-card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .featured-badge {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="portfolio-hero">
+    <div class="container text-center">
+        <h1 class="display-4 fw-bold mb-3">Наше Портфолио</h1>
+        <p class="lead">Проекты, которыми мы гордимся</p>
+    </div>
+</div>
+
+<div class="container py-5">
+    <div class="category-filter">
+        <a href="{% url 'portfolio_list' %}" class="category-pill {% if not request.GET.category %}active{% endif %}">
+            <i class="fas fa-th me-2"></i>Все проекты
+        </a>
+        {% for category in categories %}
+        <a href="?category={{ category.slug }}" class="category-pill {% if request.GET.category == category.slug %}active{% endif %}">
+            <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+        </a>
+        {% endfor %}
+    </div>
+
+    {% if featured %}
+    <div class="mb-5">
+        <h2 class="mb-4"><i class="fas fa-star text-warning me-2"></i>Избранные проекты</h2>
+        <div class="row">
+            {% for item in featured %}
+            <div class="col-md-6 col-lg-4">
+                <div class="portfolio-card">
+                    <div class="portfolio-thumb">
+                        <span class="featured-badge"><i class="fas fa-star me-1"></i>Избранное</span>
+                        {% if item.thumbnail %}
+                        <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                        {% else %}
+                        <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                        {% endif %}
+                    </div>
+                    <div class="portfolio-content">
+                        <div class="portfolio-categories">
+                            {% for cat in item.categories.all %}
+                            <span class="portfolio-badge">{{ cat.name }}</span>
+                            {% endfor %}
+                        </div>
+                        <h3 class="h5 mb-2">{{ item.title }}</h3>
+                        <p class="text-muted mb-3">{{ item.short_description|truncatewords:20 }}</p>
+                        <div class="portfolio-stats mb-3">
+                            <span><i class="fas fa-eye me-1"></i>{{ item.views_count }}</span>
+                            <span><i class="fas fa-heart me-1"></i>{{ item.likes_count }}</span>
+                            <span><i class="fas fa-calendar me-1"></i>{{ item.completion_date|date:"Y" }}</span>
+                        </div>
+                        <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-primary">
+                            Подробнее <i class="fas fa-arrow-right ms-2"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+    <h2 class="mb-4">Все проекты</h2>
+    <div class="row">
+        {% for item in portfolios %}
+        <div class="col-md-6 col-lg-4">
+            <div class="portfolio-card">
+                <div class="portfolio-thumb">
+                    {% if item.thumbnail %}
+                    <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                    {% else %}
+                    <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                    {% endif %}
+                </div>
+                <div class="portfolio-content">
+                    <div class="portfolio-categories">
+                        {% for cat in item.categories.all %}
+                        <span class="portfolio-badge">{{ cat.name }}</span>
+                        {% endfor %}
+                    </div>
+                    <h3 class="h5 mb-2">{{ item.title }}</h3>
+                    <p class="text-muted mb-3">{{ item.short_description|truncatewords:20 }}</p>
+                    <div class="portfolio-stats mb-3">
+                        <span><i class="fas fa-eye me-1"></i>{{ item.views_count }}</span>
+                        <span><i class="fas fa-heart me-1"></i>{{ item.likes_count }}</span>
+                        <span><i class="fas fa-calendar me-1"></i>{{ item.completion_date|date:"Y" }}</span>
+                    </div>
+                    <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-primary">
+                        Подробнее <i class="fas fa-arrow-right ms-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% empty %}
+        <div class="col-12 text-center py-5">
+            <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>
+            <h3 class="text-muted">Проектов пока нет</h3>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}
--- a/smartsoltech/web/templates/web/project_detail.html
+++ b/smartsoltech/web/templates/web/project_detail.html
--- a/smartsoltech/web/templates/web/projects_list.html
+++ b/smartsoltech/web/templates/web/projects_list.html
@@ -0,0 +1,753 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}Наши проекты - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<style>
+/* Projects Page v2.0 - Force Update */
+.projects-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+    margin-bottom: 3rem;
+}
+
+/* Category Filter - Овальные пилюли */
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 3rem;
+    padding: 0 1rem;
+}
+
+.category-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.75rem 1.25rem;
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 50px; /* Овальная форма */
+    color: #64748b;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.category-pill:hover {
+    color: #667eea;
+    border-color: #667eea;
+    background: rgba(102, 126, 234, 0.05);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+    text-decoration: none;
+}
+
+.category-pill.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    transform: translateY(-1px);
+}
+
+.category-pill.active:hover {
+    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    color: white;
+}
+
+.category-pill i {
+    font-size: 0.85rem;
+    margin-right: 0.5rem;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    max-width: 100%;
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+/* Ограничиваем максимальный размер карточки */
+.project-card {
+    max-width: 400px;
+    width: 100%;
+    background: white;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+    margin-bottom: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #f1f5f9;
+}
+
+.project-card:hover {
+    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+    transform: translateY(-5px);
+    border-color: #e2e8f0;
+}
+
+/* Верхняя часть карточки - медиа контент */
+.project-media {
+    width: 100%;
+    height: 180px;
+    overflow: hidden;
+    position: relative;
+    background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+}
+
+.project-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.project-card:hover .project-media img {
+    transform: scale(1.08);
+}
+
+.project-media video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Заглушка для проектов без изображения */
+.project-media.no-image {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.project-media.no-image::before {
+    content: '\f1c2'; /* FontAwesome folder icon */
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 2.5rem;
+    opacity: 0.7;
+}
+
+.project-media::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40%;
+    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
+    pointer-events: none;
+}
+
+/* Медиа плеер для видео */
+.media-player {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.play-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    color: #667eea;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.play-btn:hover {
+    background: white;
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+.project-badge {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 0.4rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    z-index: 2;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Основной контент карточки */
+.project-content {
+    padding: 1rem;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.project-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #1a202c;
+    margin-bottom: 0.5rem;
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-height: 2.6rem; /* Фиксированная высота для выравнивания */
+}
+
+.project-description {
+    color: #64748b;
+    margin-bottom: 0.75rem;
+    flex-grow: 1;
+    line-height: 1.5;
+    font-size: 0.85rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    min-height: 2.5rem; /* Фиксированная высота для выравнивания */
+}
+
+/* Статистика проекта */
+.project-stats-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background: #f8fafc;
+    border-radius: 8px;
+    font-size: 0.8rem;
+}
+
+.stats-left {
+    display: flex;
+    gap: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: #64748b;
+}
+
+.stat-item i {
+    color: #667eea;
+    font-size: 0.85rem;
+}
+
+.project-year {
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+/* Футер карточки - категории и дополнительная информация */
+.project-footer {
+    padding: 0 1rem 1rem;
+    border-top: 1px solid #f1f5f9;
+    margin-top: auto;
+}
+
+.project-categories {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-bottom: 0.5rem;
+}
+
+.category-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    color: #667eea;
+    border-radius: 12px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    white-space: nowrap;
+    border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.category-tag i {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+}
+
+.project-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.85rem;
+    color: #94a3b8;
+}
+
+.project-info {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.8rem;
+}
+
+.project-info span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.project-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.status-completed {
+    background: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-progress {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.no-projects {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: #718096;
+}
+
+.no-projects i {
+    font-size: 4rem;
+    color: #e2e8f0;
+    margin-bottom: 1rem;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .projects-header {
+        padding: 80px 0 40px;
+    }
+    
+    .projects-header h1 {
+        font-size: 2rem;
+    }
+    
+    .projects-header .lead {
+        font-size: 1rem;
+    }
+    
+    .category-filter {
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .category-pill {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+    
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 350px;
+    }
+    
+    .project-media {
+        height: 160px;
+    }
+    
+    .project-title {
+        font-size: 1rem;
+        min-height: 2.2rem;
+    }
+    
+    .project-content {
+        padding: 0.85rem;
+    }
+    
+    .project-footer {
+        padding: 0 0.85rem 0.85rem;
+    }
+    
+    .stats-left {
+        gap: 0.75rem;
+    }
+    
+    .project-meta {
+        font-size: 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 320px;
+    }
+    
+    .project-media {
+        height: 140px;
+    }
+    
+    .category-btn {
+        font-size: 0.85rem;
+        padding: 0.6rem 1.2rem;
+    }
+    
+    .project-content {
+        padding: 0.75rem;
+    }
+    
+    .project-footer {
+        padding: 0 0.75rem 0.75rem;
+    }
+    
+    .project-title {
+        font-size: 0.95rem;
+        min-height: 2rem;
+    }
+    
+    .project-description {
+        min-height: 2rem;
+        font-size: 0.8rem;
+    }
+    
+    .project-stats-section {
+        padding: 0.4rem 0.6rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+        font-size: 0.75rem;
+    }
+    
+    .stats-left {
+        gap: 1rem;
+    }
+    
+    .project-info {
+        gap: 0.75rem;
+        font-size: 0.7rem;
+    }
+    
+    .category-tag {
+        font-size: 0.65rem;
+        padding: 0.2rem 0.4rem;
+    }
+}
+
+/* Скелетон загрузка */
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="projects-header">
+    <div class="container">
+        <div class="text-center">
+            <h1 class="display-4 fw-bold mb-3">Наши проекты</h1>
+            <p class="lead mb-0">Портфолио завершённых работ и успешных внедрений</p>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    {% if categories %}
+    <div class="category-filter">
+        <a href="{% url 'projects_list' %}" class="category-pill {% if not selected_category %}active{% endif %}">
+            <i class="fas fa-th me-2"></i>Все проекты
+        </a>
+        {% for category in categories %}
+        <a href="{% url 'projects_list' %}?category={{ category.id }}" 
+           class="category-pill {% if selected_category == category.id|stringformat:'s' %}active{% endif %}">
+            <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+        </a>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if projects %}
+    <div class="projects-grid">
+        {% for project in projects %}
+        <a href="{% url 'project_detail' project.pk %}" class="text-decoration-none">
+            <div class="project-card">
+                <!-- Верхняя часть - медиа контент -->
+                <div class="project-media{% if not project.video and not project.thumbnail and not project.image %} no-image{% endif %}">
+                    {% if project.video %}
+                        <div class="media-player">
+                            <video poster="{% if project.video_poster %}{{ project.video_poster.url }}{% elif project.thumbnail %}{{ project.thumbnail.url }}{% endif %}" 
+                                   preload="metadata" muted>
+                                <source src="{{ project.video.url }}" type="video/mp4">
+                            </video>
+                            <button class="play-btn" type="button" aria-label="Воспроизвести видео">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    {% elif project.thumbnail %}
+                        <img src="{{ project.thumbnail.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% elif project.image %}
+                        <img src="{{ project.image.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% endif %}
+                    
+                    {% if project.is_featured %}
+                    <div class="project-badge">
+                        <i class="fas fa-star me-1"></i>Избранное
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <!-- Основной контент карточки -->
+                <div class="project-content">
+                    <h3 class="project-title">{{ project.name }}</h3>
+                    
+                    {% if project.short_description %}
+                    <p class="project-description">{{ project.short_description|striptags|truncatewords:25 }}</p>
+                    {% endif %}
+                    
+                    <!-- Статистика проекта -->
+                    <div class="project-stats-section">
+                        <div class="stats-left">
+                            <div class="stat-item">
+                                <i class="fas fa-eye"></i>
+                                <span>{{ project.views_count }}</span>
+                            </div>
+                            <div class="stat-item">
+                                <i class="fas fa-heart"></i>
+                                <span>{{ project.likes_count }}</span>
+                            </div>
+                        </div>
+                        {% if project.completion_date %}
+                        <div class="project-year">{{ project.completion_date|date:"Y" }}</div>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <!-- Футер карточки -->
+                <div class="project-footer">
+                    {% if project.categories.exists %}
+                    <div class="project-categories">
+                        {% for category in project.categories.all %}
+                        <span class="category-tag">
+                            <i class="{{ category.icon }}"></i>{{ category.name }}
+                        </span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    
+                    <div class="project-meta">
+                        <div class="project-info">
+                            {% if project.duration %}
+                            <span><i class="fas fa-clock"></i>{{ project.duration }}</span>
+                            {% endif %}
+                            {% if project.team_size %}
+                            <span><i class="fas fa-users"></i>{{ project.team_size }}</span>
+                            {% endif %}
+                        </div>
+                        <div class="project-status status-{{ project.status }}">
+                            {% if project.status == 'completed' %}
+                                <i class="fas fa-check-circle"></i>Завершен
+                            {% elif project.status == 'in_progress' %}
+                                <i class="fas fa-spinner"></i>В процессе
+                            {% else %}
+                                <i class="fas fa-archive"></i>В архиве
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="no-projects">
+        <i class="fas fa-folder-open"></i>
+        <h3>Проектов не найдено</h3>
+        <p>В данной категории пока нет завершённых проектов</p>
+        <a href="{% url 'projects_list' %}" class="btn btn-primary-modern mt-3">
+            <i class="fas fa-th me-2"></i>Посмотреть все проекты
+        </a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Обработчик для видео плеера
+    const playBtns = document.querySelectorAll('.play-btn');
+    
+    playBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            const mediaPlayer = this.closest('.media-player');
+            const video = mediaPlayer.querySelector('video');
+            
+            if (video) {
+                if (video.paused) {
+                    video.play();
+                    this.style.opacity = '0';
+                } else {
+                    video.pause();
+                    this.style.opacity = '1';
+                }
+            }
+        });
+    });
+    
+    // Обработчики событий видео
+    const videos = document.querySelectorAll('.media-player video');
+    
+    videos.forEach(video => {
+        const playBtn = video.closest('.media-player').querySelector('.play-btn');
+        
+        video.addEventListener('play', () => {
+            if (playBtn) playBtn.style.opacity = '0';
+        });
+        
+        video.addEventListener('pause', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+        
+        video.addEventListener('ended', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+    });
+    
+    // Анимация появления карточек при загрузке
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+    
+    // Применяем анимацию к карточкам
+    const cards = document.querySelectorAll('.project-card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(30px)';
+        card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+        observer.observe(card);
+    });
+    
+    // Lazy loading для изображений
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.classList.add('loaded');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        images.forEach(img => {
+            imageObserver.observe(img);
+        });
+    }
+});
+</script>
+
+<style>
+/* Анимации для загруженных изображений */
+.project-media img {
+    transition: opacity 0.3s ease;
+    opacity: 0.8;
+}
+
+.project-media img.loaded {
+    opacity: 1;
+}
+
+/* Плавная анимация при hover */
+.project-card {
+    will-change: transform, box-shadow;
+}
+
+.project-card:hover .project-media img {
+    will-change: transform;
+}
+
+/* Улучшенные переходы для статуса */
+.status-completed {
+    background: rgba(34, 197, 94, 0.1);
+    color: #16a34a;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-in_progress {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.status-archived {
+    background: rgba(107, 114, 128, 0.1);
+    color: #6b7280;
+    border: 1px solid rgba(107, 114, 128, 0.2);
+}
+</style>
+{% endblock %}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement\|\|document.body.parentNode\|\|document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r);var d=document.querySelectorAll(".portfolio-modal");for(var s of d)s.addEventListener("shown.bs.modal",(function(o){e.classList.add("d-none")})),s.addEventListener("hidden.bs.modal",(function(o){e.classList.remove("d-none")}))}}();
				`@@ -1 +0,0 @@`
				`{"short_name":"sst","name":"smartsoltech","icons":[{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"},{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"}],"start_url":"smartsoltech.kr","display":"fullscreen"}`