vpn-7561/frontend/src/features/PreviewDev.html

<!DOCTYPE html>
<html lang="ru" class="dark scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Катюша VPN  — Быстрый VPN нового поколения (VLESS / WireGuard)</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen font-sans selection:bg-indigo-500 selection:text-white">
  <!-- Navbar -->
  <header class="border-b border-slate-800/80 bg-slate-950/80 backdrop-blur sticky top-0 z-30">
    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-400 to-indigo-600 flex items-center justify-center font-black text-slate-950">V</div>
        <div>
          <span class="font-bold text-lg tracking-tight">Катюша VPN </span>
          <span class="ml-2 text-[11px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">10 Gbps • No-Logs</span>
        </div>
      </div>
      <nav class="hidden md:flex items-center gap-6 text-sm text-slate-300">
        <a href="#features" class="hover:text-white">Преимущества</a>
        <a href="#servers" class="hover:text-white">Локации (42 страны)</a>
        <a href="#pricing" class="hover:text-white">Тарифы</a>
        <a href="#references" class="hover:text-indigo-400 text-xs text-slate-400">🔍 Референсы PM</a>
      </nav>
      <div class="flex items-center gap-3">
        <a href="/" class="text-xs text-slate-400 hover:text-white">← В Офис</a>
        <a href="#pricing" class="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить за 30 сек</a>
      </div>
    </div>
  </header>

  <main class="max-w-6xl mx-auto px-6 py-12 space-y-20">
    <!-- Hero Section -->
    <section class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
      <div class="lg:col-span-7 space-y-6">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs">
          <span>🛡 Протоколы Xray VLESS Reality + WireGuard</span>
        </div>
        <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight leading-tight">
          Свободный интернет на скорости <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-indigo-400">до 10 Гбит/с</span> без блокировок
        </h1>
        <p class="text-slate-300 text-base leading-relaxed max-w-2xl">
          Хочу точно такой же с классным дизайном, чтобы цепляло внимание. Дизайн код базируется на Катюше, сексопильной девушке, которая стреляет по РКН, как будто пробивает стены. Тарифы такие же . Работает в любых сетях, поддерживает YouTube 4K без рекламы, Netflix, ChatGPT и мгновенную выдачу ключа в Telegram или приложении.
        </p>
        <div class="flex flex-wrap gap-4 pt-2">
          <a href="#pricing" class="px-6 py-3.5 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-sm shadow-lg shadow-emerald-500/20 transition">
            🚀 Получить доступ (от 199 ₽/мес)
          </a>
          <button onclick="document.getElementById('keyModal').classList.remove('hidden')" class="px-6 py-3.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-100 font-semibold text-sm transition">
            ⚡ Тестовый ключ на 24 часа
          </button>
        </div>
        <div class="grid grid-cols-3 gap-4 pt-4 border-t border-slate-800/80 text-xs text-slate-400">
          <div><b class="text-white text-base block">42 страны</b>Европа, США, Азия</div>
          <div><b class="text-white text-base block">5 устройств</b>По одной подписке</div>
          <div><b class="text-white text-base block">0 логов</b>Независимый аудит</div>
        </div>
      </div>

      <!-- Interactive Connection Widget (Inspired by Proton & Mullvad References) -->
      <div class="lg:col-span-5 bg-slate-900/90 border border-slate-800 rounded-2xl p-6 shadow-2xl space-y-5">
        <div class="flex items-center justify-between">
          <span class="text-xs uppercase tracking-wider text-slate-400 font-semibold">Статус туннеля</span>
          <span id="connBadge" class="px-2.5 py-0.5 rounded-full text-xs bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">🟢 Защищено • VLESS Reality</span>
        </div>
        <div class="bg-slate-950 border border-slate-800 rounded-xl p-4 flex items-center justify-between">
          <div>
            <div class="text-xs text-slate-400">Текущая локация</div>
            <div id="locName" class="font-bold text-base mt-0.5">🇳🇱 Нидерланды, Амстердам #4</div>
            <div class="text-xs text-emerald-400 mt-0.5">Пинг: 18 мс • Нагрузка: 14%</div>
          </div>
          <select onchange="document.getElementById('locName').innerText=this.value" class="bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs">
            <option value="🇳🇱 Нидерланды, Амстердам #4">🇳🇱 Амстердам (18 мс)</option>
            <option value="🇩🇪 Германия, Франкфурт #2">🇩🇪 Франкфурт (21 мс)</option>
            <option value="🇫🇮 Финляндия, Хельсинки #1">🇫🇮 Хельсинки (12 мс)</option>
            <option value="🇺🇸 США, Нью-Йорк #8">🇺🇸 Нью-Йорк (84 мс)</option>
            <option value="🇹🇷 Турция, Стамбул #3">🇹🇷 Стамбул (34 мс)</option>
          </select>
        </div>
        <div class="grid grid-cols-2 gap-3 text-xs">
          <div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
            <span class="text-slate-400">Download</span>
            <div class="text-lg font-bold text-emerald-400 mt-0.5">842 Мбит/с</div>
          </div>
          <div class="bg-slate-950 border border-slate-800 rounded-xl p-3">
            <span class="text-slate-400">Upload</span>
            <div class="text-lg font-bold text-indigo-400 mt-0.5">690 Мбит/с</div>
          </div>
        </div>
        <div class="text-[11px] text-slate-400 flex items-center justify-between pt-1">
          <span>Платформы: iOS • Android • macOS • Windows • SmartTV</span>
          <span class="text-emerald-400 font-mono">AES-256-GCM</span>
        </div>
      </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="space-y-8">
      <div class="text-center max-w-2xl mx-auto space-y-2">
        <h2 class="text-3xl font-extrabold">Прозрачные тарифы без скрытых списаний</h2>
        <p class="text-slate-400 text-sm">Мгновенная выдача конфигурации сразу после оплаты (СБП, карты РФ/Мир, USDT/TON).</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 1 Month -->
        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
          <div>
            <div class="text-sm font-semibold text-slate-300">На 1 месяц</div>
            <div class="text-3xl font-extrabold mt-2">349 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
            <ul class="mt-6 space-y-2.5 text-xs text-slate-300">
              <li>✅ До 5 устройств одновременно</li>
              <li>✅ Все 42 страны (10 Gbps)</li>
              <li>✅ Протоколы VLESS Reality + WireGuard</li>
              <li>✅ YouTube 4K без рекламы</li>
            </ul>
          </div>
          <button onclick="openCheckout('1 месяц — 349 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 1 месяц</button>
        </div>

        <!-- 1 Year (Best Value) -->
        <div class="bg-gradient-to-b from-indigo-950/80 to-slate-900 border-2 border-emerald-500 rounded-2xl p-6 flex flex-col justify-between relative shadow-xl">
          <span class="absolute -top-3 right-6 px-3 py-0.5 rounded-full bg-emerald-500 text-slate-950 font-bold text-[11px]">ХИТ • ВЫГОДА 45%</span>
          <div>
            <div class="text-sm font-semibold text-emerald-300">На 1 год</div>
            <div class="text-3xl font-extrabold mt-2">199 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
            <div class="text-xs text-slate-400 mt-1">2 388 ₽ при оплате за год</div>
            <ul class="mt-6 space-y-2.5 text-xs text-slate-200">
              <li>✅ До 10 устройств + роутер</li>
              <li>✅ Выделенные стриминг-серверы (Netflix, AI)</li>
              <li>✅ Авто-обход DPI провайдеров (Stealth)</li>
              <li>✅ Приоритетная поддержка в Telegram 24/7</li>
            </ul>
          </div>
          <button onclick="openCheckout('1 год — 2 388 ₽ (199 ₽/мес)')" class="mt-8 w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs transition">Подключить со скидкой 45%</button>
        </div>

        <!-- 6 Months -->
        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 flex flex-col justify-between">
          <div>
            <div class="text-sm font-semibold text-slate-300">На 6 месяцев</div>
            <div class="text-3xl font-extrabold mt-2">249 ₽ <span class="text-sm font-normal text-slate-400">/ мес</span></div>
            <div class="text-xs text-slate-400 mt-1">1 494 ₽ за полгода</div>
            <ul class="mt-6 space-y-2.5 text-xs text-slate-300">
              <li>✅ До 5 устройств одновременно</li>
              <li>✅ Все 42 страны (10 Gbps)</li>
              <li>✅ Защита от утечек WebRTC и DNS</li>
              <li>✅ Гарантия возврата 30 дней</li>
            </ul>
          </div>
          <button onclick="openCheckout('6 месяцев — 1 494 ₽')" class="mt-8 w-full py-3 rounded-xl bg-slate-800 hover:bg-slate-700 font-bold text-xs transition">Выбрать 6 месяцев</button>
        </div>
      </div>
    </section>

    <!-- Web References Analyzed by PM -->
    <section id="references" class="pt-8 border-t border-slate-800/80 space-y-4">
      <div>
        <h3 class="text-sm font-bold text-indigo-300">🔍 Сайты-референсы из интернета, на базе которых PM и UX/UI собрали этот проект:</h3>
        <p class="text-xs text-slate-400">Автоматическое исследование конкурентов (`contracts/WEB_REFERENCES.md`)</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        
        <a href="https://gorillavpn.pro/" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
          <div class="text-xs font-semibold text-indigo-400 truncate">🎯 Ваш референс-образец: Gorilla</div>
          <div class="text-[11px] text-slate-500 truncate mt-0.5">https://gorillavpn.pro/</div>
          <p class="text-xs text-slate-300 mt-2">Проанализирована структура первого экрана, навигации, карточек преимуществ и блока тарифов.</p>
        </a>
        
        <a href="https://mullvad.net/en" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
          <div class="text-xs font-semibold text-indigo-400 truncate">Mullvad VPN — Эталон минимализма, прозрачности и оплаты в 1 клик (вкл. крипто)</div>
          <div class="text-[11px] text-slate-500 truncate mt-0.5">https://mullvad.net/en</div>
          <p class="text-xs text-slate-300 mt-2">Ключевые паттерны: генерация аккаунта без email, мгновенный выбор протокола WireGuard/Shadowsocks, честная цена, нулевое логирование.</p>
        </a>
        
        <a href="https://protonvpn.com" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
          <div class="text-xs font-semibold text-indigo-400 truncate">Proton VPN — Премиальный тёмный UI с интерактивной картой серверов и сравнением скоростей</div>
          <div class="text-[11px] text-slate-500 truncate mt-0.5">https://protonvpn.com</div>
          <p class="text-xs text-slate-300 mt-2">Ключевые паттерны: переключатель тарифов (1 мес / 1 год / 2 года со скидкой 60%), таблица скорости 10 Gbps, бейджи стриминга (Netflix/YouTube 4K).</p>
        </a>
        
        <a href="https://amnezia.org" target="_blank" class="block bg-slate-900/90 hover:bg-slate-800/80 border border-slate-800 rounded-xl p-4 transition">
          <div class="text-xs font-semibold text-indigo-400 truncate">Amnezia / Outline VPN — Фокус на обход блокировок (VLESS / Xray Reality) и приложения под все ОС</div>
          <div class="text-[11px] text-slate-500 truncate mt-0.5">https://amnezia.org</div>
          <p class="text-xs text-slate-300 mt-2">Ключевые паттерны: кнопки быстрого скачивания (iOS, Android, macOS, Windows, роутеры), выдача ключа для Telegram-бота в 1 клик.</p>
        </a>
        
      </div>
    </section>
  </main>

  <!-- Checkout / Free Trial Modal -->
  <div id="keyModal" class="hidden fixed inset-0 bg-black/75 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-700 rounded-2xl max-w-md w-full p-6 space-y-4">
      <div class="flex items-center justify-between">
        <h4 id="modalTitle" class="font-bold text-base">⚡ Мгновенное получение VPN-ключа</h4>
        <button onclick="document.getElementById('keyModal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
      </div>
      <p class="text-xs text-slate-300">Ваш сгенерированный VLESS Reality ключ готов к импорту в Hiddify / Streisand / v2rayNG / Amnezia:</p>
      <div class="bg-slate-950 border border-slate-800 rounded-xl p-3 font-mono text-[11px] text-emerald-400 break-all">
        vless://9a8f2c1e-4b3d-4e9a-8c1a-vo2026@nl4.vo-office.com:443?security=reality&sni=www.microsoft.com&fp=chrome&pbk=VoPublicKey2026&type=tcp#Катюша_VPN_
      </div>
      <button onclick="document.getElementById('keyModal').classList.add('hidden')" class="w-full py-2.5 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs">Готово</button>
    </div>
  </div>

  <script>
    function openCheckout(plan) {
      document.getElementById('modalTitle').innerText = 'Оформление: ' + plan;
      document.getElementById('keyModal').classList.remove('hidden');
    }
  </script>
</body>
</html>