--

README.md

@@ -1,5 +1,33 @@
+# Текущая ззадача
 
-# применяя правила:
+оформи и напиши все файлы для app/pages/Contacts
+Данные для страницы:
+
++992 372 27 09 46
+просп. Исмоила Сомони, 26
+Сейчас руководство скину брат
+Азимов Махмадюсуф зам директора
+Директор Джумахон Розикзода
+
+
+# применяй правила:
+
+## Корневой каталог и мета данные
+Важно: мета данные добавляются через app/temp.coffe
+базовым тегоьм для vuejs является body, app/index.pug начинается с div,
+теги html, head, body ЗАПРЕЩЕНО использовать.
+
+## Радота с кодом
+всегда приводи полный листинг файлов
+при форматировании кода для отделения логических блоков используй 4 пробела ("    ")
+следи за строгим соблюдением синтаксиса используемых языков (coffeescript, pug, stylus)
+в pug не используй многострочные вычисляемые атрибуты
+
+## работа с консолью
+используй для вывода в консоль debug.log
+
+console.log "переменная temp = #{temp}" - не правильно
+debug.log "переменная temp = "+temp     - правильно
 
 ## Цвета и управление темами
 во всех *.styl файлах используй цвета в виде переменных, определённых в файле tailwind.config.js
@@ -23,3 +51,44 @@ https://gogs.osvoj.ru/s5l.ru/borbad.s5l.ru/src/master
 
 ## файл с правилами
 https://gogs.osvoj.ru/s5l.ru/borbad.s5l.ru/raw/master/README.md
+
+# общая структура проекта
+app/
+├── tailwind.config.js (настройка тем и Tailwind CSS)
+├── temp.pug (основной layout)
+├── temp.coffee (инициализация Vue и роутера)
+├── temp.styl (стили которые сложно или не удобно сделать на Tailwind CSS  или стили к однотипным элементам на stylus)
+├── page/
+     ├── Home/  (главная страница)
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── [другие_страницы]/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+└── shared/
+     ├── ThemeToggle/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── MultiLevelMenu/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── ImageSlider/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── ModalWindow/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── FormValidator/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl
+     ├── FilterSort/
+          ├── index.coffee
+          ├── index.pug
+          ├── index.styl

vue/app/pages/About/index.pug

@@ -1,113 +1,97 @@
-//- app/pages/About/index.pug
-section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12")
-  div(class="container mx-auto px-4")
-    //- Заголовок страницы
-    div(class="text-center mb-16")
-      h1(class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6") Кохи Борбад
-      div(class="w-24 h-1 bg-accent mx-auto")
-      p(class="text-xl text-gray-600 dark:text-gray-400 mt-6 max-w-3xl mx-auto") Концертный зал с богатой историей и уникальной архитектурой в сердце Душанбе
+section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 about-section")
+    div(class="container mx-auto px-4")
+        div(class="text-center mb-16")
+            h1(class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6") Кохи Борбад
+            div(class="w-24 h-1 bg-accent mx-auto")
+            p(class="text-xl text-gray-600 dark:text-gray-400 mt-6 max-w-3xl mx-auto") Концертный зал с богатой историей и уникальной архитектурой в сердце Душанбе
 
-    //- Основной контент
-    div(class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start")
-      //- Текстовый контент
-      div(class="space-y-8")
-        //- Блок истории строительства
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") История строительства
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Соли 1984 тибқи лоиҳаи дастаҷамъонаи меъморони Узбекистон Серго Сутягин, О. В. Легостаева, С. И. Соколов, С. Н. Романов, Р. С. Ниёзалиева ва муҳандис А. С. Бресловский бунёд шудааст.
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бино дар маркази шаҳри Душанбе, дар шафати соҳили «Кӯли ҷавонон» ҷой гирифта, намои асосии он ба сӯи кӯчаи Исмоили Сомонӣ нигаронида шудааст.
+        div(class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start")
+            div(class="space-y-8")
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-100")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") История строительства
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Соли 1984 тибқи лоиҳаи дастаҷамъонаи меъморони Узбекистон Серго Сутягин, О. В. Легостаева, С. И. Соколов, С. Н. Романов, Р. С. Ниёзалиева ва муҳандис А. С. Бресловский бунёд шудааст.
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бино дар маркази шаҳри Душанбе, дар шафати соҳили «Кӯли ҷавонон» ҷой гирифта, намои асосии он ба сӯи кӯчаи Исмоили Сомонӣ нигаронида шудааст.
 
-        //- Блок архитектуры
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") Архитектура и структура
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") «Кохи Борбад» аз 2 қисм: миёнсаройи дуошёна ботолори хурд, толори калони киноконсертии амфитеатрмонанд (бо 2300 ҷои нишаст) ва утоқҳои хидматрасонӣ иборат аст.
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Толори калон барои намоиши ҳама гуна филм, консертҳои эстрадӣ, фестивалу форум, машварат ва дигар тадбирҳои ҷамъиятию сиёсӣ таъйин шудааст.
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-200")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") Архитектура и структура
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") «Кохи Борбад» аз 2 қисм: миёнсаройи дуошёна ботолори хурд, толори калони киноконсертии амфитеатрмонанд (бо 2300 ҷои нишаст) ва утоқҳои хидматрасонӣ иборат аст.
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Толори калон барои намоиши ҳама гуна филм, консертҳои эстрадӣ, фестивалу форум, машварат ва дигар тадбирҳои ҷамъиятию сиёсӣ таъйин шудааст.
 
-        //- Блок технического оснащения
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") Техническое оснащение
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бо таҷҳизоти зарурӣ аз қабили дастгоҳҳои равшанидиҳанда, тарҷумаи нутқ, системаи муосири акустикӣ-стереофонӣ муҷаҳҳаз аст.
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Утоқҳо барои ҳунармандон ва ҷои махсус ‒ фарши гирдгардон барои оркестр дорад.
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-300")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") Техническое оснащение
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бо таҷҳизоти зарурӣ аз қабили дастгоҳҳои равшанидиҳанда, тарҷумаи нутқ, системаи муосири акустикӣ-стереофонӣ муҷаҳҳаз аст.
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Утоқҳо барои ҳунармандон ва ҷои махсус ‒ фарши гирдгардон барои оркестр дорад.
 
-      //- Боковая панель с дополнительной информацией
-      div(class="space-y-8")
-        //- Блок особенностей архитектуры
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") Особенности архитектуры
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Ҳар ду бинои кох, ки бо қолаби бетони монолитӣ сохта шудаанд, ба заминларзаи 9-балла тобоваранд.
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бинои калони «Кохи Борбад» мудаввари махрутшакл буда, дар қисми боло шерозаи нақшин дорад, ки хонаҳои сангини ноҳияҳои кӯҳистони Тоҷикистонро ба хотир меоварад.
+            div(class="space-y-8")
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-200")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") Особенности архитектуры
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Ҳар ду бинои кох, ки бо қолаби бетони монолитӣ сохта шудаанд, ба заминларзаи 9-балла тобоваранд.
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Бинои калони «Кохи Борбад» мудаввари махрутшакл буда, дар қисми боло шерозаи нақшин дорад, ки хонаҳои сангини ноҳияҳои кӯҳистони Тоҷикистонро ба хотир меоварад.
 
