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

🎯 Описание

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

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

1. Анимированный фон с частицами ✅

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

2. Интерактивная карта серверов ✅

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

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

Установка зависимостей

npm install
# или
bun install

Запуск dev-сервера

npm run dev
# или
bun run dev

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

Сборка для продакшена

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:

const servers: ServerLocation[] = [
  {
    id: "moscow",
    country: "Russia",
    city: "Moscow",
    x: 55,  // % слева
    y: 30,  // % сверху
    users: 2500,
    latency: 5,
    status: "online"
  },
  // ... больше серверов
];

Настроить количество частиц

Отредактируйте src/components/ParticlesBackground.tsx:

// Строка ~35
const particleCount = Math.min(100, Math.floor((canvas.width * canvas.height) / 15000));
// Увеличьте делитель (15000) для меньшего количества частиц
// Уменьшите для большего количества

Изменить цвета бренда

Отредактируйте src/styles.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. Создайте конфиг

// 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 кнопки

// В компонентах (HeroSection, PricingSection и т.д.)
import { SUBSCRIPTION_CONFIG } from '@/config/subscription';

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

3. Добавьте Telegram виджет

// 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

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

Vercel

vercel deploy

Netlify

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 события не блокируются
• Протестируйте в разных браузерах

Ошибки сборки

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

📞 Поддержка

Для вопросов и проблем:

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

---

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