97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { LanguageSwitcher } from "@/components/sections/lang/language-switcher";
|
|
import { ThemeToggle } from "@/components/sections/theme/theme-toggle";
|
|
import { Dictionary } from "@/lib/IDict";
|
|
import { CyberButton } from "../ui/cyber-button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Header({
|
|
dict,
|
|
lang,
|
|
}: {
|
|
dict: Dictionary["nav"];
|
|
lang: string;
|
|
}) {
|
|
return (
|
|
<header className="fixed top-4 md:top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-5xl z-50 bg-card/60 dark:bg-card/40 backdrop-blur-2xl border border-border/50 rounded-full shadow-lg transition-all duration-500 hover:bg-card/80 dark:hover:bg-card/60">
|
|
<div className="px-4 md:px-8 h-14 md:h-16 flex items-center justify-between">
|
|
{/* ЛЕВЫЙ БЛОК: Адаптивный Логотип */}
|
|
<Link
|
|
href={`/${lang}`}
|
|
className="flex items-center gap-2 md:gap-3 group hover:scale-105 transition-transform duration-300 w-fit"
|
|
>
|
|
<div className="text-lg sm:text-2xl md:text-3xl tracking-wide md:tracking-widest flex items-center select-none font-bold uppercase">
|
|
<span
|
|
className="text-transparent animate-neon-flicker transition-all duration-300"
|
|
style={{
|
|
WebkitTextStroke: "1px #00E5F2",
|
|
filter: "drop-shadow(0 0 5px rgba(0,229,242,0.6))",
|
|
}}
|
|
>
|
|
Net
|
|
</span>
|
|
<span
|
|
className="text-transparent transition-all duration-300"
|
|
style={{
|
|
WebkitTextStroke: "1px #00E5F2",
|
|
filter: "drop-shadow(0 0 5px rgba(0,229,242,0.6))",
|
|
}}
|
|
>
|
|
runner
|
|
</span>
|
|
<span
|
|
className="ml-1.5 md:ml-2 text-transparent opacity-90 group-hover:opacity-100 transition-all duration-300"
|
|
style={{
|
|
WebkitTextStroke: "1px #8B3DFF",
|
|
filter: "drop-shadow(0 0 5px rgba(139,61,255,0.6))",
|
|
}}
|
|
>
|
|
VPN
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* ЦЕНТРАЛЬНЫЙ БЛОК: Навигация (скрыта на мобилках) */}
|
|
<nav className="hidden md:flex items-center gap-8 text-sm font-bold text-muted-foreground">
|
|
<Link
|
|
href={`/${lang}#features`}
|
|
className="hover:text-primary transition-colors duration-200"
|
|
>
|
|
{dict.features}
|
|
</Link>
|
|
<Link
|
|
href={`/${lang}#pricing`}
|
|
className="hover:text-primary transition-colors duration-200"
|
|
>
|
|
{dict.pricing}
|
|
</Link>
|
|
<Link
|
|
href={`/${lang}#faq`}
|
|
className="hover:text-primary transition-colors duration-200"
|
|
>
|
|
{dict.faq}
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* ПРАВЫЙ БЛОК: Контролы */}
|
|
<div className="flex items-center gap-1.5 md:gap-4">
|
|
<div className="flex items-center gap-1 md:gap-2">
|
|
<LanguageSwitcher />
|
|
<ThemeToggle />
|
|
</div>
|
|
|
|
<CyberButton
|
|
href={`/${lang}/download`}
|
|
variant="primary"
|
|
className="hidden sm:block scale-90 md:scale-100 origin-right"
|
|
>
|
|
{dict.cta}
|
|
</CyberButton>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|