From 0ddfff87329a388788fac47e8cfe038ff2bfb49c Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Sat, 1 Nov 2025 22:23:24 +0500
Subject: [PATCH] 	modified:  
 main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue 
 modified:   main_dc/yalarba/easySite/easySite/app/pages/contact/index.vue 
 new file:   main_dc/yalarba/easySite/easySite/app/pages/requisites/index.vue
 add contacts page and link from footer to contact page

---
 .../easySite/app/components/layout/Footer.vue |    6 +-
 .../easySite/app/pages/contact/index.vue      | 1034 ++++++++---------
 .../easySite/app/pages/requisites/index.vue   |  645 ++++++++++
 3 files changed, 1158 insertions(+), 527 deletions(-)
 create mode 100644 main_dc/yalarba/easySite/easySite/app/pages/requisites/index.vue

diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
index e93aa99..cc7d081 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue
@@ -30,7 +30,7 @@
 
         <!-- Реквизиты -->
         <div class="footer-section">
-          <h3 class="footer-title">Реквизиты</h3>
+          <h3 class="footer-title"><NuxtLink href="/requisites">Реквизиты</NuxtLink></h3>
           <div class="footer-info">
             <div class="info-item">
               <span class="info-label">ОГРН:</span>
@@ -53,7 +53,7 @@
 
         <!-- Контакты -->
         <div class="footer-section">
-          <h3 class="footer-title"><a href="/contact">Контакты</a></h3>
+          <h3 class="footer-title"><NuxtLink href="/contact">Контакты</NuxtLink></h3>
           <div class="footer-info">
             <div class="info-item">
               <span class="info-icon">📞</span>
@@ -76,7 +76,7 @@
 
         <!-- Вакансии и навигация -->
         <div class="footer-section">
-          <h3 class="footer-title">Карьера</h3>
+          <h3 class="footer-title"><NuxtLink to="/vacations">Карьера</NuxtLink></h3>
           <div class="footer-links">
             <NuxtLink to="/vacations" class="footer-link">💼 Открытые вакансии</NuxtLink>
             <a href="#" class="footer-link">👥 Стать партнером</a>
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/contact/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/contact/index.vue
index 86f335a..0a1e04c 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/contact/index.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/contact/index.vue
@@ -1,224 +1,201 @@
 <template>
-  <div class="page-wrapper">
-    <!-- Хедер -->
-    <Header />
+    <div class="page-wrapper">
+        <!-- Хедер -->
+        <Header />
 
-    <!-- Основной контент -->
-    <main class="contacts-page">
-      <!-- Hero секция -->
-      <section class="contacts-hero">
-        <div class="container">
-          <div class="hero-content">
-            <h1 class="hero-title">Контакты</h1>
-            <p class="hero-subtitle">
-              Свяжитесь с нами любым удобным способом. Мы всегда рады помочь!
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Основной контент контактов -->
-      <section class="contacts-content">
-        <div class="container">
-          <div class="contacts-grid">
-            <!-- Контактная информация -->
-            <div class="contact-info">
-              <div class="contact-card">
-                <div class="contact-header">
-                  <h2 class="contact-title">Свяжитесь с нами</h2>
-                  <p class="contact-description">
-                    Мы готовы ответить на все ваши вопросы и помочь с выбором
-                  </p>
+        <!-- Основной контент -->
+        <main class="contacts-page">
+            <!-- Hero секция -->
+            <section class="contacts-hero">
+                <div class="container">
+                    <div class="hero-content">
+                        <h1 class="hero-title">Контакты</h1>
+                        <p class="hero-subtitle">
+                            Свяжитесь с нами любым удобным способом. Мы всегда рады помочь!
+                        </p>
+                    </div>
                 </div>
+            </section>
 
-                <div class="contact-methods">
-                  <!-- Телефон -->
-                  <div class="contact-method">
-                    <div class="method-icon">📞</div>
-                    <div class="method-content">
-                      <h3 class="method-title">Телефон</h3>
-                      <a href="tel:+79625439343" class="method-value">8 (962) 543-93-43</a>
-                      <p class="method-description">Ежедневно с 9:00 до 18:00</p>
-                    </div>
-                  </div>
+            <!-- Основной контент контактов -->
+            <section class="contacts-content">
+                <div class="container">
+                    <div class="contacts-grid">
+                        <!-- Контактная информация -->
+                        <div class="contact-info">
+                            <div class="contact-card">
+                                <div class="contact-header">
+                                    <h2 class="contact-title">Свяжитесь с нами</h2>
+                                    <p class="contact-description">
+                                        Мы готовы ответить на все ваши вопросы и помочь с выбором
+                                    </p>
+                                </div>
 
-                  <!-- Email -->
-                  <div class="contact-method">
-                    <div class="method-icon">✉️</div>
-                    <div class="method-content">
-                      <h3 class="method-title">Email</h3>
-                      <a href="mailto:valitovgaziz@yandex.ru" class="method-value">valitovgaziz@yandex.ru</a>
-                      <p class="method-description">Отвечаем в течение 24 часов</p>
-                    </div>
-                  </div>
+                                <div class="contact-methods">
+                                    <!-- Телефон -->
+                                    <div class="contact-method">
+                                        <div class="method-icon">📞</div>
+                                        <div class="method-content">
+                                            <h3 class="method-title">Телефон</h3>
+                                            <a href="tel:+79625439343" class="method-value">8 (962) 543-93-43</a>
+                                            <p class="method-description">Ежедневно с 9:00 до 18:00</p>
+                                        </div>
+                                    </div>
 
