modified: main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue

modified:   main_dc/yalarba/easySite/easySite/app/pages/support/index.vue
add support page and set Footer link to support page

main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue

@@ -91,8 +91,8 @@
           <div class="footer-links">
             <NuxtLink to="/objects" class="footer-link">🔍 Все объекты</NuxtLink>
             <NuxtLink to="/objects/create" class="footer-link">➕ Добавить объект</NuxtLink>
-            <a href="#" class="footer-link">❓ Помощь</a>
+            <NuxtLink href="/support" class="footer-link">❓ Помощь</NuxtLink>
-            <a href="/rules" class="footer-link">📋 Тарифные планы</a>
+            <NuxtLink href="/rules" class="footer-link">📋 Тарифные планы</NuxtLink>
           </div>
         </div>
 

main_dc/yalarba/easySite/easySite/app/pages/support/index.vue

@@ -1,6 +1,704 @@
 <template>
-  <div>
+  <div class="page-wrapper">
-    <h1>Страница</h1>
+    <Header />
-    <p>Содержимое страницы</p>
+
+    <main class="help-page">
+      <div class="container">
+        <!-- Заголовок страницы -->
+        <div class="page-header">
+          <h1 class="page-title">Помощь и поддержка</h1>
+          <p class="page-subtitle">
+            Мы всегда готовы помочь вам! Выберите удобный способ связи или найдите ответ в часто задаваемых вопросах.
+          </p>
+        </div>
+
+        <div class="help-content">
+          <!-- Контактная форма -->
+          <div class="contact-section">
+            <div class="card">
+              <div class="card-header">
+                <h2 class="card-title">Написать в поддержку</h2>
+                <p class="card-description">
+                  Отправьте нам сообщение через Telegram, и мы ответим в ближайшее время
+                </p>
+              </div>
+              
+              <div class="card-body">
+                <form @submit.prevent="sendMessage" 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="category" class="form-label">Тема обращения</label>
+                    <select
+                      id="category"
+                      v-model="form.category"
+                      class="form-select"
+                      required
+                    >
+                      <option value="" disabled>Выберите тему</option>
+                      <option value="technical">Техническая проблема</option>
+                      <option value="account">Вопросы аккаунта</option>
+                      <option value="payment">Оплата и тарифы</option>
+                      <option value="feature">Предложение по улучшению</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"
+                      rows="6"
+                      placeholder="Опишите вашу проблему или вопрос подробно..."
+                      required
+                    ></textarea>
+                  </div>
+
+                  <div class="form-actions">
+                    <button
+                      type="submit"
+                      class="btn btn-primary btn-large"
+                      :disabled="loading"
+                    >
+                      <span v-if="loading" class="btn-loading">
+                        <span class="btn-spinner"></span>
+                        Отправка...
+                      </span>
+                      <span v-else class="btn-with-icon">
+                        <span class="btn-icon">📤</span>
+                        Отправить через Telegram
+                      </span>
+                    </button>
+
+                    <!-- Быстрая отправка через промпт -->
+                    <button
+                      type="button"
+                      class="btn btn-outline"
+                      @click="sendQuickMessage"
+                      :disabled="loading"
+                    >
+                      <span class="btn-with-icon">
+                        <span class="btn-icon">⚡</span>
+                        Быстрое сообщение
+                      </span>
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+
+          <!-- Альтернативные способы связи -->
+          <div class="contact-methods">
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Другие способы связи</h3>
+              </div>
+              
+              <div class="card-body">
+                <div class="contact-cards">
+                  <div class="contact-card">
+                    <div class="contact-card__icon">📞</div>
+                    <div class="contact-card__content">
+                      <h4 class="contact-card__title">Телефон</h4>
+                      <p class="contact-card__description">
+                        Позвоните нам для срочной помощи
+                      </p>
+                      <a href="tel:+79625439343" class="contact-card__link">
+                        +7 (962) 543-93-43
+                      </a>
+                    </div>
+                  </div>
+
+                  <div class="contact-card">
+                    <div class="contact-card__icon">✉️</div>
+                    <div class="contact-card__content">
+                      <h4 class="contact-card__title">Email</h4>
+                      <p class="contact-card__description">
+                        Напишите на почту для детального ответа
+                      </p>
+                      <a href="mailto:valitovgaziz@yandex.ru" class="contact-card__link">
+                        valitovgaziz@yandex.ru
+                      </a>
+                    </div>
+                  </div>
+
+                  <div class="contact-card">
+                    <div class="contact-card__icon">💬</div>
+                    <div class="contact-card__content">
+                      <h4 class="contact-card__title">Telegram чат</h4>
+                      <p class="contact-card__description">
+                        Написать напрямую в Telegram
+                      </p>
+                      <a 
+                        href="https://t.me/+oYymS0r6qG9lYWJi" 
+                        target="_blank" 
+                        class="contact-card__link"
+                      >
+                        Перейти в чат
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- FAQ секция -->
+          <div class="faq-section">
+            <div class="card">
+              <div class="card-header">
+                <h2 class="card-title">Часто задаваемые вопросы</h2>
+              </div>
+              
+              <div class="card-body">
+                <div class="faq-list">
+                  <div 
+                    v-for="(faq, index) in faqs" 
+                    :key="index" 
+                    class="faq-item"
+                    :class="{ 'faq-item--active': activeFaq === index }"
+                  >
+                    <button 
+                      class="faq-question"
+                      @click="toggleFaq(index)"
+                    >
+                      <span class="faq-question__text">{{ faq.question }}</span>
+                      <span class="faq-question__icon">
+                        {{ activeFaq === index ? '−' : '+' }}
+                      </span>
+                    </button>
+                    
+                    <div class="faq-answer">
+                      <p>{{ faq.answer }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <Footer />
   </div>
 </template>
+
+<script setup lang="ts">
+import Header from '~/components/layout/Header.vue'
+import Footer from '~/components/layout/Footer.vue'
+
+// Используем существующий композибл
+const { sendMessageToTelegram, sendMessageWithPrompt } = useTelegram()
+
+// Состояние формы
+const form = reactive({
+  name: '',
+  email: '',
+  category: '',
+  message: ''
+})
+
+const loading = ref(false)
+const activeFaq = ref<number | null>(null)
+
+// FAQ данные
+const faqs = [
+  {
+    question: 'Как создать сайт на вашей платформе?',
+    answer: 'Зарегистрируйтесь на платформе, добавьте информацию о своих услугах в личном кабинете, и система автоматически создаст для вас готовый сайт.'
+  },
+  {
+    question: 'Сколько стоит использование платформы?',
+    answer: 'У нас есть несколько тарифных планов, включая бесплатный вариант. Подробности можно посмотреть в разделе "Тарифы".'
+  },
+  {
+    question: 'Можно ли изменить дизайн сайта?',
+    answer: 'Да, в личном кабинете доступны различные настройки внешнего вида вашего сайта, включая цвета, шрифты и расположение блоков.'
+  },
+  {
+    question: 'Как добавить новые услуги?',
+    answer: 'В разделе "Мои объекты" вы можете добавлять, редактировать и удалять услуги. Все изменения сразу отображаются на вашем сайте.'
+  },
+  {
+    question: 'Техническая поддержка работает круглосуточно?',
+    answer: 'Мы отвечаем на обращения в рабочее время (Пн-Пт 9:00-18:00), но срочные технические проблемы решаем оперативно в любое время.'
+  }
+]
+
+// Методы
+const toggleFaq = (index: number) => {
+  activeFaq.value = activeFaq.value === index ? null : index
+}
+
+const sendMessage = async () => {
+  if (loading.value) return
+
+  loading.value = true
+
+  try {
+    // Формируем сообщение для Telegram
+    const telegramMessage = `
+🆘 Новое обращение в поддержку
+
+👤 Имя: ${form.name}
+📧 Email: ${form.email}
+🏷️ Тема: ${getCategoryLabel(form.category)}
+📝 Сообщение:
+${form.message}
+    `.trim()
+
+    // Отправляем сообщение через существующий композибл
+    const result = await sendMessageToTelegram(telegramMessage)
+
+    if (result.success) {
+      // Очищаем форму после успешной отправки
+      form.name = ''
+      form.email = ''
+      form.category = ''
+      form.message = ''
+      
+      // Показываем уведомление об успехе
+      alert('Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.')
+    } else {
+      throw new Error(result.error || 'Ошибка отправки')
+    }
+  } catch (error) {
+    console.error('Ошибка отправки сообщения:', error)
+    alert('Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте еще раз или используйте другой способ связи.')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Быстрая отправка через промпт (используем существующий метод)
+const sendQuickMessage = () => {
+  sendMessageWithPrompt()
+}
+
+const getCategoryLabel = (category: string) => {
+  const categories: { [key: string]: string } = {
+    technical: 'Техническая проблема',
+    account: 'Вопросы аккаунта',
+    payment: 'Оплата и тарифы',
+    feature: 'Предложение по улучшению',
+    other: 'Другое'
+  }
+  return categories[category] || category
+}
+
+// Устанавливаем мета-информацию для страницы
+definePageMeta({
+  title: 'Помощь и поддержка'
+})
+
+useSeoMeta({
+  title: 'Помощь и поддержка - EasySite',
+  description: 'Получите помощь по использованию платформы EasySite. Техническая поддержка, часто задаваемые вопросы и контакты.'
+})
+</script>
+
+<style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.help-page {
+  flex: 1;
+  padding: 2rem 0;
+  background: var(--bg-secondary);
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.page-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+}
+
+.page-subtitle {
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: var(--leading-relaxed);
+}
+
+.help-content {
+  display: grid;
+  gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.contact-section,
+.faq-section {
+  grid-column: 1 / -1;
+}
+
+.contact-methods {
+  grid-column: 1 / -1;
+}
+
+.card {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-light);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  padding: var(--space-xl);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.card-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.card-description {
+  color: var(--text-secondary);
+  font-size: var(--text-base);
+  line-height: var(--leading-relaxed);
+}
+
+.card-body {
+  padding: var(--space-xl);
+}
+
+/* Стили формы */
+.contact-form {
+  max-width: 600px;
+}
+
+.form-actions {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  padding: 1rem 2rem;
+  border: none;
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-medium);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+}
+
+.btn-large {
+  padding: 1.25rem 2.5rem;
+  font-size: 1.125rem;
+}
+
+.btn-primary {
+  background: var(--primary-500);
+  color: var(--text-inverse);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-600);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 2px solid var(--border-medium);
+  color: var(--text-secondary);
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  border-color: var(--primary-500);
+  color: var(--primary-500);
+  transform: translateY(-2px);
+}
+
+.btn-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+}
+
+/* Стили контактных карточек */
+.contact-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.contact-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  transition: all 0.3s ease;
+}
+
+.contact-card:hover {
+  border-color: var(--primary-300);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.contact-card__icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+}
+
+.contact-card__content {
+  flex: 1;
+}
+
+.contact-card__title {
+  font-family: var(--font-primary);
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.contact-card__description {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin-bottom: 1rem;
+  line-height: var(--leading-relaxed);
+}
+
+.contact-card__link {
+  color: var(--primary-600);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+  transition: color 0.3s ease;
+}
+
+.contact-card__link:hover {
+  color: var(--primary-700);
+  text-decoration: underline;
+}
+
+/* Стили FAQ */
+.faq-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.faq-item {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.faq-item--active {
+  border-color: var(--primary-300);
+  box-shadow: var(--shadow-sm);
+}
+
+.faq-question {
+  width: 100%;
+  padding: 1.5rem;
+  background: var(--bg-primary);
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  transition: background-color 0.3s ease;
+}
+
+.faq-question:hover {
+  background: var(--bg-secondary);
+}
+
+.faq-question__text {
+  font-family: var(--font-primary);
+  font-size: var(--text-lg);
+  font-weight: var(--font-medium);
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.faq-question__icon {
+  font-size: 1.5rem;
+  font-weight: var(--font-bold);
+  color: var(--primary-500);
+  flex-shrink: 0;
+}
+
+.faq-answer {
+  padding: 0 1.5rem;
+  max-height: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.faq-item--active .faq-answer {
+  padding: 0 1.5rem 1.5rem;
+  max-height: 500px;
+}
+
+.faq-answer p {
+  color: var(--text-secondary);
+  line-height: var(--leading-relaxed);
+  margin: 0;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .help-page {
+    padding: 1.5rem 0;
+  }
+
+  .page-title {
+    font-size: var(--text-3xl);
+  }
+
+  .page-subtitle {
+    font-size: var(--text-base);
+  }
+
+  .card-header,
+  .card-body {
+    padding: var(--space-lg);
+  }
+
+  .contact-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .contact-card {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .faq-question {
+    padding: 1.25rem;
+  }
+
+  .faq-question__text {
+    font-size: var(--text-base);
+  }
+
+  .form-actions {
+    flex-direction: column;
+  }
+
+  .btn,
+  .btn-large {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .help-page {
+    padding: 1rem 0;
+  }
+
+  .page-header {
+    margin-bottom: 2rem;
+  }
+
+  .page-title {
+    font-size: var(--text-2xl);
+  }
+
+  .card-title {
+    font-size: var(--text-xl);
+  }
+
+  .contact-card {
+    padding: 1.25rem;
+  }
+}
+</style>