refactor NodesStatus.vue

This change was need to remove IpSecurity component from legal docs viewer

.gitea/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Build and Deploy Frontend via SSH
+
+on:
+  push:
+    tags:
+      - '*'
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+
+      - name: Install SSH key
+        uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.DEPLOY_SSH_KEY }}
+
+      - name: Deploy via SCP
+        run: |
+          tar -czf frontend.tar.gz -C dist .
+          scp -o StrictHostKeyChecking=no frontend.tar.gz ${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }}:/tmp/
+          ssh -o StrictHostKeyChecking=no ${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }} << 'EOF'
+            mkdir -p /opt/uvpn.shop/frontend
+            rm -rf /opt/uvpn.shop/frontend/*
+            tar -xzf /tmp/frontend.tar.gz -C /opt/uvpn.shop/frontend
+            rm /tmp/frontend.tar.gz
+          EOF

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

package.json

@@ -1,19 +1,19 @@
 {
-  "name": "uvpn.shop",
-  "version": "0.5.3",
+  "name": "frontend",
+  "version": "0.9.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "postbuild": "scp -r dist root@uvpn.shop:/opt/uvpn.shop"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@lucide/vue": "^1.16.0",
     "@tailwindcss/vite": "^4.3.0",
     "@tresjs/cientos": "^5.7.1",
     "@tresjs/core": "^5.8.1",
+    "@tw-labs/countries": "^0.0.2",
     "@vueuse/head": "^0.9.8",
     "marked": "^18.0.5",
     "swiper": "^12.1.4",

src/components/AppHeader.vue

@@ -25,5 +25,4 @@
 </template>
 
 <script setup>
-// Скрипты больше не нужны, всю магию сделает роутер!
 </script>

src/components/HeroSection.vue

@@ -1,4 +1,7 @@
 <template>
+  
+  <IpSecurity />
+
   <section id="hero" class="relative overflow-hidden px-6 py-16 md:py-24 md:px-12">
     <!-- Контейнер для параллакс-фона -->
     <div class="parallax-bg absolute inset-0 z-0"></div>
@@ -38,6 +41,7 @@
 <script setup>
 import { Zap } from '@lucide/vue'
 import Hero3D from './Hero3D.vue'
+import IpSecurity from './IpSecurity.vue';
 </script>
 
 <style scoped>

src/components/IpSecurity.vue

@@ -0,0 +1,148 @@
+<template>
+  <div v-if="ipData" class="bg-gray-50/80 dark:bg-gray-800/30 border-b border-gray-200 dark:border-gray-700 text-sm backdrop-blur-sm">
+    <div class="container mx-auto px-6 py-2 md:px-12">
+      <div class="flex items-center justify-between gap-3 flex-wrap">
+
+        <!-- Блок с IP и защитой -->
+        <div class="flex items-center gap-3">
+          <div class="flex items-center gap-2">
+            <span class="text-gray-500 dark:text-gray-400 text-xs">🌐 Ваш IP:</span>
+            <code class="font-mono text-xs md:text-sm font-medium bg-white dark:bg-gray-900 px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700">
+              {{ ipData.ip }}
+            </code>
+          </div>
+          <span class="inline-flex items-center gap-2 text-xs px-2 py-0.5 rounded-full font-medium" :class="isProtected ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'">
+            <span class="relative flex h-1.5 w-1.5">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="isProtected ? 'bg-green-500' : 'bg-amber-500'"></span>
+              <span class="relative inline-flex rounded-full h-1.5 w-1.5" :class="isProtected ? 'bg-green-600' : 'bg-amber-600'"></span>
+            </span>
+            {{ isProtected ? 'Защищено' : 'Не защищено' }}
+          </span>
+        </div>
+
+        <!-- Локация с флагом -->
+        <div class="flex items-center justify-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+          <!-- Локальный SVG-флаг -->
+          <img 
+            v-if="countryCode" 
+            :src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${countryCode}.svg`" 
+            :alt="countryCode"
+            class="h-3 w-auto"
+          />
+
+          <template v-if="ipData.location?.city">
+            <span class="hidden sm:inline">{{ ipData.location.city }}</span>
+            <span class="text-gray-400 hidden sm:inline">•</span>
+          </template>
+
+          <span v-if="ipData.location?.country" class="text-gray-600 dark:text-gray-300 font-medium hidden sm:inline">
+            {{ ipData.location.country }}
+          </span>
+
+          <template v-if="ipData.company?.name">
+            <span class="text-gray-400 hidden md:inline">•</span>
+            <span class="hidden md:inline text-gray-400">
+              {{ truncateText(ipData.company.name, 30) }}
+            </span>
+          </template>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <!-- Лоадер -->
+  <div v-else-if="loading" class="bg-gray-50/80 dark:bg-gray-800/30 border-b border-gray-200 dark:border-gray-700">
+    <div class="container mx-auto px-6 py-2 md:px-12">
+      <div class="flex items-center gap-3">
+        <div class="h-5 w-28 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+        <div class="h-5 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Ошибка -->
+  <div v-else-if="error" class="bg-amber-50 dark:bg-amber-900/10 border-b border-amber-200 dark:border-amber-800/50">
+    <div class="container mx-auto px-6 py-1.5 md:px-12">
+      <div class="flex items-center gap-2 text-xs text-amber-700 dark:text-amber-400">
+        <span>⚠️</span>
+        <span>Не удалось определить IP</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { getAllCountries } from '@tw-labs/countries'
+
+const ipData = ref(null)
+const loading = ref(true)
+const error = ref(false)
+
+// Список стран для маппинга названия -> код
+const countriesList = getAllCountries()
+
+function findCountryByName(countryName) {
+  if (!countryName) return null
+  const found = countriesList.find(c => c.label.toLowerCase() === countryName.toLowerCase())
+  if (found) return found
+  // частичное совпадение (например "Russian Federation" vs "Russia")
+  const partial = countriesList.find(c =>
+    countryName.toLowerCase().includes(c.label.toLowerCase()) ||
+    c.label.toLowerCase().includes(countryName.toLowerCase())
+  )
+  return partial || null
+}
+
+async function fetchIp() {
+  loading.value = true
+  error.value = false
+
+  try {
+    const response = await fetch('/api/v1/ip')
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+    const data = await response.json()
+    const countryName = data.location?.country
+    const foundCountry = findCountryByName(countryName)
+    const countryCode = foundCountry?.code || null
+
+    ipData.value = {
+      ...data,
+      location: {
+        ...data.location,
+        computed_country_code: countryCode
+      }
+    }
+  } catch (err) {
+    console.error('IP fetch error:', err)
+    error.value = true
+    ipData.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+const isProtected = computed(() => {
+  if (!ipData.value) return false
+  return ipData.value.security?.vpn ||
+         ipData.value.security?.proxy ||
+         ipData.value.security?.tor ||
+         ipData.value.security?.hosting
+})
+
+const countryCode = computed(() => {
+  const code = ipData.value?.location?.computed_country_code
+  return code ? code.toLowerCase() : null
+})
+
+function truncateText(text, maxLength) {
+  if (!text) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+}
+
+onMounted(() => {
+  fetchIp()
+})
+</script>

src/components/NodesStatus.vue

@@ -0,0 +1,142 @@
+<template>
+  <section class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
+    <h2 class="text-3xl md:text-4xl font-bold text-center mb-14">
+      Статус серверов
+    </h2>
+
+    <div v-if="loading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+    </div>
+
+    <p v-else-if="error" class="text-center text-red-500 py-12">{{ error }}</p>
+
+    <div v-else class="space-y-3 max-w-3xl mx-auto">
+      <div
+        v-for="host in hosts"
+        :key="host.address"
+        class="flex items-center justify-between bg-white dark:bg-gray-900 rounded-xl px-4 py-3 border transition hover:shadow-md"
+        :class="host.isOnline ? 'border-green-500/30' : 'border-red-500/30 opacity-60'"
+      >
+        <div class="flex items-center gap-3">
+          <img
+            v-if="host.countryCode"
+            :src="`https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/flags/4x3/${host.countryCode}.svg`"
+            class="h-5 w-auto rounded-sm"
+          />
+          <span class="font-semibold text-gray-800 dark:text-white">{{ host.cleanName }}</span>
+          <span
+            class="text-[10px] px-2 py-0.5 rounded-full font-medium"
+            :class="host.isOnline ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
+          >
+            {{ host.isOnline ? 'online' : 'offline' }}
+          </span>
+        </div>
+
+        <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
+          <span
+            v-if="host.ping !== undefined && host.ping !== null"
+            class="font-mono font-semibold flex items-center gap-1"
+            :class="{
+              'text-green-600': host.ping < 50,
+              'text-yellow-600': host.ping >= 50 && host.ping < 150,
+              'text-orange-600': host.ping >= 150 && host.ping < 300,
+              'text-red-600': host.ping >= 300,
+            }"
+          >
+            <Wifi :size="14" />
+            {{ host.ping }}ms
+          </span>
+          <span v-else class="text-gray-300">—</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Wifi } from '@lucide/vue'
+import { getAllCountries } from '@tw-labs/countries'
+
+const hosts = ref([])
+const loading = ref(true)
+const error = ref(null)
+let interval = null
+
+const countriesList = getAllCountries()
+
+// Поиск страны по названию (из IpSecurity.vue)
+const findCountryByName = (countryName) => {
+  if (!countryName) return null
+  const found = countriesList.find(c => c.label.toLowerCase() === countryName.toLowerCase())
+  if (found) return found
+  const partial = countriesList.find(c =>
+    countryName.toLowerCase().includes(c.label.toLowerCase()) ||
+    c.label.toLowerCase().includes(countryName.toLowerCase())
+  )
+  return partial || null
+}
+
+// Очистка имени от эмодзи и лишних символов
+const cleanName = (name) => {
+  return name.replace(/^[🇷🇺🇫🇮🇸🇪🇺🇸🇵🇱🇱🇻🇳🇱🇩🇪]\s*/, '').replace(/[🚀⭐🔥]/g, '').trim()
+}
+
+// Извлечение названия страны из name (удаляем эмодзи)
+const extractCountryName = (name) => {
+  const cleaned = cleanName(name)
+  return cleaned.replace(/\s*\d+$/, '').trim() // убираем цифры в конце (например "Finland 2" -> "Finland")
+}
+
+// Пинг через fetch (работает даже с невалидным сертификатом)
+const pingHost = async (host) => {
+  const url = `https://${host.address}:${host.port}`
+  const start = performance.now()
+
+  try {
+    await fetch(url, {
+      method: 'HEAD',
+      mode: 'no-cors',
+      cache: 'no-cache',
+      signal: AbortSignal.timeout(5000),
+    })
+    return Math.round(performance.now() - start)
+  } catch {
+    return Math.round(performance.now() - start)
+  }
+}
+
+const fetchHosts = async () => {
+  try {
+    const res = await fetch('/api/v1/hosts')
+    if (!res.ok) throw new Error()
+    const data = await res.json()
+    
+    hosts.value = data.map((h) => {
+      const countryName = extractCountryName(h.name)
+      const country = findCountryByName(countryName)
+      
+      return {
+        ...h,
+        cleanName: cleanName(h.name),
+        countryCode: country?.code?.toLowerCase() || null,
+        isOnline: true,
+        ping: null,
+      }
+    })
+
+    const pings = await Promise.all(hosts.value.map((h) => pingHost(h)))
+    hosts.value.forEach((h, i) => (h.ping = pings[i]))
+  } catch {
+    error.value = 'Ошибка загрузки'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchHosts()
+  interval = setInterval(fetchHosts, 30000)
+})
+onUnmounted(() => clearInterval(interval))
+</script>

