feat: redesign landing sections and interactions
Refresh visual design across hero, map, features, FAQ, and performance sections with tighter spacing, richer animations, updated branding assets, and localization/content tweaks.
This commit is contained in:
Gekon Dev
+278
-278
@@ -1,278 +1,278 @@
|
||||
# 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
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user