# Gekon - Лендинг для сервиса ускорения интернета

## 🎯 Описание

Современный одностраничный лендинг для сервиса **Gekon** - технологичного решения для оптимизации и ускорения интернет-соединений.

## ✨ Новые возможности

### 1. Анимированный фон с частицами ✅
- Плавная анимация частиц на Canvas
- Динамические связи между частицами
- Цвета бренда Gekon (зелёный/циан)
- Оптимизирован для производительности
- Адаптивный под размер экрана

### 2. Интерактивная карта серверов ✅
- 25+ локаций серверов по всему миру
- Всплывающие подсказки при наведении
- Статистика в реальном времени (пользователи, задержка)
- Анимированные пульсирующие эффекты
- Линии соединений между серверами
- Индикаторы статуса (онлайн/обслуживание)

## 🚀 Быстрый старт

### Установка зависимостей
```bash
npm install
# или
bun install
```

### Запуск dev-сервера
```bash
npm run dev
# или
bun run dev
```

Откройте http://localhost:5173 в браузере.

### Сборка для продакшена
```bash
npm run build
npm run preview
```

## 🌍 Поддержка языков

Лендинг поддерживает 3 языка:
- 🇬🇧 Английский (English)
- 🇷🇺 Русский
- 🇨🇳 Китайский (中文)

Переключатель языков находится в навигации (правый верхний угол).

## 📊 Структура проекта

```
src/
├── components/
│   ├── ParticlesBackground.tsx  ← Анимированные частицы
│   ├── ServerMap.tsx            ← Интерактивная карта
│   ├── HeroSection.tsx          ← Главный экран
│   ├── Navbar.tsx               ← Навигация
│   ├── FeaturesSection.tsx      ← Возможности
│   ├── PricingSection.tsx       ← Тарифы
│   └── ... другие компоненты
├── i18n/
│   ├── translations.ts          ← Переводы
│   └── context.tsx
└── routes/
    └── index.tsx                ← Главная страница
```

## 🎨 Кастомизация

### Изменить локации серверов
Отредактируйте `src/components/ServerMap.tsx`:
```typescript
const servers: ServerLocation[] = [
  {
    id: "moscow",
    country: "Russia",
    city: "Moscow",
    x: 55,  // % слева
    y: 30,  // % сверху
    users: 2500,
    latency: 5,
    status: "online"
  },
  // ... больше серверов
];
```

### Настроить количество частиц
Отредактируйте `src/components/ParticlesBackground.tsx`:
```typescript
// Строка ~35
const particleCount = Math.min(100, Math.floor((canvas.width * canvas.height) / 15000));
// Увеличьте делитель (15000) для меньшего количества частиц
// Уменьшите для большего количества
```

### Изменить цвета бренда
Отредактируйте `src/styles.css`:
```css
--gekon-green: oklch(0.72 0.19 160);   /* Основной зелёный */
--gekon-cyan: oklch(0.7 0.14 200);     /* Циан */
--gekon-purple: oklch(0.6 0.25 300);   /* Фиолетовый */
--gekon-neon: oklch(0.75 0.2 150);     /* Неоновый зелёный */
```

## 🔗 Интеграция с Sub-Bridge

Чтобы подключить к вашему реальному VPN-сервису:

### 1. Создайте конфиг
```typescript
// src/config/subscription.ts
export const SUBSCRIPTION_CONFIG = {
  baseUrl: 'https://subb.ydns.eu',
  supportUrl: 'https://subb.ydns.eu/',
  logoUrl: 'https://raw.githubusercontent.com/arpicme/Proxy-App-Icon-set/refs/heads/main/white_background/Karing.svg',
  announcement: 'Спасибо за подписку! Ваша безопасность - наш приоритет.',
};
```

### 2. Обновите CTA кнопки
```typescript
// В компонентах (HeroSection, PricingSection и т.д.)
import { SUBSCRIPTION_CONFIG } from '@/config/subscription';

<Button onClick={() => window.location.href = SUBSCRIPTION_CONFIG.baseUrl}>
  Начать
</Button>
```

