Files
netrunner-landing/components/sections/Footer.tsx
T
Трапезников Кирилл Иванович 4b11fec8cc base with cms integrated
2026-04-18 21:16:55 +10:00

121 lines
4.2 KiB
TypeScript

"use client";
import Link from "next/link";
import { JetBrains_Mono } from "next/font/google";
import { GithubLogoIcon, TwitterLogoIcon } from "@phosphor-icons/react";
import { Send } from "lucide-react";
import { Dictionary } from "@/lib/IDict";
const jetbrainsMono = JetBrains_Mono({
subsets: ["latin", "cyrillic"],
});
export function Footer({
dict,
lang,
}: {
dict: Dictionary["footer"];
lang: string;
}) {
// Динамическая карта сайта с прописанными маршрутами
const sitemap = [
{
title: dict.sections.product,
links: [
{ name: dict.links.features, href: `/${lang}#features` },
{ name: dict.links.pricing, href: `/${lang}#pricing` },
{ name: dict.links.protocol, href: `/${lang}/docs` }, // Ведет в документацию
],
},
{
title: dict.sections.resources,
links: [
{ name: dict.links.faq, href: `/${lang}#faq` },
{ name: dict.links.comms, href: `/${lang}/blog` },
],
},
{
title: dict.sections.legal,
links: [
{ name: dict.links.privacy, href: `/${lang}/docs` }, // Ведет в документацию (Legal)
{ name: dict.links.terms, href: `/${lang}/docs` }, // Ведет в документацию (Legal)
],
},
];
return (
<footer
className={`mt-20 border-t border-border/50 bg-card/30 backdrop-blur-xl ${jetbrainsMono.className}`}
>
<div className="container mx-auto px-6 py-12">
<div className="grid grid-cols-1 gap-12 md:grid-cols-4 lg:gap-16">
{/* Блок бренда */}
<div className="flex flex-col gap-4">
<Link
href={`/${lang}`}
className="text-2xl font-bold tracking-tighter flex items-center gap-2 w-fit"
>
<div className="w-3 h-3 bg-primary rounded-full shadow-[0_0_10px_rgba(0,240,255,0.8)] animate-pulse" />
<span className="text-neon-cyan">{dict.brand}</span>
</Link>
<p className="text-muted-foreground text-sm leading-relaxed max-w-[200px]">
{dict.tagline}
</p>
<div className="flex gap-4 mt-2">
<Link
href="#"
className="text-muted-foreground hover:text-primary transition-colors"
>
<GithubLogoIcon size={20} />
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-secondary transition-colors"
>
<TwitterLogoIcon size={20} />
</Link>
<Link
href="#"
className="text-muted-foreground hover:text-primary transition-colors"
>
<Send size={20} />
</Link>
</div>
</div>
{/* Динамическая карта сайта */}
{sitemap.map((section, idx) => (
<div key={idx} className="flex flex-col gap-4">
<h4 className="text-foreground font-bold text-sm uppercase tracking-widest">
{section.title}
</h4>
<ul className="flex flex-col gap-2">
{section.links.map((link, linkIdx) => (
<li key={linkIdx}>
<Link
href={link.href}
className="text-muted-foreground hover:text-primary text-sm transition-colors duration-200"
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
))}
</div>
{/* Нижняя панель */}
<div className="mt-16 pt-8 border-t border-border/20 flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-xs text-muted-foreground/60">{dict.rights}</p>
<div className="flex gap-8 text-[10px] uppercase tracking-[0.2em] text-muted-foreground/40 font-bold">
<span>Uplink: Active</span>
<span>Node: Node-Th-01</span>
<span>Latency: 24ms</span>
</div>
</div>
</div>
</footer>
);
}