feat: Add animated particles background and interactive server map
- Added ParticlesBackground component with Canvas-based animation - Created ServerMap with 25+ global server locations - Added interactive hover tooltips for server details - Implemented real-time stats display (users, latency) - Fixed hydration mismatch error in ServerMap - Increased particle visibility (opacity 0.6, 150 particles) - Added Docker support with docker-compose.yml - Created comprehensive documentation (SETUP.md, DEBUG.md, FEATURES.md) - Added translations for new sections (EN/RU/ZH) - Configured proper port mapping (5173) New features: - Animated particles with dynamic connections - Global network infrastructure visualization - 25 server locations across 6 continents - Hover interactions with server statistics - Responsive design for all screen sizes
This commit is contained in:
Gekon Dev
@@ -0,0 +1,145 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Menu, X, Globe } from "lucide-react";
|
||||
import { useI18n } from "@/i18n/context";
|
||||
import { localeLabels, type Locale } from "@/i18n/translations";
|
||||
import type { TranslationKeys } from "@/i18n/translations";
|
||||
|
||||
const navLinks: { key: TranslationKeys; href: string }[] = [
|
||||
{ key: "nav_technology", href: "#technology" },
|
||||
{ key: "nav_performance", href: "#performance" },
|
||||
{ key: "nav_pricing", href: "#pricing" },
|
||||
{ key: "nav_faq", href: "#faq" },
|
||||
];
|
||||
|
||||
const locales: Locale[] = ["en", "ru", "zh"];
|
||||
|
||||
export function Navbar() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [langOpen, setLangOpen] = useState(false);
|
||||
const { t, locale, setLocale } = useI18n();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20);
|
||||
window.addEventListener("scroll", onScroll);
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled ? "glass-card shadow-lg" : "bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
<a href="#" className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-gekon-green to-gekon-cyan">
|
||||
<span className="text-sm font-bold text-primary-foreground">G</span>
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight text-foreground">
|
||||
Gekon
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className="hidden items-center gap-8 md:flex">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
{t(link.key)}
|
||||
</a>
|
||||
))}
|
||||
|
||||
{/* Language switcher */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setLangOpen(!langOpen)}
|
||||
className="flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-gekon-green/30"
|
||||
>
|
||||
<Globe size={14} />
|
||||
{localeLabels[locale]}
|
||||
</button>
|
||||
{langOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 glass-card rounded-lg border border-border py-1 min-w-[120px] shadow-xl">
|
||||
{locales.map((l) => (
|
||||
<button
|
||||
key={l}
|
||||
onClick={() => { setLocale(l); setLangOpen(false); }}
|
||||
className={`block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-secondary ${
|
||||
l === locale ? "text-gekon-green font-medium" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{localeLabels[l]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button variant="glow" size="sm">
|
||||
{t("nav_get_started")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
{/* Mobile language */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setLangOpen(!langOpen)}
|
||||
className="flex items-center gap-1 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
<Globe size={12} />
|
||||
{locale.toUpperCase()}
|
||||
</button>
|
||||
{langOpen && (
|
||||
<div className="absolute right-0 top-full mt-2 glass-card rounded-lg border border-border py-1 min-w-[120px] shadow-xl z-50">
|
||||
{locales.map((l) => (
|
||||
<button
|
||||
key={l}
|
||||
onClick={() => { setLocale(l); setLangOpen(false); }}
|
||||
className={`block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-secondary ${
|
||||
l === locale ? "text-gekon-green font-medium" : "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{localeLabels[l]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="text-foreground"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
>
|
||||
{mobileOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className="glass-card border-t border-border md:hidden">
|
||||
<div className="flex flex-col gap-4 px-4 py-6">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{t(link.key)}
|
||||
</a>
|
||||
))}
|
||||
<Button variant="glow" size="sm" className="w-full">
|
||||
{t("nav_get_started")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user