From c1616ac542b72311b2ebfc1531ab93edda5abbb6 Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Tue, 25 Nov 2025 15:38:10 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20ContactInfo=20=D0=BC=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D1=81=20=D0=BA=D1=80=D0=B0=D1=81=D0=B8?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B5=D0=B9=20=D0=9E=20=D0=BD=D0=B0=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 📊 Создана ContactInfo модель с полями компании, контактов и описания
- 🎨 Полностью переработана страница about.html с современными карточками
- 🔗 Админ-панель для управления контактной информацией
- 💎 CSS анимации и градиенты для улучшения UI/UX
- 🗄️ Миграция 0012_contactinfo.py для создания таблицы
- 🔧 Обновлены views для использования данных из БД
---
 .../static/img/{logo.svg => лого (2).svg}     |   0
 smartsoltech/web/admin.py                     |  10 +-
 .../web/migrations/0012_contactinfo.py        |  33 ++
 smartsoltech/web/models.py                    |  25 ++
 smartsoltech/web/templates/web/about.html     | 307 +++++++++++++++---
 smartsoltech/web/templates/web/base.html      |  31 +-
 .../web/templates/web/client_orders.html      |   2 +-
 .../templates/web/complete_registration.html  |   2 +-
 .../web/complete_registration_basic.html      |   2 +-
 smartsoltech/web/templates/web/footer.html    | 213 ++++++++++--
 smartsoltech/web/templates/web/header.html    |  20 --
 smartsoltech/web/templates/web/home.html      | 222 ++++++++++++-
 .../web/templates/web/modal_order_form.html   | 238 +++++++++-----
 smartsoltech/web/templates/web/navbar.html    | 131 +++++++-
 smartsoltech/web/templates/web/order.html     |   2 +-
 .../web/templates/web/order_detail.html       |   2 +-
 .../web/service_request_success.html          |   2 +-
 smartsoltech/web/templates/web/services.html  | 127 +-------
 smartsoltech/web/views.py                     |   5 +-
 19 files changed, 1027 insertions(+), 347 deletions(-)
 rename smartsoltech/static/img/{logo.svg => лого (2).svg} (100%)
 create mode 100644 smartsoltech/web/migrations/0012_contactinfo.py
 delete mode 100644 smartsoltech/web/templates/web/header.html

diff --git a/smartsoltech/static/img/logo.svg b/smartsoltech/static/img/лого (2).svg
similarity index 100%
rename from smartsoltech/static/img/logo.svg
rename to smartsoltech/static/img/лого (2).svg
diff --git a/smartsoltech/web/admin.py b/smartsoltech/web/admin.py
index 8298beb..436d38f 100644
--- a/smartsoltech/web/admin.py
+++ b/smartsoltech/web/admin.py
@@ -1,7 +1,15 @@
 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
 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')
diff --git a/smartsoltech/web/migrations/0012_contactinfo.py b/smartsoltech/web/migrations/0012_contactinfo.py
new file mode 100644
index 0000000..2cd86af
--- /dev/null
+++ 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': 'Контактная информация',
+            },
+        ),
+    ]
diff --git a/smartsoltech/web/models.py b/smartsoltech/web/models.py
index f192de8..2799c06 100644
--- a/smartsoltech/web/models.py
+++ b/smartsoltech/web/models.py
@@ -3,6 +3,31 @@ from django.contrib.auth.models import AbstractUser, User
 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="Заголовок")
diff --git a/smartsoltech/web/templates/web/about.html b/smartsoltech/web/templates/web/about.html
index 099452a..8566160 100644
--- a/smartsoltech/web/templates/web/about.html
+++ b/smartsoltech/web/templates/web/about.html
@@ -1,53 +1,280 @@
 {% 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>
-            </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>
+<!-- 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="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>
-                        </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>
+                    <div class="contact-title">Email</div>
+                    <div class="contact-info">
+                        <a href="mailto:{{ contact_info.email }}">{{ contact_info.email }}</a>
                     </div>
                 </div>
             </div>
-            <div class="col-md-6 col-lg-5 col-xl-4">
-                <div></div>
-                <h1>О нас</h1>
-                <p>Мы - команда профессионалов в своей отрасли. В нашей команде есть все, программисты, сетевые инженеры, системные администраторы, </p>
+            
+            <!-- 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>
+            
+            <!-- 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>
+            
+            <!-- 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>
+        
+        <!-- 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 %}
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/base.html b/smartsoltech/web/templates/web/base.html
index af75c19..9bc7715 100644
--- a/smartsoltech/web/templates/web/base.html
+++ b/smartsoltech/web/templates/web/base.html
@@ -1,29 +1,30 @@
 {% load static %}
