# Gekon Landing Page - Setup Guide

## 🚀 Quick Start

### Prerequisites
- Node.js 18+ or Bun runtime
- Git

### Installation

1. **Install dependencies:**
```bash
# Using npm
npm install

# Or using bun (faster)
bun install
```

2. **Run development server:**
```bash
# Using npm
npm run dev

# Or using bun
bun run dev
```

3. **Open in browser:**
```
http://localhost:5173
```

## 📦 Build for Production

```bash
# Build
npm run build

# Preview production build
npm run preview
```

## 🎨 New Features Added

### 1. Animated Particles Background
- **File:** `src/components/ParticlesBackground.tsx`
- **Features:**
  - Canvas-based particle system
  - Animated connections between particles
  - Gekon brand colors (green/cyan)
  - Performance optimized
  - Responsive to screen size

### 2. Interactive Server Map
- **File:** `src/components/ServerMap.tsx`
- **Features:**
  - 25+ server locations worldwide
  - Hover tooltips with server details
  - Real-time stats (users, latency)
  - Animated pulse effects
  - Connection lines between servers
  - Status indicators (online/maintenance)

### Server Locations Included:
- **North America:** USA (West/East), Canada
- **South America:** Brazil, Argentina
- **Europe:** UK, Germany, France, Netherlands, Sweden, Poland, Spain, Italy, Turkey, Israel
- **Asia:** Japan, Singapore, Hong Kong, South Korea, India, UAE, Thailand, Vietnam
- **Oceania:** Australia, New Zealand
- **Africa:** South Africa

## 🌍 Internationalization

The site supports 3 languages:
- **English** (en)
- **Russian** (ru) - Русский
- **Chinese** (zh) - 中文

Language switcher is in the navbar (top-right).

## 🎨 Customization

### Update Server Locations
Edit `src/components/ServerMap.tsx`:
```typescript
const servers: ServerLocation[] = [
  {
    id: "your-server",
    country: "Country",
    city: "City",
    x: 50, // % from left
    y: 50, // % from top
    users: 1000,
    latency: 10,
    status: "online"
  },
  // ... more servers
];
```

### Adjust Particle Count
Edit `src/components/ParticlesBackground.tsx`:
```typescript
// Line ~35
const particleCount = Math.min(100, Math.floor((canvas.width * canvas.height) / 15000));
// Increase divisor (15000) for fewer particles
// Decrease for more particles
```

### Change Colors
Edit `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);
```

## 📁 Project Structure

```
gekon-speed-boost-3ba17197-main/
├── src/
│   ├── components/
│   │   ├── ParticlesBackground.tsx  ← NEW: Animated particles
│   │   ├── ServerMap.tsx            ← NEW: Interactive map
│   │   ├── HeroSection.tsx
│   │   ├── Navbar.tsx
│   │   ├── FeaturesSection.tsx
│   │   ├── PricingSection.tsx
│   │   └── ... other components
│   ├── i18n/
│   │   ├── translations.ts          ← Updated with new keys
│   │   └── context.tsx
│   ├── routes/
│   │   └── index.tsx                ← Updated with new components
│   └── styles.css
├── package.json
└── vite.config.ts
```

## 🔧 Tech Stack

- **Framework:** React 19 + TypeScript
- **Router:** TanStack Router
- **Styling:** Tailwind CSS 4.2
- **UI Components:** Radix UI
- **Icons:** Lucide React
- **Build Tool:** Vite
- **Runtime:** Node.js / Bun

## 🚀 Deployment

### Cloudflare Pages (Recommended)
```bash
npm run build
# Upload dist/ folder to Cloudflare Pages
```

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

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

## 📊 Performance Tips

1. **Reduce particles on mobile:**
   - Particles automatically scale based on screen size
   - Adjust in `ParticlesBackground.tsx`

2. **Lazy load images:**
   - Add `loading="lazy"` to img tags

3. **Optimize bundle:**
   - Run `npm run build` to see bundle analysis
   - Consider code splitting for large components

## 🐛 Troubleshooting

### Particles not showing
- Check browser console for errors
- Ensure canvas is supported
- Try reducing particle count

### Map tooltips not working
- Check z-index conflicts
- Ensure hover events are not blocked
- Test on different browsers

### Build errors
```bash
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
```

## 📝 Next Steps

1. **Add real subscription links** from your Sub-Bridge config
2. **Integrate Telegram bot** for support
3. **Add analytics** (Google Analytics, Plausible)
4. **Optimize SEO** with meta tags
5. **Add cookie consent** for GDPR

## 🎯 Integration with Sub-Bridge

To connect with your real VPN service:

1. **Update subscription URL:**
```typescript
// src/config/subscription.ts (create this file)
export const SUBSCRIPTION_CONFIG = {
  baseUrl: 'https://subb.ydns.eu',
  supportUrl: 'https://subb.ydns.eu/',
};
```

2. **Update CTA buttons:**
```typescript
// In components (HeroSection, PricingSection, etc.)
<Button onClick={() => window.location.href = SUBSCRIPTION_CONFIG.baseUrl}>
  Get Started
</Button>
```

## 📞 Support

For issues or questions:
- Check documentation in `/docs`
- Review component source code
- Test in different browsers

---

**Version:** 1.0.0  
**Last Updated:** 2026-01-23  
**Built with:** React + TypeScript + Tailwind CSS