update pricing section to issue #2

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>