GEKON-SUITE-VPN/SETUP.md

Gekon Landing Page - Setup Guide

🚀 Quick Start

Prerequisites

• Node.js 18+ or Bun runtime
• Git

Installation

1. Install dependencies:

# Using npm
npm install

# Or using bun (faster)
bun install

2. Run development server:

# Using npm
npm run dev

# Or using bun
bun run dev

3. Open in browser:

http://localhost:5173

📦 Build for Production

# 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:

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:

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

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

npm run build
# Upload dist/ folder to Cloudflare Pages

Vercel

vercel deploy

Netlify

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

# 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:

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

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