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,51 @@
+import { Zap, Rocket, Globe, Wrench, BarChart3, Settings } from "lucide-react";
+import { useScrollAnimation } from "@/hooks/useScrollAnimation";
+import { useI18n } from "@/i18n/context";
+import type { TranslationKeys } from "@/i18n/translations";
+
+const features: { icon: typeof Zap; titleKey: TranslationKeys; descKey: TranslationKeys }[] = [
+  { icon: Zap, titleKey: "feature_1_title", descKey: "feature_1_desc" },
+  { icon: Rocket, titleKey: "feature_2_title", descKey: "feature_2_desc" },
+  { icon: Globe, titleKey: "feature_3_title", descKey: "feature_3_desc" },
+  { icon: Wrench, titleKey: "feature_4_title", descKey: "feature_4_desc" },
+  { icon: BarChart3, titleKey: "feature_5_title", descKey: "feature_5_desc" },
+  { icon: Settings, titleKey: "feature_6_title", descKey: "feature_6_desc" },
+];
+
+export function FeaturesSection() {
+  const { ref, isVisible } = useScrollAnimation();
+  const { t } = useI18n();
+
+  return (
+    <section id="technology" className="relative px-4 py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl" ref={ref}>
+        <div className="mb-16 text-center">
+          <h2 className={`mb-4 text-3xl font-bold sm:text-4xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
+            {t("features_title_1")} <span className="gradient-text">{t("features_title_2")}</span>
+          </h2>
+          <p className={`mx-auto max-w-2xl text-muted-foreground ${isVisible ? "animate-fade-up-delay-1" : "opacity-0"}`}>
+            {t("features_subtitle")}
+          </p>
+        </div>
+
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature, i) => (
+            <div
+              key={feature.titleKey}
+              className={`glass-card group rounded-xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-gekon-green/5 ${
+                isVisible ? "animate-fade-up" : "opacity-0"
+              }`}
+              style={{ animationDelay: `${i * 0.1}s` }}
+            >
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-gekon-green/20 to-gekon-cyan/20 transition-all group-hover:from-gekon-green/30 group-hover:to-gekon-cyan/30">
+                <feature.icon size={24} className="text-gekon-green" />
+              </div>
+              <h3 className="mb-2 text-lg font-semibold text-foreground">{t(feature.titleKey)}</h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">{t(feature.descKey)}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}