src/components/PricingSection.vue

@@ -4,143 +4,186 @@
       Прозрачные тарифы
     </h2>
 
-    <!-- Переключатель периода -->
-    <div class="flex justify-center gap-2 mb-10">
-      <button
-        v-for="period in availablePeriods"
-        :key="period.value"
-        @click="selectedPeriod = period.value"
-        class="px-5 py-2 rounded-full text-sm font-medium transition hover:cursor-pointer"
-        :class="selectedPeriod === period.value
-          ? 'bg-blue-600 text-white shadow-md'
-          : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'"
-      >
-        {{ period.label }}
-      </button>
+    <!-- Состояние загрузки -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
     </div>
 
-    <!-- Сетка тарифов -->
-    <div class="grid md:grid-cols-2 gap-12">
-      <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="[
-          tariff.isPopular
-            ? 'border-2 border-blue-600 relative transform scale-105 shadow-2xl 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"
-        >
-          ПОПУЛЯРНЫЙ
-        </span>
-
-        <h3 class="text-xl font-semibold mb-2">{{ tariff.name }}</h3>
-        <p class="text-4xl font-extrabold mb-4">
-          {{ tariff.price }}<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span>
-        </p>
-
-        <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
-          <li v-for="feature in tariff.features" :key="feature" class="flex items-center gap-2">
-            <Check class="w-4 h-4 text-green-400" /> {{ feature }}
-          </li>
-        </ul>
+    <!-- Состояние ошибки -->
+    <div v-else-if="error" class="text-center text-red-500 py-12">
+      {{ error }}
+    </div>
 
