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.
244 lines
5.5 KiB
Markdown
244 lines
5.5 KiB
Markdown
# 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
|