hereconnect/apps/frontend/src/views/DonateView.vue

<template>
  <LayoutWithTabs>
    <template #footer>
      <footer class="py-4 border-t text-center text-sm hidden sm:block">
        <p>НаСвязи © 2024</p>
      </footer>
    </template>

    <MetaHead>
      <title>Поддержите развитие НаСвязи</title>
      <meta name="description" content="" />
    </MetaHead>

    <section class="max-w-2xl mx-auto py-8 px-4 text-center">
      <h1 class="text-2xl font-bold mb-4">Поддержите развитие НаСвязи</h1>
      <p class="text-gray-600 mb-6">
        Мы делаем всё, чтобы НаСвязи оставался удобным и полезным. Вы можете помочь нам, поддержав
        проект на Бусти.
      </p>

      <!-- Ссылка на Бусти -->
      <div class="mb-8">
        <a
          href="https://boosty.to/hereconnect/donate"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-block bg-orange-500 text-white font-semibold py-3 px-6 rounded-lg shadow hover:bg-orange-600 transition duration-300"
        >
          Поддержать через Бусти
        </a>
      </div>

      <!-- Рассказать друзьям -->
      <div class="mb-8">
        <h2 class="text-xl font-semibold mb-4">Рассказать друзьям</h2>
        <p class="text-gray-600 mb-4">Поделитесь ссылкой на НаСвязи:</p>
        <div class="flex justify-center gap-6">
          <!-- Telegram -->
          <a
            :href="telegramShareUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="p-button-rounded p-button-text p-button-lg inline-flex items-center justify-center"
          >
            <i class="pi pi-telegram !text-3xl text-blue-500"></i>
          </a>

          <!-- WhatsApp -->
          <a
            :href="whatsappShareUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="p-button-rounded p-button-text p-button-lg inline-flex items-center justify-center"
          >
            <i class="pi pi-whatsapp !text-3xl text-green-500"></i>
          </a>
        </div>
      </div>

      <!-- Обратная связь -->
      <!--    <div>-->
      <!--      <h2 class="text-xl font-semibold mb-4">Оставить отзыв или идею</h2>-->
      <!--      <p class="text-gray-600 mb-4">Мы рады любым предложениям и обратной связи.</p>-->
      <!--      <form @submit.prevent="sendFeedback">-->
      <!--        <div class="mb-4">-->
      <!--          <InputText v-model="email" class="w-full" placeholder="Ваш email" />-->
      <!--        </div>-->
      <!--        <div class="mb-4">-->
      <!--          <Textarea-->
      <!--            v-model="message"-->
      <!--            rows="4"-->
      <!--            class="w-full"-->
      <!--            placeholder="Ваше сообщение"-->
      <!--          ></Textarea>-->
      <!--        </div>-->
      <!--        <Button-->
      <!--          label="Отправить"-->
      <!--          class="p-button-md"-->
      <!--          :disabled="!email.trim() || !message.trim()"-->
      <!--        />-->
      <!--      </form>-->
      <!--      <p v-if="success" class="text-green-500 mt-4">Спасибо за ваше сообщение!</p>-->
      <!--    </div>-->
    </section>
  </LayoutWithTabs>
</template>

<script setup lang="ts">
// import { ref } from 'vue'

// Локальные состояния
// const email = ref('')
// const message = ref('')
// const success = ref(false)

// Конфигурация для шаринга
const siteUrl = encodeURIComponent(location.origin)
const shareText = encodeURIComponent('Попробуйте НаСвязи — удобный способ связаться через QR-код!')
// const shareImage = encodeURIComponent(
//   'https://hereconnect.condev.ru/images/qr-code-logo-200x200.jpg',
// )

// Генерация URL для Telegram
const telegramShareUrl = `https://t.me/share/url?url=${siteUrl}&text=${shareText}` // &photo=${shareImage}`

// Генерация URL для WhatsApp
const whatsappShareUrl = `https://api.whatsapp.com/send?text=${shareText}%0A${siteUrl}`

// // Обработка отправки отзыва
// function sendFeedback() {
//   console.log('Отзыв отправлен', { email: email.value, message: message.value })
//   // Имитация отправки данных
//   email.value = ''
//   message.value = ''
//   success.value = true
//   setTimeout(() => (success.value = false), 5000) // Убираем сообщение через 5 секунд
// }
</script>

<style scoped>
/* Стили для textarea */
textarea {
  resize: none;
}
</style>