Reorganize project structure and cleanup root directory

✨ Major improvements:
- Created organized folder structure with utils/, scripts/, backups/, temp/
- Moved Python scripts to scripts/ folder for better organization
- Moved utility files (start, stop, update, cli, logs, drone) to utils/ folder
- Moved backup files to backups/ folder for cleaner root directory
- Added comprehensive README.md files for each new folder
- Updated main README.md with new project structure documentation
- Enhanced .gitignore with rules for new folders
- Added real-time career vacancy counter on homepage
- Improved homepage career stats styling with better visibility

🗂️ New folder structure:
- utils/ - Project management utilities and tools
- scripts/ - Python helper scripts for banners and data
- backups/ - Configuration and file backups
- temp/ - Temporary files and development data

🎨 UI improvements:
- Fixed white text visibility issues on homepage career section
- Added dynamic vacancy count from database
- Implemented glassmorphism design for career stats card
- Better color contrast and hover effects

This reorganization makes the project more maintainable and professional.

backups/.drone.yml.backup

@@ -0,0 +1,401 @@
+---
+kind: pipeline
+type: docker
+name: smartsoltech-ci
+
+platform:
+  os: linux
+  arch: amd64
+
+# Сервисы для тестирования
+services:
+  - name: postgres
+    image: postgres:17-alpine
+    environment:
+      POSTGRES_DB: smartsoltech_test
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_HOST_AUTH_METHOD: trust
+    ports:
+      - 5432
+    
+  - name: redis
+    image: redis:7-alpine
+    ports:
+      - 6379
+
+# Этапы сборки
+steps:
+  # 1. Подготовка и проверка кода
+  - name: code-quality
+    image: python:3.10-slim
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/smartsoltech_test
+    commands:
+      - apt-get update && apt-get install -y git
+      - pip install --upgrade pip
+      - pip install flake8 black isort bandit safety
+      - echo "Checking code quality..."
+      - flake8 smartsoltech/ --max-line-length=88 --exclude=migrations,staticfiles --ignore=E203,W503
+      - echo "Checking code formatting..."
+      - black --check smartsoltech/ --line-length=88 --target-version=py310 || echo "Black formatting check skipped"
+      - echo "Checking imports..."
+      - isort --check-only smartsoltech/ --profile=black || echo "Import sorting check skipped"
+      - echo "Security scan..."
+      - bandit -r smartsoltech/ -x "*/migrations/*,*/staticfiles/*" -ll || echo "Security check completed with warnings"
+      - echo "Checking dependencies..."
+      - safety check --file requirements.txt --ignore=70612 || echo "Dependencies check completed"
+
+  # 2. Установка зависимостей
+  - name: install-dependencies
+    image: python:3.10-slim
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/smartsoltech_test
+    commands:
+      - apt-get update && apt-get install -y libpq-dev gcc git curl
+      - pip install --upgrade pip
+      - pip install -r requirements.txt
+      - pip install coverage pytest-django pytest-cov
+      - echo "Dependencies installed successfully"
+    depends_on:
+      - code-quality
+
+  # 3. Тестирование базы данных
+  - name: database-tests
+    image: python:3.10-slim
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/smartsoltech_test
+      SECRET_KEY: test-secret-key-for-ci-very-long-and-secure-key-12345
+      DEBUG: "False"
+      ALLOWED_HOSTS: localhost,127.0.0.1
+      DJANGO_SETTINGS_MODULE: smartsoltech.settings_test
+    commands:
+      - apt-get update && apt-get install -y libpq-dev gcc curl postgresql-client
+      - pip install --upgrade pip
+      - pip install -r requirements.txt
+      - echo "Waiting for PostgreSQL..."
+      - sleep 15
+      - echo "Checking database connection..."
+      - until pg_isready -h postgres -p 5432 -U postgres; do echo "Waiting for postgres..."; sleep 2; done
+      - echo "Creating test database..."
+      - PGPASSWORD=postgres createdb -h postgres -U postgres smartsoltech_test || echo "Database already exists"
+      - echo "Checking migrations..."
+      - cd smartsoltech
+      - python manage.py check --settings=smartsoltech.settings_test
+      - python manage.py makemigrations --check --dry-run --settings=smartsoltech.settings_test
+      - python manage.py migrate --settings=smartsoltech.settings_test
+      - echo "Database setup completed"
+    depends_on:
+      - install-dependencies
+
+  # 4. Модульные тесты
+  - name: unit-tests
+    image: python:3.10-slim
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/smartsoltech_test
+      SECRET_KEY: test-secret-key-for-ci-very-long-and-secure-key-12345
+      DEBUG: "False"
+      ALLOWED_HOSTS: localhost,127.0.0.1
+      TELEGRAM_BOT_TOKEN: test-token-for-ci
+      DJANGO_SETTINGS_MODULE: smartsoltech.settings_test
+    commands:
+      - apt-get update && apt-get install -y libpq-dev gcc curl postgresql-client
+      - pip install --upgrade pip
+      - pip install -r requirements.txt
+      - echo "Waiting for PostgreSQL..."
+      - until pg_isready -h postgres -p 5432 -U postgres; do echo "Waiting for postgres..."; sleep 2; done
+      - cd smartsoltech
+      - echo "Running unit tests..."
+      - python manage.py test --verbosity=2 --settings=smartsoltech.settings_test --keepdb
+      - echo "Generating coverage report..."
+      - coverage run --source='.' manage.py test --settings=smartsoltech.settings_test --keepdb
+      - coverage report --show-missing
+      - coverage xml
+      - echo "Unit tests completed successfully"
+    depends_on:
+      - database-tests
+
+  # 5. Интеграционные тесты
+  - name: integration-tests
+    image: python:3.10-slim
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/smartsoltech_test
+      SECRET_KEY: test-secret-key-for-ci-very-long-and-secure-key-12345
+      DEBUG: "False"
+      ALLOWED_HOSTS: localhost,127.0.0.1
+      TELEGRAM_BOT_TOKEN: test-token-for-ci
+      DJANGO_SETTINGS_MODULE: smartsoltech.settings_test
+    commands:
+      - apt-get update && apt-get install -y libpq-dev gcc curl postgresql-client
+      - pip install --upgrade pip
+      - pip install -r requirements.txt
+      - echo "Waiting for PostgreSQL..."
+      - until pg_isready -h postgres -p 5432 -U postgres; do echo "Waiting for postgres..."; sleep 2; done
+      - cd smartsoltech
+      - python manage.py migrate --settings=smartsoltech.settings_test
+      - python manage.py collectstatic --noinput --settings=smartsoltech.settings_test
+      - echo "Running integration tests..."
+      - python manage.py test web.tests --verbosity=2 --settings=smartsoltech.settings_test --keepdb || echo "Integration tests completed"
+      - echo "Integration tests completed"
+    depends_on:
+      - unit-tests
+
+  # 6. Сборка Docker образа
+  - name: build-docker-image
+    image: docker:24-dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    commands:
+      - echo "Building Docker image..."
+      - docker build -t smartsoltech:${DRONE_COMMIT_SHA:0:8} .
+      - docker tag smartsoltech:${DRONE_COMMIT_SHA:0:8} smartsoltech:latest
+      - echo "Docker image built successfully: smartsoltech:${DRONE_COMMIT_SHA:0:8}"
+    depends_on:
+      - integration-tests
+
+  # 7. Тестирование через Docker Compose
+  - name: docker-compose-tests
+    image: docker/compose:latest
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    commands:
+      - echo "Running tests with Docker Compose..."
+      - apk add --no-cache curl
+      - docker-compose -f docker-compose.test.yml build
+      - docker-compose -f docker-compose.test.yml up --abort-on-container-exit --exit-code-from django_test
+      - echo "Cleaning up test containers..."
+      - docker-compose -f docker-compose.test.yml down -v
+      - echo "Docker Compose tests completed"
+    depends_on:
+      - build-docker-image
+
+  # 8. Проверка безопасности образа
+  - name: security-scan
+    image: aquasec/trivy:latest
+    commands:
+      - echo "Security scanning Docker image..."
+      - trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress smartsoltech:latest
+      - echo "Security scan completed"
+    depends_on:
+      - docker-compose-tests
+
+  # 9. Уведомления об успехе
+  - name: notify-success
+    image: plugins/webhook
+    settings:
+      urls:
+        from_secret: telegram_webhook_url
+      content_type: application/json
+      template: |
+        {
+          "chat_id": "${TELEGRAM_CHAT_ID}",
+          "text": "✅ *SmartSolTech CI/CD*\n\n🎉 Сборка успешно завершена!\n\n📝 *Коммит:* `${DRONE_COMMIT_SHA:0:8}`\n👤 *Автор:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Ветка:* ${DRONE_BRANCH}\n⏱ *Время:* ${DRONE_BUILD_FINISHED}\n\n🔗 [Подробности](${DRONE_BUILD_LINK})",
+          "parse_mode": "Markdown"
+        }
+    environment:
+      TELEGRAM_CHAT_ID:
+        from_secret: telegram_chat_id
+    when:
+      status:
+        - success
+    depends_on:
+      - security-scan
+
+  - name: notify-failure
+    image: plugins/webhook
+    settings:
+      urls:
+        from_secret: telegram_webhook_url
+      content_type: application/json
+      template: |
+        {
+          "chat_id": "${TELEGRAM_CHAT_ID}",
+          "text": "❌ *SmartSolTech CI/CD*\n\n🚨 Сборка провалена!\n\n📝 *Коммит:* `${DRONE_COMMIT_SHA:0:8}`\n👤 *Автор:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Ветка:* ${DRONE_BRANCH}\n⏱ *Время:* ${DRONE_BUILD_FINISHED}\n\n🔗 [Логи](${DRONE_BUILD_LINK})",
+          "parse_mode": "Markdown"
+        }
+    environment:
+      TELEGRAM_CHAT_ID:
+        from_secret: telegram_chat_id
+    when:
+      status:
+        - failure
+    depends_on:
+      - security-scan
+
+# Volumes для Docker in Docker
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock
+
+# Триггеры
+trigger:
+  branch:
+    - master
+    - main
+    - develop
+    - feature/*
+  event:
+    - push
+    - pull_request
+
+---
+# Production deployment pipeline
+kind: pipeline
+type: docker
+name: production-deploy
+
+platform:
+  os: linux
+  arch: amd64
+
+steps:
+  - name: deploy-production
+    image: docker:24-dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    environment:
+      PROD_HOST:
+        from_secret: production_host
+      PROD_USER:
+        from_secret: production_user
+      PROD_KEY:
+        from_secret: production_ssh_key
+    commands:
+      - echo "Deploying to production..."
+      - apk add --no-cache openssh-client git
+      - 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"
+
+  - name: notify-production-success
+    image: plugins/webhook
+    settings:
+      urls:
+        from_secret: telegram_webhook_url
+      content_type: application/json
+      template: |
+        {
+          "chat_id": "${TELEGRAM_CHAT_ID}",
+          "text": "🎉 *SmartSolTech Production*\n\n✅ Развертывание в продакшн успешно завершено!\n\n📝 *Версия:* `${DRONE_TAG}`\n👤 *Автор:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Время:* ${DRONE_BUILD_FINISHED}\n\n🌐 [Сайт](https://smartsoltech.kr)",
+          "parse_mode": "Markdown"
+        }
+    environment:
+      TELEGRAM_CHAT_ID:
+        from_secret: telegram_chat_id
+    depends_on:
+      - deploy-production
+
+  - name: notify-production-failure
+    image: plugins/webhook
+    settings:
+      urls:
+        from_secret: telegram_webhook_url
+      content_type: application/json
+      template: |
+        {
+          "chat_id": "${TELEGRAM_CHAT_ID}",
+          "text": "🚨 *SmartSolTech Production*\n\n❌ Развертывание в продакшн провалено!\n\n📝 *Версия:* `${DRONE_TAG}`\n👤 *Автор:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Время:* ${DRONE_BUILD_FINISHED}\n\n🔗 [Логи](${DRONE_BUILD_LINK})",
+          "parse_mode": "Markdown"
+        }
+    environment:
+      TELEGRAM_CHAT_ID:
+        from_secret: telegram_chat_id
+    when:
+      status:
+        - failure
+    depends_on:
+      - deploy-production
+
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock
+
+# Триггер только для тегов (релизов)
+trigger:
+  event:
+    - tag
+  ref:
+    - refs/tags/v*
+
+depends_on:
+  - smartsoltech-ci
+
+---
+# Scheduled maintenance pipeline  
+kind: pipeline
+type: docker
+name: maintenance
+
+platform:
+  os: linux
+  arch: amd64
+
+steps:
+  - name: cleanup-docker
+    image: docker:24-dind
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
+    commands:
+      - echo "Docker cleanup..."
+      - docker system prune -af --volumes
+      - docker image prune -af
+      - echo "Docker cleanup completed"
+
+  - name: backup-database
+    image: postgres:17-alpine
+    environment:
+      PGHOST:
+        from_secret: db_host
+      PGUSER:
+        from_secret: db_user
+      PGPASSWORD:
+        from_secret: db_password
+      PGDATABASE:
+        from_secret: db_name
+      BACKUP_PATH:
+        from_secret: backup_path
+    commands:
+      - echo "Creating database backup..."
+      - mkdir -p /backups
+      - pg_dump -h $PGHOST -U $PGUSER -d $PGDATABASE --no-password > /backups/backup_$(date +%Y%m%d_%H%M%S).sql
+      - echo "Database backup created"
+
+  - name: notify-maintenance
+    image: plugins/webhook
+    settings:
+      urls:
+        from_secret: telegram_webhook_url
+      content_type: application/json
+      template: |
+        {
+          "chat_id": "${TELEGRAM_CHAT_ID}",
+          "text": "🛠 *SmartSolTech Maintenance*\n\n✅ Плановое обслуживание выполнено!\n\n🧹 Очистка Docker\n💾 Резервное копирование БД\n⏱ *Время:* ${DRONE_BUILD_FINISHED}",
+          "parse_mode": "Markdown"
+        }
+    environment:
+      TELEGRAM_CHAT_ID:
+        from_secret: telegram_chat_id
+    depends_on:
+      - cleanup-docker
+      - backup-database
+
+volumes:
+  - name: docker-sock
+    host:
+      path: /var/run/docker.sock
+
+# Триггер по расписанию (каждую ночь в 2:00)
+trigger:
+  event:
+    - cron
+  cron:
+    - nightly_maintenance

backups/README.md

@@ -0,0 +1,19 @@
+# 💾 Backups
+
+Папка для хранения резервных копий конфигурационных файлов и важных данных.
+
+## Содержимое:
+
+- `.drone.yml.backup` - Резервная копия конфигурации CI/CD
+- `original_home_modern.html` - Оригинальная версия главной страницы
+
+## Правила:
+
+1. Все файлы в этой папке не должны влиять на работу проекта
+2. Файлы служат для восстановления при необходимости
+3. Регулярно очищайте старые файлы
+4. Добавляйте дату к именам файлов при создании бэкапов
+
+## Автоматические бэкапы:
+
+Система CI/CD автоматически создает бэкапы перед деплоем в продакшн.

backups/original_home_modern.html

@@ -0,0 +1,361 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}SmartSolTech - Современные IT-решения для вашего бизнеса{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-modern" id="home">
+    <div class="container-modern">
+        <div class="row align-items-center min-vh-100">
+            <div class="col-lg-6">
+                <div class="animate-fade-in-up">
+                    <h1 class="display-3 fw-bold mb-4">
+                        Создаем <span class="text-gradient">будущее</span> вашего бизнеса
+                    </h1>
+                    <p class="lead mb-4 text-muted">
+                        Мы разрабатываем современные веб-приложения, мобильные решения и системы автоматизации, 
+                        которые помогают компаниям расти и быть конкурентоспособными.
+                    </p>
+                    <div class="d-flex flex-wrap gap-3 mb-5">
+                        <a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
+                            <i class="fas fa-rocket me-2"></i>
+                            Начать проект
+                        </a>
+                        <a href="{% url 'about' %}" class="btn btn-secondary-modern btn-lg">
+                            <i class="fas fa-play-circle me-2"></i>
+                            Узнать больше
+                        </a>
+                    </div>
+                    <div class="row text-center">
+                        <div class="col-4">
+                            <div class="stat-item">
+                                <h3 class="text-gradient fw-bold mb-1">50+</h3>
+                                <p class="small text-muted mb-0">Проектов</p>
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <div class="stat-item">
+                                <h3 class="text-gradient fw-bold mb-1">3+</h3>
+                                <p class="small text-muted mb-0">Лет опыта</p>
+                            </div>
+                        </div>
+                        <div class="col-4">
+                            <div class="stat-item">
+                                <h3 class="text-gradient fw-bold mb-1">24/7</h3>
+                                <p class="small text-muted mb-0">Поддержка</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="text-center animate-float">
+                    <div class="position-relative">
+                        <!-- 3D Graphic Placeholder -->
+                        <div class="hero-graphic p-5">
+                            <div class="position-relative">
+                                <!-- Code Window -->
+                                <div class="code-window bg-dark rounded-4 p-4 mb-4 shadow-lg" 
+                                     style="transform: rotate(-5deg); max-width: 400px;">
+                                    <div class="d-flex gap-2 mb-3">
+                                        <div class="rounded-circle bg-danger" style="width: 12px; height: 12px;"></div>
+                                        <div class="rounded-circle bg-warning" style="width: 12px; height: 12px;"></div>
+                                        <div class="rounded-circle bg-success" style="width: 12px; height: 12px;"></div>
+                                    </div>
+                                    <div class="text-light font-monospace small">
+                                        <div class="text-info">def create_future():</div>
+                                        <div class="ms-3 text-success">return innovation + passion</div>
+                                        <div class="text-warning">// SmartSolTech</div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Mobile App Preview -->
+                                <div class="mobile-preview bg-light rounded-4 p-3 shadow-lg position-absolute" 
+                                     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>
+                                </div>
+                                
+                                <!-- Floating Icons -->
+                                <div class="floating-icon position-absolute" 
+                                     style="top: 20px; left: 20px; animation: float 2s ease-in-out infinite;">
+                                    <div class="bg-primary rounded-3 p-3 text-white shadow">
+                                        <i class="fab fa-react fa-2x"></i>
+                                    </div>
+                                </div>
+                                
+                                <div class="floating-icon position-absolute" 
+                                     style="bottom: 100px; left: 100px; animation: float 3s ease-in-out infinite reverse;">
+                                    <div class="bg-success rounded-3 p-3 text-white shadow">
+                                        <i class="fab fa-python fa-2x"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Services Preview Section -->
+<section class="section-padding bg-light">
+    <div class="container-modern">
+        <div class="text-center mb-5">
+            <h2 class="display-5 fw-bold mb-3">
+                Полный спектр <span class="text-gradient">IT-услуг</span>
+            </h2>
+            <p class="lead text-muted max-width-600 mx-auto">
+                От идеи до реализации - мы предоставляем комплексные решения для вашего цифрового успеха
+            </p>
+        </div>
+        
+        <div class="services-grid">
+            {% for service in services %}
+            <div class="service-card">
+                <div class="service-icon">
+                    <i class="fas fa-{% cycle 'code' 'mobile-alt' 'paint-brush' 'server' 'chart-line' 'shield-alt' %}"></i>
+                </div>
+                <h4 class="mb-3">{{ service.name }}</h4>
+                <p class="text-muted mb-4">{{ service.description|truncatewords:20 }}</p>
+                <a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary">
+                    Подробнее <i class="fas fa-arrow-right ms-2"></i>
+                </a>
+            </div>
+            {% endfor %}
+        </div>
+        
+        <div class="text-center mt-5">
+            <a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
+                <i class="fas fa-th-large me-2"></i>
+                Все услуги
+            </a>
+        </div>
+    </div>
+</section>
+
+<!-- Why Choose Us Section -->
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="row align-items-center">
+            <div class="col-lg-6">
+                <div class="pe-lg-5">
+                    <h2 class="display-6 fw-bold mb-4">
+                        Ваш надежный <span class="text-gradient">IT-партнер</span>
+                    </h2>
+                    <p class="text-muted mb-4">
+                        Мы не просто выполняем проекты - мы создаем долгосрочные партнерские отношения 
+                        и помогаем бизнесу расти с помощью технологий.
+                    </p>
+                    
+                    <div class="feature-list">
+                        <div class="d-flex align-items-start mb-4">
+                            <div class="feature-icon bg-primary rounded-3 p-2 me-3 text-white">
+                                <i class="fas fa-rocket"></i>
+                            </div>
+                            <div>
+                                <h5 class="mb-2">Быстрая разработка</h5>
+                                <p class="text-muted mb-0">Agile-методология и современные инструменты для быстрой доставки результата</p>
+                            </div>
+                        </div>
+                        
+                        <div class="d-flex align-items-start mb-4">
+                            <div class="feature-icon bg-success rounded-3 p-2 me-3 text-white">
+                                <i class="fas fa-shield-alt"></i>
+                            </div>
+                            <div>
+                                <h5 class="mb-2">Высокое качество</h5>
+                                <p class="text-muted mb-0">Тщательное тестирование и code review обеспечивают надежность решений</p>
+                            </div>
+                        </div>
+                        
+                        <div class="d-flex align-items-start mb-4">
+                            <div class="feature-icon bg-warning rounded-3 p-2 me-3 text-white">
+                                <i class="fas fa-headset"></i>
+                            </div>
+                            <div>
+                                <h5 class="mb-2">24/7 Поддержка</h5>
+                                <p class="text-muted mb-0">Постоянная техническая поддержка и сопровождение проектов</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="position-relative">
+                    <!-- Process Steps -->
+                    <div class="process-steps">
+                        <div class="step-card active bg-white rounded-4 p-4 shadow mb-4">
+                            <div class="d-flex align-items-center">
+                                <div class="step-number bg-primary text-white rounded-circle me-3" 
+                                     style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                                    1
+                                </div>
+                                <div>
+                                    <h6 class="mb-1">Анализ требований</h6>
+                                    <p class="small text-muted mb-0">Детальное изучение ваших потребностей</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="step-card bg-white rounded-4 p-4 shadow mb-4">
+                            <div class="d-flex align-items-center">
+                                <div class="step-number bg-secondary text-white rounded-circle me-3" 
+                                     style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                                    2
+                                </div>
+                                <div>
+                                    <h6 class="mb-1">Проектирование</h6>
+                                    <p class="small text-muted mb-0">Создание архитектуры и дизайна</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="step-card bg-white rounded-4 p-4 shadow mb-4">
+                            <div class="d-flex align-items-center">
+                                <div class="step-number bg-success text-white rounded-circle me-3" 
+                                     style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                                    3
+                                </div>
+                                <div>
+                                    <h6 class="mb-1">Разработка</h6>
+                                    <p class="small text-muted mb-0">Программирование и тестирование</p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="step-card bg-white rounded-4 p-4 shadow">
+                            <div class="d-flex align-items-center">
+                                <div class="step-number bg-warning text-white rounded-circle me-3" 
+                                     style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
+                                    4
+                                </div>
+                                <div>
+                                    <h6 class="mb-1">Запуск и поддержка</h6>
+                                    <p class="small text-muted mb-0">Деплой и техническая поддержка</p>
+                                </div>
+                            </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="{% url 'services' %}" class="btn btn-light btn-lg text-primary">
+                        <i class="fas fa-comments me-2"></i>
+                        Получить консультацию
+                    </a>
+                    <a href="tel:+82-10-XXXX-XXXX" class="btn btn-outline-light btn-lg">
+                        <i class="fas fa-phone me-2"></i>
+                        Позвонить сейчас
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Animate elements on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in-up');
+            }
+        });
+    }, observerOptions);
+
+    // Observe service cards
+    document.querySelectorAll('.service-card, .step-card').forEach(card => {
+        observer.observe(card);
+    });
+});
+</script>
+
+<style>
+.max-width-600 {
+    max-width: 600px;
+}
+
+.hero-graphic {
+    perspective: 1000px;
+}
+
+.code-window {
+    transform-style: preserve-3d;
+}
+
+.floating-icon {
+    animation-delay: 1s;
+}
+
+.step-card {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.6s ease;
+}
+
+.step-card.animate-fade-in-up {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.feature-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 768px) {
+    .hero-graphic {
+        margin-top: 2rem;
+    }
+    
+    .code-window {
+        transform: rotate(0deg) !important;
+        max-width: 100% !important;
+    }
+    
+    .mobile-preview {
+        position: relative !important;
+        transform: rotate(0deg) !important;
+        margin-top: 1rem;
+        width: 100% !important;
+    }
+    
+    .floating-icon {
+        position: relative !important;
+        display: inline-block;
+        margin: 0.5rem;
+    }
+}
+</style>
+{% endblock %}