⚙️ Page: Настройка - первый вход и создание аккаунта

app/setup/page.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ChevronLeft, Smartphone, Download, QrCode, Copy, ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+
+export default function SetupPage() {
+  const router = useRouter();
+  const [copied, setCopied] = useState(false);
+  const subscriptionUrl = 'https://umbrix2.3to3.sbs/sub/Vm9kb3JvZF8sMTc2OTczMDU2NQtUnJh9gxkj/';
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-app)] text-white">
+      {/* Header */}
+      <div className="bg-[var(--bg-card)] border-b border-slate-700 sticky top-0 z-10 backdrop-blur-sm">
+        <div className="max-w-2xl mx-auto p-4 flex items-center gap-3">
+          <button
+            onClick={() => router.back()}
+            className="p-2 hover:bg-slate-700 rounded-lg transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6" />
+          </button>
+          <h1 className="text-xl font-bold">Настроить Umbrix</h1>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-2xl mx-auto p-4 space-y-6">
+        {/* Step 1: Download App */}
+        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
+              1
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold mb-2">Скачайте приложение Umbrix</h2>
+              <p className="text-slate-400 text-sm mb-4">
+                Umbrix — это безопасное VPN приложение для защиты вашего интернет-соединения
+              </p>
+              
+              <div className="space-y-3">
+                {/* Android */}
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.umbrix.app"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+                >
+                  <Smartphone className="h-6 w-6 text-green-500" />
+                  <div className="flex-1">
+                    <p className="font-medium">Android</p>
+                    <p className="text-xs text-slate-400">Google Play Store</p>
+                  </div>
+                  <ExternalLink className="h-5 w-5 text-slate-400" />
+                </a>
+
+                {/* iOS */}
+                <a
+                  href="https://apps.apple.com/app/umbrix/id123456789"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+                >
+                  <Smartphone className="h-6 w-6 text-blue-500" />
+                  <div className="flex-1">
+                    <p className="font-medium">iOS</p>
+                    <p className="text-xs text-slate-400">App Store</p>
+                  </div>
+                  <ExternalLink className="h-5 w-5 text-slate-400" />
+                </a>
+
+                {/* Windows */}
+                <a
+                  href="https://umbrix.app/download/windows"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+                >
+                  <Download className="h-6 w-6 text-cyan-500" />
+                  <div className="flex-1">
+                    <p className="font-medium">Windows</p>
+                    <p className="text-xs text-slate-400">Скачать .exe</p>
+                  </div>
+                  <ExternalLink className="h-5 w-5 text-slate-400" />
+                </a>
+
+                {/* macOS */}
+                <a
+                  href="https://umbrix.app/download/macos"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-4 bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
+                >
+                  <Download className="h-6 w-6 text-slate-400" />
+                  <div className="flex-1">
+                    <p className="font-medium">macOS</p>
+                    <p className="text-xs text-slate-400">Скачать .dmg</p>
+                  </div>
+                  <ExternalLink className="h-5 w-5 text-slate-400" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Step 2: Add Subscription */}
+        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
+              2
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold mb-2">Добавьте подписку</h2>
+              <p className="text-slate-400 text-sm mb-4">
+                После покупки вы получите ссылку на подписку. Добавьте её в приложение одним из способов:
+              </p>
+
+              {/* Alert: Desktop users */}
+              <div className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg mb-4">
+                <p className="text-xs text-blue-400">
+                  💡 <strong>Важно:</strong> Кнопка "Открыть в Umbrix" работает только если приложение уже установлено. Если приложения нет - вы будете перенаправлены на эту страницу для установки.
+                </p>
+              </div>
+
+              {/* Method 1: Copy Link */}
+              <div className="space-y-3 mb-4">
+                <div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Copy className="h-4 w-4 text-[var(--primary)]" />
+                    <p className="font-medium text-sm">Способ 1: Скопировать ссылку</p>
+                  </div>
+                  <ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
+                    <li>Скопируйте ссылку подписки</li>
+                    <li>Откройте приложение Umbrix</li>
+                    <li>Нажмите "+" или "Добавить подписку"</li>
+                    <li>Вставьте скопированную ссылку</li>
+                  </ol>
+                </div>
+
+                {/* Method 2: QR Code */}
+                <div className="p-4 bg-slate-800/50 border border-slate-700 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <QrCode className="h-4 w-4 text-[var(--primary)]" />
+                    <p className="font-medium text-sm">Способ 2: QR код</p>
+                  </div>
+                  <ol className="text-sm text-slate-400 space-y-1 ml-6 list-decimal">
+                    <li>Откройте QR код подписки</li>
+                    <li>В приложении Umbrix нажмите "Сканировать QR"</li>
+                    <li>Наведите камеру на QR код</li>
+                  </ol>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Step 3: Connect */}
+        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 bg-[var(--primary)] rounded-full flex items-center justify-center font-bold">
+              3
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold mb-2">Подключитесь к VPN</h2>
+              <p className="text-slate-400 text-sm mb-4">
+                После добавления подписки просто нажмите кнопку "Подключить" в приложении
+              </p>
+              
+              <div className="p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
+                <p className="text-sm text-green-400">
+                  ✅ Готово! Ваше соединение защищено и зашифровано
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Help Section */}
+        <div className="bg-[var(--bg-card)] border border-slate-700 rounded-lg p-6">
+          <h3 className="font-semibold mb-3">💬 Нужна помощь?</h3>
+          <p className="text-sm text-slate-400 mb-4">
+            Если возникли вопросы при настройке, свяжитесь с нашей поддержкой
+          </p>
+          <a
+            href="https://telegram.me/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--primary)] hover:bg-[var(--primary)]/80 rounded-lg transition-colors"
+          >
+            <ExternalLink className="h-4 w-4" />
+            Написать в поддержку
+          </a>
+        </div>
+
+        {/* Back Button */}
+        <button
+          onClick={() => router.push('/')}
+          className="w-full p-4 bg-slate-800/50 hover:bg-slate-700/50 rounded-lg transition-colors text-slate-300"
+        >
+          Вернуться на главную
+        </button>
+      </div>
+    </div>
+  );
+}