Gekon Dev
80f98282e7
Refresh visual design across hero, map, features, FAQ, and performance sections with tighter spacing, richer animations, updated branding assets, and localization/content tweaks.
279 lines
9.2 KiB
Markdown
279 lines
9.2 KiB
Markdown
# 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
|