From c8486ca0015343882212c9c6cf86b8dd61e00c7c Mon Sep 17 00:00:00 2001
From: austnv <lesin2798@mail.ru>
Date: Mon, 15 Jun 2026 00:14:20 +0300
Subject: [PATCH] update pricing section to issue #2

---
 package.json                      |  2 +-
 src/components/PricingSection.vue | 23 ++++++++++++-----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index fde137e..73b3ee6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uvpn.shop",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/components/PricingSection.vue b/src/components/PricingSection.vue
index e8bc161..e4f8046 100644
--- a/src/components/PricingSection.vue
+++ b/src/components/PricingSection.vue
@@ -32,20 +32,20 @@
       </div>
 
       <!-- Сетка тарифов -->
-      <div
-        v-if="tariffCards.length"
-        class="grid md:grid-cols-2 gap-12"
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+        style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));"
       >
         <div
           v-for="tariff in tariffCards"
           :key="tariff.key"
-          class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border transition"
+          class="bg-white dark:bg-gray-900 rounded-2xl p-8 flex flex-col border transition relative"
           :class="[
             tariff.isPopular
-              ? 'border-2 border-blue-600 relative transform scale-105 shadow-2xl shadow-blue-600/20'
+              ? 'border-2 border-blue-600 shadow-xl shadow-blue-600/20'
               : 'border border-gray-200 dark:border-gray-800 hover:border-blue-600'
           ]"
         >
+          <!-- Бейдж "ПОПУЛЯРНЫЙ" -->
           <span
             v-if="tariff.isPopular"
             class="absolute top-0 right-0 bg-blue-600 dark:bg-blue-500 text-gray-900 dark:text-white text-xs font-bold px-4 py-1 rounded-bl-xl rounded-tr-xl"
@@ -64,19 +64,20 @@
             </li>
           </ul>
 
-          <button
-            class="w-full transition py-3 rounded-xl font-medium text-white"
+          <a
+            :href="'https://app.uvpn.shop'"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="w-full transition py-3 rounded-xl font-medium text-white block text-center"
             :class="tariff.isPopular
               ? 'bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 font-bold'
               : 'bg-gray-800 hover:bg-gray-700'"
           >
             {{ tariff.isPopular ? 'Выбрать тариф' : 'Выбрать' }}
-          </button>
+          </a>
         </div>
       </div>
-      <div v-else class="text-center py-12 text-gray-500">
-        Нет доступных тарифов для выбранного периода
-      </div>
+
     </template>
   </section>
 </template>