--

vue/app/pages/About/index.coffee

@@ -0,0 +1,39 @@
+# app/pages/About/index.coffee
+document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss" page="About">'+stylFns['app/pages/About/index.styl']+'</style>')
+
+module.exports =
+  name: 'About'
+  render: (new Function '_ctx', '_cache', renderFns['app/pages/About/index.pug'])()
+  data: ->
+    features: [
+      {
+        icon: 'architecture'
+        title: 'Уникальная архитектура'
+        description: 'Сочетание современного дизайна с традиционными таджикскими мотивами'
+      }
+      {
+        icon: 'acoustics' 
+        title: 'Идеальная акустика'
+        description: 'Профессиональная звуковая система для незабываемых выступлений'
+      }
+      {
+        icon: 'capacity'
+        title: 'Вместительный зал'
+        description: '2300 мест в амфитеатре для масштабных мероприятий'
+      }
+    ]
+  mounted: ->
+    @setupAnimations()
+  methods:
+    setupAnimations: ->
+      # Анимация появления элементов при скролле
+      observer = new IntersectionObserver (entries) ->
+        entries.forEach (entry) ->
+          if entry.isIntersecting
+            entry.target.classList.add('animate-fade-in-up')
+      ,
+        threshold: 0.1
+      
+      # Наблюдаем за всеми карточками
+      document.querySelectorAll('.bg-white, .bg-accent, .bg-primary, .bg-secondary').forEach (el) ->
+        observer.observe(el)

vue/app/pages/About/index.pug

@@ -0,0 +1,113 @@
+//- 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") Концертный зал с богатой историей и уникальной архитектурой в сердце Душанбе
+
+    //- Основной контент
+    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="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")
+          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="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")
+          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="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"
+          ) Контакты

vue/app/pages/About/index.styl

@@ -0,0 +1,119 @@
+// app/pages/About/index.styl
+
+// Анимации появления
+@keyframes fadeInUp
+  0%
+    opacity: 0
+    transform: translateY(30px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+.animate-fade-in-up
+  animation: fadeInUp 0.6s ease-out forwards
+
+// Задержки для анимаций
+.bg-white, .bg-accent, .bg-primary, .bg-secondary
+  opacity: 0
+  
+  &.animate-fade-in-up
+    opacity: 1
+    
+  &:nth-child(1)
+    animation-delay: 0.1s
+  &:nth-child(2)
+    animation-delay: 0.2s
+  &:nth-child(3)
+    animation-delay: 0.3s
+  &:nth-child(4)
+    animation-delay: 0.4s
+
+// Стили для карточек с иконками
+.bg-white, .bg-gray-800
+  transition: all 0.3s ease
+  
+  &:hover
+    transform: translateY(-5px)
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
+
+// Градиентные тени для акцентных карточек
+.bg-accent, .bg-primary, .bg-secondary
+  position: relative
+  overflow: hidden
+  
+  &::before
+    content: ''
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%)
+    pointer-events: none
+
+// Стили для типографики
+.prose
+  p
+    line-height: 1.7
+    margin-bottom: 1rem
+    
+  strong
+    color: #d69e2e
+    font-weight: 600
+
+// Адаптивность для мобильных устройств
+@media (max-width: 768px)
+  .grid
+    gap: 1.5rem
+    
+  .bg-white, .bg-gray-800
+    padding: 1.5rem
+    
+  .text-4xl
+    font-size: 2.25rem
+    line-height: 2.5rem
+    
+  .text-2xl
+    font-size: 1.5rem
+    line-height: 2rem
+
+// Темная тема улучшения
+.dark
+  .bg-white
+    background-color: #1f2937
+    
+  .prose
+    p
+      color: #d1d5db
+      
+    strong
+      color: #d69e2e
+
+// Плавный скролл для всей страницы
+html
+  scroll-behavior: smooth
+
+// Кастомные стили для иконок
+.w-12.h-12
+  transition: all 0.3s ease
+  
+  &:hover
+    transform: scale(1.1)
+
+// Эффекты для кнопок призыва к действию
+.bg-gradient-to-r
+  position: relative
+  overflow: hidden
+  
+  &::after
+    content: ''
+    position: absolute
+    top: 0
+    left: -100%
+    width: 100%
+    height: 100%
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
+    transition: left 0.5s
+    
+  &:hover::after
+    left: 100%