-<!-- web/templates/web/base.html - Legacy redirected to modern version -->
 <!DOCTYPE html>
-<html lang="ko">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}SmartSolTech - IT Solutions{% endblock %}</title>
+    <meta name="description" content="SmartSolTech - Технологические решения для вашего бизнеса">
+    <meta name="keywords" content="веб-разработка, мобильные приложения, IT консалтинг">
+    <title>{% block title %}SmartSolTech - Технологические решения{% endblock %}</title>
     
-    <!-- Bootstrap CSS -->
+    <!-- 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 Modern Styles -->
+    <!-- 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' %}">
     
     <!-- PWA Manifest -->
     <link rel="manifest" href="/static/manifest.json">
     
-    <!-- Modal Init Script -->
-    <script src="{% static 'assets/js/modal-init.js' %}"></script>
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="{% static 'assets/img/favicon.png' %}">
     
-    <!-- Extra Styles Block -->
     {% block extra_styles %}{% endblock %}
 </head>
 <body class="modern-body">
@@ -37,25 +38,23 @@
     </div>
 
     <!-- Navigation -->
-    {% include 'web/navbar_modern.html' %}
+    {% include 'web/navbar.html' %}
     
     <!-- Main Content -->
     <main class="main-content">
-        <div class="container-modern mt-4">
-            {% block content %}{% endblock %}
-        </div>
+        {% block content %}{% endblock %}
     </main>
     
     <!-- Footer -->
-    {% include 'web/footer_modern.html' %}
+    {% include 'web/footer.html' %}
     
-    <!-- Bootstrap JS -->
+    <!-- Bootstrap 5 JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     
-    <!-- Custom Modern Scripts -->
+    <!-- Custom JS -->
+    <script src="{% static 'assets/js/script.min.js' %}"></script>
     <script src="{% static 'assets/js/modern-scripts.js' %}"></script>
     
-    <!-- Extra Scripts Block -->
     {% block extra_scripts %}{% endblock %}
     
     <!-- Emergency Loading Screen Script -->
diff --git a/smartsoltech/web/templates/web/client_orders.html b/smartsoltech/web/templates/web/client_orders.html
index 3f23a86..811aaff 100644
--- a/smartsoltech/web/templates/web/client_orders.html
+++ b/smartsoltech/web/templates/web/client_orders.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 
 {% block content %}
 <h2>Мои заказы</h2>
diff --git a/smartsoltech/web/templates/web/complete_registration.html b/smartsoltech/web/templates/web/complete_registration.html
index 0cec9a5..5b3c95a 100644
--- a/smartsoltech/web/templates/web/complete_registration.html
+++ b/smartsoltech/web/templates/web/complete_registration.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 <!-- web/templates/web/complete_registration_basic.html -->
 {% load static %}
 
diff --git a/smartsoltech/web/templates/web/complete_registration_basic.html b/smartsoltech/web/templates/web/complete_registration_basic.html
index 4a83959..166ae5f 100644
--- a/smartsoltech/web/templates/web/complete_registration_basic.html
+++ b/smartsoltech/web/templates/web/complete_registration_basic.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 <!-- web/templates/web/complete_registration_basic.html -->
 {% load static %}
 
diff --git a/smartsoltech/web/templates/web/footer.html b/smartsoltech/web/templates/web/footer.html
index 0fd0dd6..d854d11 100644
--- a/smartsoltech/web/templates/web/footer.html
+++ b/smartsoltech/web/templates/web/footer.html
@@ -1,48 +1,189 @@
-<!-- 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>
+{% load static %}
+<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>
             </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>
+            
+            <!-- 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>
-            <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>
+            
+            <!-- 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>
+                    <li class="mb-2">
+                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
+                            Карьера
+                        </a>
+                    </li>
+                </ul>
             </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>