-                  <!-- Адрес -->
-                  <div class="contact-method">
-                    <div class="method-icon">📍</div>
-                    <div class="method-content">
-                      <h3 class="method-title">Адрес</h3>
-                      <span class="method-value">г. Уфа</span>
-                      <p class="method-description">Республика Башкортостан</p>
-                    </div>
-                  </div>
+                                    <!-- Email -->
+                                    <div class="contact-method">
+                                        <div class="method-icon">✉️</div>
+                                        <div class="method-content">
+                                            <h3 class="method-title">Email</h3>
+                                            <a href="mailto:valitovgaziz@yandex.ru"
+                                                class="method-value">valitovgaziz@yandex.ru</a>
+                                            <p class="method-description">Отвечаем в течение 24 часов</p>
+                                        </div>
+                                    </div>
 
-                  <!-- Социальные сети -->
-                  <div class="contact-method">
-                    <div class="method-icon">🌐</div>
-                    <div class="method-content">
-                      <h3 class="method-title">Социальные сети</h3>
-                      <div class="social-contacts">
-                        <a href="https://vk.com/club222248484" target="_blank" class="social-contact">
-                          <span class="social-icon">📘</span>
-                          <span>ВКонтакте</span>
-                        </a>
-                        <a href="https://t.me/+oYymS0r6qG9lYWJi" target="_blank" class="social-contact">
-                          <span class="social-icon">📧</span>
-                          <span>Telegram</span>
-                        </a>
-                        <a href="https://rutube.ru/channel/26509398/" target="_blank" class="social-contact">
-                          <span class="social-icon">📺</span>
-                          <span>RuTube</span>
-                        </a>
-                      </div>
+                                    <!-- Адрес -->
+                                    <div class="contact-method">
+                                        <div class="method-icon">📍</div>
+                                        <div class="method-content">
+                                            <h3 class="method-title">Адрес</h3>
+                                            <span class="method-value">г. Уфа</span>
+                                            <p class="method-description">Республика Башкортостан</p>
+                                        </div>
+                                    </div>
+
+                                    <!-- Социальные сети -->
+                                    <div class="contact-method">
+                                        <div class="method-icon">🌐</div>
+                                        <div class="method-content">
+                                            <h3 class="method-title">Социальные сети</h3>
+                                            <div class="social-contacts">
+                                                <a href="https://vk.com/club222248484" target="_blank"
+                                                    class="social-contact">
+                                                    <span class="social-icon">📘</span>
+                                                    <span>ВКонтакте</span>
+                                                </a>
+                                                <a href="https://t.me/+oYymS0r6qG9lYWJi" target="_blank"
+                                                    class="social-contact">
+                                                    <span class="social-icon">📧</span>
+                                                    <span>Telegram</span>
+                                                </a>
+                                                <a href="https://rutube.ru/channel/26509398/" target="_blank"
+                                                    class="social-contact">
+                                                    <span class="social-icon">📺</span>
+                                                    <span>RuTube</span>
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Форма обратной связи -->
+                        <div class="contact-form-section">
+                            <div class="contact-form-card">
+                                <h2 class="form-title">Напишите нам</h2>
+                                <p class="form-description">
+                                    Заполните форму ниже, и мы свяжемся с вами в ближайшее время
+                                </p>
+
+                                <form @submit.prevent="submitForm" class="contact-form">
+                                    <div class="form-group">
+                                        <label for="name" class="form-label">Имя *</label>
+                                        <input id="name" v-model="form.name" type="text" class="form-input"
+                                            placeholder="Введите ваше имя" required>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="email" class="form-label">Email *</label>
+                                        <input id="email" v-model="form.email" type="email" class="form-input"
+                                            placeholder="your@email.com" required>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="phone" class="form-label">Телефон</label>
+                                        <input id="phone" v-model="form.phone" type="tel" class="form-input"
+                                            placeholder="+7 (999) 999-99-99">
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="subject" class="form-label">Тема *</label>
+                                        <select id="subject" v-model="form.subject" class="form-select" required>
+                                            <option value="" disabled selected>Выберите тему</option>
+                                            <option value="general">Общий вопрос</option>
+                                            <option value="technical">Техническая поддержка</option>
+                                            <option value="partnership">Сотрудничество</option>
+                                            <option value="feedback">Отзыв и предложения</option>
+                                            <option value="other">Другое</option>
+                                        </select>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="message" class="form-label">Сообщение *</label>
+                                        <textarea id="message" v-model="form.message" class="form-input form-textarea"
+                                            placeholder="Опишите ваш вопрос или предложение..." rows="5"
+                                            required></textarea>
+                                    </div>
+
+                                    <button type="submit" class="btn btn-primary submit-button" :disabled="loading">
+                                        <span v-if="loading">Отправка...</span>
+                                        <span v-else>Отправить сообщение</span>
+                                    </button>
+                                </form>
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
+            </section>
 
-            <!-- Форма обратной связи -->
-            <div class="contact-form-section">
-              <div class="contact-form-card">
-                <h2 class="form-title">Напишите нам</h2>
-                <p class="form-description">
-                  Заполните форму ниже, и мы свяжемся с вами в ближайшее время
-                </p>
+            <!-- FAQ секция -->
+            <section class="faq-section">
+                <div class="container">
+                    <div class="faq-header">
+                        <h2 class="faq-title">Часто задаваемые вопросы</h2>
+                        <p class="faq-subtitle">Ответы на самые популярные вопросы</p>
+                    </div>
 
-                <form @submit.prevent="submitForm" class="contact-form">
-                  <div class="form-group">
-                    <label for="name" class="form-label">Имя *</label>
-                    <input
-                      id="name"
-                      v-model="form.name"
-                      type="text"
-                      class="form-input"
-                      placeholder="Введите ваше имя"
-                      required
-                    >
-                  </div>
+                    <div class="faq-grid">
+                        <div class="faq-item">
+                            <h3 class="faq-question">Как быстро вы отвечаете на сообщения?</h3>
+                            <p class="faq-answer">
+                                На письма по электронной почте мы отвечаем в течение 24 часов.
+                                По телефону доступны ежедневно с 9:00 до 18:00.
+                            </p>
+                        </div>
 
