179 lines
8.2 KiB
TypeScript
179 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
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 {
|
|
X,
|
|
Terminal,
|
|
FolderOpen,
|
|
ArrowRight,
|
|
FileCode,
|
|
Cpu,
|
|
CreditCard,
|
|
HelpCircle,
|
|
Activity,
|
|
Shield,
|
|
} from "lucide-react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
export function Header({
|
|
dict,
|
|
lang,
|
|
}: {
|
|
dict: Dictionary["nav"];
|
|
lang: string;
|
|
}) {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const menuLinks = [
|
|
{ name: dict.features, href: `/${lang}#features`, icon: Cpu },
|
|
{ name: dict.pricing, href: `/${lang}#pricing`, icon: CreditCard },
|
|
{ name: dict.faq, href: `/${lang}#faq`, icon: HelpCircle },
|
|
{ name: dict.blog, href: `/${lang}/blog`, icon: Activity },
|
|
{ name: dict.terminal, href: `/${lang}/terminal`, icon: Terminal },
|
|
{ name: dict.profile, href: `/${lang}/auth`, icon: Shield }, // Добавлена ссылка на профиль
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<header className="fixed top-4 md:top-6 left-1/2 -translate-x-1/2 w-[95%] max-w-5xl z-40 bg-card/30 dark:bg-card/20 backdrop-blur-xl border border-border/50 rounded-full shadow-lg transition-all duration-500 hover:bg-card/50 dark:hover:bg-card/40">
|
|
<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 relative z-50"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<div className="text-xl 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>
|
|
|
|
<div className="flex items-center gap-2 md:gap-4 relative z-50">
|
|
<div className="flex items-center gap-1 md:gap-2">
|
|
<LanguageSwitcher />
|
|
<ThemeToggle />
|
|
</div>
|
|
<CyberButton
|
|
href={`/${lang}/download`}
|
|
variant="primary"
|
|
className="hidden sm:block scale-75 md:scale-90 origin-right"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{dict.cta}
|
|
</CyberButton>
|
|
<button
|
|
onClick={() => setIsMenuOpen(true)}
|
|
className="px-3 py-1.5 md:px-4 md:py-2 rounded-xl bg-background/50 border border-border text-foreground hover:bg-primary/20 hover:text-primary hover:border-primary/50 transition-all duration-300 flex items-center gap-2 font-mono text-sm uppercase tracking-wider shadow-sm"
|
|
>
|
|
<Terminal className="size-4" />
|
|
<span className="hidden md:inline">Menu.exe</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<AnimatePresence>
|
|
{isMenuOpen && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-md"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -40, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
|
className="relative w-full max-w-lg bg-[#E5E5E5] dark:bg-[#1E1E1E] border-2 border-t-white border-l-white border-b-gray-500 border-r-gray-500 dark:border-t-gray-600 dark:border-l-gray-600 dark:border-b-black dark:border-r-black p-1 shadow-[8px_8px_0_0_rgba(0,0,0,0.6)]"
|
|
>
|
|
<div className="bg-blue-800 dark:bg-blue-900 text-white px-2 py-1.5 flex items-center justify-between mb-2 font-mono text-sm font-bold tracking-wider select-none">
|
|
<span className="flex items-center gap-2">
|
|
<Terminal className="size-4" /> C:\NETRUNNER\SYSTEM.DIR
|
|
</span>
|
|
<button
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="bg-[#c0c0c0] text-black border-2 border-t-white border-l-white border-b-gray-600 border-r-gray-600 w-6 h-6 flex items-center justify-center active:border-t-gray-600 active:border-l-gray-600 active:border-b-white active:border-r-white"
|
|
>
|
|
<X className="size-4" strokeWidth={3} />
|
|
</button>
|
|
</div>
|
|
<div className="bg-white dark:bg-black border-2 border-inset border-t-gray-500 border-l-gray-500 border-b-white border-r-white dark:border-t-black dark:border-l-black dark:border-b-gray-700 dark:border-r-gray-700 p-2 font-mono flex flex-col gap-1 max-h-[70vh] overflow-y-auto custom-scrollbar-retro">
|
|
{menuLinks.map((link) => (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="flex items-center gap-3 p-3 hover:bg-blue-800 hover:text-white dark:hover:bg-primary/20 dark:hover:text-primary transition-colors group cursor-pointer text-base text-black dark:text-white shrink-0"
|
|
>
|
|
<link.icon className="size-5 text-gray-500 dark:text-gray-400 group-hover:text-white dark:group-hover:text-primary transition-colors" />
|
|
<span className="flex-1 uppercase font-bold">
|
|
{link.name}
|
|
</span>
|
|
<span className="opacity-0 group-hover:opacity-100">_</span>
|
|
</Link>
|
|
))}
|
|
<div className="my-2 border-t border-dashed border-gray-400 dark:border-gray-700 shrink-0" />
|
|
<Link
|
|
href={`/${lang}/docs`}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="flex items-center gap-3 p-3 hover:bg-blue-800 hover:text-white dark:hover:bg-primary/20 dark:hover:text-primary transition-colors group cursor-pointer text-sm text-gray-600 dark:text-gray-400 shrink-0"
|
|
>
|
|
<Shield className="size-4" />
|
|
<span className="flex-1 uppercase tracking-widest font-bold">
|
|
{dict.docs}
|
|
</span>
|
|
</Link>
|
|
<div className="pt-4 pb-2 px-2 shrink-0">
|
|
<CyberButton
|
|
href={`/${lang}/download`}
|
|
variant="primary"
|
|
className="w-full text-sm py-3"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<span className="flex items-center justify-center gap-2">
|
|
{dict.cta} <ArrowRight className="size-4" />
|
|
</span>
|
|
</CyberButton>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
);
|
|
}
|