+            
+            <!-- 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="mb-4" />
+        
+        <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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/header.html b/smartsoltech/web/templates/web/header.html
deleted file mode 100644
index 3076083..0000000
--- a/smartsoltech/web/templates/web/header.html
+++ /dev/null
@@ -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>
diff --git a/smartsoltech/web/templates/web/home.html b/smartsoltech/web/templates/web/home.html
index c512e93..856938c 100644
--- a/smartsoltech/web/templates/web/home.html
+++ b/smartsoltech/web/templates/web/home.html
@@ -1,6 +1,226 @@
-<!-- web/templates/web/home.html -->
 {% extends 'web/base_modern.html' %}
 {% load static %}
+
+{% block title %}SmartSolTech - Инновационные технологические решения{% endblock %}
+
+{% block content %}
+<!-- Hero Section with Modern Carousel -->
+<section class="hero-modern">
+    {% if hero_banners %}
+    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
+        <div class="carousel-inner">
+            {% for banner in hero_banners %}
+            <div class="carousel-item {% if forloop.first %}active{% endif %}">
+                {% if banner.video %}
+                    <video class="hero-video" muted autoplay loop playsinline
+                           {% if banner.video_poster %}poster="{{ banner.video_poster.url }}"{% endif %}>
+                        <source src="{{ banner.video.url }}" type="video/mp4">
+                        {% if banner.image %}
+                            <img src="{{ banner.image.url }}" alt="{{ banner.title }}" class="hero-fallback">
+                        {% endif %}
+                    </video>
+                {% elif banner.image %}
+                    <img src="{{ banner.image.url }}" alt="{{ banner.title }}" class="hero-image">
+                {% endif %}
+                
+                <div class="hero-overlay"></div>
+                <div class="hero-content">
+                    <div class="container-modern">
+                        <div class="row align-items-center justify-content-center text-center">
+                            <div class="col-lg-8">
+                                <h1 class="hero-title">{{ banner.title }}</h1>
+                                <p class="hero-subtitle">{{ banner.subtitle }}</p>
+                                {% if banner.button_text and banner.button_url %}
+                                    <a href="{{ banner.button_url }}" class="btn btn-primary-modern btn-lg mt-4">
+                                        {{ banner.button_text }}
+                                    </a>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        
+        <!-- Modern Pill Indicators -->
+        {% if hero_banners|length > 1 %}
+        <div class="hero-indicators">
+            <div class="pill-container">
+                {% for banner in hero_banners %}
+                    <button type="button" 
+                            data-bs-target="#heroCarousel" 
+                            data-bs-slide-to="{{ forloop.counter0 }}" 
+                            class="pill-indicator {% if forloop.first %}active{% endif %}"
+                            aria-current="{% if forloop.first %}true{% endif %}"
+                            aria-label="Slide {{ forloop.counter }}"></button>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    {% else %}
+    <!-- Default Hero when no banners -->
+    <div class="hero-default">
+        <div class="hero-overlay"></div>
+        <div class="hero-content">
+            <div class="container-modern">
+                <div class="row align-items-center justify-content-center text-center">
+                    <div class="col-lg-8">
+                        <h1 class="hero-title">SmartSolTech</h1>
+                        <p class="hero-subtitle">Инновационные технологические решения для вашего бизнеса</p>
+                        <a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg mt-4">
+                            Наши услуги
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</section>
+
+<!-- Services Preview -->
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="text-center mb-5">
+            <h2 class="display-6 fw-bold mb-4">
+                Наши <span class="text-gradient">услуги</span>
+            </h2>
+            <p class="lead text-muted">
+                Предоставляем полный спектр IT-решений
+            </p>
+        </div>
+        
+        <div class="row g-4">
+            {% for service in services %}
+            <div class="col-lg-4 col-md-6">
+                <div class="card-modern h-100">
+                    <div class="card-body text-center">
+                        <div class="service-icon mb-3">
+                            <i class="fas fa-code text-primary"></i>
+                        </div>
+                        <h5 class="mb-3">{{ service.name }}</h5>
+                        <p class="text-muted mb-4">{{ service.description|truncatewords:15 }}</p>
+                        <a href="{% url 'service_detail' service.pk %}" class="btn btn-outline-primary">
+                            Подробнее
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        
+        <div class="text-center mt-5">
+            <a href="{% url 'services' %}" class="btn btn-primary-modern btn-lg">
+                Все услуги
+            </a>
+        </div>
+    </div>
+</section>
+
+<!-- About Preview -->
+<section class="section-padding bg-light">
+    <div class="container-modern">
+        <div class="row g-5 align-items-center">
+            <div class="col-lg-6">
+                <h2 class="display-6 fw-bold mb-4">
+                    О <span class="text-gradient">SmartSolTech</span>
+                </h2>
+                <p class="lead mb-4">
+                    Мы - команда профессионалов, специализирующихся на создании
+                    инновационных технологических решений для бизнеса.
+                </p>
+                <div class="row g-3 mb-4">
+                    <div class="col-sm-6">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-check-circle text-success me-3"></i>
+                            <span>Индивидуальный подход</span>
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-check-circle text-success me-3"></i>
+                            <span>Современные технологии</span>
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-check-circle text-success me-3"></i>
+                            <span>Качественная поддержка</span>
+                        </div>
+                    </div>
+                    <div class="col-sm-6">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-check-circle text-success me-3"></i>
+                            <span>Соблюдение сроков</span>
+                        </div>
+                    </div>
+                </div>
+                <a href="{% url 'about' %}" class="btn btn-primary-modern">
+                    Узнать больше
+                </a>
+            </div>
+            <div class="col-lg-6">
+                <div class="position-relative">
+                    <img src="{% static 'assets/img/about-preview.jpg' %}" 
+                         class="img-fluid rounded-4 shadow-lg" 
+                         alt="О нас">
+                </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">
+                    <button class="btn btn-light btn-lg text-primary" 
+                            onclick="openServiceModal(0, 'Консультация')">
+                        <i class="fas fa-comments me-2"></i>
+                        Бесплатная консультация
+                    </button>
+                    <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>
+
+<!-- Include Modal -->
+{% include 'web/modal_order_form.html' %}
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Hero carousel enhancements
+document.addEventListener('DOMContentLoaded', function() {
+    const carousel = document.querySelector('#heroCarousel');
+    if (carousel) {
+        const indicators = document.querySelectorAll('.pill-indicator');
+        
+        carousel.addEventListener('slide.bs.carousel', function(e) {
+            indicators.forEach((indicator, index) => {
+                indicator.classList.toggle('active', index === e.to);
+            });
+        });
+    }
+});
+</script>
+{% endblock %}
+{% load static %}
 {% block title %}SmartSolTech - IT Solutions{% endblock %}
 
 {% block content %}