-                  <div class="form-group">
-                    <label for="email" class="form-label">Email *</label>
-                    <input
-                      id="email"
-                      v-model="form.email"
-                      type="email"
-                      class="form-input"
-                      placeholder="your@email.com"
-                      required
-                    >
-                  </div>
+                        <div class="faq-item">
+                            <h3 class="faq-question">Можно ли встретиться лично?</h3>
+                            <p class="faq-answer">
+                                Да, мы организуем личные встречи по предварительной договоренности.
+                                Свяжитесь с нами для согласования времени и места.
+                            </p>
+                        </div>
 
-                  <div class="form-group">
-                    <label for="phone" class="form-label">Телефон</label>
-                    <input
-                      id="phone"
-                      v-model="form.phone"
-                      type="tel"
-                      class="form-input"
-                      placeholder="+7 (999) 999-99-99"
-                    >
-                  </div>
+                        <div class="faq-item">
+                            <h3 class="faq-question">Предоставляете ли вы техническую поддержку?</h3>
+                            <p class="faq-answer">
+                                Да, наша команда технической поддержки готова помочь с любыми вопросами
+                                по работе платформы и созданию сайтов.
+                            </p>
+                        </div>
 
-                  <div class="form-group">
-                    <label for="subject" class="form-label">Тема *</label>
-                    <select
-                      id="subject"
-                      v-model="form.subject"
-                      class="form-select"
-                      required
-                    >
-                      <option value="" disabled selected>Выберите тему</option>
-                      <option value="general">Общий вопрос</option>
-                      <option value="technical">Техническая поддержка</option>
-                      <option value="partnership">Сотрудничество</option>
-                      <option value="feedback">Отзыв и предложения</option>
-                      <option value="other">Другое</option>
-                    </select>
-                  </div>
+                        <div class="faq-item">
+                            <h3 class="faq-question">Как стать партнером?</h3>
+                            <p class="faq-answer">
+                                Для обсуждения условий партнерства напишите нам на почту или
+                                заполните форму обратной связи, выбрав тему "Сотрудничество".
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
 
-                  <div class="form-group">
-                    <label for="message" class="form-label">Сообщение *</label>
-                    <textarea
-                      id="message"
-                      v-model="form.message"
-                      class="form-input form-textarea"
-                      placeholder="Опишите ваш вопрос или предложение..."
-                      rows="5"
-                      required
-                    ></textarea>
-                  </div>
-
-                  <button type="submit" class="btn btn-primary submit-button" :disabled="loading">
-                    <span v-if="loading">Отправка...</span>
-                    <span v-else>Отправить сообщение</span>
-                  </button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- FAQ секция -->
-      <section class="faq-section">
-        <div class="container">
-          <div class="faq-header">
-            <h2 class="faq-title">Часто задаваемые вопросы</h2>
-            <p class="faq-subtitle">Ответы на самые популярные вопросы</p>
-          </div>
-
-          <div class="faq-grid">
-            <div class="faq-item">
-              <h3 class="faq-question">Как быстро вы отвечаете на сообщения?</h3>
-              <p class="faq-answer">
-                На письма по электронной почте мы отвечаем в течение 24 часов. 
-                По телефону доступны ежедневно с 9:00 до 18:00.
-              </p>
-            </div>
-
-            <div class="faq-item">
-              <h3 class="faq-question">Можно ли встретиться лично?</h3>
-              <p class="faq-answer">
-                Да, мы организуем личные встречи по предварительной договоренности. 
-                Свяжитесь с нами для согласования времени и места.
-              </p>
-            </div>
-
-            <div class="faq-item">
-              <h3 class="faq-question">Предоставляете ли вы техническую поддержку?</h3>
-              <p class="faq-answer">
-                Да, наша команда технической поддержки готова помочь с любыми вопросами 
-                по работе платформы и созданию сайтов.
-              </p>
-            </div>
-
-            <div class="faq-item">
-              <h3 class="faq-question">Как стать партнером?</h3>
-              <p class="faq-answer">
-                Для обсуждения условий партнерства напишите нам на почту или 
-                заполните форму обратной связи, выбрав тему "Сотрудничество".
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-
-    <!-- Футер -->
-    <Footer />
-  </div>
+        <!-- Футер -->
+        <Footer />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -226,7 +203,13 @@ import Header from '~/components/layout/Header.vue'
 import Footer from '~/components/layout/Footer.vue'
 
 definePageMeta({
-  title: 'Контакты - EasySite'
+    title: 'Контакты - EasySite'
+})
+
+
+useSeoMeta({
+  title: 'Контакты Ял Арба',
+  description: 'Страница контактов ООО "ИКЦ Ял Арба"'
 })
 
 // Используем композабл для Telegram