+    <!-- Основной контент -->
+    <template v-else>
+      <!-- Переключатель периода -->
+      <div class="flex justify-center gap-2 mb-10 flex-wrap">
         <button
-          class="w-full transition py-3 rounded-xl font-medium text-white"
-          :class="tariff.isPopular
-            ? 'bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 font-bold'
-            : 'bg-gray-800 hover:bg-gray-700'"
+          v-for="period in availablePeriods"
+          :key="period.value"
+          @click="selectedPeriod = period.value"
+          class="px-5 py-2 rounded-full text-sm font-medium transition hover:cursor-pointer"
+          :class="selectedPeriod === period.value
+            ? 'bg-blue-600 text-white shadow-md'
+            : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'"
         >
-          {{ tariff.isPopular ? 'Выбрать тариф' : 'Выбрать' }}
+          {{ period.label }}
         </button>
       </div>
-    </div>
+
+      <!-- Сетка тарифов -->
+      <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 relative"
+          :class="[
+            tariff.isPopular
+              ? '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"
+          >
+            ПОПУЛЯРНЫЙ
+          </span>
+
+          <h3 class="text-xl font-semibold mb-2">{{ tariff.name }}</h3>
+          <p class="text-4xl font-extrabold mb-4">
+            {{ tariff.price }}<span class="text-lg font-normal text-gray-500 dark:text-gray-400">/мес</span>
+          </p>
+
+          <ul class="text-gray-500 dark:text-gray-400 space-y-3 mb-8 flex-1">
+            <li v-for="feature in tariff.features" :key="feature" class="flex items-center gap-2">
+              <Check class="w-4 h-4 text-green-400" /> {{ feature }}
+            </li>
+          </ul>
+
+          <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 ? 'Выбрать тариф' : 'Выбрать' }}
+          </a>
+        </div>
+      </div>
+
+    </template>
   </section>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Check } from '@lucide/vue'
 