diff --git a/smartsoltech/web/templates/web/modal_order_form.html b/smartsoltech/web/templates/web/modal_order_form.html
index 01c47ee..5010f2e 100644
--- 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;
-        }
+<!-- 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">
+                    {% 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="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="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="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>
 
-        .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>
-        <form id="serviceRequestForm">
-            <div class="form-group">
-                <label for="clientName">Ваше имя:</label>
-                <input type="text" class="form-control" id="clientName" name="client_name" required>
+                    <!-- 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>
+                </form>
             </div>
-            <div class="form-group">
-                <label for="clientEmail">Ваш email:</label>
-                <input type="email" class="form-control" id="clientEmail" name="client_email" required>
+            <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 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>
-            <div class="form-group">
-                <label for="description">Описание заявки:</label>
-                <textarea class="form-control" id="description" name="description" required></textarea>
-            </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>
 </div>
 
-<div id="confirmationModal" class="modal">
-    <div class="modal-content">
-        <span class="close">&times;</span>
-        <h4>Заявка успешно создана!</h4>
-        <p>Ваши данные были отправлены и заявка зарегистрирована. Пожалуйста, проверьте ваш Telegram для получения подтверждения.</p>
-    </div>
-</div>
+<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();
+}
 
-<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>
\ No newline at end of file
+// 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>
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/navbar.html b/smartsoltech/web/templates/web/navbar.html
index 711d9ad..bd5e615 100644
--- a/smartsoltech/web/templates/web/navbar.html
+++ b/smartsoltech/web/templates/web/navbar.html
@@ -1,14 +1,127 @@
 {% 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' %}">О нас</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" 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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/order.html b/smartsoltech/web/templates/web/order.html
index 1ccaa03..c60470d 100644
--- a/smartsoltech/web/templates/web/order.html
+++ b/smartsoltech/web/templates/web/order.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 {% load static %}
 
 {% block content %}
diff --git a/smartsoltech/web/templates/web/order_detail.html b/smartsoltech/web/templates/web/order_detail.html
index 9dfd16a..525654a 100644
--- a/smartsoltech/web/templates/web/order_detail.html
+++ b/smartsoltech/web/templates/web/order_detail.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 
 {% block content %}
 <h2>Детали заказа</h2>
diff --git a/smartsoltech/web/templates/web/service_request_success.html b/smartsoltech/web/templates/web/service_request_success.html
index 7c693db..87a42b4 100644
--- a/smartsoltech/web/templates/web/service_request_success.html
+++ b/smartsoltech/web/templates/web/service_request_success.html
@@ -1,4 +1,4 @@
-{% extends 'web/base_modern.html' %}
+{% extends 'web/base.html' %}
 
 {% block content %}
 <div class="container mt-4">
diff --git a/smartsoltech/web/templates/web/services.html b/smartsoltech/web/templates/web/services.html
index 26664e8..8ef43c5 100644
--- a/smartsoltech/web/templates/web/services.html
+++ b/smartsoltech/web/templates/web/services.html
@@ -173,83 +173,7 @@
 </section>
 
 <!-- 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">
-                    {% 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="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="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="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>
-                    
-                    <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>
-                </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>
-</div>
+{% include 'web/modal_order_form.html' %}
 {% endblock %}
 
 {% block extra_scripts %}
@@ -263,55 +187,6 @@ function openServiceModal(serviceId, serviceName) {
     const modal = new bootstrap.Modal(document.getElementById('serviceModal'));
     modal.show();
 }
-
-// Form submission - simplified version
-document.getElementById('serviceRequestForm').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;
-    
-    // Симуляция отправки
-    setTimeout(() => {
-        submitBtn.innerHTML = '<i class="fas fa-check me-2"></i>Отправлено!';
-        submitBtn.classList.remove('btn-primary-modern');
-        submitBtn.classList.add('btn-success');
-        
-        setTimeout(() => {
-            const modal = bootstrap.Modal.getInstance(document.getElementById('serviceModal'));
-            modal.hide();
-            showNotification('Заявка отправлена! Мы свяжемся с вами в ближайшее время.', 'success');
-            
-            // Reset form
-            this.reset();
-            submitBtn.innerHTML = originalContent;
-            submitBtn.disabled = false;
-            submitBtn.classList.remove('btn-success');
-            submitBtn.classList.add('btn-primary-modern');
-        }, 2000);
-    }, 1500);
-});
-
-function showNotification(message, type) {
-    const notification = document.createElement('div');
-    notification.className = `alert alert-${type} position-fixed top-0 end-0 m-3`;
-    notification.style.zIndex = '9999';
-    notification.innerHTML = `
-        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
-        ${message}
-        <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
-    `;
-    
-    document.body.appendChild(notification);
-    
-    setTimeout(() => {
-        notification.remove();
-    }, 5000);
-}
 </script>
 
 <style>
diff --git a/smartsoltech/web/views.py b/smartsoltech/web/views.py
index 9de0489..529e78e 100644
--- a/smartsoltech/web/views.py
+++ b/smartsoltech/web/views.py
@@ -1,5 +1,5 @@
 from django.shortcuts import render, get_object_or_404, redirect
-from .models import Service, Project, Client, BlogPost, Review, Order, ServiceRequest, HeroBanner, Category
+from .models import Service, Project, Client, BlogPost, Review, Order, ServiceRequest, HeroBanner, Category, ContactInfo
 from django.db.models import Avg
 from comunication.models import TelegramSettings
 import qrcode
@@ -95,7 +95,8 @@ def services_view(request):
     })
 
 def about_view(request):
-    return render(request, 'web/about_modern.html')
+    contact_info = ContactInfo.get_active()
+    return render(request, 'web/about.html', {'contact_info': contact_info})
 
 def portfolio_view(request):
     projects = Project.objects.all()