@@ -234,34 +217,34 @@ const { sendMessageToTelegram } = useTelegram()
 
 // Состояние формы
 const form = ref({
-  name: '',
-  email: '',
-  phone: '',
-  subject: '',
-  message: ''
+    name: '',
+    email: '',
+    phone: '',
+    subject: '',
+    message: ''
 })
 
 const loading = ref(false)
 
 // Функция для получения текста темы
 const getSubjectText = (subject: string) => {
-  const subjects: { [key: string]: string } = {
-    general: '📋 Общий вопрос',
-    technical: '🔧 Техническая поддержка',
-    partnership: '🤝 Сотрудничество',
-    feedback: '💬 Отзыв и предложения',
-    other: '❓ Другое'
-  }
-  return subjects[subject] || '❓ Неизвестная тема'
+    const subjects: { [key: string]: string } = {
+        general: '📋 Общий вопрос',
+        technical: '🔧 Техническая поддержка',
+        partnership: '🤝 Сотрудничество',
+        feedback: '💬 Отзыв и предложения',
+        other: '❓ Другое'
+    }
+    return subjects[subject] || '❓ Неизвестная тема'
 }
 
 // Функция отправки формы
 const submitForm = async () => {
-  loading.value = true
-  
-  try {
-    // Формируем сообщение для Telegram
-    const telegramMessage = `
+    loading.value = true
+
+    try {
+        // Формируем сообщение для Telegram
+        const telegramMessage = `
 📨 <b>НОВОЕ СООБЩЕНИЕ С САЙТА</b>
 
 👤 <b>Имя:</b> ${form.value.name}
@@ -275,470 +258,473 @@ ${form.value.message}
 ⏰ <b>Время отправки:</b> ${new Date().toLocaleString('ru-RU')}
     `.trim()
 
-    // Отправляем сообщение в Telegram
-    const { success, error } = await sendMessageToTelegram(telegramMessage)
-    
-    if (success) {
-      // Сброс формы после успешной отправки
-      form.value = {
-        name: '',
-        email: '',
-        phone: '',
-        subject: '',
-        message: ''
-      }
-      
-      // Показываем уведомление об успехе
-      showNotification('Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.', 'success')
-    } else {
-      throw new Error(error || 'Неизвестная ошибка при отправке')
+        // Отправляем сообщение в Telegram
+        const { success, error } = await sendMessageToTelegram(telegramMessage)
+
+        if (success) {
+            // Сброс формы после успешной отправки
+            form.value = {
+                name: '',
+                email: '',
+                phone: '',
+                subject: '',
+                message: ''
+            }
+
+            // Показываем уведомление об успехе
+            showNotification('Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.', 'success')
+        } else {
+            throw new Error(error || 'Неизвестная ошибка при отправке')
+        }
+    } catch (error) {
+        console.error('Ошибка отправки формы:', error)
+        showNotification('Произошла ошибка при отправке формы. Пожалуйста, попробуйте еще раз.', 'error')
+    } finally {
+        loading.value = false
     }
-  } catch (error) {
-    console.error('Ошибка отправки формы:', error)
-    showNotification('Произошла ошибка при отправке формы. Пожалуйста, попробуйте еще раз.', 'error')
-  } finally {
-    loading.value = false
-  }
 }
 
 // Функция для показа уведомлений
 const showNotification = (message: string, type: 'success' | 'error' = 'success') => {
-  // Можно использовать любую систему уведомлений, здесь простой alert
-  if (type === 'success') {
-    alert(`✅ ${message}`)
-  } else {
-    alert(`❌ ${message}`)
-  }
-  
-  // В будущем можно заменить на toast-уведомления
-  // Например: useToast().add({ title: message, color: type === 'success' ? 'green' : 'red' })
+    // Можно использовать любую систему уведомлений, здесь простой alert
+    if (type === 'success') {
+        alert(`✅ ${message}`)
+    } else {
+        alert(`❌ ${message}`)
+    }
+
+    // В будущем можно заменить на toast-уведомления
+    // Например: useToast().add({ title: message, color: type === 'success' ? 'green' : 'red' })
 }
 </script>
 
 <style scoped>
 .page-wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 .contacts-page {
-  flex: 1;
+    flex: 1;
 }
 
-/* Hero секция */
+/* Hero секция - ИСПРАВЛЕННЫЕ ЦВЕТА */
 .contacts-hero {
-  background: var(--hero-gradient);
-  color: var(--text-inverse);
-  position: relative;
-  overflow: hidden;
-  padding: 4rem 0;
+    background: var(--hero-gradient);
+    color: white;
+    /* Фиксированный белый цвет текста */
+    position: relative;
+    overflow: hidden;
+    padding: 4rem 0;
 }
 
 .contacts-hero::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--hero-pattern);
-  opacity: 0.1;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--hero-pattern);
+    opacity: 0.1;
 }
 
 .hero-content {
-  position: relative;
-  z-index: 10;
-  text-align: center;
-  max-width: 600px;
-  margin: 0 auto;
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
 }
 
 .hero-title {
-  font-family: var(--font-heading);
-  font-size: var(--text-4xl);
-  font-weight: var(--font-bold);
-  line-height: var(--leading-tight);
-  margin-bottom: var(--space-lg);
-  color: var(--text-inverse);
+    font-family: var(--font-heading);
+    font-size: var(--text-4xl);
+    font-weight: var(--font-bold);
+    line-height: var(--leading-tight);
+    margin-bottom: var(--space-lg);
+    color: white;
+    /* Фиксированный белый цвет */
 }
 
 .hero-subtitle {
-  font-family: var(--font-accent);
-  font-size: var(--text-xl);
-  font-weight: var(--font-light);
-  line-height: var(--leading-relaxed);
-  opacity: 0.9;
-  color: var(--text-inverse);
+    font-family: var(--font-accent);
+    font-size: var(--text-xl);
+    font-weight: var(--font-light);
+    line-height: var(--leading-relaxed);
+    opacity: 0.9;
+    color: white;
+    /* Фиксированный белый цвет */
 }
 
 /* Основной контент */
 .contacts-content {
-  padding: var(--space-2xl) 0;
+    padding: var(--space-2xl) 0;
 }
 
 .contacts-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-2xl);
-  align-items: start;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
+    align-items: start;
 }
 
 /* Карточка контактной информации */
 .contact-card {
-  background: var(--bg-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-md);
-  border: 1px solid var(--border-light);
-  padding: var(--space-2xl);
-  height: fit-content;
+    background: var(--bg-primary);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-light);
+    padding: var(--space-2xl);
+    height: fit-content;
 }
 
 .contact-header {
-  margin-bottom: var(--space-2xl);
-  text-align: center;
+    margin-bottom: var(--space-2xl);
+    text-align: center;
 }
 
 .contact-title {
-  font-family: var(--font-heading);
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  margin-bottom: var(--space-sm);
+    font-family: var(--font-heading);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin-bottom: var(--space-sm);
 }
 
 .contact-description {
-  color: var(--text-secondary);
-  line-height: var(--leading-relaxed);
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
 }
 
 /* Методы связи */
 .contact-methods {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xl);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl);
 }
 
 .contact-method {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-lg);
-  padding: var(--space-lg);
-  border-radius: var(--radius-lg);
-  transition: all 0.3s ease;
-  border: 1px solid transparent;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
 }
 
 .contact-method:hover {
-  background: var(--bg-secondary);
-  border-color: var(--border-light);
-  transform: translateY(-2px);
+    background: var(--bg-secondary);
+    border-color: var(--border-light);
+    transform: translateY(-2px);
 }
 
 .method-icon {
-  font-size: 2rem;
-  width: 3rem;
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--primary-50);
-  border-radius: var(--radius-lg);
-  flex-shrink: 0;
+    font-size: 2rem;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--primary-50);
+    border-radius: var(--radius-lg);
+    flex-shrink: 0;
 }
 
 .method-content {
-  flex: 1;
+    flex: 1;
 }
 
 .method-title {
-  font-family: var(--font-primary);
-  font-size: var(--text-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  margin-bottom: var(--space-xs);
+    font-family: var(--font-primary);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin-bottom: var(--space-xs);
 }
 
 .method-value {
-  font-family: var(--font-primary);
-  font-size: var(--text-base);
-  font-weight: var(--font-medium);
-  color: var(--primary-600);
-  text-decoration: none;
-  display: block;
-  margin-bottom: var(--space-xs);
-  transition: color 0.2s ease;
+    font-family: var(--font-primary);
+    font-size: var(--text-base);
+    font-weight: var(--font-medium);
+    color: var(--primary-600);
+    text-decoration: none;
+    display: block;
+    margin-bottom: var(--space-xs);
+    transition: color 0.2s ease;
 }
 
 .method-value:hover {
-  color: var(--primary-700);
-  text-decoration: underline;
+    color: var(--primary-700);
+    text-decoration: underline;
 }
 
 .method-description {
-  font-size: var(--text-sm);
-  color: var(--text-tertiary);
-  line-height: var(--leading-relaxed);
+    font-size: var(--text-sm);
+    color: var(--text-tertiary);
+    line-height: var(--leading-relaxed);
 }
 
 /* Социальные контакты */
 .social-contacts {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
 }
 
 .social-contact {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  color: var(--text-secondary);
-  text-decoration: none;
-  padding: var(--space-sm);
-  border-radius: var(--radius-md);
-  transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--text-secondary);
+    text-decoration: none;
+    padding: var(--space-sm);
+    border-radius: var(--radius-md);
+    transition: all 0.2s ease;
 }
 
 .social-contact:hover {
-  background: var(--bg-secondary);
-  color: var(--primary-600);
-  transform: translateX(4px);
+    background: var(--bg-secondary);
+    color: var(--primary-600);
+    transform: translateX(4px);
 }
 
 .social-icon {
-  font-size: 1.25rem;
-  width: 1.5rem;
-  text-align: center;
+    font-size: 1.25rem;
+    width: 1.5rem;
+    text-align: center;
 }
 
 /* Форма обратной связи */
 .contact-form-card {
-  background: var(--bg-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-md);
-  border: 1px solid var(--border-light);
-  padding: var(--space-2xl);
-  height: fit-content;
+    background: var(--bg-primary);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-light);
+    padding: var(--space-2xl);
+    height: fit-content;
 }
 
 .form-title {
-  font-family: var(--font-heading);
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  margin-bottom: var(--space-sm);
-  text-align: center;
+    font-family: var(--font-heading);
+    font-size: var(--text-2xl);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin-bottom: var(--space-sm);
+    text-align: center;
 }
 
 .form-description {
-  color: var(--text-secondary);
-  text-align: center;
-  margin-bottom: var(--space-2xl);
-  line-height: var(--leading-relaxed);
+    color: var(--text-secondary);
+    text-align: center;
+    margin-bottom: var(--space-2xl);
+    line-height: var(--leading-relaxed);
 }
 
 .contact-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
 }
 
 .form-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
 }
 
 .form-label {
-  font-weight: var(--font-medium);
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
 }
 
 .form-input,
 .form-select {
-  padding: var(--space-sm) var(--space-md);
-  border: 1px solid var(--border-medium);
-  border-radius: var(--radius-md);
-  font-size: var(--text-base);
-  transition: all 0.2s ease;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-family: var(--font-primary);
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--border-medium);
+    border-radius: var(--radius-md);
+    font-size: var(--text-base);
+    transition: all 0.2s ease;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: var(--font-primary);
 }
 
 .form-input:focus,
 .form-select:focus {
-  outline: none;
-  border-color: var(--primary-500);
-  box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
 }
 
 .form-textarea {
-  resize: vertical;
-  min-height: 120px;
-  font-family: var(--font-primary);
+    resize: vertical;
+    min-height: 120px;
+    font-family: var(--font-primary);
 }
 
 .submit-button {
-  padding: var(--space-md) var(--space-xl);
-  font-size: var(--text-base);
-  font-weight: var(--font-semibold);
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  margin-top: var(--space-md);
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--text-base);
+    font-weight: var(--font-semibold);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: var(--space-md);
 }
 
 .submit-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
 }
 
 .submit-button:not(:disabled):hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
 }
 
 /* FAQ секция */
 .faq-section {
-  background: var(--bg-secondary);
-  padding: var(--space-2xl) 0;
-  border-top: 1px solid var(--border-light);
+    background: var(--bg-secondary);
+    padding: var(--space-2xl) 0;
+    border-top: 1px solid var(--border-light);
 }
 
 .faq-header {
-  text-align: center;
-  margin-bottom: var(--space-2xl);
+    text-align: center;
+    margin-bottom: var(--space-2xl);
 }
 
 .faq-title {
-  font-family: var(--font-heading);
-  font-size: var(--text-3xl);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  margin-bottom: var(--space-sm);
+    font-family: var(--font-heading);
+    font-size: var(--text-3xl);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin-bottom: var(--space-sm);
 }
 
 .faq-subtitle {
-  color: var(--text-secondary);
-  font-size: var(--text-lg);
+    color: var(--text-secondary);
+    font-size: var(--text-lg);
 }
 
 .faq-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-xl);
-  max-width: 1000px;
-  margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl);
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
 .faq-item {
-  background: var(--bg-primary);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  border: 1px solid var(--border-light);
-  transition: all 0.3s ease;
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
 }
 
 .faq-item:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
 }
 
 .faq-question {
-  font-family: var(--font-primary);
-  font-size: var(--text-lg);
-  font-weight: var(--font-semibold);
-  color: var(--text-primary);
-  margin-bottom: var(--space-md);
-  line-height: var(--leading-tight);
+    font-family: var(--font-primary);
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+    margin-bottom: var(--space-md);
+    line-height: var(--leading-tight);
 }
 
 .faq-answer {
-  color: var(--text-secondary);
-  line-height: var(--leading-relaxed);
+    color: var(--text-secondary);
+    line-height: var(--leading-relaxed);
 }
 
 /* Адаптивность */
 @media (max-width: 1024px) {
-  .contacts-grid {
-    gap: var(--space-xl);
-  }
-  
-  .faq-grid {
-    grid-template-columns: 1fr;
-    gap: var(--space-lg);
-  }
+    .contacts-grid {
+        gap: var(--space-xl);
+    }
+
+    .faq-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
 }
 
 @media (max-width: 768px) {
-  .contacts-grid {
-    grid-template-columns: 1fr;
-    gap: var(--space-xl);
-  }
-  
-  .contacts-hero {
-    padding: 3rem 0;
-  }
-  
-  .hero-title {
-    font-size: var(--text-3xl);
-  }
-  
-  .hero-subtitle {
-    font-size: var(--text-lg);
-  }
-  
-  .contact-card,
-  .contact-form-card {
-    padding: var(--space-xl);
-  }
-  
-  .contact-method {
-    padding: var(--space-md);
-    gap: var(--space-md);
-  }
-  
-  .method-icon {
-    font-size: 1.5rem;
-    width: 2.5rem;
-    height: 2.5rem;
-  }
+    .contacts-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+
+    .contacts-hero {
+        padding: 3rem 0;
+    }
+
+    .hero-title {
+        font-size: var(--text-3xl);
+    }
+
+    .hero-subtitle {
+        font-size: var(--text-lg);
+    }
+
+    .contact-card,
+    .contact-form-card {
+        padding: var(--space-xl);
+    }
+
+    .contact-method {
+        padding: var(--space-md);
+        gap: var(--space-md);
+    }
+
+    .method-icon {
+        font-size: 1.5rem;
+        width: 2.5rem;
+        height: 2.5rem;
+    }
 }
 
 @media (max-width: 480px) {
-  .contacts-content {
-    padding: var(--space-xl) 0;
-  }
-  
-  .contacts-hero {
-    padding: 2rem 0;
-  }
-  
-  .hero-title {
-    font-size: var(--text-2xl);
-  }
-  
-  .contact-card,
-  .contact-form-card {
-    padding: var(--space-lg);
-  }
-  
-  .faq-item {
-    padding: var(--space-lg);
-  }
-  
-  .contact-method {
-    flex-direction: column;
-    text-align: center;
-    gap: var(--space-sm);
-  }
-  
-  .method-icon {
-    align-self: center;
-  }
+    .contacts-content {
+        padding: var(--space-xl) 0;
+    }
+
+    .contacts-hero {
+        padding: 2rem 0;
+    }
+
+    .hero-title {
+        font-size: var(--text-2xl);
+    }
+
+    .contact-card,
+    .contact-form-card {
+        padding: var(--space-lg);
+    }
+
+    .faq-item {
+        padding: var(--space-lg);
+    }
+
+    .contact-method {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-sm);
+    }
+
+    .method-icon {
+        align-self: center;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/requisites/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/requisites/index.vue
new file mode 100644
index 0000000..f504371
--- /dev/null
+++ b/main_dc/yalarba/easySite/easySite/app/pages/requisites/index.vue
@@ -0,0 +1,645 @@
+<template>
+  <div class="page-wrapper">
+    <!-- Хедер -->
+    <Header />
+
+    <!-- Основной контент -->
+    <main class="requisites-page">
+      <!-- Hero секция -->
+      <section class="requisites-hero">
+        <div class="container">
+          <div class="hero-content">
+            <h1 class="hero-title">Реквизиты компании</h1>
+            <p class="hero-subtitle">
+              ООО "ИКЦ ЯЛ АРБА" - официальные банковские и юридические реквизиты
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Основной контент -->
+      <section class="requisites-content">
+        <div class="container">
+          <div class="requisites-grid">
+            <!-- Основные реквизиты -->
+            <div class="requisites-section">
+              <div class="requisites-card">
+                <div class="requisites-header">
+                  <h2 class="requisites-title">Юридическая информация</h2>
+                  <div class="company-badge">
+                    <span class="badge badge-primary">ООО</span>
+                  </div>
+                </div>
+
+                <div class="requisites-list">
+                  <div class="requisites-item">
+                    <div class="requisites-label">Полное наименование:</div>
+                    <div class="requisites-value">
+                      ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "ИНФОРМАЦИОННО КОНСУЛЬТАЦИОННЫЙ ЦЕНТР ЯЛ АРБА"
+                    </div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Сокращенное наименование:</div>
+                    <div class="requisites-value">ООО "ИКЦ ЯЛ АРБА"</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Юридический адрес:</div>
+                    <div class="requisites-value">Не указан</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">ИНН:</div>
+                    <div class="requisites-value code-value">0234009584</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">КПП:</div>
+                    <div class="requisites-value code-value">023401001</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">ОГРН:</div>
+                    <div class="requisites-value code-value">1220200038112</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Банковские реквизиты -->
+            <div class="requisites-section">
+              <div class="requisites-card">
+                <div class="requisites-header">
+                  <h2 class="requisites-title">Банковские реквизиты</h2>
+                  <div class="bank-logo">
+                    <span class="bank-icon">🏦</span>
+                  </div>
+                </div>
+
+                <div class="requisites-list">
+                  <div class="requisites-item">
+                    <div class="requisites-label">Расчётный счёт:</div>
+                    <div class="requisites-value code-value">40702810106000055253</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Наименование банка:</div>
+                    <div class="requisites-value">ПАО Сбербанк</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">БИК банка:</div>
+                    <div class="requisites-value code-value">048073601</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Корреспондентский счёт:</div>
+                    <div class="requisites-value code-value">30101810300000000601</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">ИНН банка:</div>
+                    <div class="requisites-value code-value">7707083893</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">КПП банка:</div>
+                    <div class="requisites-value code-value">027802001</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Контактная информация -->
+            <div class="requisites-section">
+              <div class="requisites-card">
+                <div class="requisites-header">
+                  <h2 class="requisites-title">Контактная информация</h2>
+                  <div class="contact-icon">📱</div>
+                </div>
+
+                <div class="requisites-list">
+                  <div class="requisites-item">
+                    <div class="requisites-label">Электронная почта:</div>
+                    <a href="mailto:yalarba@mail.ru" class="requisites-value link-value">
+                      yalarba@mail.ru
+                    </a>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Телефон генерального директора:</div>
+                    <a href="tel:+79625439343" class="requisites-value link-value">
+                      +7 962 543-93-43
+                    </a>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Генеральный директор:</div>
+                    <div class="requisites-value">Валитов Газиз Камилевич</div>
+                  </div>
+
+                  <div class="requisites-item">
+                    <div class="requisites-label">Главный бухгалтер:</div>
+                    <div class="requisites-value">Валитов Газиз Камилевич</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Дополнительная информация -->
+            <div class="requisites-section full-width">
+              <div class="requisites-card">
+                <div class="requisites-header">
+                  <h2 class="requisites-title">Дополнительная информация</h2>
+                </div>
+
+                <div class="additional-info">
+                  <div class="info-grid">
+                    <div class="info-item">
+                      <div class="info-icon">📋</div>
+                      <div class="info-content">
+                        <h3 class="info-title">Юридический статус</h3>
+                        <p class="info-description">
+                          Общество с ограниченной ответственностью, зарегистрированное в соответствии с законодательством РФ
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="info-item">
+                      <div class="info-icon">💼</div>
+                      <div class="info-content">
+                        <h3 class="info-title">Сфера деятельности</h3>
+                        <p class="info-description">
+                          Информационно-консультационные услуги, разработка программного обеспечения, веб-разработка
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="info-item">
+                      <div class="info-icon">🕒</div>
+                      <div class="info-content">
+                        <h3 class="info-title">Режим работы</h3>
+                        <p class="info-description">
+                          Пн-Пт: 9:00-18:00<br>
+                          Сб-Вс: выходные
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="info-item">
+                      <div class="info-icon">📞</div>
+                      <div class="info-content">
+                        <h3 class="info-title">Поддержка</h3>
+                        <p class="info-description">
+                          По всем вопросам обращайтесь по указанным контактам или через форму обратной связи на сайте
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Кнопки действий -->
+          <div class="action-buttons">
+            <button @click="printRequisites" class="btn btn-outline print-button">
+              <span class="button-icon">🖨️</span>
+              Распечатать реквизиты
+            </button>
+            <button @click="copyAllRequisites" class="btn btn-primary copy-button">
+              <span class="button-icon">📋</span>
+              Скопировать все реквизиты
+            </button>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- Футер -->
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from '~/components/layout/Header.vue'
+import Footer from '~/components/layout/Footer.vue'
+
+definePageMeta({
+  title: 'Реквизиты - ООО "ИКЦ ЯЛ АРБА"'
+})
+
+
+useSeoMeta({
+  title: 'Реквизиты Ял Арба',
+  description: 'Страница реквизитов ООО "ИКЦ Ял Арба"'
+})
+
+// Функция для печати реквизитов
+const printRequisites = () => {
+  window.print()
+}
+
+// Функция для копирования всех реквизитов
+const copyAllRequisites = async () => {
+  const requisitesText = `
+ООО "ИКЦ ЯЛ АРБА"
+Юридические реквизиты:
+
+Полное наименование: ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "ИНФОРМАЦИОННО КОНСУЛЬТАЦИОННЫЙ ЦЕНТР ЯЛ АРБА"
+Сокращенное наименование: ООО "ИКЦ ЯЛ АРБА"
+Юридический адрес: Не указан
+ИНН: 0234009584
+КПП: 023401001
+ОГРН: 1220200038112
+
+Банковские реквизиты:
+Расчётный счёт: 40702810106000055253
+Банк: ПАО Сбербанк
+БИК: 048073601
+Корреспондентский счёт: 30101810300000000601
+ИНН банка: 7707083893
+КПП банка: 027802001
+
+Контактная информация:
+Email: yalarba@mail.ru
+Телефон: +7 962 543-93-43
+Генеральный директор: Валитов Газиз Камилевич
+Главный бухгалтер: Валитов Газиз Камилевич
+  `.trim()
+
+  try {
+    await navigator.clipboard.writeText(requisitesText)
+    alert('✅ Все реквизиты скопированы в буфер обмена!')
+  } catch (err) {
+    console.error('Ошибка копирования:', err)
+    alert('❌ Не удалось скопировать реквизиты')
+  }
+}
+</script>
+
+<style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.requisites-page {
+  flex: 1;
+}
+
+/* Hero секция */
+.requisites-hero {
+  background: var(--hero-gradient);
+  color: white;
+  position: relative;
+  overflow: hidden;
+  padding: 4rem 0;
+}
+
+.requisites-hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--hero-pattern);
+  opacity: 0.1;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  margin-bottom: var(--space-lg);
+  color: white;
+}
+
+.hero-subtitle {
+  font-family: var(--font-accent);
+  font-size: var(--text-xl);
+  font-weight: var(--font-light);
+  line-height: var(--leading-relaxed);
+  opacity: 0.9;
+  color: white;
+}
+
+/* Основной контент */
+.requisites-content {
+  padding: var(--space-2xl) 0;
+}
+
+.requisites-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
+  margin-bottom: var(--space-2xl);
+}
+
+.requisites-section.full-width {
+  grid-column: 1 / -1;
+}
+
+/* Карточки реквизитов */
+.requisites-card {
+  background: var(--bg-primary);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--border-light);
+  padding: var(--space-2xl);
+  height: fit-content;
+  transition: all 0.3s ease;
+}
+
+.requisites-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.requisites-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--space-xl);
+  padding-bottom: var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.requisites-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.company-badge .badge {
+  font-size: var(--text-xs);
+  padding: 0.25rem 0.5rem;
+}
+
+.bank-logo,
+.contact-icon {
+  font-size: 1.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary-50);
+  border-radius: var(--radius-lg);
+}
+
+/* Список реквизитов */
+.requisites-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.requisites-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.requisites-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+  line-height: var(--leading-tight);
+}
+
+.requisites-value {
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  color: var(--text-primary);
+  line-height: var(--leading-relaxed);
+  word-break: break-word;
+}
+
+.requisites-value.code-value {
+  font-family: var(--font-accent);
+  font-weight: var(--font-semibold);
+  color: var(--primary-600);
+  background: var(--primary-50);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--primary-100);
+}
+
+.requisites-value.link-value {
+  color: var(--primary-600);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  font-weight: var(--font-medium);
+}
+
+.requisites-value.link-value:hover {
+  color: var(--primary-700);
+  text-decoration: underline;
+}
+
+/* Дополнительная информация */
+.additional-info {
+  margin-top: var(--space-lg);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-xl);
+}
+
+.info-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  transition: all 0.3s ease;
+}
+
+.info-item:hover {
+  background: var(--bg-tertiary);
+  transform: translateY(-2px);
+}
+
+.info-icon {
+  font-size: 1.5rem;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--primary-100);
+  border-radius: var(--radius-lg);
+  flex-shrink: 0;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-title {
+  font-family: var(--font-primary);
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-xs);
+}
+
+.info-description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin: 0;
+}
+
+/* Кнопки действий */
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-lg);
+  margin-top: var(--space-2xl);
+  padding-top: var(--space-2xl);
+  border-top: 1px solid var(--border-light);
+}
+
+.print-button,
+.copy-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-xl);
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.button-icon {
+  font-size: 1.25rem;
+}
+
+/* Адаптивность */
+@media (max-width: 1024px) {
+  .requisites-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-xl);
+  }
+  
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .requisites-hero {
+    padding: 3rem 0;
+  }
+  
+  .hero-title {
+    font-size: var(--text-3xl);
+  }
+  
+  .hero-subtitle {
+    font-size: var(--text-lg);
+  }
+  
+  .requisites-card {
+    padding: var(--space-xl);
+  }
+  
+  .requisites-header {
+    flex-direction: column;
+    gap: var(--space-md);
+    align-items: flex-start;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .print-button,
+  .copy-button {
+    width: 100%;
+    max-width: 300px;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .requisites-content {
+    padding: var(--space-xl) 0;
+  }
+  
+  .requisites-hero {
+    padding: 2rem 0;
+  }
+  
+  .hero-title {
+    font-size: var(--text-2xl);
+  }
+  
+  .requisites-card {
+    padding: var(--space-lg);
+  }
+  
+  .info-item {
+    flex-direction: column;
+    text-align: center;
+    gap: var(--space-sm);
+  }
+  
+  .info-icon {
+    align-self: center;
+  }
+}
+
+/* Стили для печати */
+@media print {
+  .header,
+  .footer,
+  .action-buttons {
+    display: none !important;
+  }
+  
+  .requisites-hero {
+    background: white !important;
+    color: black !important;
+    padding: 1rem 0 !important;
+  }
+  
+  .hero-title,
+  .hero-subtitle {
+    color: black !important;
+  }
+  
+  .requisites-card {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+    break-inside: avoid;
+  }
+  
+  .requisites-content {
+    padding: 0 !important;
+  }
+}
+</style>
\ No newline at end of file