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
@@ -1,243 +1,243 @@
|
||||
# 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
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user