-// Исходный конфиг
-const pricingConfig = {
-  default_tariff: "premium",
-  tariffs: [
-    {
-      key: "standard",
-      names: { ru: "Standard", en: "Standard" },
-      descriptions: { ru: "До 3 устройств", en: "up to 3 devices" },
-      prices_rub: { "1": 179.0, "3": 387.0, "6": 594.0, "12": 996.0 },
-      hwid_device_limit: 2,
-      monthly_gb: 0.0
-    },
-    {
-      key: "premium",
-      names: { ru: "Premium", en: "Premium"},
-      descriptions: { ru: "До 10 устройств, сервера РФ и США", en: "Up to 10 devices, RU, USA servers" },
-      prices_rub: { "1": 349.0, "3": 987.0, "6": 1734.0, "12": 1992.0 },
-      hwid_device_limit: 10,
-      monthly_gb: 0.0
+// Состояния
+const loading = ref(true)
+const error = ref(null)
+const tariffsData = ref([])        // исходные тарифы (из API)
+const defaultTariffKey = ref('')   // ключ популярного тарифа
+const selectedPeriod = ref(1)      // выбранный период (месяцев)
+
+// Доступные периоды (вычисляются динамически)
+const availablePeriods = computed(() => {
+  const periodsSet = new Set()
+  for (const tariff of tariffsData.value) {
+    if (tariff.enabled && tariff.enabled_periods) {
+      tariff.enabled_periods.forEach(p => periodsSet.add(p))
     }
-  ]
-}
+  }
+  const sorted = Array.from(periodsSet).sort((a, b) => a - b)
+  return sorted.map(value => ({
+    value,
+    label: value === 1 ? '1 мес' : `${value} мес`
+  }))
+})
 
-// Доступные периоды
-const availablePeriods = [
-  { value: 1, label: '1 мес' },
-  { value: 3, label: '3 мес' },
-  { value: 6, label: '6 мес' },
-  { value: 12, label: '12 мес' }
-]
+// Активные (включённые) тарифы, отфильтрованные по выбранному периоду
+const activeTariffs = computed(() => {
+  return tariffsData.value.filter(tariff =>
+    tariff.enabled && tariff.enabled_periods?.includes(selectedPeriod.value)
+  )
+})
 
-// Выбранный период (по умолчанию 1 месяц)
-const selectedPeriod = ref(1)
-
-// Функция для получения цены за месяц
-const getMonthlyPrice = (tariff, period) => {
-  const total = tariff.prices_rub[String(period)]
-  if (!total) return '—'
-  const monthly = total / period
-  return Number.isInteger(monthly) ? monthly : monthly.toFixed(2)
-}
-
-// Подготовка данных для карточек
+// Карточки для отображения (с ценами, фичами и флагом популярности)
 const tariffCards = computed(() => {
-  const tariffs = pricingConfig.tariffs
-  const defaultKey = pricingConfig.default_tariff
+  return activeTariffs.value.map(tariff => {
+    const totalPrice = tariff.prices_rub?.[String(selectedPeriod.value)]
+    let monthlyPrice = '—'
+    if (totalPrice && totalPrice > 0) {
+      const monthly = totalPrice / selectedPeriod.value
+      monthlyPrice = Number.isInteger(monthly) ? monthly : monthly.toFixed(2)
+    }
 
-  // Разделяем тарифы: популярный (премиум) и остальные
-  const premiumTariff = tariffs.find(t => t.key === defaultKey)
-  const otherTariffs = tariffs.filter(t => t.key !== defaultKey)
+    // Формируем список особенностей (features)
+    const features = []
 
-  // Порядок: первый обычный, премиум, второй обычный
-  const ordered = [
-    { ...otherTariffs[0], isPopular: false },
-    { ...premiumTariff, isPopular: true },
-  ]
+    // 1. Описание из JSON (если есть)
+    const description = tariff.descriptions?.ru?.trim()
+    if (description) {
+      features.push(description)
+    }
 
-  return ordered.map(tariff => {
-    const price = getMonthlyPrice(tariff, selectedPeriod.value)
+    // 2. Лимит устройств
+    if (tariff.hwid_device_limit) {
+      features.push(`До ${tariff.hwid_device_limit} устройств`)
+    }
 
-    // Фичи: разбиваем описание по запятой и добавляем общие пункты
-    const descriptionFeatures = tariff.descriptions.ru
-      .split(',')
-      .map(s => s.trim())
-      .filter(Boolean)
-    const staticFeatures = ['Безлимитный трафик', 'Поддержка 24/7']
-    const features = [...new Set([...descriptionFeatures, ...staticFeatures])]
+    // 3. Безлимитный трафик (всегда)
+    features.push('Безлимитный трафик')
+
+    // 4. Поддержка 24/7
+    features.push('Поддержка 24/7')
 
     return {
       key: tariff.key,
-      name: tariff.names.ru,
-      price: `${price} ₽`,
+      name: tariff.names?.ru || tariff.key,
+      price: `${monthlyPrice} ₽`,
       features,
-      isPopular: tariff.isPopular
+      isPopular: tariff.key === defaultTariffKey.value
     }
   })
 })
+
+// Загрузка данных с API
+const fetchTariffs = async () => {
+  loading.value = true
+  error.value = null
+  try {
+    const response = await fetch('/api/v1/tariffs')
+    if (!response.ok) {
+      throw new Error(`Ошибка загрузки: ${response.status}`)
+    }
+    const data = await response.json()
+    tariffsData.value = data.tariffs || []
+    defaultTariffKey.value = data.default_tariff || ''
+
+    // Установка начального периода (первый доступный)
+    if (availablePeriods.value.length > 0) {
+      const exists = availablePeriods.value.some(p => p.value === selectedPeriod.value)
+      if (!exists) {
+        selectedPeriod.value = availablePeriods.value[0].value
+      }
+    }
+  } catch (err) {
+    console.error('Failed to load tariffs:', err)
+    error.value = 'Не удалось загрузить тарифы. Попробуйте позже.'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchTariffs()
+})
 </script>

src/views/HomeView.vue

@@ -1,13 +1,12 @@
 <template>
-  <div>
-    <HeroSection />
-    <FeaturesSection />
-    <CompatibilitySection />
-    <PricingSection />
-    <StepsSection />
-    <TestimonialsSection />
-    <FaqSection />
-  </div>
+  <HeroSection />
+  <FeaturesSection />
+  <CompatibilitySection />
+  <PricingSection />
+  <NodesStatus />
+  <StepsSection />
+  <TestimonialsSection />
+  <FaqSection />
 </template>
 
 <script setup>
@@ -15,55 +14,13 @@ import HeroSection from '../components/HeroSection.vue'
 import FeaturesSection from '../components/FeaturesSection.vue'
 import CompatibilitySection from '../components/CompatibilitySection.vue'
 import PricingSection from '../components/PricingSection.vue'
+import NodesStatus from '../components/NodesStatus.vue'
 import StepsSection from '../components/StepsSection.vue'
 import TestimonialsSection from '../components/TestimonialsSection.vue'
 import FaqSection from '../components/FaqSection.vue'
 
-// import { useHead } from '@vueuse/head';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-// useHead({
-//   title: route.meta.title,
-//   meta: [
-//     {
-//       name: 'description',
-//       content: route.meta.description
-//     },
-//     {
-//       name: 'keywords',
-//       content: route.meta.keywords
-//     },
-//     // Open Graph теги для соцсетей
-//     {
-//       property: 'og:title',
-//       content: route.meta.title
-//     },
-//     {
-//       property: 'og:description',
-//       content: route.meta.description
-//     },
-//     {
-//       property: 'og:type',
-//       content: 'website'
-//     },
-//     {
-//       property: 'og:url',
-//       content: window.location.href // Здесь можно также задать каноничный URL
-//     },
-//     {
-//       property: 'og:site_name',
-//       content: route.meta.title
-//     },
-//     {
-//       property: 'telegram:channel',
-//       content: '@uvpn_shop'
-//     },
-//     {
-//       property: 'tg:site_verification',
-//       content: 'g7j8/rPFXfhyrq5q0QQV7EsYWv4='
-//     },
-//   ]
-// });
 </script>

vite.config.js

@@ -5,7 +5,6 @@ import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
 import { default as Sitemap } from 'vite-plugin-sitemap';
 
-
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
@@ -13,12 +12,8 @@ export default defineConfig({
     tailwindcss(),
     Sitemap({
       hostname: 'https://uvpn.shop',
-      // Плагин сам прочитает маршруты из вашего router, но если нужно указать вручную:
-      // routes: ['/', '/docs'], // можно опустить — он определит автоматически
-      // Если у вас динамические маршруты (например, /docs/:docName), их нужно добавить отдельно:
-      dynamicRoutes: ['/docs/policy', '/docs/agreement'], // сюда перечислите все возможные динамические URL
-      // Настройки changefreq, priority и т.д.:
-      outDir: 'dist', // папка сборки
+      dynamicRoutes: ['/docs/policy', '/docs/agreement'],
+      outDir: 'dist',
       changefreq: 'weekly',
       priority: 0.8
     })
@@ -28,4 +23,7 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  build: {
+    chunkSizeWarningLimit: 1000
+  }
 })