### 3. Добавьте Telegram виджет
```typescript
// src/components/TelegramWidget.tsx
export function TelegramWidget() {
  return (
    <a
      href="https://t.me/your_support_bot"
      className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-gekon-green to-gekon-cyan shadow-lg hover:scale-110 transition-transform"
    >
      <MessageCircle size={24} className="text-white" />
    </a>
  );
}
```

## 🌐 Локации серверов

### Северная Америка
- 🇺🇸 США (Лос-Анджелес, Нью-Йорк)
- 🇨🇦 Канада (Торонто)

### Южная Америка
- 🇧🇷 Бразилия (Сан-Паулу)
- 🇦🇷 Аргентина (Буэнос-Айрес)

### Европа
- 🇬🇧 Великобритания (Лондон)
- 🇩🇪 Германия (Франкфурт)
- 🇫🇷 Франция (Париж)
- 🇳🇱 Нидерланды (Амстердам)
- 🇸🇪 Швеция (Стокгольм)
- 🇵🇱 Польша (Варшава)
- 🇪🇸 Испания (Мадрид)
- 🇮🇹 Италия (Милан)
- 🇹🇷 Турция (Стамбул)
- 🇮🇱 Израиль (Тель-Авив)

### Азия
- 🇯🇵 Япония (Токио)
- 🇸🇬 Сингапур
- 🇭🇰 Гонконг
- 🇰🇷 Южная Корея (Сеул)
- 🇮🇳 Индия (Мумбаи)
- 🇦🇪 ОАЭ (Дубай)
- 🇹🇭 Таиланд (Бангкок)
- 🇻🇳 Вьетнам (Хошимин)

### Океания
- 🇦🇺 Австралия (Сидней)
- 🇳🇿 Новая Зеландия (Окленд)

### Африка
- 🇿🇦 ЮАР (Кейптаун)

## 🛠️ Технологии

- **React 19** + TypeScript
- **TanStack Router** - маршрутизация
- **Tailwind CSS 4.2** - стилизация
- **Radix UI** - UI компоненты
- **Lucide React** - иконки
- **Vite** - сборка
- **Canvas API** - анимация частиц

## 📦 Деплой

### Cloudflare Pages
```bash
npm run build
# Загрузите папку dist/ на Cloudflare Pages
```

### Vercel
```bash
vercel deploy
```

### Netlify
```bash
netlify deploy --prod
```

## 🎯 Следующие шаги

1. ✅ Добавлены анимированные частицы
2. ✅ Создана интерактивная карта серверов
3. ⏳ Добавить реальные ссылки на подписку
4. ⏳ Интегрировать Telegram бот
5. ⏳ Добавить аналитику (Google Analytics)
6. ⏳ Оптимизировать SEO
7. ⏳ Добавить Cookie Consent (GDPR)

## 📝 Дополнительно

### Производительность
- Частицы автоматически масштабируются под размер экрана
- Lazy loading для изображений
- Оптимизированная сборка с code splitting

### Доступность
- ARIA метки
- Навигация с клавиатуры
- Поддержка screen readers

### SEO
- Мета-теги для всех страниц
- Open Graph теги
- Семантическая разметка HTML

## 🐛 Решение проблем

### Частицы не отображаются
- Проверьте консоль браузера на ошибки
- Убедитесь, что Canvas поддерживается
- Попробуйте уменьшить количество частиц

### Карта не работает
- Проверьте z-index конфликты
- Убедитесь, что hover события не блокируются
- Протестируйте в разных браузерах

### Ошибки сборки
```bash
# Очистите кэш и переустановите
rm -rf node_modules package-lock.json
npm install
```

## 📞 Поддержка

Для вопросов и проблем:
- Проверьте документацию в `SETUP.md`
- Изучите исходный код компонентов
- Протестируйте в разных браузерах

---

**Версия:** 1.0.0  
**Обновлено:** 23.01.2026  
**Создано с помощью:** React + TypeScript + Tailwind CSS