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
2026-04-21 02:05:09 +03:00
commit c1c139de32
87 changed files with 8355 additions and 0 deletions
@@ -0,0 +1,45 @@
+import { Gamepad2, Tv, Briefcase, Download, Globe } from "lucide-react";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import { useI18n } from "@/i18n/context";
+import type { TranslationKeys } from "@/i18n/translations";
+
+const cases: { icon: typeof Gamepad2; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
+  { icon: Gamepad2, titleKey: "case_gaming", descKey: "case_gaming_desc" },
+  { icon: Tv, titleKey: "case_streaming", descKey: "case_streaming_desc" },
+  { icon: Briefcase, titleKey: "case_work", descKey: "case_work_desc" },
+  { icon: Download, titleKey: "case_downloads", descKey: "case_downloads_desc" },
+  { icon: Globe, titleKey: "case_browsing", descKey: "case_browsing_desc" },
+];
+
+export function UseCasesSection() {
+  const { ref, isVisible } = useScrollAnimation();
+  const { t } = useI18n();
+
+  return (
+    <section className="relative px-4 py-24 sm:py-32">
+      <div className="mx-auto max-w-5xl" ref={ref}>
+        <h2 className={`mb-12 text-center text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
+          {t("cases_title_1")} <span className="gradient-text">{t("cases_title_2")}</span>
+        </h2>
+
+        <div className="flex flex-wrap justify-center gap-4">
+          {cases.map((c, i) => (
+            <div
+              key={c.titleKey}
+              className={`glass-card flex items-center gap-3 rounded-full px-6 py-3 transition-all hover:scale-105 hover:shadow-lg hover:shadow-gekon-green/5 ${
+                isVisible ? "animate-fade-up" : "opacity-0"
+              }`}
+              style={{ animationDelay: `${i * 0.08}s` }}
+            >
+              <c.icon size={20} className="text-gekon-green" />
+              <div>
+                <span className="font-semibold text-foreground">{t(c.titleKey)}</span>
+                <span className="ml-2 text-sm text-muted-foreground">{t(c.descKey)}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}