Gekon Dev
c1c139de32
- 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
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
|
import { useI18n } from "@/i18n/context";
|
|
|
|
export function FinalCTASection() {
|
|
const { ref, isVisible } = useScrollAnimation();
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<section className="relative overflow-hidden px-4 py-24 sm:py-32">
|
|
<div className="pointer-events-none absolute inset-0 bg-radial-glow" />
|
|
<div className="pointer-events-none absolute inset-0 bg-grid-pattern opacity-50" />
|
|
|
|
<div className="relative z-10 mx-auto max-w-3xl text-center" ref={ref}>
|
|
<h2 className={`mb-4 text-3xl font-bold sm:text-5xl ${isVisible ? "animate-fade-up" : "opacity-0"}`}>
|
|
{t("cta_title_1")}{" "}
|
|
<span className="gradient-text">{t("cta_title_2")}</span>
|
|
</h2>
|
|
<p className={`mb-8 text-lg text-muted-foreground ${isVisible ? "animate-fade-up-delay-1" : "opacity-0"}`}>
|
|
{t("cta_subtitle")}
|
|
</p>
|
|
<div className={isVisible ? "animate-fade-up-delay-2" : "opacity-0"}>
|
|
<Button variant="glow" size="xl">
|
|
{t("cta_button")}
|
|
<ArrowRight size={18} />
|
|
</Button>
|
|
<p className="mt-4 text-sm text-muted-foreground">
|
|
{t("cta_note")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|