-        //- Блок культурного наследия
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") Культурное наследие
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Меъморону муҳандисон зимни тартиб ва таҳияи лоиҳаи «Кохи Борбад» хусусиятҳои расму таомули миллиро ба эътибор гирифта, кӯшидаанд, ки байни ин бино ва ёдгориҳои меъмории ниёкони тоҷик монандӣ вуҷуд дошта бошад.
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-300")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") Культурное наследие
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4") Меъморону муҳандисон зимни тартиб ва таҳияи лоиҳаи «Кохи Борбад» хусусиятҳои расму таомули миллиро ба эътибор гирифта, кӯшидаанд, ки байни ин бино ва ёдгориҳои меъмории ниёкони тоҷик монандӣ вуҷуд дошта бошад.
 
-        //- Блок реконструкции
-        div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8")
-          div(class="flex items-center mb-6")
-            div(class="w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center mr-4")
-              svg(class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15")
-            h2(class="text-2xl font-bold text-gray-800 dark:text-white") Реконструкция
-          div(class="prose prose-lg dark:prose-invert max-w-none")
-            p(class="text-gray-700 dark:text-gray-300 leading-relaxed") Соли 2003 ба муносибати баргузории Форуми байналмилалии «Оби тоза» (таҳти сарпарастии СММ) бинои «Кохи Борбад» таъмиру тармим гардид.
+                div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 animate-fade-in-up animation-delay-400")
+                    div(class="flex items-center mb-6")
+                        div(class="w-12 h-12 bg-teal-100 dark:bg-teal-900 rounded-lg flex items-center justify-center mr-4")
+                            svg(class="w-6 h-6 text-teal-600 dark:text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15")
+                        h2(class="text-2xl font-bold text-gray-800 dark:text-white") Реконструкция
+                    div(class="prose prose-lg dark:prose-invert max-w-none")
+                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed") Соли 2003 ба муносибати баргузории Форуми байналмилалии «Оби тоза» (таҳти сарпарастии СММ) бинои «Кохи Борбад» таъмиру тармим гардид.
 
-    //- Информационные карточки
-    div(class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16")
-      //- Карточка вместимости
-      div(class="bg-accent text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300")
-        div(class="text-4xl font-bold mb-2") 2,300
-        div(class="text-xl font-semibold") мест в зале
-        div(class="text-yellow-100 mt-2") Амфитеатр
-      
-      //- Карточка года основания
-      div(class="bg-primary text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300")
-        div(class="text-4xl font-bold mb-2") 1984
-        div(class="text-xl font-semibold") год основания
-        div(class="text-gray-300 mt-2") Исторический памятник
-      
-      //- Карточка реконструкции
-      div(class="bg-secondary text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300")
-        div(class="text-4xl font-bold mb-2") 2003
-        div(class="text-xl font-semibold") реконструкция
-        div(class="text-red-100 mt-2") Форум "Оби тоза"
+        div(class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16")
+            div(class="bg-accent text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300 animate-fade-in-up animation-delay-200 stat-card")
+                div(class="text-4xl font-bold mb-2") 2,300
+                div(class="text-xl font-semibold") мест в зале
+                div(class="text-yellow-100 mt-2") Амфитеатр
+            
+            div(class="bg-primary text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300 animate-fade-in-up animation-delay-300 stat-card")
+                div(class="text-4xl font-bold mb-2") 1984
+                div(class="text-xl font-semibold") год основания
+                div(class="text-gray-300 mt-2") Исторический памятник
+            
+            div(class="bg-secondary text-white rounded-2xl p-8 text-center transform hover:scale-105 transition-transform duration-300 animate-fade-in-up animation-delay-400 stat-card")
+                div(class="text-4xl font-bold mb-2") 2003
+                div(class="text-xl font-semibold") реконструкция
+                div(class="text-red-100 mt-2") Форум "Оби тоза"
 
-    //- Призыв к действию
-    div(class="text-center mt-16")
-      div(class="bg-gradient-to-r from-accent to-yellow-600 rounded-2xl p-12 text-white")
-        h3(class="text-2xl md:text-3xl font-bold mb-4") Посетите легендарный зал "Кохи Борбад"
-        p(class="text-xl mb-6 text-yellow-100") Ощутите магию выступлений в уникальной акустике исторического зала
-        div(class="flex flex-col sm:flex-row gap-4 justify-center")
-          button(
-            @click='$router.push("/events")'
-            class="bg-white text-accent px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
-          ) Посмотреть мероприятия
-          button(
-            @click='$router.push("/contacts")'
-            class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-accent transition-colors"
-          ) Контакты
+        div(class="text-center mt-16")
+            div(class="bg-gradient-to-r from-accent to-yellow-600 rounded-2xl p-12 text-white animate-fade-in-up animation-delay-500")
+                h3(class="text-2xl md:text-3xl font-bold mb-4") Посетите легендарный зал "Кохи Борбад"
+                p(class="text-xl mb-6 text-yellow-100") Ощутите магию выступлений в уникальной акустике исторического зала
+                div(class="flex flex-col sm:flex-row gap-4 justify-center")
+                    button(
+                        @click="$router.push('/events')"
+                        class="bg-white text-accent px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+                    ) Посмотреть мероприятия
+                    button(
+                        @click="$router.push('/contacts')"
+                        class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-accent transition-colors"
+                    ) Контакты

vue/app/pages/Events/index.pug

@@ -1,96 +1,89 @@
-//- app/pages/Events/index.pug
 section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8")
-  div(class="container mx-auto px-4")
-    //- Заголовок и описание
-    div(class="text-center mb-12")
-      h1(class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4") Мероприятия
-      p(class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto") Откройте для себя богатую палитру культурных событий в концертном зале "Кохи Борбад"
-    
-    //- Фильтры и сортировка
-    div(class="mb-8")
-      FilterSort(
-        :items='allEvents'
-        :filters='eventFilters'
-        :sortOptions='sortOptions'
-        :multipleFilters='true'
-        @filter-changed='handleFilterChange'
-      )
-    
-    //- Сетка мероприятий
-    div(class="events-grid")
-      transition-group(name="events-list" tag="div")
-        div(
-          v-for='event in displayedEvents'
-          :key='event.id'
-          class="event-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer transform hover:-translate-y-2"
-          @click='showEventDetails(event)'
-        )
-          div(class="event-image relative overflow-hidden")
-            img(
-              :src='event.image' 
-              :alt='event.title'
-              class="w-full h-48 md:h-56 object-cover transition-transform duration-500 hover:scale-105"
+    div(class="container mx-auto px-4")
+        div(class="text-center mb-12")
+            h1(class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4") Мероприятия
+            p(class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto") Откройте для себя богатую палитру культурных событий в концертном зале "Кохи Борбад"
+        
+        div(class="mb-8")
+            FilterSort(
+                :items="allEvents"
+                :filters="eventFilters"
+                :sortOptions="sortOptions"
+                :multipleFilters="true"
+                @filter-changed="handleFilterChange"
             )
-            div(class="event-badge absolute top-4 right-4")
-              span(
-                :class='getCategoryBadgeClass(event.category)'
-                class="px-3 py-1 rounded-full text-xs font-bold text-white"
-              ) {{ getCategoryLabel(event.category) }}
-            div(class="event-date absolute top-4 left-4 bg-white dark:bg-gray-900 text-gray-800 dark:text-white px-3 py-2 rounded-lg shadow-md")
-              div(class="text-sm font-bold") {{ formatDate(event.date) }}
-            
-          div(class="event-content p-6")
-            h3(class="text-xl font-bold text-gray-800 dark:text-white mb-3 line-clamp-2") {{ event.title }}
-            p(class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3") {{ event.description }}
-            
-            div(class="event-meta flex items-center justify-between mb-4")
-              div(class="event-time flex items-center text-sm text-gray-500 dark:text-gray-400")
-                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z")
-                span {{ event.time }}
-              
-              div(class="event-venue flex items-center text-sm text-gray-500 dark:text-gray-400")
-                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
-                span {{ event.venue }}
-            
-            div(class="event-price-and-button flex items-center justify-between")
-              div(class="price text-2xl font-bold text-accent") {{ event.price }} 
-                span(class="text-sm font-normal text-gray-500 dark:text-gray-400") сомони
-              button(
-                class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm font-medium"
-                @click.stop='bookTicket(event)'
-              ) Купить билет
-    
-    //- Кнопка "Показать еще"
-    div(class="load-more text-center mt-12" v-if='hasMoreEvents && !loading')
-      button(
-        @click='loadMoreEvents'
-        class="bg-accent text-white px-8 py-3 rounded-lg hover:bg-yellow-600 transition-colors font-medium text-lg"
-      ) Показать еще мероприятия
-    
-    //- Состояние загрузки
-    div(class="loading-state text-center mt-8" v-if='loading')
-      div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto")
-      p(class="text-gray-600 dark:text-gray-400 mt-4") Загрузка мероприятий...
-    
-    //- Состояние "нет результатов"
-    div(class="empty-state text-center mt-12" v-if='!loading && displayedEvents.length === 0')
-      div(class="empty-icon mx-auto mb-4")
-        svg(class="w-24 h-24 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-          path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
-      h3(class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2") Мероприятия не найдены
-      p(class="text-gray-500 dark:text-gray-500 mb-6") Попробуйте изменить параметры фильтрации
-      button(
-        @click='resetFilters'
-        class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors"
-      ) Сбросить фильтры
+        
+        div(class="events-grid")
+            transition-group(name="events-list" tag="div")
+                div(
+                    v-for="event in displayedEvents"
+                    :key="event._id"
+                    class="event-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer transform hover:-translate-y-2 animate-fade-in-up"
+                    :class="'animation-delay-' + (($index % 6) * 100)"
+                    @click="showEventDetails(event)"
+                )
+                    div(class="event-image relative overflow-hidden")
+                        img(
+                            :src="event.image"
+                            :alt="event.title"
+                            class="w-full h-48 md:h-56 object-cover transition-transform duration-500 hover:scale-105"
+                        )
+                        div(class="event-badge absolute top-4 right-4")
+                            span(
+                                :class="getCategoryBadgeClass(event.category)"
+                                class="px-3 py-1 rounded-full text-xs font-bold text-white"
+                            ) {{ getCategoryLabel(event.category) }}
+                        div(class="event-date absolute top-4 left-4 bg-white dark:bg-gray-900 text-gray-800 dark:text-white px-3 py-2 rounded-lg shadow-md")
+                            div(class="text-sm font-bold") {{ formatDate(event.date) }}
+                        
+                    div(class="event-content p-6")
+                        h3(class="text-xl font-bold text-gray-800 dark:text-white mb-3 line-clamp-2") {{ event.title }}
+                        p(class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3") {{ event.description }}
+                        
+                        div(class="event-meta flex items-center justify-between mb-4")
+                            div(class="event-time flex items-center text-sm text-gray-500 dark:text-gray-400")
+                                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z")
+                                span {{ event.time }}
+                            
+                            div(class="event-venue flex items-center text-sm text-gray-500 dark:text-gray-400")
+                                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
+                                span {{ event.venue }}
+                        
+                        div(class="event-price-and-button flex items-center justify-between")
+                            div(class="price text-2xl font-bold text-accent") {{ event.price }}
+                                span(class="text-sm font-normal text-gray-500 dark:text-gray-400")  сомони
+                            button(
+                                class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm font-medium"
+                                @click.stop="bookTicket(event)"
+                            ) Купить билет
+        
+        div(class="load-more text-center mt-12" v-if="hasMoreEvents && !loading")
+            button(
+                @click="loadMoreEvents"
+                class="bg-accent text-white px-8 py-3 rounded-lg hover:bg-yellow-600 transition-colors font-medium text-lg"
+            ) Показать еще мероприятия
+        
+        div(class="loading-state text-center mt-8" v-if="loading")
+            div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto")
+            p(class="text-gray-600 dark:text-gray-400 mt-4") Загрузка мероприятий...
+        
+        div(class="empty-state text-center mt-12" v-if="!loading && displayedEvents.length === 0")
+            div(class="empty-icon mx-auto mb-4")
+                svg(class="w-24 h-24 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
+            h3(class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2") Мероприятия не найдены
+            p(class="text-gray-500 dark:text-gray-500 mb-6") Попробуйте изменить параметры фильтрации
+            button(
+                @click="resetFilters"
+                class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors"
+            ) Сбросить фильтры
 
-  //- Модальное окно деталей мероприятия
-  EventDetailModal(
-    v-if='selectedEvent'
-    :isVisible='showEventModal'
-    :event='selectedEvent'
-    @update:isVisible='showEventModal = false'
-    @ticket-booking='handleTicketBooking'
-  )
+    EventDetailModal(
+        v-if="selectedEvent"
+        :isVisible="showEventModal"
+        :event="selectedEvent"
+        @update:isVisible="showEventModal = false"
+        @ticket-booking="handleTicketBooking"
+    )

vue/app/pages/Home/index.pug

@@ -1,58 +1,67 @@
-//- app/pages/Home/index.pug
-section(class="pt-[3rem]")
-  // Hero Section со слайдером
-  .hero-section.m-4
-    imageslider(
-      :slides='heroSlides'
-      :autoplay='true'
-      :duration='5000'
-    )
-  
-  // Секция ближайших мероприятий
-  section(class='py-16 bg-white dark:bg-gray-800')
-    .container.mx-auto.px-4
-      h2(class='text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white') Ближайшие мероприятия
-        FilterSort(
-          :items='events'
-          :filters='eventFilters'
-          :sortOptions='eventSortOptions'
-          @filter-changed='handleFilterChange'
-          @sort-changed='handleSortChange'
-        )
-      .grid.grid-cols-1.gap-8.mt-8(class="md:grid-cols-2 lg:grid-cols-3")
-        .event-card(
-          v-for='event in filteredEvents'
-          :key='event.id'
-          class='bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover cursor-pointer'
-          @click='openEventModal(event)'
+section
+    div(class="hero-section mb-16")
+        ImageSlider(
+            :slides="heroSlides"
+            :autoplay="true"
+            :duration="6000"
+            @slide-click="handleSlideClick"
         )
-          img(:src='event.image' :alt='event.title' class='w-full h-48 object-cover')
-          .p-6
-            h3(class='text-xl font-bold text-gray-800 dark:text-white mb-2') {{ event.title }}
-            p(class='text-gray-600 dark:text-gray-300 mb-4') {{ event.date }}
-            p(class='text-gray-700 dark:text-gray-200 line-clamp-2') {{ event.description }}
-            button(class='mt-4 bg-accent text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors') Подробнее
-  
-  // Секция о зале
-  section(class='py-16 bg-gray-100 dark:bg-gray-900')
-    .container.mx-auto.px-4
-      .grid.grid-cols-1.gap-12.items-center(class="lg:grid-cols-2")
-        .about-content
-          h2(class='text-3xl font-bold mb-6 text-gray-800 dark:text-white') Легендарный зал "Кохи Борбад"
-          p(class='text-gray-700 dark:text-gray-300 mb-4 leading-relaxed') Концертный зал "Кохи Борбад" - одна из главных культурных площадок Душанбе, известная своей богатой историей и выдающейся акустикой.
-          p(class='text-gray-700 dark:text-gray-300 mb-6 leading-relaxed') Здесь выступают лучшие артисты Таджикистана и зарубежные звезды:cite[7].
-          button(class='bg-primary text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors') Узнать историю
-        .about-image
-          img(src='https://avatars.mds.yandex.net/get-altay/2816622/2a0000017167ac5535f923e1e152bf892992/XXXL' alt='Интерьер зала' class='rounded-xl shadow-2xl')
+    
+    section(class="py-16 bg-white dark:bg-gray-800")
+        div(class="container mx-auto px-4")
+            h2(class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white") Ближайшие мероприятия
+            FilterSort(
+                :items="events"
+                :filters="eventFilters"
+                :sortOptions="eventSortOptions"
+                @filter-changed="handleFilterChange"
+                @sort-changed="handleSortChange"
+            )
+            div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8")
+                div(
+                    v-for="event in filteredEvents"
+                    :key="event._id"
+                    class="event-card bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md overflow-hidden card-hover cursor-pointer animate-fade-in-up"
+                    :class="'animation-delay-' + (($index % 6) * 100)"
+                    @click="openEventModal(event)"
+                )
+                    img(:src="event.image" :alt="event.title" class="w-full h-48 object-cover")
+                    div(class="p-6")
+                        h3(class="text-xl font-bold text-gray-800 dark:text-white mb-2") {{ event.title }}
+                        p(class="text-gray-600 dark:text-gray-300 mb-4") {{ event.date }}
+                        p(class="text-gray-700 dark:text-gray-200 line-clamp-2") {{ event.description }}
+                        button(class="mt-4 bg-accent text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition-colors") Подробнее
+    
+    section(class="py-16 bg-gray-100 dark:bg-gray-900")
+        div(class="container mx-auto px-4")
+            div(class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center")
+                div(class="about-content")
+                    h2(class="text-3xl font-bold mb-6 text-gray-800 dark:text-white") Легендарный зал "Кохи Борбад"
+                    p(class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed") Концертный зал "Кохи Борбад" - одна из главных культурных площадок Душанбе, известная своей богатой историей и выдающейся акустикой.
+                    p(class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed") Здесь выступают лучшие артисты Таджикистана и зарубежные звезды.
+                    button(
+                        @click="$router.push('/about')"
+                        class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-gray-800 transition-colors"
+                    ) Узнать историю
+                div(class="about-image")
+                    img(src="https://avatars.mds.yandex.net/i?id=cc968d84ec5c27e85f59f49fc0daeb8004e348f8-10243924-images-thumbs&n=13" alt="Интерьер зала" class="rounded-xl shadow-2xl")
 
-  // Секция подписки
-  section(class='py-16 bg-accent text-white')
-    .container.mx-auto.px-4.text-center
-      h2(class='text-3xl font-bold mb-4') Будьте в курсе мероприятий
-      p(class='text-xl mb-8 text-yellow-100') Подпишитесь на рассылку и получайте анонсы концертов
-      .max-w-md.mx-auto
-         FormValidator(
-           placeholder='Введите ваш email'
-           buttonText='Подписаться'
-           type='email'
-         )
+    section(class="py-16 bg-accent text-white")
+        div(class="container mx-auto px-4 text-center")
+            h2(class="text-3xl font-bold mb-4") Будьте в курсе мероприятий
+            p(class="text-xl mb-8 text-yellow-100") Подпишитесь на рассылку и получайте анонсы концертов
+            div(class="max-w-md mx-auto")
+                FormValidator(
+                    placeholder="Введите ваш email"
+                    buttonText="Подписаться"
+                    :fields="{ email: true }"
+                    @form-submitted="handleSubscription"
+                )
+
+    EventDetailModal(
+        v-if="selectedEvent"
+        :isVisible="showEventModal"
+        :event="selectedEvent"
+        @update:isVisible="showEventModal = false"
+        @ticket-booking="handleTicketBooking"
+    )

vue/app/shared/EventDetailModal/index.pug

@@ -1,115 +1,106 @@
-//- app/shared/EventDetailModal/index.pug
 ModalWindow(
-  :isVisible='isVisible'
-  @update:isVisible='$emit("update:isVisible", $event)'
-  :title='event.title'
-  :contentClass='"max-w-4xl"'
-  :showFooter='false'
+    :isVisible="isVisible"
+    @update:isVisible="$emit('update:isVisible', $event)"
+    :title="event.title"
+    :contentClass="'max-w-4xl'"
+    :showFooter="false"
 )
-  template(#body)
-    div(class="event-detail")
-      div(class="grid grid-cols-1 lg:grid-cols-2 gap-8")
-        //- Изображение и основная информация
-        div(class="event-visual")
-          img(:src='event.image' :alt='event.title' class="w-full rounded-xl shadow-lg")
-          div(class="event-stats grid grid-cols-3 gap-4 mt-4 text-center")
-            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
-              div(class="stat-value text-xl font-bold text-accent") {{ event.availableTickets }}
-              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Осталось билетов
-            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
-              div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.duration }}
-              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Продолжительность
-            div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
-              div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.ageRestriction }}
-              div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Возраст
-        
-        //- Детальная информация
-        div(class="event-info")
-          div(class="info-grid space-y-6")
-            //- Дата и время
-            div(class="info-item flex items-start")
-              div(class="icon mr-4 mt-1")
-                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
-              div(class="content")
-                div(class="label font-semibold text-gray-700 dark:text-gray-300") Дата и время
-                div(class="value text-lg text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
-            
-            //- Место проведения
-            div(class="info-item flex items-start")
-              div(class="icon mr-4 mt-1")
-                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
-              div(class="content")
-                div(class="label font-semibold text-gray-700 dark:text-gray-300") Место проведения
-                div(class="value text-lg text-gray-800 dark:text-white") {{ event.venue }}
-                div(class="text-sm text-gray-600 dark:text-gray-400") Концертный зал "Кохи Борбад"
-            
-            //- Категория
-            div(class="info-item flex items-start")
-              div(class="icon mr-4 mt-1")
-                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10")
-              div(class="content")
-                div(class="label font-semibold text-gray-700 dark:text-gray-300") Категория
-                div(class="value")
-                  span(
-                    :class='getCategoryBadgeClass(event.category)'
-                    class="inline-block px-3 py-1 text-sm font-medium rounded-full"
-                  ) {{ getCategoryLabel(event.category) }}
-            
-            //- Цена
-            div(class="info-item flex items-start")
-              div(class="icon mr-4 mt-1")
-                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1")
-              div(class="content")
-                div(class="label font-semibold text-gray-700 dark:text-gray-300") Цена
-                div(class="value text-3xl font-bold text-accent") {{ event.price }} 
-                  span(class="text-lg font-normal text-gray-600 dark:text-gray-400") сомони
-            
-            //- Описание
-            div(class="info-item")
-              div(class="label font-semibold text-gray-700 dark:text-gray-300 mb-2") Описание мероприятия
-              div(class="value text-gray-600 dark:text-gray-400 leading-relaxed") {{ event.description }}
-          
-          //- Кнопки действий
-          div(class="action-buttons mt-8 flex flex-col sm:flex-row gap-4")
-            button(
-              @click='bookTickets'
-              class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center flex-1"
-            )
-              svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
-              span Купить билеты
-            
-            button(
-              @click='addToCalendar'
-              class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center flex-1 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
-            )
-              svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
-                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
-              span В календарь
+    template(#body)
+        div(class="event-detail")
+            div(class="grid grid-cols-1 lg:grid-cols-2 gap-8")
+                div(class="event-visual")
+                    img(:src="event.image" :alt="event.title" class="w-full rounded-xl shadow-lg")
+                    div(class="event-stats grid grid-cols-3 gap-4 mt-4 text-center")
+                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
+                            div(class="stat-value text-xl font-bold text-accent") {{ event.availableTickets }}
+                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Осталось билетов
+                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
+                            div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.duration }}
+                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Продолжительность
+                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
+                            div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.ageRestriction }}
+                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Возраст
+                
+                div(class="event-info")
+                    div(class="info-grid space-y-6")
+                        div(class="info-item flex items-start")
+                            div(class="icon mr-4 mt-1")
+                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
+                            div(class="content")
+                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Дата и время
+                                div(class="value text-lg text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
+                        
+                        div(class="info-item flex items-start")
+                            div(class="icon mr-4 mt-1")
+                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
+                            div(class="content")
+                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Место проведения
+                                div(class="value text-lg text-gray-800 dark:text-white") {{ event.venue }}
+                                div(class="text-sm text-gray-600 dark:text-gray-400") Концертный зал "Кохи Борбад"
+                        
+                        div(class="info-item flex items-start")
+                            div(class="icon mr-4 mt-1")
+                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10")
+                            div(class="content")
+                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Категория
+                                div(class="value")
+                                    span(
+                                        :class="getCategoryBadgeClass(event.category)"
+                                        class="inline-block px-3 py-1 text-sm font-medium rounded-full"
+                                    ) {{ getCategoryLabel(event.category) }}
+                        
+                        div(class="info-item flex items-start")
+                            div(class="icon mr-4 mt-1")
+                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1")
+                            div(class="content")
+                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Цена
+                                div(class="value text-3xl font-bold text-accent") {{ event.price }}
+                                    span(class="text-lg font-normal text-gray-600 dark:text-gray-400")  сомони
+                        
+                        div(class="info-item")
+                            div(class="label font-semibold text-gray-700 dark:text-gray-300 mb-2") Описание мероприятия
+                            div(class="value text-gray-600 dark:text-gray-400 leading-relaxed") {{ event.description }}
+                    
+                    div(class="action-buttons mt-8 flex flex-col sm:flex-row gap-4")
+                        button(
+                            @click="bookTickets"
+                            class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center flex-1"
+                        )
+                            svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
+                            span Купить билеты
+                        
+                        button(
+                            @click="addToCalendar"
+                            class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center flex-1 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+                        )
+                            svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
+                            span В календарь
 
-  template(#footer)
-    div(class="flex justify-between items-center w-full")
-      div(class="social-share flex space-x-2")
-        button(
-          @click='shareOnFacebook'
-          class="p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
-          aria-label='Поделиться в Facebook'
-        )
-          svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
-            path(d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z")
-        button(
-          @click='shareOnTwitter'
-          class="p-3 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition-colors"
-          aria-label='Поделиться в Twitter'
-        )
-          svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
-            path(d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z")
-      div(class="close-section")
-        button(
-          @click='$emit("update:isVisible", false)'
-          class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
-        ) Закрыть
+    template(#footer)
+        div(class="flex justify-between items-center w-full")
+            div(class="social-share flex space-x-2")
+                button(
+                    @click="shareOnFacebook"
+                    class="p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
+                    aria-label="Поделиться в Facebook"
+                )
+                    svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
+                        path(d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z")
+                button(
+                    @click="shareOnTwitter"
+                    class="p-3 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition-colors"
+                    aria-label="Поделиться в Twitter"
+                )
+                    svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
+                        path(d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z")
+            div(class="close-section")
+                button(
+                    @click="$emit('update:isVisible', false)"
+                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+                ) Закрыть

vue/app/shared/ImageSlider/index.pug

@@ -1,52 +1,52 @@
-.imageslider.relative.overflow-hidden.rounded-xl.shadow-lg(class='max-w-6xl mx-auto')
-  //- Контейнер слайдов
-  .slides-container.relative.h-96.flex.transition-transform.duration-500.ease-in-out( class="md:h-112"
-    :style='{ transform: `translateX(-${currentIndex * 100}%)` }'
-    @touchstart='handleTouchStart'
-    @touchmove='handleTouchMove'
-    @touchend='handleTouchEnd'
-  )
-    .slide.flex-shrink-0.w-full.h-full.relative(
-      v-for='(slide, index) in slides' 
-      :key='index'
+div(class="imageslider relative overflow-hidden rounded-xl shadow-lg max-w-6xl mx-auto")
+    div(
+        class="slides-container relative h-96 md:h-112 flex transition-transform duration-500 ease-in-out"
+        :style="{ transform: 'translateX(-' + currentIndex * 100 + '%)' }"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
     )
-      img.w-full.h-full.object-cover(:src='slide.image' :alt='slide.title || "Изображение слайда"')
-      .slide-content.absolute.inset-0.flex.items-end
-        .content-wrapper.w-full.p-8.bg-gradient-to-t.from-black.to-transparent.text-white(class="via-black/70")
-          h3.text-2xl.font-bold.mb-2(v-if='slide.title' class="md:text-3xl") {{ slide.title }}
-          p.text-lg.mb-4.opacity-90(v-if='slide.description' class="md:text-xl") {{ slide.description }}
-          button.bg-accent.text-white.px-6.py-2.rounded-lg.transition-colors( class="hover:bg-yellow-600"
-            v-if='slide.cta' 
-            @click='$emit("slide-click", slide)'
-          ) {{ slide.cta }}
+        div(
+            v-for="(slide, index) in slides"
+            :key="index"
+            class="slide flex-shrink-0 w-full h-full relative"
+        )
+            img(:src="slide.image" :alt="slide.title || 'Изображение слайда'" class="w-full h-full object-cover")
+            div(class="slide-content absolute inset-0 flex items-end")
+                div(class="content-wrapper w-full p-8 bg-gradient-to-t from-black via-black/70 to-transparent text-white")
+                    h3(class="text-2xl md:text-3xl font-bold mb-2" v-if="slide.title") {{ slide.title }}
+                    p(class="text-lg md:text-xl mb-4 opacity-90" v-if="slide.description") {{ slide.description }}
+                    button(
+                        v-if="slide.cta"
+                        @click="$emit('slide-click', slide)"
+                        class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors"
+                    ) {{ slide.cta }}
 
-  //- Кнопки навигации
-  button.nav-btn.absolute.left-4.text-gray-800.p-3.rounded-full.shadow-lg.transition-all(
-    @click='prevSlide'
-    class='hover:scale-110 top-1/2 transform -translate-y-1/2 dark:text-white bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-700'
-    aria-label='Предыдущий слайд'
-  )
-    svg.w-5.h-5(fill='none' stroke='currentColor' viewBox='0 0 24 24')
-      path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7')
-  
-  button.nav-btn.absolute.right-4.text-gray-800.p-3.rounded-full.shadow-lg.transition-all(
-    @click='nextSlide'
-    class='hover:scale-110 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 dark:text-white hover:bg-white dark:hover:bg-gray-700'
-    aria-label='Следующий слайд'
-  )
-    svg.w-5.h-5(fill='none' stroke='currentColor' viewBox='0 0 24 24')
-      path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7')
-
-  //- Индикаторы
-  .indicators.absolute.bottom-4.transform.flex.space-x-2(class="left-1/2")
-    .indicator.w-3.h-3.rounded-full.border.border-white.cursor-pointer.transition-all(
-      v-for='(slide, index) in slides' 
-      :key='index'
-      :class='"-translate-x-1/2"+currentIndex === index ? "bg-white scale-110" : "bg-white/50"'
-      @click='goToSlide(index)'
-      :aria-label='`Перейти к слайду ${index + 1}`'
+    button(
+        @click="prevSlide"
+        class="nav-btn absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 text-gray-800 dark:text-white p-3 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all hover:scale-110"
+        aria-label="Предыдущий слайд"
+    )
+        svg(class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7")
+    
+    button(
+        @click="nextSlide"
+        class="nav-btn absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-gray-800/80 text-gray-800 dark:text-white p-3 rounded-full shadow-lg hover:bg-white dark:hover:bg-gray-700 transition-all hover:scale-110"
+        aria-label="Следующий слайд"
     )
+        svg(class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24")
+            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7")
+
+    div(class="indicators absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2")
+        div(
+            v-for="(slide, index) in slides"
+            :key="index"
+            class="indicator w-3 h-3 rounded-full border border-white cursor-pointer transition-all"
+            :class="currentIndex === index ? 'bg-white scale-110' : 'bg-white/50'"
+            @click="goToSlide(index)"
+            :aria-label="'Перейти к слайду ' + (index + 1)"
+        )
 
-  //- Прогресс-бар автопрокрутки
-  .progress-bar.absolute.top-0.left-0.w-full.h-1(v-if='autoplay' class="bg-white/30")
-    .progress-fill.h-full.bg-accent.transition-all.duration-1000(:style='{ width: `${progress}%` }')
+    div(class="progress-bar absolute top-0 left-0 w-full h-1 bg-white/30" v-if="autoplay")
+        div(class="progress-fill h-full bg-accent transition-all duration-1000" :style="{ width: progress + '%' }")

vue/app/temp.pug

@@ -1,35 +1,36 @@
-div(class='min-h-full bg-gray-50 dark:bg-gray-900 transition-colors duration-300')
-      div(class='transition-all duration-300')
-        header(class='bg-primary text-white shadow-lg')
-          nav(class='container mx-auto px-4 py-4')
-            .flex.justify-between.items-center
-              a(href='/' class='text-2xl font-bold text-accent') Кохи Борбад
-              .flex.items-center.space-x-4
-                MultiLevelMenu
-                //ThemeToggle
+div(id="app" class="min-h-full bg-gray-50 dark:bg-gray-900 transition-colors duration-300")
 
-        main
-          router-view(v-slot='{ Component }')
-            transition(name='page-slide' mode='out-in')
-              component(:is='Component')
+            div(class="transition-all duration-300")
+                header(class="bg-primary text-white shadow-lg")
+                    div(class="container mx-auto px-4 py-4")
+                        div(class="flex justify-between items-center")
+                            a(href="/" class="text-2xl font-bold text-accent") Кохи Борбад
+                            div(class="flex items-center space-x-4")
+                                MultiLevelMenu
+                                ThemeToggle
 
-        footer(class='bg-primary text-white py-8 mt-12')
-          .container.mx-auto.px-4
-            .grid.grid-cols-1.gap-8(class="md:grid-cols-3")
-              .footer-section
-                h3(class='text-xl font-bold text-accent mb-4') Контакты
-                p пр. И. Сомони, 26, Душанбе
-                p Телефон: +992 (37) 235-48-64
-                p Email: info@borbad.tj
-              
-              .footer-section
-                h3(class='text-xl font-bold text-accent mb-4') Быстрые ссылки
-                .flex.flex-col.space-y-2
-                  a(href='/events' class='hover:text-accent transition-colors') Мероприятия
-                  a(href='/about' class='hover:text-accent transition-colors') О зале
-                  a(href='/contacts' class='hover:text-accent transition-colors') Контакты
-              
-              .footer-section
-                h3(class='text-xl font-bold text-accent mb-4') Подписка
-                p Подпишитесь на новости о мероприятиях
-                FormValidator(placeholder='Ваш email' buttonText='Подписаться')
+                main
+                    router-view(v-slot="{ Component }")
+                        transition(name="page-slide" mode="out-in")
+                            component(:is="Component")
+
+                footer(class="bg-primary text-white py-8 mt-12")
+                    div(class="container mx-auto px-4")
+                        div(class="grid grid-cols-1 md:grid-cols-3 gap-8")
+                            div(class="footer-section")
+                                h3(class="text-xl font-bold text-accent mb-4") Контакты
+                                p пр. И. Сомони, 26, Душанбе
+                                p Телефон: +992 (37) 235-48-64
+                                p Email: info@kohi-borbad.tj
+                            
+                            div(class="footer-section")
+                                h3(class="text-xl font-bold text-accent mb-4") Быстрые ссылки
+                                div(class="flex flex-col space-y-2")
+                                    a(href="/events" class="hover:text-accent transition-colors") Мероприятия
+                                    a(href="/about" class="hover:text-accent transition-colors") О зале
+                                    a(href="/contacts" class="hover:text-accent transition-colors") Контакты
+                            
+                            div(class="footer-section")
+                                h3(class="text-xl font-bold text-accent mb-4") Подписка
+                                p Подпишитесь на новости о мероприятиях
+                                FormValidator(placeholder="Ваш email" buttonText="Подписаться")

vue/app/temp.styl

@@ -1,6 +1,18 @@
 // vue/app/temp.styl
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')
+.page-slide-enter-active { transition: all 0.3s ease-out; }
+.page-slide-leave-active { transition: all 0.3s ease-in; }
+.page-slide-enter-from { opacity: 0; transform: translateX(30px); }
+.page-slide-leave-to { opacity: 0; transform: translateX(-30px); }
+
+
 // Глобальные стили и анимации для всего проекта
 
+
+
+
+
 // Анимации для плавного появления элементов
 @keyframes fadeInUp
   0%